<template>
  <div id="bd-fl-manage">
    <div class="header-nav">
      <el-button style="float:left;margin-right:20px;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
      <model-folder ref="modelFolder" @change="handleChangeModelFolder" style="margin-right:10px;"></model-folder>
      <my-cascader :isWidth="false" ref="cascader" @change="changeDevice"></my-cascader>
      <el-button style="float:right;margin-top:1px;" @click="handleClickCreate">创建所选</el-button>
    </div>
    <el-row>
      <div class="l-list">
        <h4>模型文件</h4>
        <div class="model-file-list">
          <el-scrollbar style="height:100%;">
            <div v-for="item in modelFileList" :key="item.Id" :class="{'model-file-item':true,'active':item.active}" @click="handleChangeModelFile(item)">
              <span>{{item.FloorName}}</span>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div class="r-model">
        <draw-model ref="drawModel" :id="1" :CurrentModelId="CurrentModelId"></draw-model>
      </div>
    </el-row>
    <modelTask-dialog :dialogVisible.sync="dialogVisible" :params="params"></modelTask-dialog>
  </div>
</template>

<script>
import modelFolder from "@/components/ready/buildfloor/modelFolder"
import myCascader from "@/components/ledger/lib/cascader"
import drawModel from "@/components/data_admin/buildTask/draw/drawModel"
import modelTaskDialog from "@/components/data_admin/buildTask/dialog/modelTaskDialog"
import { mapGetters, mapActions } from "vuex";
import request from "@/api/model/file.js";
import {} from "@/api/scan/request";
export default {
  components: {
    modelFolder,
    myCascader,
    drawModel,
    modelTaskDialog
  },
  data() {
    return {
      query: {},//query信息
      dialogVisible: false,//是否显示弹窗
      modelFolderName: '',//模型文件夹名字
      modelFolderId: '',//模型文件夹的id
      modelFileName: '',//模型文件名字
      modelFileList: [],
      CurrentModelId: '',//模型文件id
      device: '',//设备类别
      spaceList: []//选中的空间
    };
  },
  computed: {
    ...mapGetters("layout", ["projectId"]),
    params(){
      return {
        device: this.device,
        CurrentModelId: this.CurrentModelId,
        modelFolderName: this.modelFolderName,
        modelFileName: this.modelFileName,
        spaceList: this.spaceList,
        isVerification: this.query.isVerification
      }
    }
  },
  created() { 
    this.query = this.$route.query
  },
  methods: {
    goBack(){//返回
      this.$router.push({name:'buildTask'})
    },
    handleChangeModelFolder(item){//切换模型文件夹
      let val = item.value
      if(val){
        this.modelFolderName = item.label
        let data = {
          FolderId: val,
          ProjectId: this.projectId
        };
        request.queryFloorList(data, res => {
          this.modelFileList = res.Content.map(item => {
            item.active = false
            return item
          })
          if (this.modelFileList.length) {
            this.handleChangeModelFile(this.modelFileList[0]);
          }
        })
      } else {
        this.resetSelected()
      }
    },
    resetSelected(){
      this.modelFileList = []
      this.CurrentModelId = ''
      this.modelFolderName = ''
      this.modelFolderId = ''
      this.modelFileName = ''
      this.spaceList = []
      this.dialogVisible = false
      this.$refs.drawModel.clearGraphy()
    },
    handleChangeModelFile(file){//切换模型文件
      this.modelFileList.map(item => {
        file.Id == item.Id?item.active = true:item.active = false
        return item
      })
      this.CurrentModelId = file.CurrentModelId
      this.modelFolderId = file.FolderId
      this.modelFileName = file.FloorName
    },
    changeDevice(val){//切换设备类别
      this.device = val.code
    },
    handleClickCreate(){//创建已选
      if(!this.CurrentModelId){
        this.$message('请选择模型文件！')
        return false
      }
      this.spaceList = this.$refs.drawModel.getSelectedSpaces().map(item => {
        return item.data.SourceId
      })
      this.dialogVisible = true
    }
  },
  watch: {
    projectId() {
      this.resetSelected()
    }
  }
};
</script>
<style lang="less" scoped>
#bd-fl-manage {
  overflow: hidden;
  height: 100%;
  position: relative;
  .header-nav{
    height: 32px;
    padding-bottom: 10px;
  }
  .el-row {
    height: calc(100% - 50px);
    & > div {
      float: left;
      height: 100%;
      overflow: hidden;
      background-color: #fff;
      box-sizing: border-box;
      border: 1px solid #dfe6ec;
      .action-box {
        padding: 10px;
        .el-button--small {
          padding: 10px 11px;
        }
      }
    }
    .l-list {
      width: 250px;
      height: 100%;
      border-right: 0;
      h4 {
        padding-left: 10px;
        border-top: 1px solid #d9d9d9;
        border-bottom: 1px solid #dfe6ec;
        background: #d9d9d9;
        color: #333;
        line-height: 44px;
      }
      .model-file-list {
        height: calc(100% - 46px);
        line-height: 48px;
        /deep/.el-scrollbar__wrap {
          overflow-x: hidden;
        }
        .model-file-item {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
          span {
            margin-left: 10px;
          }
        }
        .model-file-item.active,
        .model-file-item:hover {
          background-color: #f5f7fa;
          color: #000;
        }
      }
    }
    .r-model {
      width: calc(100% - 250px);
      box-sizing: border-box;
      padding: 10px;
    }
  }
}
</style>
