<template>
  <div>
    <el-tabs v-model="activeRelation" @tab-click="changeTabs">
      <el-tab-pane v-for=" item in relationList" :label="item.name" :name="item.code">
        <el-table
          :data="tableData"
          height="300"
          :stripe="true"
          border
          size="small"
          v-loading="isLoading"
          style="width: 100%"
        >
          <el-table-column width="180" label="设备名称">
            <template slot-scope="scope">
              <span style="margin-left: 10px">
                <el-tooltip :content="scope.row.infos.EquipName" placement="top">
                  <span>{{scope.row.infos.EquipLocalName || scope.row.infos.EquipName | cutString(15)}}</span>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
          <el-table-column width="160" label="设备类">
            <template slot-scope="scope">
              <span style="margin-left: 10px">
                <span>{{getName(scope.row.category)}}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="info" size="mini" @click="lockDetails(scope.row)">详情</el-button>
              <el-button
                v-if="scope.row.inSpace"
                type="danger"
                size="mini"
                @click="deleteSpace(scope.row)"
              >从空间移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <my-pagination :page="page" @change="pageChange"></my-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-dialog width="40%" title="设备详情" :visible.sync="innerVisible" append-to-body>
      <iframe height="400px" width="100%" :src="iframeSrc"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import myPagination from "@/components/lib/myPagination.vue";
