<template>
  <div>
    <div>
      <el-card class="no-bottom">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <el-row>
          <descriptions-item label="模型名称" :value="modelForm.name" style="width: 400px" />
        </el-row>
        <el-row>
          <descriptions-item label="描述" :value="modelForm.description" style="width: 400px" />
        </el-row>
        <el-row>
          <descriptions-item label="实例数量" :value="modelForm.instanceCount" style="width: 400px" />
        </el-row>
      </el-card>
      <el-card class="margin-top-20">
        <div slot="header" class="clearfix">
          <span>模型数据</span>
        </div>
        <el-table
          :data="modelForm.propertyList"
          style="width: 100%; height: 310px;"
          border
        >
          <el-table-column
            type="index"
            label="序号"
            width="50px"
            align="center"
          />
          <el-table-column
            prop="propertyCode"
            label="属性编码"
            width="155"
          />
          <el-table-column
            prop="propertyName"
            label="属性名称"
            width="155"
          />
          <el-table-column
            prop="propertyType"
            label="数据类型"
            :formatter="colTypeFormat"
          />
          <el-table-column
            prop="propertyDefaultValue"
            label="默认值"
          />
          <el-table-column
            prop="propertyUnit"
            label="单位"
          />
        </el-table>
      </el-card>
    </div>
    <div class="el-dialog__footer">
      <el-popconfirm
        v-if="!this.modelForm.hasInstance"
        title="确定要删除此模型吗？"
        @onConfirm="deleteModel()"
      >
        <el-button slot="reference" style="margin-right: 10px" type="primary">删除</el-button>
      </el-popconfirm>
      <el-button type="primary" @click="editModel">编辑</el-button>
      <el-button type="primary" @click="cancel">关闭</el-button>
    </div>
  </div>
</template>

<script>
import dictionary from '@/utils/dictionary'
import { getModelDetail, deleteModel } from '@/api/data-management/model-management'
export default {
  name: 'Details',
  mixins: [dictionary],
  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      modelForm: {
        name: null,
        description: null,
        hasInstance: null,
        instanceCount: null,
        propertyList: []
      }
    }
  },
  computed: {

  },
  created() {
    this.getModelDetail()
  },
  methods: {
    getModelDetail() {
      getModelDetail({ id: this.id })
        .then(res => {
          this.modelForm = {
            ...res.data
          }
        })
        .catch(err => {
          console.error(err.message)
          this.$message.error('查询遇到问题')
        })
    },
    colTypeFormat(row, column, cellValue, index) {
      return this.$_dictionaryFormat(row, column, cellValue, index, 'col_type')
    },
    cancel() {
      this.$emit('cancel')
    },
    editModel() {
      this.$emit('toEdit')
    },
    deleteModel() {
      const params = {
        id: this.id
      }
      deleteModel(params)
        .then(_ => this.$message.success('删除成功'))
        .then(_ => {
          this.$emit('delete')
        })
        .catch(err => {
          console.error(err.message)
          this.$message.error(err.message)
        })
    }
  }
}
</script>

<style scoped>

</style>
