<template>
  <div v-if="tableParams!= null">
    <el-card>
      <div slot="header" class="clearfix">
        <span>资产模型基本信息</span>
      </div>
      <el-descriptions v-model="stats" border :column="2">
        <el-descriptions-item label="表名称">{{ stats.tableName }}</el-descriptions-item>
        <el-descriptions-item label="表备注">{{ stats.asas }}</el-descriptions-item>
        <el-descriptions-item label="数据量">{{ stats.dataTotal }}</el-descriptions-item>
        <el-descriptions-item label="是否核心">
          <el-tag size="small">是</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card style=" margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>资产模型详细信息</span>
      </div>
      <el-table
        :data="childrenList"
        style="width: 100%;">
        <el-table-column prop="tableName" label="表名" />
        <el-table-column prop="columnLassName" label="类型" />
        <el-table-column prop="columnTypeName" label="映射类型" />
        <el-table-column prop="columnName" label="字段名称" />
        <el-table-column prop="precisions" label="长度" />
        <el-table-column prop="scale" label="小数" />
        <el-table-column prop="isNull" label="非空" >
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.isNull === 1 ? 'success':'dager'">
              {{scope.row.isNull}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="schemaName" label="默认" />
        <el-table-column prop="columnComments" label="注解" />
        <el-table-column prop="yesOrNo" label="是否字典"/>
        <el-table-column prop="dictionary" label="映射字典">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.yesOrNo === 'Y'"
                        placement="left"
                        width="200"
                        trigger="hover">
              <span v-for="item in dictOut" :key="item.dictType">
                <span v-show="item.dictType == scope.row.dictionary">
                  <el-table :data="item.dictDataList">
                  <el-table-column prop="dictLabel" label="标签"></el-table-column>
                  <el-table-column prop="dictValue" label="值"></el-table-column>
                </el-table>
                </span>
              </span>
              <el-tag slot="reference">{{scope.row.dictionary}}</el-tag>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" >
          <template slot-scope="scope">
            <el-button type="text" @click="update(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>


    <el-dialog title="资产结构修改" width="80%" :visible.sync="formStatus">
      <el-form :model="form" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="表名">
              <el-input v-model="form.tableName" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型">
              <el-input v-model="form.columnLassName" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="映射类型">
              <el-input v-model="form.columnTypeName" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="字段名称">
              <el-input v-model="form.columnName" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="长度">
              <el-input v-model="form.precisions" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="小数">
              <el-input v-model="form.scale" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="非空">
              <el-input v-model="form.isNull" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="默认">
              <el-input v-model="form.schemaName" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注解">
              <el-input v-model="form.columnComments" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="知否字典">
              <el-switch
                v-model="form.yesOrNo"
                active-value="Y"
                inactive-value="N"
                active-color="#132545"
                inactive-color="#ff458"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-row v-if="form.yesOrNo === 'Y'">
            <el-col :span="24">
              <el-form-item label="字典">
                <el-select v-model="form.dictionary">
                  <el-option v-for="(val, key) in dictOut" :key="val.dictType" :label="val.dictType" :value="val.dictType"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-row v-if="form.dictionary!=null">
              <el-col :span="24">
                <el-form-item>
                  <div v-on="selData2(form.dictionary)">
                    <el-table :data="dictMap2.dictDataList">
                      <el-table-column prop="dictLabel" label="标签"></el-table-column>
                      <el-table-column prop="dictValue" label="值"></el-table-column>
                    </el-table>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formStatus = false">取 消</el-button>
          <el-button type="primary" @click="updYesTrue(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  selNameListStructure,
  updateListStructure,selStatus
} from '@/api/system/accredit'
import { listDictType, selectDictType } from "@/api/system/dicts";

export default {
  props: {
    tableParams: {
      type: Object
    }
  },
  watch: {
    tableParams: {
      handler(val) {
        if (val != null){
          this.init()
        }
      },
      deep: true,
      immediate: true
    }
  },
  name: 'OverallAssetStructure',
  data() {
    return {
      childrenList: [],
      databaseName: '',
      table: {
        tableName: 'one',
        asas: '单元格',
        dataTotal: '3',
      },
      form: {
        tableName: '',
        columnLassName: '',
        columnTypeName: '',
        columnName: '',
        precisions: '',
        scale: '',
        isNull: '',
        schemaName: '',
        columnComments: '',
        id: '',
        yesOrNo: '',
        dictionary: ''
      },
      stats: {
        tableName: '',
        asas: '',
        dataTotal: 0,
      },
      formStatus: false,
      dictMap2:{
        dictType: '',
        dictDataList: []
      },
      dictOut: [],
    }
  },
  methods: {
    selData2(thanName){
      selectDictType(thanName).then(res => {
        this.dictMap2 = res.data
      })
    },
    update(row) {
      this.form = row;
      this.formStatus = true;
    },
    updYesTrue(row) {
      updateListStructure(row).then(res => {
        this.$message.success(res.data)
        this.formStatus = false
      })
    },
    init() {
      console.log(this.tableParams.databaseName)
      console.log(this.tableParams.tableName)
      this.table =
        selNameListStructure(this.tableParams.tableName,this.tableParams.databaseName).then(res => {
          this.childrenList = res.data
        })
      selStatus(this.tableParams.databaseName,this.tableParams.tableName).then(res => {
        this.stats = res.data
        console.log(res.data)
      })
      listDictType().then(res => {
        this.dictOut = res.data
      })
    }
  },
  created() {
    this.init()
  }
}
</script>
<style scoped lang="scss">

</style>
