<template>
  <el-dialog v-dialogDrag :title="title" :visible.sync="addTable" width="52%" :close-on-click-modal="false"
    :before-close="cancel" top="0">
    <el-form :model="TableForm" label-width="110px" :rules="rules" ref="TableForm">
      <el-row>
        <el-col :span="12">
          <el-form-item label="字段名称：" prop="fieldChn">
            <el-input clearable v-model="TableForm.fieldChn" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="字段长度：" prop="fieldLength">
            <el-input clearable v-model="TableForm.fieldLength" size="mini"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="字段英文名：" prop="field">
            <el-input clearable v-model="TableForm.field" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序：" prop="sort">
            <el-input clearable v-model="TableForm.sort" size="mini"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="定义： " prop="define">
            <el-input style="width:120%" type="textarea" :rows="2" clearable size="mini" v-model="TableForm.define">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目的：" prop="purpose">
            <el-input style="width:120%" type="textarea" :rows="2" clearable size="mini" v-model="TableForm.purpose">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="约束性：" prop="binding">
            <el-select style="width:120%" clearable size="mini" v-model="TableForm.binding">
              <el-option label="必选" value="必选"></el-option>
              <el-option label="条件选" value="条件选"></el-option>
              <el-option label="可选" value="可选"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="可重复性：" prop="repeatability">
            <el-select style="width:120%" clearable size="mini" v-model="TableForm.repeatability">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="元素类型：" prop="elementType">
            <el-select style="width:120%" clearable size="mini" v-model="TableForm.elementType">
              <el-option label="简单型" value="简单型"></el-option>
              <el-option label="容器型" value="容器型"></el-option>
              <el-option label="复合型" value="复合型"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据类型：" prop="dataType">
            <el-select style="width:120%" clearable size="mini" v-model="TableForm.dataType">
              <el-option label="字符型" value="字符型"></el-option>
              <el-option label="数值型" value="数值型"></el-option>
              <el-option label="日期时间型" value="日期时间型"></el-option>
              <el-option label="容器型元素" value="容器型元素"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="编码修饰体系：" prop="modification">
            <el-input clearable size="mini" v-model="TableForm.modification"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缺省值：" prop="defaultValue">
            <el-input clearable size="mini" v-model="TableForm.defaultValue"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="子元素：" prop="childElements">
            <el-input clearable size="mini" v-model="TableForm.childElements"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="信息来源：" prop="informationSource">
            <el-input clearable size="mini" v-model="TableForm.informationSource"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="相关元素：" prop="relatedElements">
            <el-input clearable size="mini" v-model="TableForm.relatedElements"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="值域：" prop="domains">
            <el-input style="width:120%" type="textarea" :rows="2" clearable size="mini" v-model="TableForm.domains">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="注释：" prop="remarks">
            <el-input style="width:120%" type="textarea" :rows="2" clearable size="mini" v-model="TableForm.remarks">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label=" ">
        <el-button :loading="btnloading" @click="submitForm('TableForm')" size="mini" type="primary">保存</el-button>
        <el-button @click="cancel('TableForm')" size="mini"  type="primary">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
  export default {
    props: {
      addTable: {
        type: Boolean,
        default: () => false,
      },
      rowData: {
        type: Object,
        default: () => {},
      },
      title: {
        type: String,
        default: () => '新增',
      },
    },
    data() {
      return {
        btnloading: false,
        rules: {
          fieldChn: [{
            required: true,
            message: '请填写字段名称',
            trigger: 'blur'
          }],
          field: [{
            required: true,
            message: '请填写字段显示名',
            trigger: 'blur'
          }],
          sort: [{
            required: true,
            message: '请填写排序',
            trigger: 'blur'
          }],
          binding: [{
            required: true,
            message: '请填写约束性',
            trigger: 'blur'
          }],
          repeatability: [{
            required: true,
            message: '请填写可重复性',
            trigger: 'blur'
          }],
          elementType: [{
            required: true,
            message: '请填写元素类型',
            trigger: 'blur'
          }],
          dataType: [{
            required: true,
            message: '请填写数据类型',
            trigger: 'blur'
          }],
        },
        TableForm: {
          id: "",
          fieldChn: "",
          fieldLength: "",
          field: "",
          sort: "",
          define: "",
          purpose: "",
          binding: "",
          repeatability: "",
          elementType: "",
          dataType: "",
          modification: "",
          defaultValue: "",
          childElements: "",
          informationSource: "",
          relatedElements: "",
          domains: "",
          remarks: ""
        }
      }
    },
    methods: {
      cancel() {
        this.$emit('cancel')
        this.$refs['TableForm'].resetFields();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnloading = true;
            if (this.title === '新增') {
              this.TableForm.metadataId = this.rowData.id
              this.$store.dispatch('templateSetting/insertRecordTab', this.TableForm).then(res => {
                this.btnloading = false;
                this.$emit('insertRecord')
                this.cancel()
              }).catch(err=>{
                this.btnloading = false;
              })
            } else {
              this.$store.dispatch('templateSetting/updateRecordTab', this.TableForm).then(res => {
                this.btnloading = false;
                this.$emit('insertRecord')
                this.cancel()
              }).catch(err=>{
                this.btnloading = false;
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  }

</script>
<style lang='scss' scoped>
  .el-form {
    width: 100%;
    padding: 5px 0;

    .el-form-item {
      width: 80%;

      .el-input {
        width: 120%;
      }
    }
  }

</style>
