<template>
  <el-dialog :close-on-click-modal="false" v-dialogDrag :title="titles+'元数据标准'" :visible.sync="addtitle" width="40%"
    top="0px" :before-close="cancel">
    <el-form :model="titleForm" label-width="120px" :rules="rules" ref="titleForm">
      <el-form-item label="元数据标准：" prop="name">
        <el-input size="mini" v-model="titleForm.name" placeholder="请输入元数据标准" clearable></el-input>
      </el-form-item>
      <el-form-item label="序号：" prop="sort">
        <el-input size="mini" v-model="titleForm.sort" placeholder="请输入序号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :loading="btnloading" @click="submitForm('titleForm')" size="mini" type="primary">保存</el-button>
        <el-button @click="cancel" size="mini"  type="primary">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>
<script>
  export default {
    props: {
      titles: {
        type: String,
        default: () => '新增'
      },
      addtitle: {
        type: Boolean,
        default: () => false
      },
    },
    data() {
      return {
        btnloading: false,
        titleForm: {
          id: "",
          name: "",
          sort: ""
        },
        rules: {
          name: [{
            required: true,
            message: '请填写元数据标准',
            trigger: 'blur'
          }],
          sort: [{
            required: true,
            message: '请填写序号',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      cancel(formName) {
        this.$emit('cancel')
        this.$refs['titleForm'].resetFields();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.btnloading = true;
            if (this.titles === '新增') {
              this.$store.dispatch('templateSetting/insertRecord', this.titleForm).then(res => {
                this.btnloading = false;
                this.$emit('insertRecord')
                this.cancel()
              }).catch(err=>{
                this.btnloading = false;
              })
            } else {
              this.$store.dispatch('templateSetting/updateRecord', this.titleForm).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: 20px 10px;

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

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

</style>
