<template>
  <div id="deviceList">
    <div class="search-header">
      <cenote-type @change="changeFloor"></cenote-type>
    </div>
    <el-row class="right">
      <span style="float:left;">当前筛选条件下共{{page.total || '--'}}设备</span>
      <el-checkbox v-show="onlyRead" v-model="allMess" @change="handleChangeAllMess">只看要采集的信息</el-checkbox>
      <el-select v-model="onlyRead">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button>添加竖井</el-button>
      <el-button>刷新</el-button>
      <el-button v-show="!onlyRead">撤销</el-button>
    </el-row>
    <div class="tableBox">
      <div class="tableLeft">
        <handson-table ref="table"></handson-table>
      </div>
      <div class="tableRight">

      </div>
    </div>
    <el-pagination
      class="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pageNumber"
      :page-sizes="page.pageSizes"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>
</template>
<script>
import tools from "@/utils/scan/tools";

import cenoteType from "@/components/ledger/lib/cenoteType";
import handsonTable from "@/components/common/handsontable";
import { getCenoteTableHeader, getCenoteTableData, getEquipmentFamily } from "@/api/scan/request"
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    cenoteType,
    handsonTable
  },
  data() {
    return {
      cenoteId: "",
      options: [{
        value: true,
        label: '只读模式'
      }, {
        value: false,
        label: '编辑模式'
      }],
      onlyRead: true,
      allMess: true,
      tableHeader: [],
      page: {
        pageSize: 20,
        pageSizes: [10, 20, 50, 100],
        pageNumber: 1,
        total: 400
      },
      tableData: [],
      param: {
        buildId: "",
        floorId: "",
        deviceId: "",
        ProjId: "",
        secret: ""
      },
      assetGroupList: [],
      graphyId: null
    };
  },
  computed: {
    ...mapGetters("layout", [
        "projectId",
        "secret",
        "userId"
    ])
  },
  created() {
    this.param.ProjId = this.projectId
    this.param.secret = this.secret
    this.getTableHeader()
    // this.getProjName()
  },
  watch: {
      projectId() {
          this.param.ProjId = this.projectId;
          // this.getProjName()
      }
  },
  methods: {
    async getTableHeader() {
      let param = {
        ProjId: this.projectId,
        secret: this.secret,
        data: {
          "CollectFlag": this.allMess
        }
      }
      await getCenoteTableHeader(param, res => {
        this.tableHeader = res.Content;
        this.getTableData()
      })
    },
    handleChangeAllMess() {
      this.getTableHeader()
    },
    formatHeaderData(list) {
      let arr = tools.copyArr(list)
      let data = arr.map((item) => {
        return item.Name;
      })
      data.unshift("操作", "当前关联的资产", "所属系统实例", "包含的部件");
      debugger;
      return data;
    },
    formatHeaderType(list) {
      let arr = tools.copyArr(list)
      let data = arr.map(item => {

        if (item.Field == "") {
          item.renderer = text.picType
        }
        if (item.data == "infos." + "Archive" ||
          item.data == "infos." + "CheckReport" ||
          item.data == "infos." + "InsuranceFile") {
          item.renderer = text.fileType
        }
      })
      data.unshift("操作", "当前关联的资产", "所属系统实例", "包含的部件");
      debugger;
      return data;
    },
    async getTableData() {
      let data = {};
      if(this.cenoteId){
        data = {
          Filters: `ID=${this.cenoteId}`,
          PageNumber: this.page.pageNumber,
          PageSize: this.page.pageSize
        }
      } else {
        data = {
          PageNumber: this.page.pageNumber,
          PageSize: this.page.pageSize
        }
      }
      const params = {
        ProjId: this.projectId,
        secret: this.secret,
        data: data
      }
      await getCenoteTableData(params, (res) => {
        this.tableData = res.Content
        if(this.tableData && this.tableData.length){
          this.initTable()
        }
      })
    },
    initTable() {
      let settings = {
        data: this.tableData,
        colHeaders: this.formatHeaderData(this.tableHeader),
        columns: this.formatHeaderType(this.tableHeader),
        rowHeights: 30,
        maxRows: this.tableData.length,
        fixedRowsTop: 1,
        fixedColumnsLeft: 4,
        contextMenu: {
          items: {
            remove_row: {
              name: "删除竖井"
            }
          }
        },
        // 事件
        afterChange: this.tdChange, //修改后
        afterFilter: this.trimmedRows, //排序前
        afterRemoveRow: this.romoveFm, //右键删除
        afterOnCellMouseDown: this.handleTdClick //鼠标点击
      };
      this.$nextTick(() => {
        console.log(this.$refs.table);
        this.tableExample = this.$refs.table.init(settings);
      });
    },
    // getProjName() {
    //   let param = {
    //     list: [{ id: this.param.ProjId }],
    //     perjectId: this.param.ProjId,
    //     secret: this.param.secret,
    //   }
      // getSpaceName(param).then(res => {
      //   if (res.data.Result == "success") {
      //     this.mess.perjectName = res.data.Content[0].infos.ProjLocalName
      //     this.getEqCode()
      //   } else {
      //     this.$message.error("请求失败：" + res.data.ResultMsg)
      //   }
      // }).catch(_ => {
      //   this.$message.error("请求失败")
      // })
    // },
    close(val) {
      this.getEqCode()
      console.log(val)
      if(this.$refs.cascader)
      this.$refs.cascader.changeVal([val.code])
      //   this.$refs.tableMain.getHeaderData(this.param);
    },
    getEqCode() {
      getEquipmentFamily(res => {
        this.assetGroupList = res.Content
        this.getGraphyId()
      })
    },
    getFamilyList() {
      let param = {
        ProjId: this.param.ProjId,
        secret: this.param.secret,
        data: { type: "Eq" }
      }
      getFamilyList(param, res => {
          if (this.$refs.cascader) {
              this.$refs.cascader.pushData(res.Content)
          }
        
      })
    },
    //获取header的list
    // getNumber() {
    //   let param = {
    //     ProjId: this.param.ProjId,
    //     secret: this.param.secret,
    //     data: { type: "Eq" }
    //   }
    //   getNumber(param, res => {
    //     console.log(res)
    //     this.mess.name[0].num = res.content.count
    //     this.mess.name[1].num = res.content.bindingCount
    //     this.getFamilyList()
    //   })
    // },

    getGraphyId() {
      let param = {
        ProjId: this.param.ProjId,
        secret: this.param.secret,
        type: "SystemEquip"
      }
      getGraphyId(param).then(res => {
        if (res.data.Result == "success") {
          this.graphyId = res.data.graph_id
          if(this.$refs.tableMain)
          this.$refs.tableMain.setGraphyId(this.graphyId, this.assetGroupList);
          // this.getNumber()
        } else {
          this.$message.error("请求错误：" + res.data.ResultMsg)
        }
      }).catch(_ => {
        this.$message.error("请求错误")
      })
    },
    //切换竖井类型
    changeFloor(value) {
      const id = value.ID;
      if (!!this.param.deviceId) {
          if(this.$refs.tableMain)
        this.$refs.tableMain.getHeaderData(this.param);
      } else {
        return;
      }
    },

    //修改设备族
    changeDevice(value) {
      this.param.deviceId = value.code
      this.param.name = value.facility
      if (!!value) {
          if(this.$refs.tableMain)
        this.$refs.tableMain.getHeaderData(this.param);
      } else {
        return;
      }

    },
    handleSizeChange() {

    },
    handleCurrentChange() {},
  }
};
</script>
<style lang="less" scoped>
#deviceList {
  overflow: hidden;
  height: 100%;
  background-color: #f6f6f6;
  position: relative;
  .search-header {
    overflow: hidden;
    padding:0 10px 10px 10px;
    border-bottom: 1px solid #bcbcbc;
  }
  .tableBox {
    display: flex;
    height: calc(100% - 140px);
    margin-top: 10px;
    .tableLeft {
      flex: 2;
      margin-right: 20px;
    }
    .tableRight {
      flex: 1;
      // display: none;
      border-left: 1px solid #dadada;
      margin-right: 5px;
      box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
    }
  }
}
</style>