<template>
  <ht-sidebar-dialog
    width="38%"
    class="business-table__container"
    title="业务对象物理表"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
  >
    <div>
      <div class="business-table__toolbar">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="selectTableExisting"
          >查询表是否存在</el-button
        >
      </div>
      <el-table
        :data="ents"
        style="width: 100%"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'childEnts', hasChildren: 'hasChildren'}"
      >
        <el-table-column
          prop="comment"
          show-overflow-tooltip
          label="实体描述"
          width="180"
        />
        <el-table-column prop="name" label="实体名称" width="120" />
        <el-table-column label="数据源名称" width="120">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.dsName || 'LOCAL' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="tableName" label="物理表名" width="100" />
        <el-table-column label="物理表存在" width="100">
          <template slot-scope="scope">
            <el-tag size="medium" v-if="scope.row.tableExists === true"
              >存在</el-tag
            >
            <el-tag
              type="danger"
              size="medium"
              v-else-if="scope.row.tableExists === false"
              >不存在</el-tag
            >
            <el-tag type="info" size="medium" v-else>未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="
                scope.row.isExternal === 0 && scope.row.tableExists === false
              "
              @click="createTable(scope.row)"
              type="text"
              size="small"
              icon="el-icon-setting"
              >生成表</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </ht-sidebar-dialog>
</template>
<script>
import Vue from 'vue'
import form from '@/api/form.js'

export default {
  name: 'BusinessTableDetail',
  data() {
    return {
      ents: [],
      dialogVisible: false
    }
  },
  methods: {
    showDialog(data) {
      if (data && data.ents && data.ents.length > 0) {
        this.ents = data.ents.filter(e => e.type == 'main')
      } else {
        this.ents = []
      }
      this.dialogVisible = true
    },
    // 递归构建查询参数
    buildTableQuerys(querys, ents) {
      ents.forEach(e => {
        querys.push({
          dsName: e.dsName,
          tableName: e.tableName
        })
        if (e.childEnts && e.childEnts.length > 0) {
          this.buildTableQuerys(querys, e.childEnts)
        }
      })
    },
    // 查询表是否存在
    selectTableExisting() {
      const querys = []
      this.buildTableQuerys(querys, this.ents)
      form.queryTableExist(JSON.stringify(querys)).then(resp => {
        if (resp.status) {
          const {value} = resp.data
          this.updateTableExists(value, this.ents)
          this.$message.success('检查成功')
        } else {
          this.$message.error('检查失败')
        }
      })
    },
    // 更新表的存在状态到ents中
    updateTableExists(tableExistsList, ents) {
      ents.forEach(e => {
        const {dsName, tableName} = e
        const tableExistsObj = tableExistsList.find(
          t => t.dsName == dsName && t.tableName == tableName
        )
        if (tableExistsObj && tableExistsObj.hasOwnProperty('tableExists')) {
          Vue.set(e, 'tableExists', tableExistsObj['tableExists'])
        }
        if (e.childEnts && e.childEnts.length > 0) {
          this.updateTableExists(tableExistsList, e.childEnts)
        }
      })
    },
    createTable(row) {
      if (row && row.id) {
        form.createTableByEntId(row.id).then(resp => {
          const {value} = resp.data
          if (value) {
            this.$message.success('物理表生成成功')
            this.selectTableExisting()
          }
        })
      }
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.business-table__container {
  ::v-deep {
    .el-dialog__body {
      padding: 10px;
    }
  }
  .business-table__toolbar {
    display: flex;
    margin-bottom: 20px;
  }
}
</style>
