<template>
  <div v-if="tableParams != null">
    <el-card>
      <div slot="header" class="clearfix">
        <span>资产模型基本信息</span>
      </div>
      <el-descriptions border :column="2">
        <el-descriptions-item label="表名称">{{tableParams.tableName}}</el-descriptions-item>
        <el-descriptions-item label="表备注">{{tableParams.tableAsName}}</el-descriptions-item>
        <el-descriptions-item label="数据量">12536</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="tableData"
        style="width: 100%;">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="comment" label="注释" />
        <el-table-column prop="isPrimaryKey" label="是否主键" >
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.isPrimaryKey === 'Y' ? 'success' : ''">
              {{scope.row.isPrimaryKey}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" />
        <el-table-column prop="mappingType" label="映射类型" />
        <el-table-column prop="length" label="长度" />
        <el-table-column prop="decimalPlaces" label="小数位" />
        <el-table-column prop="isNull" label="是否为空"  >
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.isNull === 'Y' ? 'success' : 'danger'">
              {{scope.row.isNull}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="defaultValue" label="默认值" />
        <el-table-column prop="isDict" label="是否字典" >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isDict === 'Y'" size="small" type="success">
              {{scope.row.isDict}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dictKey" label="映射字典" >
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.isDict === 'Y'"
              placement="left"
              width="200"
              trigger="hover">
              <el-table :data="[
                      { label: '男', value: '1' },
                      { label: '女', value: '2' },
                      { label: '未知', value: '0' },
                    ]">
                <el-table-column property="label" label="字典标签"/>
                <el-table-column property="value" label="字典值"/>
              </el-table>
              <el-tag slot="reference">{{scope.row.dictKey}}</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.name" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="注释">
              <el-input v-model="form.comment" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否主键">
              <el-tag size="small" :type="form.isPrimaryKey === 'Y' ? 'success' : 'danger'">
                {{form.isPrimaryKey}}
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据类型">
              <el-input v-model="form.type" 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.length" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="小数位">
              <el-input v-model="form.decimalPlaces" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否为空">
              <el-tag size="small" :type="form.isNull === 'Y' ? 'success' : 'danger'">
                {{form.isNull}}
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="默认值">
              <el-input v-model="form.defaultValue" 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.mappingType" readonly autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否字典">
              <el-switch
                v-model="form.isDict"
                active-value="Y"
                inactive-value="N"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.isDict === 'Y'">
          <el-col :span="24">
            <el-form-item label="字典">
              <el-select v-model="form.dictKey">
                <el-option v-for="(value, key) in dictMap" :key="key" :label="key" :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item>
              <el-table :data="dictMap[form.dictKey]" striped border>
                <el-table-column property="label" label="字典标签"/>
                <el-table-column property="val" label="字典值"/>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formStatus = false">取 消</el-button>
        <el-button type="primary" @click="formStatus = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'OverallAssetStructure',
  props: {
    tableParams: {
      type: Object,
      default: null
    }
  },
  watch: {
    tableParams: {
      handler(val) {
        if (val != null){
          this.init()
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: "id",
          comment: "主键",
          isPrimaryKey: "Y",
          type: "bigint",
          mappingType: "Long",
          length: "-",
          decimalPlaces: "-",
          isNull: "N",
          defaultValue: "-",
          isDict: "N",
          dictKey: "-",
        }, {
          id: 2,
          name: "name",
          comment: "姓名",
          isPrimaryKey: "N",
          type: "varchar",
          mappingType: "String",
          length: "64",
          decimalPlaces: "-",
          isNull: "N",
          defaultValue: "-",
          isDict: "N",
          dictKey: "-",
        }, {
          id: 3,
          name: "sex",
          comment: "性别",
          isPrimaryKey: "N",
          type: "char",
          mappingType: "String",
          length: "1",
          decimalPlaces: "-",
          isNull: "N",
          defaultValue: "-",
          isDict: "Y",
          dictKey: "system_sex",
        }, {
          id: 4,
          name: "price",
          comment: "金额",
          isPrimaryKey: "N",
          type: "double",
          mappingType: "BigDecimal",
          length: "10",
          decimalPlaces: "2",
          isNull: "N",
          defaultValue: "0.00",
          isDict: "N",
          dictKey: "-",
        }, {
          id: 5,
          name: "create_time",
          comment: "创建时间",
          isPrimaryKey: "N",
          type: "datetime",
          mappingType: "Date",
          length: "-",
          decimalPlaces: "-",
          isNull: "Y",
          defaultValue: "-",
          isDict: "N",
          dictKey: "-",
        }, ],
      form: {},
      formStatus: false,
      dictMap: {
        "system_sex": [
          { label: '男', val: '1', isEdit: false },
          { label: '女', val: '2', isEdit: false },
          { label: '未知', val: '0', isEdit: false },
        ],
        "system_y_n": [
          { label: '是', val: '1', isEdit: false },
          { label: '否', val: '0', isEdit: false }
        ],
      }
    }
  },
  methods: {
    init(){
      console.log("查询")
    },
    update(row) {
      this.form = row;
      this.formStatus = true;
    }
  }
}
</script>
<style scoped lang="scss">

</style>
