<template>
  <div>
    <div>
      <el-card class="no-bottom">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <el-form
          ref="modelForm"
          :model="modelForm"
          label-width="90px"
          :rules="rules"
        >
          <el-form-item
            label="模型名称:"
            prop="name"
          >
            <el-input v-model="modelForm.name" style="width: 400px" />
          </el-form-item>
          <el-form-item
            label="描述:"
            prop="description"
          >
            <el-input v-model="modelForm.description" type="textarea" :rows="4" style="width: 400px" />
          </el-form-item>
          <el-form-item
            v-if="!add"
            label="实例数量:"
          >
            <label v-text="modelForm.instanceCount" />
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="margin-top-20">
        <div slot="header" class="clearfix">
          <span>模型数据</span>
          <el-button v-if="!modelForm.hasInstance" style="float: right; margin-left: 10px" type="primary" @click="addRow">添加</el-button>
        </div>
        <el-form
          ref="listForm"
          :model="modelForm"
          class="table-form"
        >
          <el-table
            :data="modelForm.propertyList"
            style="width: 100%; height: 260px;"
            border
          >
            <el-table-column
              type="index"
              label="序号"
              width="50px"
              align="center"
            />
            <el-table-column
              prop="propertyCode"
              label="属性编码"
              width="155"
            >
              <template slot-scope="props">
                <el-form-item
                  v-if="props.row.edit"
                  :prop="`propertyList.${props.$index}.propertyCode`"
                  label=""
                  style="margin-bottom: 0px"
                >
                  <el-input v-model="props.row.propertyCode" />
                </el-form-item>
                <div v-else>{{ props.row.propertyCode }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="propertyName"
              label="属性名称"
              width="155"
            >
              <template slot-scope="props">
                <el-form-item
                  v-if="props.row.edit"
                  :prop="`propertyList.${props.$index}.propertyName`"
                  label=""
                  style="margin-bottom: 0px"
                >
                  <el-input v-model="props.row.propertyName" />
                </el-form-item>
                <div v-else>{{ props.row.propertyName }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="propertyType"
              label="数据类型"
            >
              <template slot-scope="props">
                <el-form-item
                  v-if="props.row.edit"
                  :prop="`propertyList.${props.$index}.propertyType`"
                  label=""
                  style="margin-bottom: 0px"
                >
                  <el-select v-model="props.row.propertyType">
                    <el-option
                      v-for="(item, index) in dictionary.col_type"
                      :key="index"
                      :label="item.name"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
                <div v-else>{{ $_dictionaryFormat(null, null, props.row.propertyType, null, 'col_type') }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="propertyDefaultValue"
              label="默认值"
            >
              <template slot-scope="props">
                <el-form-item
                  v-if="props.row.edit"
                  :prop="`propertyList.${props.$index}.propertyDefaultValue`"
                  label=""
                  style="margin-bottom: 0px"
                >
                  <el-input v-model="props.row.propertyDefaultValue" />
                </el-form-item>
                <div v-else>{{ props.row.propertyDefaultValue }}</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="propertyUnit"
              label="单位"
            >
              <template slot-scope="props">
                <el-form-item
                  v-if="props.row.edit"
                  :prop="`propertyList.${props.$index}.propertyUnit`"
                  label=""
                  style="margin-bottom: 0px"
                >
                  <el-input v-model="props.row.propertyUnit" />
                </el-form-item>
                <div v-else>{{ props.row.propertyUnit }}</div>
              </template>
            </el-table-column>
            <el-table-column
              v-if="!modelForm.hasInstance"
              label="操作"
              width="140px"
              align="center"
            >
              <template slot-scope="props">
                <el-button v-if="!props.row.edit" type="text" style="margin-right: 20px" @click="editItem(props.row)">编辑</el-button>
                <el-button v-if="props.row.edit" type="text" style="margin-right: 20px" @click="finishItem(props.row)">完成</el-button>
                <el-popconfirm
                  title="确定要删除此条记录吗？"
                  @onConfirm="deleteItem(props.$index)"
                >
                  <el-button slot="reference" type="text">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </el-card>
    </div>
    <div class="el-dialog__footer" style="margin-top: 20px">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </div>
  </div>
</template>

<script>
import dictionary from '@/utils/dictionary'
import { addModel, getModelDetail, editModel } from '@/api/data-management/model-management'
export default {
  name: 'AddOrUpdate',
  mixins: [dictionary],
  props: {
    add: {
      type: Boolean,
      default: true
    },
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      modelForm: {
        name: null,
        description: null,
        hasInstance: false,
        instanceCount: null,
        propertyList: []
      },
      rules: {
        name: [
          { required: true, message: '请输入模型名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {

  },
  created() {
    if (!this.add) {
      this.getModelDetail()
    }
  },
  methods: {
    getModelDetail() {
      getModelDetail({ id: this.id })
        .then(res => {
          this.modelForm = {
            ...res.data
          }
          this.modelForm.propertyList = res.data.propertyList.map(v => {
            return {
              propertyCode: v.propertyCode,
              propertyName: v.propertyName,
              propertyType: v.propertyType,
              propertyDefaultValue: v.propertyDefaultValue,
              propertyUnit: v.propertyUnit,
              edit: false
            }
          })
        })
        .catch(err => {
          console.error(err.message)
          this.$message.error('查询遇到问题')
        })
    },
    cancel() {
      this.$emit('cancel')
    },
    addRow() {
      this.modelForm.propertyList.push({
        propertyCode: null,
        propertyName: null,
        propertyType: null,
        propertyDefaultValue: null,
        propertyUnit: null,
        edit: true
      })
      if (this.modelForm.propertyList.length > 1) {
        this.modelForm.propertyList[this.modelForm.propertyList.length - 2].edit = false
      }
    },
    validate() {
      const p = [
        this.$refs.modelForm.validate(),
        this.$refs.listForm.validate()
      ]
      return Promise.all(p)
    },
    confirm() {
      this.validate()
        .then(_ => {
          if (this.add) {
            this.addModel()
          } else {
            this.editModel()
          }
        })
        .catch(_ => {})
    },
    addModel() {
      const params = {
        name: this.modelForm.name,
        description: this.modelForm.description
      }
      params.propertyList = this.modelForm.propertyList.map(v => {
        return {
          propertyCode: v.propertyCode,
          propertyName: v.propertyName,
          propertyType: v.propertyType,
          propertyDefaultValue: v.propertyDefaultValue,
          propertyUnit: v.propertyUnit
        }
      })
      addModel(params)
        .then(_ => this.$message.success('保存成功'))
        .then(_ => {
          this.$emit('confirm')
        })
        .catch(err => {
          console.error(err.message)
          this.$message.error(err.message)
        })
    },
    editModel() {
      const params = {
        id: this.id,
        name: this.modelForm.name,
        description: this.modelForm.description
      }
      if (!this.modelForm.hasInstance) {
        params.propertyList = this.modelForm.propertyList.map(v => {
          return {
            propertyCode: v.propertyCode,
            propertyName: v.propertyName,
            propertyType: v.propertyType,
            propertyDefaultValue: v.propertyDefaultValue,
            propertyUnit: v.propertyUnit
          }
        })
      }
      editModel(params)
        .then(_ => this.$message.success('保存成功'))
        .then(_ => {
          this.$emit('confirm')
        })
        .catch(err => {
          console.error(err.message)
          this.$message.error(err.message)
        })
    },
    editItem(row) {
      row.edit = true
    },
    finishItem(row) {
      row.edit = false
    },
    deleteItem(index) {
      this.modelForm.propertyList.splice(index)
    }
  }
}
</script>

<style scoped>
.clearfix {
  line-height: 36px;
}
</style>
