<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">{{ buttonContent }}</el-button>
      <el-switch v-show="CurrentModelId" style="float:right;margin-top:7px;margin-right:20px;" v-model="isLight"
                 active-text="高亮显示未完成验证的区块"></el-switch>
    </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" :modelName="modelName" :isLight="isLight"
                    @changeButtonContent="changeButtonContent"></draw-model>
      </div>
    </el-row>
    <modelTask-dialog :dialogVisible.sync="dialogVisible" :params="params"
                      :newTaskTypes="newTaskTypes"></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 } from "vuex";
import request from "@/api/model/file";

export default {
  components: {
    modelFolder,
    myCascader,
    drawModel,
    modelTaskDialog
  },
  data() {
    return {
      isLight: false,//是否高亮未完成验证区块
      query: {},//query信息
      dialogVisible: false,//是否显示弹窗
      modelFolderName: '',//模型文件夹名字
      modelFolderId: '',//模型文件夹的id
      modelFileName: '',//模型文件名字
      modelFileList: [],
      CurrentModelId: '',//模型文件id
      device: '',//设备类别
      spaceList: [],//选中的空间
      newTaskTypes: [],
      buttonContent: "通过模型创建",// 按钮文案
    };
  },
  computed: {
    ...mapGetters("layout", ["projectId"]),
    params() {
      return {
        device: this.device,
        CurrentModelId: this.CurrentModelId,
        modelFolderName: this.modelFolderName,
        modelFolderId: this.modelFolderId,
        modelFileName: this.modelFileName,
        spaceList: this.spaceList,
        isVerification: this.query.isVerification
      }
    },
    modelName() {
      return `${this.modelFolderName}-${this.modelFileName}`
    },
  },
  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,
          Status: '4',

          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
      this.newTaskTypes = this.$route.query.newTaskTypes
    },
    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
    },
    changeButtonContent(val) {// 通过判断是否选中模型空间调整文案
      this.buttonContent = val;
    }
  },
  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>
