<template>
  <el-dialog title="关联设备" :before-close="close" :visible.sync="dialog.relevance" width="900px">
    <div id="tableTransfers">
      <div class="main-left">
        <h4>未关联该系统的设备</h4>
        <div class="border-view">
          <div class="search">
            <div class="search-small" style="padding: 10px 10px 0 10px">
              <el-input
                placeholder="输入设备名称进行查询"
                v-model="search.filter"
                style="width:300px;margin-right: 10px;"
                size="small"
                clearable
              ></el-input>
              <el-button @click="getLeftData" size="small">查找</el-button>
            </div>
            <div class="search-small" style="padding: 10px">
              <floor-cascader :isWidth="false"></floor-cascader>
              <cascader :isWidth="false" @change="changeCascader" :isAll="true"></cascader>
            </div>
          </div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            height="300px"
            tooltip-effect="dark"
            style="width: 100%"
            class="data-table"
            @selection-change="handleSelectionChange"
            v-loading="isLoading1"
            border
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="设备名称" width="120">
              <template
                slot-scope="scope"
              >{{ scope.row.infos.EquipLocalName || scope.row.infos.EquipName }}</template>
            </el-table-column>
            <el-table-column label="设备编号" width="120">
              <template slot-scope="scope">{{ scope.row.infos.EquipLocalID || "--" }}</template>
            </el-table-column>
            <el-table-column label="设备类" show-overflow-tooltip>
              <template slot-scope="scope">{{ getName(scope.row.category) }}</template>
            </el-table-column>
            <el-table-column prop="address" label="安装位置" show-overflow-tooltip>
              <template slot-scope="scope">{{ scope.row.infos.InstallLocation || "--" }}</template>
            </el-table-column>
          </el-table>
          <div class="right">
              <my-pagination @change="changePages1" :page="pages1"></my-pagination>
          </div>
        </div>
      </div>
      <div class="main-button">
        <el-button
          class="top"
          @click="rightToLeft"
          :disabled="SelectionList && SelectionList.length ? false : true"
          :type="SelectionList && SelectionList.length ? 'primary' : ''"
          icon="el-icon-arrow-left"
          circle
        ></el-button>
        <el-button
          class="bottom"
          @click="leftToRight"
          :disabled="multipleSelection && multipleSelection.length ? false : true"
          :type="multipleSelection && multipleSelection.length ? 'primary' : ''"
          icon="el-icon-arrow-right"
          circle
        ></el-button>
      </div>
      <div class="main-right">
        <h4>已关联该系统的设备</h4>
        <div class="border-view">
          <div class="search">
            <div class="search-big">
              <el-input
                placeholder="输入设备名称、设备类名称进行查询"
                v-model="search2.filter"
                style="width:200px; margin-bottom: 10px;"
                size="small"
                clearable
              ></el-input>
              <el-button @click="getRightData" size="small">查找</el-button>
            </div>
          </div>
          <el-table
            ref="multipleTable"
            :data="table2Data"
            height="300px"
            tooltip-effect="dark"
            style="width: 100%"
            class="data-table"
            @selection-change="tableChange"
            v-loading="isLoading2"
            border
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="设备名称">
              <template
                slot-scope="scope"
              >{{ scope.row.infos.EquipLocalName || scope.row.infos.EquipName }}</template>
            </el-table-column>
          </el-table>
            <div class="right">
                <my-pagination :page="pages2" @change="changePages2" :isSmall="false"></my-pagination>
            </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import myPagination from "@/components/common/myPagination";
import floorCascader from "@/components/ledger/lib/floorCascader";
import cascader from "@/components/ledger/lib/cascader";

import { getBillEquipList, getEqCode, getBussines, deleteRelation, getGraphyId, getSysToEq, createRelation } from "@/api/scan/request"
import {
        mapGetters,
        mapActions
    } from "vuex";
