<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card tree-wrapper" shadow="always">
          <div class="body-wrapper">
            <el-tree
              ref="tree"
              :data="treeOptions"
              node-key="id"
              empty-text="加载中，请稍后"
              :props="defaultProps"
              default-expand-all
              highlight-current
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
            >
              <template slot-scope="{ node, data }">
                <span class="custom-tree-node">
                  <span><i v-if="node.level === 1" class="iconfont icon-zuzhi tree-folder" />{{ data.name ? node.label + '(' + data.name + ')' : node.label }}</span>
                </span>
              </template>
            </el-tree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card" shadow="always">
          <el-row>
            <el-col :span="24">
              <el-button type="primary" size="mini" @click="handleAuto">自动对照</el-button>
              <el-button type="primary" size="mini" @click="handleManual">手动对照</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-alert
                type="success"
                :closable="false"
                style="margin: 15px 0;"
              >
                <span slot="title">
                  {{ title }}
                </span>
              </el-alert>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-alert
                type="warning"
                :closable="false"
              >
                <span slot="title">
                  {{ description }}
                </span>
              </el-alert>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="9">
              <el-table
                v-loading="loading"
                :data="leftTableDataList"
                border
                tooltip-effect="dark"
                :height="tableHeight"
                style="width: 100%; margin: 15px 0;"
              >
                <el-table-column prop="colCode" label="字典编码" align="center" show-overflow-tooltip />
                <el-table-column prop="colName" label="字典名称" align="center" show-overflow-tooltip />
                <el-table-column prop="contrastGbCode" label="映射编码" align="center" show-overflow-tooltip />
                <el-table-column prop="contrastGbName" label="映射名称" align="center" show-overflow-tooltip />
              </el-table>
            </el-col>
            <el-col :span="9" :offset="6">
              <el-table
                v-loading="loading"
                :data="rightTableDataList"
                border
                tooltip-effect="dark"
                :height="tableHeight"
                style="width: 100%; margin: 15px 0;"
              >
                <el-table-column prop="gbCode" label="标准编码" align="center" show-overflow-tooltip />
                <el-table-column prop="gbName" label="标准名称" align="center" show-overflow-tooltip />
              </el-table>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getContrastTree } from '@/api/standard/contrast'
import { getDictMapping } from '@/api/standard/dictmapping'

export default {
  name: 'DictMapping',
  data() {
    return {
      tableHeight: document.body.offsetHeight - 310 + 'px',
      // 遮罩层
      loading: false,
      // 左侧对照数据
      leftTableDataList: [],
      // 右侧标准字典数据
      rightTableDataList: [],
      // 左侧树
      treeOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      contrastId: undefined,
      title: '',
      description: ''
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    getTree() {
      getContrastTree().then(response => {
        if (response.success) {
          const { data } = response
          const tree = {}
          tree.label = '对照表'
          tree.children = data
          this.treeOptions = []
          this.treeOptions.push(tree)
        }
      })
    },
    /** 节点单击事件 */
    handleNodeClick(data, node) {
      if (node.level === 4) {
        this.contrastId = data.id
        this.getDictMapping()
      }
    },
    getDictMapping() {
      this.loading = true
      getDictMapping(this.contrastId).then(response => {
        this.loading = false
        if (response.success) {
          const { data } = response
          this.leftTableDataList = data.left
          this.rightTableDataList = data.right
          this.title = data.title
          this.description = data.description
        }
      })
    },
    handleAuto() {
      console.log(this.contrastId)
    },
    handleManual() {
      console.log(this.contrastId)
    }
  }
}
</script>

<style lang="scss" scoped>
.right-toolbar {
  float: right;
}
.el-card ::v-deep .el-card__body {
  height: calc(100vh - 170px);
}
.tree-wrapper {
  overflow-y: auto;
  .body-wrapper {
    margin: -10px;
    ::v-deep .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      .tree-folder {
        margin-right: 5px;
        color: #f6cf07;
      }
    }
  }
}
</style>