import {
  getSpaceEquip,
  getEqCode,
  deleteRelation,
  getGraphyId,
  getSysToEq
} from "@/api/request";
export default {
  name: "equip-table",
  components: {
    myPagination
  },
  props: {
    param: {
      type: Object
    },
    activeTabType: {
      type: Object,
      default: function () {
        return {
          "code": "GeneralZone",
          "name": "默认分区",
          "rel_type": "99"
        }
      }
    }
  },
  data() {
    return {
      page: {
        size: 50,
        sizes: [10, 30, 50, 100, 150, 200],
        total: 0,
        currentPage: 1
      },
      tableData: [],
      data: {},
      EqCode: [],
      innerVisible: false,
      iframeSrc: "",
      title: "",
      perjectId: this.$route.query.projId,
      secret: this.$route.query.secret,
      graphyId: "",
      isLoading: false,
      relationList: [
        {
          name: "空间内的设备",
          code: "EquipinSpace"
        }, {
          name: "服务于空间的设备",
          code: "EquipforSpace"
        }, {
          name: "其他关系的设备",
          code: "EquipXSpace"
        }
      ],
      activeRelation: "EquipinSpace",
      relationType: {
        "code": "GeneralZone",
        "name": "默认分区",
        "rel_type": "99"
      },
      relType: 0
    };
  },
  created() {
    this.getEqCode();
  },
  methods: {
    changeTabs() {
      let param = {
        data: {
          limit: {
            // 可选
            skip: this.page.size * (this.page.currentPage - 1), // 跳过多少数据
            count: this.page.size // 查询跳过300条数据之后的50条 (默认按照创建时间从大-->小排序)
          },
          criteria: {
            space: this.data.id, // 必填, 指定业务空间id
            type: ["Eq"] // 必填, 查询类型, 允许四位编码的详细设备类
          }
        },
        ProjId: this.$route.query.projId, //项目id
        secret: this.$route.query.secret
      };
      this.isLoading = true
      if (this.relationType.rel_type == 99 && this.activeRelation == "EquipinSpace") {
        this.dataChange(param);
      } else {
        this.getRlations()
      }
    },
    getEqCode() {
      getEqCode()
        .then(res => {
          if (res.data.Result == "success") {
            this.EqCode = res.data.Content;
          } else {
            this.$message.error(res.data.ResultMsg);
          }
        })
        .catch(() => {
          this.$message.error("请求失败");
        });
    },
    getGraphyId(row) {
      let param = {
        type: this.activeRelation,
        ProjId: this.$route.query.projId, //项目id
        secret: this.$route.query.secret
      };
      getGraphyId(param)
        .then(res => {
          if (res.data.Result == "success") {
            this.graphyId = res.data.graph_id;
            this.deleteOwn(row)
          } else {
            this.$message.error(res.data.ResultMsg);
          }
        })
        .catch(() => {
          this.$message.error("请求错误");
        });
    },

    getRlations() {
      this.isLoading = true
      this.relType = 0
      if (this.relationType.rel_type == 99) {
        this.relType = "1"
      } else {
        if (this.relationType.rel_type > 9) {
          this.relType = (this.relationType.rel_type * 100).toString()
        } else {
          this.relType = '0' + (this.relationType.rel_type * 100)
        }
      }
      let param = {
        data: {
          "limit": {        // 可选
            skip: this.page.size * (this.page.currentPage - 1), // 跳过多少数据
            count: this.page.size // 查询跳过300条数据之后的50条 (默认按照创建时间从大-->小排序)
          },
          criteria: {
            graphType: this.activeRelation,
            relType: this.relType,
            toId: this.data.id,
            fromId: this.data.fromId,
            type: ["Eq"]
          }
        },
        ProjId: this.$route.query.projId, //项目id
        secret: this.$route.query.secret
      }
      getSysToEq(param, res => {
        this.tableData = res.Content.map(item => {
          item.inSpace = true
          return item
        })
        this.page.total = res.TotalCount;
        this.isLoading = false
      })
    },

    deleteOwn(row) {
      let param = {
        data: {
          criterias: [
            {
              from_id: row.id, //选填
              to_id: this.data.id, //选填
              graph_id: this.graphyId, //选填
              rel_type: this.relType
            }
          ]
        },
        ProjId: this.$route.query.projId, //项目id
        secret: this.$route.query.secret
      };
      this.$confirm("正在删除设备关系, 是否继续?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteRelation(param)
            .then(res => {
              if (res.data.Result == "success") {
                this.$message.success("删除成功");
                this.change();
              } else {
                this.$message.error(res.data.ResultMsg);
              }
            })
            .catch(() => {
              this.$message.error("请求出错");
            });
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },

    getName(code) {
      let text = "",
        myClass = code.substring(0, 2),
        system = code.substring(2, 4),
        last = code.substring(2, 6);
      if (this.EqCode && this.EqCode.length) {
        this.EqCode.map(item => {
          if (item.code == myClass) {
            item.content.map(i => {
              if (i.code == system) {
                i.content.map(e => {
                  if ((e.code == last)) {
                    text = e.facility;
                  }
                });
              }
            });
          }
        });
      }
      return text;
    },
    /**
     * 删除
     * @param row 点击的当条数据
     */
    deleteSpace(row) {
      this.getGraphyId(row)
    },
    /**
     * 获取数据
     * @param data 由上级页面传入,初始化table表格
     */
    getData(data, type) {
      this.activeRelation = "EquipinSpace"
      this.relationType = type
      this.page = {
        size: 50,
        sizes: [10, 30, 50, 100, 150, 200],
        total: 0,
        currentPage: 1
      };
      this.data = data;
      this.change();
    },

    change() {
      let param = {
        data: {
          limit: {
            // 可选
            skip: this.page.size * (this.page.currentPage - 1), // 跳过多少数据
            count: this.page.size // 查询跳过300条数据之后的50条 (默认按照创建时间从大-->小排序)
          },
          criteria: {
            space: this.data.id, // 必填, 指定业务空间id
            type: ["Eq"] // 必填, 查询类型, 允许四位编码的详细设备类
          }
        },
        ProjId: this.$route.query.projId, //项目id
        secret: this.$route.query.secret
      };
      this.isLoading = true
      if (this.relationType.rel_type == 99) {
        this.dataChange(param);
      } else {
        this.getRlations()
      }
    },

    dataChange(param) {
      getSpaceEquip(param)
        .then(res => {
          if (res.data.Result == "success") {
            this.page.total = res.data.TotalCount;
            this.tableData = res.data.Content;
            this.isLoading = false
          } else {
            this.$message.error(res.data.ResultMsg);
          }
        })
        .catch(() => this.$message.error("请求失败"));
    },
    /**
     * 查看详情
     * @param row 点击的当条数据
     */
    lockDetails(row) {
      this.innerVisible = true;
      this.iframeSrc = this.iframeSrc =
        // "http://172.16.0.181:8889/#/details?perjectId=" +
        process.env.BASE_URL + ":8889/#/details?perjectId=" +
        this.perjectId +
        "&secret=" +
        this.secret +
        "&FmId=" +
        row.id +
        "&type=0&code=" +
        row.category.substring(2, 6);
    },
    pageChange() {
      this.change();
    }
  },
  filters: {
    cutString: function (str, len) {
      //length属性读出来的汉字长度为1
      if (!!str && typeof str == "string" && str.length > len) {
        return str.substring(0, len) + "...";
      } else {
        return str || "--";
      }
    }
  }
};
</script>
<style>
.el-table tr th {
  background: #fafafa !important;
}
</style>