<!--
 * @Author: ql
 * @Date: 2022-01-11 14:46:04
 * @LastEditTime: 2022-01-24 17:18:04
 * @LastEditors: Please set LastEditors
 * @FilePath: \adm-frontend\src\components\cadDrawingManage\index.vue
-->
<template>
  <div class="contentContainer">
      <el-row class="h100">
        <el-col :span="4" class="h100">
          <div class="grid-content bg-purple bg h100" style="overflow-y: scroll">
            <Tree
                :data="options"
                @change="selectFloorHandle"
            />
          </div>
        </el-col>
        <el-col :span="20" style="padding-left: 24px" class="h100">
          <div class="grid-content bg-purple-light tab-right bg h100" style="padding: 0 16px 16px">
            <div class="tab_warp">
              <Tabs type="first-nav" :data="MENU_MAP" v-model="currentTab"  />
            </div> 
            <div>
              <div style="display: flex;  justify-content: space-between;margin-top: 24px">
                  <h3>图纸文件列表</h3>
                  
                  <div>
                    <Button type="primary" :disabled='true' icon="el-icon-download">批量导出</Button>
                    <el-upload
                      class="upload"
                      ref="upload"
                      action=''
                      accept=".dwg"
                      :multiple="true"
                      :http-request='uploadHandle'
                      :before-upload="beforeUpload"
                      :show-file-list="false">
                        <Button style="max-width: 220px" slot="trigger"  type="primary" icon="el-icon-download">上传.dwg CAD文件</Button>
                    </el-upload>
                  </div>
                 
              </div>
              <div class="tableView1">
                <el-table
                  ref="multipleTable"
                  :data="tableList"
                  tooltip-effect="dark"
                  v-loading="tableLoading"
                  style="width: 100%"
                >
                  
                  <el-table-column
                    label="文件名称"
                    prop="fileName"
                  >
                  </el-table-column>
                  <el-table-column 
                    label="最新上传时间"
                  >
                    <template slot-scope="scope">{{ scope.row.modifiedTime | timeFormat }}</template>
                  </el-table-column>
                  <el-table-column
                    prop="creator"
                    label="上传人"
                  >
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                  >
                    <template slot-scope="scope">
                      <el-button @click="delHandle(scope.row)" type="text" size="small">删除</el-button>
                      <el-divider direction="vertical"></el-divider>
                      <el-button type="text" size="small" disabled>导出</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
  </div>
</template>

<script>
import { Tree, Tabs, Button } from 'meri-design'
import { MENU_MAP } from '@/data/cadConst'
import BuildController from "@/controller/old-adm/buildController"
import cadDrawingController from '@/controller/cadDarwingController'
import moment from 'moment'
import { mapState, mapMutations } from 'vuex'
import { logicConfig } from "@/logicConfig";
export default {
  components: {
    Tree,
    Tabs,
    Button,
  },
  watch: {
    async successList(nv, ov) {
      if (nv?.length) {
        const files = this.successList.map(item => ({
          fileKey: item.fileId,
          fileName: item.fileName
        }))
        const params = {
          buildingId: this.buildingId,
          floorId: this.floorId,
          majorCode: this.currentTab,
          files
        }
        const res = await cadDrawingController.addFile(params);
        if(res.result === logicConfig.resultObj.success) {
          await this.getFileList();
          this.$message({
            type: 'success',
            message: '上传成功!'
          });
        }
        
      }
    },
    currentTab(nv, ov) {
      this.getFileList()
    }
  },
  data() {
    return {
      currentTab: 'CF',
      MENU_MAP,
      options: [],
      tableList: [],  //文件列表数据
      floorId: '',  //当前楼层
      buildingId: '', //当前建筑
      tableLoading: false,
      fileList: [], //已选择文件
      // 基础表格表头列表
      headList: [
        {
            title: "文件名称", // 列的名称
            key: "state", // 列的标识
            show: true // 是否显示该列
        },
        {
            title: "最新上传时间",
            key: "name",
            show: true,
            width: 300
        },
        {
            title: "上传人",
            key: "job",
            show: true
        }
      ],
    }
  },
  computed: {
    ...mapState('uploadFile', ['successList', 'uploadVisible', 'errorList'])
  },
  filters: {
    timeFormat(timestr) {
      if(timestr) {
         return moment(timestr).format('YYYY-MM-DD HH:mm:ss')
      } 
      return '--'
    }
  },
  methods: {
    ...mapMutations('uploadFile', ['updata']),
    // 获取楼层信息
    async getCascader() {
      let param = {
          cascade: [{ name: "floor", orders: "floorSequenceID desc", filters: `id != '${this.floorId}'` }],
          pageNumber: 1,
          pageSize: 50,
      };
    
      this.options = await BuildController.buildDataFormat(param);
      if(this.options.length) {
        this.floorId = this.options[0]?.children[0].id
        this.buildingId = this.options[0].id
      }
      
    },
    // 选择楼层
    selectFloorHandle(obj) {
      const { buildingId, id: floorId } = obj;
      this.buildingId = buildingId;
      this.floorId = floorId;
      this.getFileList()
    },
    // 获取文件列表数据
    async getFileList () {
      this.tableLoading = true
       const res = await cadDrawingController.queryFileList({
        buildingId: this.buildingId,
        floorId: this.floorId,
        majorCode: this.currentTab
      });
      this.tableList = res?.data
      this.tableLoading = false
    },
    async uploadHandle(option) {
      const isHas = this.fileList.find(item => option.file.name === item.name);
      // if(isHas) {
      //   this.$message.closeAll();
      //   this.$message({ type: 'error', message: '当前文件已存在，请重新选择' });
      //   return;
      // }
       const file = {
        fileName: option.file.name,
        file: option.file
      }
      this.fileList.push(file);
      this.updata({uploadVisible: true, fileList: this.fileList})
      

    },
    beforeUpload(file) {
      if(this.uploadVisible) {
        return false
      }
      
    },
   
    delHandle(row) {
      const id = row.id
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          this.tableLoading = true
          const res = await cadDrawingController.delFile({id});
          if(res.result === logicConfig.resultObj.success) {
            this.tableLoading = false;
            this.getFileList();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }

  },
  async mounted() {
    await this.getCascader()
    this.getFileList()
  }

}
</script>

<style scoped lang='less'>
  .tab-right{
    & /deep/ .el-divider--horizontal {
      height: 0.5px;
    }
    & /deep/ .upload {
      display: inline-block;
      margin-left: 16px;
    }
  }
  .bg {
    background: #fff;
  }
  .h100 {
    height: 100%;
  }
  .tableView1 {
    margin-top: 16px;
    height: 290px
  }
  .tab_warp {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #eff0f1;
    box-sizing: border-box;
    & /deep/ .p-tabs-nav-wrap {
      box-sizing: content-box;
      margin-bottom: -1px;
    }
  }
                

  
</style>