<template>
  <div class="relation">
    <div class="header">
      <el-button class="el-icon-back" @click="goBack"></el-button>
      <el-button type="primary" @click="addRelation">添加关系</el-button>
      <el-button style="float: right" @click="updataExecl">上传Excel</el-button>
    </div>
    <el-row class="content">
      <el-col :span="12" class="object">
        <p>主对象</p>
        <span v-if="relTypeStatus == 1 || relTypeStatus == 3">类型：</span>
        <el-select
          :clearable="true"
          v-if="relTypeStatus == 1 || relTypeStatus == 3"
          v-model="categoryFrom"
          placeholder="请选择"
          @change="mainSelect"
          style="margin-right: 10px"
        >
          <el-option
            v-for="item in mainOptions"
            :key="item.classCode"
            :label="item.className"
            :value="item.classCode"
          >
          </el-option>
        </el-select>
        <AdmSearch @SearchValue="mainSerch" />
      </el-col>
      <el-col :span="12" class="object">
        <p>从对象</p>
        <span v-if="relTypeStatus == 2 || relTypeStatus == 3">类型：</span>
        <el-select
          v-if="relTypeStatus == 2 || relTypeStatus == 3"
          v-model="categoryTo"
          :clearable="true"
          placeholder="请选择"
          style="margin-right: 10px"
        >
          <el-option
            v-for="item in minorOptions"
            :key="item.classCode"
            :label="item.className"
            :value="item.classCode"
          >
          </el-option>
        </el-select>
        <AdmSearch @SearchValue="minorSearch" />
      </el-col>
    </el-row>
    <relationTable
      v-if="tableHeight"
      @updata="relManualQuery"
      :tableHeader="tableHeader"
      :tableData="tableData"
      :height="tableHeight"
      :loading="loading"
    />
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
    <addRelationDialog
      @closeAddRelation="addRelationValue = false"
      @update="relManualQuery"
      :addRelationValue="addRelationValue"
      :values="values"
    />
    <excelDialog :values="values" ref="excelDialog"></excelDialog>
    <editRelationDialog :values="values"></editRelationDialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { AdmSearch } from "./../../components";
import relationTable from "./components/table";
import tableHeader from "@/views/maintain/relationship/components/tableHeader";
import addRelationDialog from "./components/addRelationDialog.vue";
import editRelationDialog from "./components/editRelationDialog.vue";
import excelDialog from "./components/excelDialog.vue";
import { relToType, relManualQuery, relDel } from "@/api/datacenter";

@Component({
  name: "relation",
  components: {
    AdmSearch,
    relationTable,
    addRelationDialog,
    excelDialog,
    editRelationDialog,
  },
})
export default class extends Vue {
  categoryFrom = ""; //主关系
  mainOptions = []; //主关系选项
  categoryTo = ""; //次关系
  minorOptions = []; //次关系选项
  vagueFrom = ""; //主关系模糊收索
  vagueTo = ""; //次关系模糊收索
  //表头数据
  tableHeader = [];
  //表格数据
  tableData = [];
  // 是否添加关系
  addRelationValue: Boolean = false;
  // 传入tip需要得字段
  values: object = {
    relation_maintenance: "关系维护",
    optionTips: `请下载最新最新<${this.$route.query.relationTypeName}>数据进行手动维护`, //请下载最新最新 xxxx 数据进行手动维护
    currentNum: "当前关系数量：",
    download: "下载模板（含数据）",
    lastTime: `最后更新时间为：${this.$route.query.lastUpdate || ""}`, //最后更新时间为
    uploadTxt: "将Excel文件拖到此处，或<em>单击上传Excel文件<em>",
    uploadTips: "上传的Excel数据将完全覆盖当前关系表（关系表先前数据不会保留）",
    downloadFile: " 下载报告文件",
    back: "返回",
    done: "完成",
    addShip: "添加关系",
    editShip: "编辑关系",
    codeTip: "请填写主被控设备对象识别编码",
    deviceTip: "请填写主被控设备对象设备号",
    codeTitle: "识别编码对应：",
    mainObject: "主对象：",
    affiliatedObject: "从对象：",
    pleaseEnter: "请输入",
    pleaseEnterCode: "请输入识别编码",
    add: "添加",
    cancel: "取消",
    delete: "删除关系",
  };
  relTypeStatus: any = 0; //关系相关类型主从 0 None 1主 2从 3主从

  page: object = {
    total: 0, //总数
    currentPage: 1, //当前页
    pageSize: 15, //当前页数量
  };
  tableHeight: number = 0; //table高
  loading: Boolean = false; //是否显示loadding
  /////////////////////////////////////////
  // 方法

