<template>
  <div style="height: calc(100% - 44.5px);padding: 0px 10px 10px;box-sizing: border-box;">
    <div class="hanson-bar">
      <div style="float:right;overflow:hidden;">
        <span>当前筛选条件下共{{ page.total || '--' }}系统</span>
      </div>
      <el-select v-model="onlyRead" @change="getHeaderData(mess)"
                 style="width:100px;margin-right:20px;vertical-align:bottom;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select v-model="showType" @change="initTable" style="width:100px;margin-right:10px;vertical-align:bottom;">
        <el-option v-for="item in showTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button size="small" style="width: 80px" @click="addDevice" icon="iconfont icon-tianjia">添加系统</el-button>
      <el-button size="small" style="width: 80px" @click="reset" icon="iconfont icon-shuaxin">刷新</el-button>
      <el-button size="small" style="width: 80px" @click="undo" icon="iconfont icon-undo">撤销</el-button>
    </div>
    <qrcode :dialog="myDialog" :addBody="true" ref="qrcode"></qrcode>
    <upload-files-dialog ref="upload" @changeFile="fileChange" :keysArr="filesArr"
                         :dialog="myDialog"></upload-files-dialog>
    <upload-img-dialog @changeFile="imgChange" :keysArr="imgsArr" :dialog="myDialog"></upload-img-dialog>
    <pic-dialog :dialog="myDialog" :keysArr="picsArr" @change="changePics"></pic-dialog>
    <div class="center middle_sty" style="height: 91%" v-show="!mess.deviceId && (!tableData || !tableData.length)">
      <p><i class="icon-wushuju iconfont"></i>请选择系统类型</p>
    </div>
    <div class="center middle_sty" style="height: 91%" v-show="mess.deviceId && (!tableData || !tableData.length)">
      <p><i class="icon-wushuju iconfont"></i>暂无数据</p>
    </div>
    <div v-show="mess.deviceId && tableData && tableData.length" v-loading="loading" id="handsontable"
         ref="handsontable"></div>
    <div v-show="mess.deviceId && tableData && tableData.length" class="right">
      <my-pagination @change="getTableData" :page="page"></my-pagination>
    </div>
    <!-- <dialog-assets :assetType="[this.mess.deviceId]" @close="getClose" v-if="myDialog.addDevice" ref="assets" :dialog="myDialog"></dialog-assets> -->
    <details-dialog :iframeSrc="iframeSrc" v-if="myDialog.details" :dialog="myDialog"></details-dialog>
    <system-relevance @close="reset" :id="systemId" :dialog="myDialog"></system-relevance>
    <!-- 不支持的输入方式 -->
    <el-dialog title="临时维护信息点" :visible.sync="myDialog.update" @close="handleCloseUpdate" width="670px">
      <el-row>
        该信息点未定义对应组件，现在维护数据不确定后续是否可用。如确实需要维护，请点击
        <el-link @click="updateInputShow = true" type="primary" :underline="false">继续维护</el-link>
        。
      </el-row>
      <el-row style="margin-top:20px;" v-show="updateInputShow">
        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="请输入内容"
                  v-model="updateInput"></el-input>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="myDialog.update = false">取 消</el-button>
        <el-button type="primary" @click="handleClickUpdate">确 认</el-button>
      </span>
    </el-dialog>
    <!-- 关联楼层 -->
    <editSysfloor ref="editFloor" @relateSuccess="relateSuccess"></editSysfloor>
    <!-- 新增系统 -->
    <el-dialog title="确定新增系统的类型" :visible.sync="myDialog.addDevice" width="30%">
      <el-row>
        <my-cascader ref="cascader" @change="changeAddType" :all="true"></my-cascader>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="toAddDevice">下 一 步</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  BeatchQueryParam,
  querySysLinkBuild,
  updateGeneralSys,
  deleteGeneralSys
} from "@/api/scan/request"
import { getDataDictionary } from "@/api/dict";

