<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>类型：</span>
        <el-select
          v-model="mainObject"
          placeholder="请选择"
          style="margin-right: 10px"
        ></el-select>
        <AdmSearch />
      </el-col>
      <el-col :span="12" class="object">
        <p>从对象</p>
        <span>类型：</span>
        <el-select
          v-model="mainObject"
          placeholder="请选择"
          style="margin-right: 10px"
        ></el-select>
        <AdmSearch />
      </el-col>
    </el-row>
    <relationTable :tableHeader="tableHeader" />
    <addRelationDialog
      @closeAddRelation="addRelationValue = false"
      :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";

@Component({
  name: "relation",
  components: { AdmSearch, relationTable, addRelationDialog, excelDialog,editRelationDialog },
})
export default class extends Vue {
  mainObject = "";
  //表头数据
  tableHeader = [];
  // 是否添加关系
  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: "删除关系",
  };

  /////////////////////////////////////////
  // 方法

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

  /**
   * 添加关系
   */
  addRelation() {
    this.addRelationValue = true;
  }
  created() {
    let relationTypeName = this.$route.query.relationTypeName;
    this.tableHeader = tableHeader[relationTypeName];
  }
}
</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;
      }
    }
  }
}
</style>