  /**
   * 返回页面上一级
   */
  goBack() {
    this.$router.go(-1);
  }
  /**
   * 上传 execl
   */
  updataExecl() {
    this.$refs.excelDialog.dialogExport = true;
  }

  /**
   * 分页数量切换
   */

  handleSizeChange(val: any) {
    Object.assign(this.page, {
      pageSize: val,
    });
    this.relManualQuery();
  }
  /**
   * 分页切换
   */
  handleCurrentChange(val: any) {
    Object.assign(this.page, {
      currentPage: val,
    });
    this.relManualQuery();
  }

  /**
   * 主关系下拉框选择
   */
  mainSelect(val: any) {
    this.categoryFrom = val;
    this.relManualQuery();
    console.log("mainSelect", val);
  }
  /**
   * 从关系下拉框选择
   */
  minorSelect(val: any) {
    this.categoryTo = val;
    this.relManualQuery();
  }
  // 主关系模糊搜索
  mainSerch(val: string) {
    this.vagueFrom = val;
    this.relManualQuery();
  }
  // 从关系模糊搜索
  minorSearch(val: string) {
    this.vagueTo = val;
    this.relManualQuery();
  }

  /**
   * 添加关系
   */
  addRelation() {
    this.addRelationValue = true;
  }

  /**
   * 获取主对象从对象关系
   */
  relToType() {
    const urlData = this.$route.query;
    if (this.relTypeStatus == 0) {
      this.mainObject = ""; //主关系
      this.mainOptions = []; //主关系选项
      this.minorObject = ""; //次关系
      this.minorOptions = []; //次关系选项
      return;
    }
    // 获取主关系接口
    if (this.relTypeStatus == 1 || this.relTypeStatus == 3) {
      const data = {
        zoneType: urlData.zoneType ? urlData.zoneType : "",
        graphCode: urlData.graphicType,
        type: urlData.relationType,
        relType: urlData.relationType,
        status: 1, // 1 为主关系；2 为从关系
      };
      relToType(data).then((res) => {
        this.mainObject = ""; //主关系
        this.mainOptions = res.content; //主关系选项
      });
    }

    // 获取从关系接口
    if (this.relTypeStatus == 2 || this.relTypeStatus == 3) {
      const data = {
        zoneType: urlData.zoneType ? urlData.zoneType : "",
        graphCode: urlData.graphicType,
        type: urlData.relationType,
        relType: urlData.relationType,
        status: 2, // 1 为主关系；2 为从关系
      };
      relToType(data).then((res) => {
        this.minorObject = ""; //次关系
        this.minorOptions = res.content; //次关系选项
      });
    }
  }
  /**
   * 获取table列表
   */
  relManualQuery() {
    this.loading = true;
    // 获取table数据
    const data = {
      projectId: this.$route.query.projectId,
      categoryFrom: this.categoryFrom,
      categoryTo: this.categoryTo,
      vagueTo: this.vagueTo, //主关系
      vagueFrom: this.vagueFrom, //从关系
      objectType: 1,
      relType: this.$route.query.relationType,
      pageSize: this.page.pageSize,
      pageNumber: this.page.currentPage,
      graphicType: this.$route.query.graphicType,
      zoneType: this.$route.query.zoneType ? this.$route.query.zoneType : "",
    };
    relManualQuery(data)
      .then((res) => {
        this.tableData = res.content;
        this.page.total = res.total;
        this.loading = false;
      })
      .catch((error) => {
        this.loading = false;
      });
  }

  created() {
    let relationTypeName = this.$route.query.relationTypeName;
    this.tableHeader = tableHeader[relationTypeName];
    this.relTypeStatus = this.$route.query.relTypeStatus;
    // 获取主从对象下拉框数据
    this.relToType();
    // 获取table列表
    this.relManualQuery();
  }
  mounted() {
    //计算table的高度
    let allHeight =
      document.getElementsByClassName("relation")[0].offsetHeight - 57; //57是Head的高
    let contentHeight = document.getElementsByClassName("content")[0]
      .offsetHeight;
    this.tableHeight = allHeight - contentHeight - 47;
  }
}
</script>

<style scoped lang="scss">
.relation {
  background: #ffffff;
  height: 100%;

  .header {
    padding: 12px;
    overflow: hidden;
    border-bottom: 1px solid #e1e7ea;
  }

  .content {
    padding: 12px;

    .object {
      p {
        border-left: 7px solid #555555;
        text-indent: 10px;
        margin-bottom: 10px;
      }
    }
  }
  .pagination {
    margin-top: 12px;
    margin-right: 24px;
    float: right;
  }
}
</style>
