<template>
  <el-drawer :visible.sync="dialogVisible" size="45%" title="表操作">
    <el-card class="es-box-card">
      <el-descriptions :column="1" border class="margin-top" title="表信息">
        <el-descriptions-item v-for="(column, index) in tableInfoColumns" :label="column.label" :key="index">
          <div v-if="column.slots">
            <el-button :loading="loading" size="mini" type="success" @click="createTable">创建表</el-button>
            <el-button :loading="loading" size="mini" type="warning" @click="truncateTable">清空表</el-button>
            <el-button :loading="loading" plain size="mini" type="warning" @click="clearTable">清除表</el-button>
            <el-button :loading="loading" size="mini" type="primary" @click="alterTable">重载表</el-button>
            <el-button :loading="loading" size="mini" type="danger" @click="dropTable">删除表</el-button>
          </div>
          <span v-else>{{ tableInfo[column.prop] }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="es-box-card--top">
      <el-descriptions :column="2" border class="margin-top" title="表信息">
        <el-descriptions-item v-for="(column, index) in describeColumn" :label="column.label" :key="index">
          <span v-if="column.isGeneralColumn">{{ formatGeneralColumn(describeData[column.prop] || describeData[column.empty])}}</span>
          <span v-else-if="!column.format">{{ describeData[column.prop] || describeData[column.empty] }}</span>
          <span v-else> {{ formatDate(describeData[column.prop]) ||  describeData[column.empty]}} </span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="es-box-card--top">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="列名" prop="columnName"></el-table-column>
        <el-table-column label="数据类型" prop="columnType"></el-table-column>
        <el-table-column label="默认值" prop="columnDefault"></el-table-column>
        <el-table-column label="是否为空" prop="isNullAble"></el-table-column>
        <el-table-column label="备注" prop="columnComment"></el-table-column>
      </el-table>
    </el-card>
  </el-drawer>
</template>

<script>
import ds from '../../../../api/ds'
import {formatDate} from '../../../../utils/dateUtils'

export default {
  name: "TableOperationModal",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      dataSourceId: '',
      tableInfo: {},
      tableInfoColumns:[
        {
          label: "表名称",
          prop: "tableName",
        },
        {
          label: "表备注",
          prop: "remark",
        },
        {
          label: "表操作",
          prop: "",
          slots: true
        }
      ],
      describeColumn: [
        {
          label: "字符集",
          prop: "tableCollation",
          empty: "未创建表",
        },
        {
          label: "数据库引擎",
          prop: "engine",
          empty: "未创建表",
        },
        {
          label: "创建时间",
          prop: "createTime",
          empty: "未创建表",
          format: true
        },
        {
          label: "更新时间",
          prop: "",
          empty: ""
        },
        {
          label: '字段类型',
          prop: "isGeneralColumn",
          isGeneralColumn: true
        }
      ],
      describeData: {},
      tableData: []
    }
  },
  methods: {
    showModal(record) {
      this.tableInfo = {}
      this.describeData = {}
      this.dataSourceId = record.id
      this.dialogVisible = true
      this.loadData(this.dataSourceId)

    },
    async loadData(id) {
      const param = {dataSourceId: id}
      const {success, data} = await ds.getTableInfoByDsId(param)
      if (success && data) {
          this.tableInfo = data
      }

      const resp = await ds.getTableSchema({id: this.dataSourceId})
      if (resp.success) {
        if (resp.data) {
          if (resp.data.columnSchemas) {
            this.tableData = resp.data.columnSchemas
          } else {
            this.tableData = []
          }
          if (resp.data.tableSchema) {
            this.describeData = resp.data.tableSchema
          } else {
            this.describeData = {}
          }
        }
      }
    },
    formatDate(date) {
      if (date) {
        let dateTime = new Date(date)
        return formatDate(dateTime, 'yyyy-MM-dd hh:mm:ss')
      }
      return '';

    },
    formatGeneralColumn(data) {
      if(data) {
        if( data === 1) {
          return '普通列';
        }
      }
      return '虚拟列';
    },
    createTable() {
      this.$confirm('确定要创建表吗？')
        .then(_ => {
          this.loading = true
          ds.createTable({id: this.dataSourceId}).then((resp) => {
            if (resp.success) {
              this.$message.success(resp.msg || "操作成功!")
              this.loadData(this.dataSourceId)
            }
          }).finally(() => {
            this.loading = false
          })
        })
    },
    dropTable() {
      this.$confirm('确定要删除表吗？')
        .then(_ => {
          this.loading = true
          ds.dropTable({id: this.dataSourceId}).then((resp) => {
            if (resp.success) {
              this.$message.success(resp.msg || "操作成功!")
              this.loadData(this.dataSourceId)
            }
          }).finally(() => {
            this.loading = false
          })
        })
    },
    /**
     * 清除表
     */
    clearTable() {
      this.$confirm('确定要清除表吗？')
        .then(_ => {
          this.loading = true
          ds.clearTable({id: this.dataSourceId}).then((resp) => {
            if (resp.success) {
              this.$message.success(resp.msg || "操作成功!")
              this.loadData(this.dataSourceId)
            }
          }).finally(() => {
            this.loading = false
          })
        })
    },
    /**
     * 清空表
     */
    truncateTable() {
      this.$confirm('确定要清空表吗？').then(_ => {
          this.loading = true
          ds.truncateTable({id: this.dataSourceId}).then((resp) => {
            if (resp.success) {
              this.$message.success(resp.msg || "操作成功!")
              this.loadData(this.dataSourceId)
            }
          }).finally(() => {
            this.loading = false
          })
        })
    },
    alterTable() {
      this.$confirm('确定要重载表吗？').then(async _ => {
        this.loading = true
        const resp = await ds.alterTable({id: this.dataSourceId})
        if (resp.success) {
          this.$message.success(resp.msg || "操作成功!")
          this.loadData(this.dataSourceId)
        }
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 3px;
}
</style>