import myCascader from "@/components/ledger/lib/system";
import tools from "@/utils/scan/tools";
import handsonUtils from "@/utils/scan/hasontableUtils"
import showTools from "@/utils/handsontable/notShow"
import qrcode from "@/components/business_space/lib/qrcode"
import uploadFilesDialog from "@/components/business_space/dialogs/list/filesDialog"
import uploadImgDialog from "@/components/business_space/dialogs/list/uploadImgDialog"
import picDialog from "@/components/business_space/dialogs/list/picDialog"
import myPagination from "@/components/common/myPagination"
import detailsDialog from "@/components/business_space/lib/detailsDia"
import systemRelevance from "@/components/ledger/tableTransfers"
import Handsontable from "handsontable-pro"
import text from "@/utils/handsontable/mainText"
import 'handsontable-pro/dist/handsontable.full.css'
import editSysfloor from "@/components/ledger/lib/editSysFloor";

import { mapGetters } from "vuex";

export default {
  components: {
    qrcode, //二维码页面
    uploadFilesDialog,
    uploadImgDialog,
    picDialog,
    myPagination,
    detailsDialog,
    systemRelevance,
    myCascader,
    editSysfloor
  },
  computed: {
    ...mapGetters("layout", ["projectId", "secret", "userId"]),
    showTypes() {
      return this.onlyRead ?
        [{ value: "Visible", label: '只看采集信息' }, { value: "all", label: '全部' }] :
        [{ value: "Visible", label: '只看采集信息' }, { value: "all", label: '全部' }]
    }
  },
  data() {
    return {
      options: [{
        value: true,
        label: '只读模式'
      }, {
        value: false,
        label: '编辑模式'
      }],
      tableData: [],
      mess: {},
      tableHeader: null,
      page: {
        size: 50,
        sizes: [10, 30, 50, 100, 150, 200],
        total: 0,
        currentPage: 1
      },
      myDialog: {
        qrcode: false, //二维码弹窗
        firm: false, //厂商弹窗
        supply: false, //选择供应合同
        supplier: false, //供应商选择
        guarantee: false, //选择保单
        maintainer: false, //选择维修商
        insurer: false, //选择保险公司
        uploadFiles: false,//上传文件
        uploadImgs: false,//上传单个图片
        pic: false, //多个图片
        addDevice: false,
        details: false,//详情页
        relevance: false,//关联设备
        update: false,//临时维护信息点
      },
      row: null,//被修改的row
      filesArr: [],//保存临时的文件key
      messKey: null,
      imgsArr: [],//临时保存的图片key数组
      picsArr: [],//临时设备图片keys数组
      noShowList: ["SysID", "SysName"],
      copyMain: null,
      iframeSrc: "",
      systemId: "",
      onlyRead: true,
      showType: 'Visible',
      linkNameFalg: false,
      qrcodeUrl: "",//二维码图片地址
      loading: false,
      addData: {}, //添加设备选择的设备类型
      inputMap: {
        flowBuild: {
          inputMode: 'D1',
          editable: true,
          code: "flowBuild",
          name: "建筑楼层",
          path: "flowBuild"
        }
      }, //信息点和输入方式映射表
      updateInputShow: false, //是否显示临时维护输入框
      updateInfoPoint: '',//临时维护信息点
      updateInput: '', //临时维护信息点值
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    //触发父组件change
    getClose(val) {
      this.$emit("close", val)
    },
    //获取表头
    getHeaderData(code) {
      this.mess = code
      if (this.mess.deviceId) {
        let params = {
          type: this.mess.deviceId,
          orders: "sort asc, name desc",
        }
        getDataDictionary(params, res => {
          this.tableHeader = res.content;
          this.codeToDataSource = {}
          this.tableHeader.forEach(item => {
            if (item.path) {
              this.inputMap[item.path] = item
            }
            if (item.dataSource) {
              try {
                this.codeToDataSource[item.code] = {}
                item.dataSource.forEach(dic => {
                  this.codeToDataSource[item.code][dic.code] = dic.name;
                })
              } catch (e) {
                console.log(e);
              }
            }
          })
          this.getTableData()
        });
      }

    },
    changeWatch() {
      this.reset()
    },
    //获取主体数据
    getTableData() {
      let _this = this
      this.loading = true
      if (!!this.mess.deviceId) {
        let param = {
          data: {
            pageSize: this.page.size,
            orders: "createTime desc, localName desc, localId desc, id desc",
            pageNumber: this.page.currentPage,
            filters: `classCode='${this.mess.deviceId}'`
          }
        }
        if (this.mess.buildId == "noKnow") {
          param.buildingId = 1;
        } else if (this.mess.buildId && this.mess.buildId != "all") {
          param.buildingId = this.mess.buildId;
        }
        if (this.mess.floorId == "noKnow") {
          param.floorId = 1;
        } else if (this.mess.floorId && this.mess.floorId != "all") {
          param.floorId = this.mess.floorId;
        }
        querySysLinkBuild(param, res => {
          this.loading = false;
          _this.tableData = res.content;
          _this.copyMain = tools.deepCopy(res.content);
          _this.page.total = res.total;
          if (res.content && res.content.length) {
            if (this.onlyRead) {
              this.getBatch(res.content)
            }
            _this.initTable();
          }
        })
      }
    },
    //撤回
    undo() {
      this.hot.undo();
    },
    //刷新
    reset() {
      if (this.mess.deviceId) {
        this.getTableData();
      } else {
        this.$message({
          message: '请选择系统类型',
          type: 'warning'
        });
      }
    },
    //添加设备
    addDevice() {
      this.myDialog.addDevice = true
      if (this.mess.deviceId) {
        this.$nextTick(() => {
          this.$refs.cascader.setValue(this.mess.deviceId)
        })
      }
    },
    //下一步
    toAddDevice() {
      if (this.addData.Category) {
        this.$router.push({
          path: "/ledger/systemadd",
          query: this.addData
        });
      }
    },
    //选择设备类型-添加设备
    changeAddType(val) {
      console.log(val, '=====================')
      this.addData.Category = val.classCode;
      this.addData.CategoryName = val.name;
      this.addData.showType = this.showType;
    },
    //格式化表头
    formatHeaderData(list) {
      let arr = tools.copyArr(list)
      let data = showTools.headerTextFilter(arr, 'system', this.onlyRead, this.showType)
      data.unshift("操作");
      if (this.showType == "all") {
        data.splice(3, 0, "所属建筑楼层")
      }
      return data;
    },
    //格式化表内容
    formatHeaderType(list) {
      let arr = tools.copyArr(list)
      let data = showTools.headerTypeFilter(arr, 'system', this.onlyRead, this.showType)
      data.unshift(
        {
          data: "caozuo",
          renderer: tools.lookDetails,
          readOnly: true
        },
        // {
        //   data: "Count",
        //   renderer: tools.num,
        //   readOnly: true
        // }
      );
      if (this.onlyRead) {
        data.map(item => {
          item.readOnly = true
        })
      }
      if (this.showType == "all") {
        data.splice(3, 0, {
          data: "buildingFloorInfoList",
          renderer: text.sysInBuildFloor,
          readOnly: this.onlyRead
        })
      }
      return data;
    },
    //获取动态参数
    getBatch(data) {
      let param = {
        groupCode: "WD",
        appId: "datacenter",
        projectId: this.projectId,
        data: []
      };
      //一级遍历list
      this.tableHeader.map(head => {
        //如果一级标签为动态参数或者设定参数放入数据等待请求
        if (
          head.inputMode == "L" ||
          head.inputMode == "L1" ||
          head.inputMode == "L2" ||
          head.inputMode == "M"
        ) {
          data.map(item => {
            let cur = tools.dataForKey(item, head.path);
            if (cur) {
              param.data.push({
                objectId: item.id,
                infoCode: head.code
              });
            }
          });
        }
      })
      if (param.data.length) {
        BeatchQueryParam(param, res => {
          if (!this.onlyRead) {
            return false
          }
          this.tableData = data.map(item => {
            res.data.map(child => {
              if (item.id == child.objectId) {
                if (!!child.data || child.data == 0) {
                  this.tableHeader.map(head => {
                    if (head.code == child.infoCode) {
                      let contentVal = child.data
                      if (this.codeToDataSource[child.infoCode]) {
                        contentVal = this.codeToDataSource[child.infoCode][child.data]
                      }
                      tools.setDataForKey(item, head.path, contentVal);
                    }
                  });
                } else {
                  this.tableHeader.map(head => {
                    if (head.code == child.infoCode) {
                      tools.setDataForKey(
                        item,
                        head.path,
                        child.error
                        // child.error ? child.value ? "表号功能号格式错误" : "表号功能号不存在" : "暂未采集到实时数据"
                      );
                    }
                  });
                }
              }
            })
            return item
          })
          this.hot.loadData(this.tableData)
        })
      }
    },
    //初始化插件
    initTable() {
      var container = document.getElementById("handsontable");
      let winHeight = document.documentElement.clientHeight;
      if (this.hot) {
        this.hot.destroy();
        this.hot = null;
      }
      this.hot = new Handsontable(container, {
        data: this.tableData,
        fixedColumnsLeft: 3,
        colHeaders: this.formatHeaderData(this.tableHeader), //表头文案
        columns: this.formatHeaderType(this.tableHeader), //数据显示格式
        filters: true,
        maxRows: this.tableData.length,
        height: winHeight - 335,
        columnSorting: true, //添加排序
        sortIndicator: true, //添加排序
        renderAllRows: true,
        // observeChanges: false, //启用observeChanges插件
        // colWidths: 200,
        autoColumnSize: true,
        language: "zh-CN",
        manualColumnResize: true,
        manualColumnMove: true,
        dropdownMenu: [
          "filter_by_condition",
          "filter_by_value",
          "filter_action_bar"
        ],
        contextMenu: this.onlyRead ? false : {
          items: {
            remove_row: {
              name: "删除该系统"
            }
          }
        },
        // 事件
        afterChange: this.handleUpdataTable, //修改后
        afterFilter: this.trimmedRows, //排序前
        afterRemoveRow: this.handleDeleteTableRow, //右键删除
        afterOnCellMouseDown: this.eventClick //鼠标点击
      });
      let pro = document.getElementById("hot-display-license-info");
      if (!!pro) {
        pro.parentNode.removeChild(pro);
      }
      this.isLoading = false;
    },
    //表格中的点击
    eventClick(el, rowArr) {
      //点击的是表头
      if (rowArr.row < 0) {
        return;
      }
      //被筛选过后的数组
      let trimmedArr = this.trimmedRows();
      //是否启用了排序
      let isSort = this.hot.getPlugin("columnSorting").isSorted();
      if (trimmedArr.length && isSort) {
        let sortArr = this.myHotArr.getPlugin("columnSorting").rowsMapper
          .__arrayMap;
        let infos = this.tableData[trimmedArr[sortArr[rowArr.row]]];
        this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
      } else if (isSort) {
        //排序后的数组
        let sortArr = this.hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
        let infos = this.tableData[sortArr[rowArr.row]];
        this.getInfors(infos, { row: sortArr[rowArr.row], col: rowArr.col });
      } else if (trimmedArr.length) {
        let infos = this.tableData[trimmedArr[rowArr.row]];
        this.getInfors(infos, { row: trimmedArr[rowArr.row], col: rowArr.col });
      } else {
        let infos = this.tableData[rowArr.row];
        this.getInfors(infos, rowArr);
      }
    },
    handleUpdataTable(changeData, source) {
      if (!this.onlyRead && source != 'ObserveChanges.change') {
        if (changeData) {
          let trimmedArr = this.trimmedRows();
          let param = handsonUtils.getParam(changeData, source, this.hot, trimmedArr);
          let data = [];
          for (let i = 0; i < param.length; i++) {
            data.push(param[i]);
          }
          //如果data中包含/且data长度为1,将其转换成.
          if (changeData.length == 1 && changeData[0][1].indexOf("/") > 0) {
            changeData[0][1] = changeData[0][1].split("/").join(".")
          }

          //存在data进行修改请求
          if (data && data.length) {
            this.updateBusiness(data, changeData);
          }
        }
      }
    },
    //删除资产
    async handleDeleteTableRow() {
      this.$confirm('此操作将删除该系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = tools.differenceArr(this.tableData, this.copyMain)
        let param = []
        params.map(item => {
          param.push({ id: item.id })
        })
        this.removeSys(param)
      }).catch(() => {
        this.getTableData()
        this.$message('取消删除');
      });
    },
    async removeSys(param) {
      await deleteGeneralSys(param, res => {
        this.$message.success("删除成功")
        this.$emit('close', '')
        this.getTableData()
      })
    },
    // 修改
    updateBusiness(data, change) {
      let param = {
        Content: [],
        Projection: []
      }, keyList = [];
      //生成要修改字段列表
      change.map(item => {
        let key = item[1].split(".")[0]
        if (item[1] && keyList.indexOf(key) == -1) {
          keyList.push(key);
        }
        if (item[1] && item[3] == "" && param.Projection.indexOf(key) == -1) {
          param.Projection.push(key);
        }
      });
      //生成对应修改数据
      data.map((item, index) => {
        keyList.map(value => {
          let itemData = tools.dataForKey(item, value);
          tools.setDataForKey(item, value, itemData == "" ? null : itemData);
        });
        param.Content.push(item);
      });
      updateGeneralSys(param, res => {
      });
    },
    //获取到了正确的信息
    getInfors(infos, row) {
      //其他的开始判断
      let val = this.hot.colToProp(row.col);
      let inputData = this.inputMap[val];
      this.systemId = infos.SysID
      this.row = row.row
      this.messKey = val
      switch (val) {
        //操作
        case 'caozuo':
          // window.open(`http://adm.sagacloud.cn:8058/system?id=${infos.id}&pid=${this.projectId}&secret=${this.secret}`,"_blank")
          // this.$message("开发中...")
          console.log(infos)
          this.$router.push({
            path: "/ledger/systemDetail",
            query: { SysID: infos.id, Name: infos.localName || infos.name, SysType: infos.classCode }
          })
          return false
        //设备二维码图片
        // case 'EquipQRCode':
        case "defaultQRCode":
          this.qrcodeUrl = this.tableData[row.row].EquipQRCode;
          if (!!this.qrcodeUrl) {
            this.myDialog.qrcode = true;
          } else {
            this.$message("此设备没有设备二维码");
          }
          return false
        //关联设备数量
        case 'count':
          if (!this.onlyRead) {
            this.myDialog.relevance = true
          }
          return false
        case 'buildingFloorInfoList':
          if (!this.onlyRead) {
            this.$refs.editFloor.showDialog(this.tableData[row.row]);
          }
          return false
        default:
          break;
      }
      if (!this.onlyRead && !inputData.editable) {
        this.$message("该信息点的值为自动生成，不可人工维护！");
        return false;
      }
      if (!this.onlyRead && showTools.inputModeArr.indexOf(inputData.inputMode) == '-1') {
        this.updateInfoPoint = val;
        this.updateInput = tools.dataForKey(this.tableData[row.row], val);
        this.myDialog.update = true;
        return false;
      }
    },
    //关闭临时维护弹窗回调
    handleCloseUpdate() {
      this.updateInputShow = false
      this.updateInfoPoint = ''
      this.updateInput = ''
    },
    //更新临时维护信息点
    handleClickUpdate() {
      // this.$message("更新成功");
      tools.setDataForKey(this.tableData[this.row], this.updateInfoPoint, this.updateInput)
      this.handleUpdataTable([[this.row, this.updateInfoPoint, null, this.updateInput]], "edit")
      this.updateInputShow = false
      this.myDialog.update = false
      this.updateInput = ''
    },
    //关联建筑楼层成功
    relateSuccess(data) {
      this.getTableData()
      // tools.setDataForKey(this.tableData[this.row], "BuildingFloorInfoList", data)
    },
    //获取被筛选掉的行号
    trimmedRows() {
      // var plugin = hot.getPlugin('trimRows').trimmedRows;//获取被筛选掉的行号
      var plugin = this.hot.getPlugin("trimRows").trimmedRows;
      let dataLength = this.tableData.length;
      let dataArr = new Array();
      for (let i = 0; i < dataLength; i++) {
        dataArr.push(i);
      }
      if (plugin.length <= 0) {
        dataArr = undefined;
      } else {
        dataArr = this.array_diff(dataArr, plugin);
      }
      return dataArr || [];
      // var DataArray = new Array();

      // for (var i = 0; i < plugin.length; i++) {
      //     // 通过行号获取数据
      //     DataArray.push(this.hot.getSourceDataAtRow(plugin[i]));
      // }
    },
    //上传文件弹窗触发事件
    fileChange(keys) {
      this.setDataToMain(keys[0], this.messKey.split(".")[1], this.row)
      //   tools.setItem(this.deviceType.code, this.tableData)
    },
    //上传图片弹窗触发事件
    imgChange(keys) {
      this.setDataToMain(keys[0], this.messKey.split(".")[1], this.row)
      //   tools.setItem(this.deviceType.code, this.tableData)
    },
    //设备图片弹窗改变事件
    changePics(keys) {
      this.setDataToMain(keys, this.messKey.split(".")[1], this.row)
      //   tools.setItem(this.deviceType.code, this.tableData)
    },
    //判断是否有值，有值赋值
    setDataToMain(data, key, row) {
      if (!!data && data != '--') {
        if (!!this.tableData[row].infos) {
          //falg确定每个的是否有值
          let falg = false
          if (!this.tableData[row].infos[key]) {
            falg = true
          }
          //铭牌照片特殊处理
          if (key == 'Nameplate') {
            this.tableData[row].infos[key] = {
              "systemId": "dataPlatform",
              "name": "铭牌照片",
              "type": "image",
              "key": data
            }
          } else {
            this.tableData[row].infos[key] = data
          }
          if (falg) {
            this.updateBusiness([this.tableData[row]], [[0, "infos." + key, null, data]])
          }
        } else {
          this.tableData[row].infos = {}
          if (key == 'Nameplate') {
            this.tableData[row].infos[key] = {
              "systemId": "dataPlatform",
              "name": "铭牌照片",
              "type": "image",
              "key": data
            }
          } else {
            this.tableData[row].infos[key] = data
          }
        }
      } else {
        this.tableData[row].infos[key] = ''
      }
    }
  },
  watch: {
    projectId() {
      this.tableData = []
      this.mess.deviceId = null
      this.page.total = 0
    },
    showTypes: {
      handler(newName, oldName) {
        if (newName && newName[0] && newName[0].value) {
          this.showType = newName[0].value
        } else {
          this.showType = ""
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>
<style lang="less">
.hanson-bar {
  height: 40px;
  padding: 5px 0;
  font-size: 14px;
  overflow: hidden;
  margin-top: 0;
  line-height: 40px;

  .iconfont {
    font-size: 12px;
  }
}
</style>
