<!--
    systemType 设备所属类型
-->
<template>
  <el-dialog title="所属系统实例" :visible.sync="dialog.systemType" width="600px">
    <div>
      <div id="systemType">
        <div class="title-search" style="margin-bottom: 10px;" v-if="type != 'read' ">
          <el-input
            placeholder="输入名称或编码进行查询"
            v-model="search"
            size="small"
            style="width:400px;"
            clearable
          ></el-input>
          <el-button size="small" @click="searchChecked">查找</el-button>
        </div>
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%"
          height="400px"
          ref="multipleTable"
        >
          <el-table-column
            v-if="type != 'read' "
            type="selection"
            :reserve-selection="true"
            :disabled="true"
            width="55"
          ></el-table-column>
          <el-table-column label="系统名称">
            <template slot-scope="scope">{{scope.row.infos.SysLocalName || scope.row.infos.SysName}}</template>
          </el-table-column>
          <el-table-column label="本地编码">
            <template slot-scope="scope">{{scope.row.infos.SysLocalID || '--'}}</template>
          </el-table-column>
          <el-table-column label="专业">
            <template slot-scope="scope">{{getName(scope.row.category)}}</template>
          </el-table-column>
          <el-table-column label="详情">
            <template slot-scope="scope">
              <el-button @click="lookDeatils(scope.row)" type="text">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer" v-if="type != 'read' ">
          <el-button
            type="primary"
            @click="getChange"
            style="display:block;margin: 10px auto 0;"
          >确 定</el-button>
        </div>
      </div>
    </div>
    <el-dialog
      title="系统详情"
      :visible.sync="iframeShow"
      v-if="iframeShow"
      width="500px"
      append-to-body
    >
      <iframe
        id="google_ads_frame2"
        name="google_ads_frame2"
        frameborder="0"
        :src="iframeSrc"
        marginwidth="0"
        marginheight="0"
        vspace="0"
        hspace="0"
        style="width:100%;height:500px;"
        allowtransparency="true"
        scrolling="no"
        allowfullscreen="true"
      ></iframe>
    </el-dialog>
  </el-dialog>
</template>
<script>
import myPagination from "@/components/lib/myPagination";
import { getLib, getAllbusiness, getEqCode, getRelation } from "@/api/request"
import tools from "@/assets/js/tools"

export default {
  components: {
    myPagination
  },
  props: {
    dialog: {
      type: Object,
      default: function () {
        return {
          systemType: true
        };
      }
    },
    graphyId: {
      type: String,
      default: ""
    },
    infos: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "read"
    },
    //默认值
    list: {
      type: [Array]
    }
  },
  data() {
    return {
      search: "", //搜索文案
      tableData: [
      ],
      systemList: [],
      allData: [],
      multipleSelection: [],
      changeData: [],
      iframeSrc: "",
      iframeShow: false
    };
  },
  created() {
  },
  mounted() { },
  methods: {
    searchChecked() {
      let data = []
      this.allData.map(item => {
        if (item.category.indexOf(this.search) > -1 || (item.infos.SysLocalName && item.infos.SysLocalName.indexOf(this.search) > -1)) {
          data.push(item)
        }
      })
      this.tableData = data
      this.changeData = this.multipleSelection
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.changeData.length) {
        this.multipleSelection = this.changeData
        this.changeData = []
      }
    },

    //设置默认
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    getChange() {
      if (this.multipleSelection.length >= 2) {
        this.$confirm("确定关联多个系统？").then(_ => {
          this.$emit("change", this.multipleSelection)
          this.dialog.systemType = false
        }).catch(_ => {
        })
      } else {
        this.$emit("change", this.multipleSelection)
        this.dialog.systemType = false
      }
    },

    getName(code) {
      if (!!code) {
        let codeC = code.substring(0, 2), name = ""
        this.systemList.map(item => {
          if (item.code == codeC) {
            name = item.class
          }
        })
        return name
      } else {
        return "--"
      }
    },

    //获取设备族
    getEquipmentFamily() {
      getEqCode().then(res => {
        if (res.data.Result == "success") {
          this.systemList = res.data.Content
          this.getData()
        } else {
          this.$message.error("请求错误" + res.data.ResultMsg)
        }
      }).catch(_ => {
        this.$message.error("请求错误")
      })
    },

    getData() {
      let param = param = {
        ProjId: this.$route.query.projId,
        secret: this.$route.query.secret,
        data: {
          criteria: {
            type: ["Sy"]
          }
        }
      }
      getAllbusiness(param).then(res => {
        if (res.data.Result == "success") {
          if (this.type == "read" && !!this.infos) {
            this.getRelation(res.data.Content)
          } else {
            this.allData = res.data.Content
            this.tableData = res.data.Content
            console.log(this.$refs, "refs", this.list, "list", this.graphyId, "graphy")
            this.$refs.multipleTable.clearSelection();
            this.getSelected(this.list, this.allData)
          }
        } else {
          this.$message.error("请求错误：" + res.data.ResultMsg)
        }
      }).catch(_ => {
        this.$message.error("请求错误")
      })
    },

    //查询id对应系统
    getRelation(table) {
      getRelation({
        ProjId: this.$route.query.projId,
        secret: this.$route.query.secret,
        criterias: {
          criteria: {
            "to_id": this.infos,
            "graph_id": this.graphyId
          }
        }
      }).then(Response => {
        let data = Response.data.Content
        if (Response.data.Result == "success") {
          if (table && table.length && data && data.length) {
            let lastData = tools.getSameItems(table, "id", data, "from_id")
            console.log(lastData)
            this.tableData = lastData
          } else {
            this.tableData = []
          }
        } else {
          this.$message.error("请求错误" + Response.data.ResultMsg)
        }
      }).catch(_ => {
        this.$message.error("请求错误")
      })
    },

    //设置默认选中项
    getSelected(list, all) {
      let map = []
      if (all && all.length && list && list.length) {
        all.map((item, index) => {
          list.map(child => {
            if (item.id == child.id) {
              this.$refs.multipleTable.toggleRowSelection(item)
            }
          })
        })
      }
    },

    //点击详情
    lookDeatils(infos) {
      this.iframeSrc =
        process.env.BASE_URL +
        ":8889/#/details?perjectId=" +
        this.$route.query.projId +
        "&secret=" +
        this.$route.query.secret +
        "&FmId=" +
        infos.id +
        "&type=1&code=" +
        infos.category.substring(2, 4);
      this.iframeShow = true;
    }
  },
  watch: {
    dialog: {
      deep: true,
      handler: function () {
        if (this.dialog.systemType) {
          this.getEquipmentFamily()
        }
      }
    }
  }
};
</script>

<style lang="less">
#systemType {
  .el-table thead {
    tr {
      th {
        background-color: #f5f7fa;
      }
    }
  }
}
</style>