export default {
  props: {
    dialog: {
      type: Object,
      default: function () {
        return {
          relevance: false
        }
      }
    },
    id: {
      type: String
    }
  },
  components: {
    myPagination,
    floorCascader,
    cascader
  },
  computed: {
            ...mapGetters("layout", [
                "projectId",
                "secret",
                "userId"
            ])
        },
  data() {
    return {
      dialogVisible: true,
      pages1: {
        size: 50,
        sizes: [10, 20, 30, 50, 100, 200],
        total: 0,
        currentPage: 1
      },
      pages2: {
        size: 50,
        sizes: [10, 20, 30, 50, 100, 200],
        total: 0,
        currentPage: 1
      },
      search: {//第一个table的搜索条件
        filter: "",//文本框条件
        build: "all",//建筑
        floor: "",//楼层
        category: "all"//设备类别
      },
      search2: {//第二个搜索条件
        filter: "",//搜索文案
      },
      tableData: [
      ], //第一个表格的数据
      table2Data: [
      ], //第二个表格的数据
      multipleSelection: [], //第一个表格的被选择数组
      SelectionList: [], //第二个表格的被选择数组
      list: [],
      graphyId: "",
      isLoading1: false,
      isLoading2: false,
    };
  },
  created() {
    this.getData();
    this.getgraphyId();
  },
  methods: {
    //关闭
    close(done) {
      this.$emit("close")
      done()
    },
    getgraphyId() {
      getGraphyId({
        type: "SystemEquip",
        secret: this.secret,
        ProjId: this.projectId
      }).then(res => {
        if (res.data.Result == "success") {
          this.graphyId = res.data.graph_id
        } else {
          this.$message.error("请求失败：" + res.data.ResultMsg)
        }
      }).catch(_ => [
        this.$message.error("请求失败")
      ])
    },
    getName(code) {
      code = code.substring(2, 6)
      let str = ""
      this.list.map(item => {
        if (item.code == code) {
          str = item.facility
        }
      })
      return str
    },
    getData() {
      getEqCode().then(res => {
        this.list = this.changeArr(res.data.Content)
      });
    },
    //修改
    changeArr(arr) {
      let data = [];
      arr.map(item => {
        if (item.content && item.content.length) {
          return item.content.map(children => {
            if (children.content && children.content.length) {
              return children.content.map(i => {
                data.push(i);
              });
            }
          });
        }
      });
      return data;
    },
    //pages1改变
    changePages1() {
      this.getLeftData()
    },
    changePages2() {
      this.getRightData()
    },
    changeCascader(val) {
      this.search.category = val.code
      this.getLeftData()
    },
    getAllData() {
      console.log(this.id)
      this.getLeftData()
      this.getRightData()
    },

    getLeftData() {
      this.isLoading1 = true
      let param = {
        data: {
          "limit": {        // 分页查询, 选填.
            "skip": this.pages1.size * (this.pages1.currentPage - 1),  // 跳过多少数据
            "count": this.pages1.size   // 查询跳过300条数据之后的50条 (默认按照创建时间从大-->小排序)
          },
          filter: {
            EquipLocalName: this.search.filter
          },
          id: "",
          excludeSystemId: this.id,
          type: [this.search.category == "all" ? "Eq" : this.search.category]
        },
        secret: this.secret,
        ProjId: this.projectId
      }
      if (this.search.build == "all") {
        param.data.id = this.projectId
      } else if (this.search.floor && this.search.floor != "all") {
        param.data.id = this.search.floor
      } else if (this.search.floor == 'all') {
        param.data.id = this.search.build
      } else {
        param.data.id = this.search.ProjId
      }
      getBillEquipList(param, res => {
        this.tableData = res.Content
        this.pages1.total = res.TotalCount
        this.isLoading1 = false
      })
    },

    getRightData() {
      this.isLoading2 = true
      let param = {
        data: {
          "limit": {        // 分页查询, 选填.
            "skip": this.pages2.size * (this.pages2.currentPage - 1),  // 跳过多少数据
            "count": this.pages2.size   // 查询跳过300条数据之后的50条 (默认按照创建时间从大-->小排序)
          },
          filter: {
            EquipLocalName: this.search2.filter
          },
          criteria: {
            fromId: this.id,
            graphType: "SystemEquip",
            relType: "1",
            side: "toId",
            type: ["Eq"]
          }
        },
        secret: this.secret,
        ProjId: this.projectId
      }
      getSysToEq(param, res => {
        this.table2Data = res.Content
        this.pages2.total = res.TotalCount
        this.isLoading2 = false
      })
    },

    getList() {

    },

    //左侧多选框改变
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //多选框发生改变
    tableChange(val) {
      this.SelectionList = val;
    },

    //关联
    leftToRight() {
      let param = {
        data: {
          criterias: []
        },
        secret: this.secret,
        ProjId: this.projectId
      }
      this.multipleSelection.map(item => {
        param.data.criterias.push({
          from_id: this.id,
          to_id: item.id,
          graph_id: this.graphyId,
          rel_type: "1",
          infos: null
        })
      })
      createRelation(param).then(res => {
        if (res.data.Result == "success") {
          this.$message.success("关联成功")
          this.getAllData()
        } else {
          this.$message.error("请求失败：" + res.data.ResultMsg)
        }
      }).catch(_ => {
        this.$message.error("请求失败")
      })
    },

    //取消关联
    rightToLeft() {
      let param = {
        data: {
          criterias: []
        },
        secret: this.secret,
        ProjId: this.projectId
      }
      this.SelectionList.map(item => {
        param.data.criterias.push({
          from_id: this.id,
          to_id: item.id,
          graph_id: this.graphyId,
          rel_type: "1"
        })
      })

      if (!!this.id) {
        deleteRelation(param).then(res => {
          if (res.data.Result == "success") {
            this.$message.success("取消关联成功")
            this.getAllData()
          } else {
            this.$message.error("请求失败：" + res.data.ResultMsg)
          }
        }).catch(_ => {
          this.$message.error("请求失败")
        })
      } else {
        this.$message.error("id为空")
      }
    }
  },
  watch: {
    dialog: {
      deep: true,
      handler: function () {
        if (this.dialog.relevance) {
          this.search = {//第一个table的搜索条件
            filter: "",//文本框条件
            build: "all",//建筑
            floor: "",//楼层
            category: "all"//设备类别
          }
          this.search2 = {//第二个搜索条件
            filter: "",//搜索文案
          }
          this.getAllData()
        }
      }
    }
  }
};
</script>
<style lang="less">
#tableTransfers {
    height: 500px;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto; 
  h4 {
    font-size: 20px;
    font-weight: 500;
  }
  .search {
    .search-small {
        overflow: hidden;
    }
    border-bottom: #dcdfe6 1px solid;
    .search-big {
        padding: 10px;
    }
  }
  .main-left {
    float: left;
    width: 550px;
    height: 500px;
  }
  .border-view {
    border: 1px solid #ccc;
  }
  .main-button {
    float: left;
    width: 60px;
    height: 500px;
    position: relative;
    .top {
      position: absolute;
      bottom: 300px;
      left: 10px;
    }
    .bottom {
      position: absolute;
      bottom: 200px;
      left: 10px;
    }
  }
  .el-button + .el-button {
    margin: 0;
  }
  .main-right {
    height: 300px;
    float: left;
    width: 230px;
  }
}
</style>
