<!--
 * @Description: 类型表单组件
 * @Author: wanqian
 * @Date: 2024-03-04 13:25:52
-->
<template>
  <div class="body-type-form">
    <el-dialog :title="dialogTitle" :visible.sync="visible"	@open="openDialog" width="457px" center 
		  :before-close="handleTypeFormCancel"	:close-on-click-modal="false">
      <div style="display: flex; justify-content: center;">
        <el-form class="cont-type-form" label-position="left" :model="form" :rules="rules" ref="form" 
          label-width="100px">
          <el-form-item label="所属类型：">
            <el-input size="small" style="width: 218px" v-model.trim="form.typeText" disabled></el-input>
          </el-form-item>
          <el-form-item label="名称：" prop="name">
            <el-input size="small" style="width: 218px" v-model.trim="form.name" placeholder="请输入类型数据" 
              maxlength="20" clearable @input="inputTypeFormName">
            </el-input>
          </el-form-item>
          <el-form-item label="主索引：">
            <el-input size="small" style="width: 218px" v-model.trim="form.idText" disabled></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="dlg-footer bk-wizard-bottons" >
        <el-button @click="handleTypeFormCancel">取 消</el-button>
        <el-button type="primary" class="gold-gradient" @click="handleSaveTypeForm">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'TypeForm',
  
  props: ["visible", "operate", "genericTypeId", "typeId"],

  data() {
    return {
      form: {},
      rules: {
        name: [{required: true, message: '请输入类型数据', trigger: 'blur'}],
      },
    }
  },

  computed: {
		dialogTitle() {
			return (this.operate == 'add') ? '新增类型数据' : '编辑类型数据';
		},
  },
  
  methods:{
    openDialog() {
      this.initData();
    },

    initData() {
      let url = (this.operate == 'add') ? this.commonUrl.URL_GET_COMMON_CFG_GENERIC_DO_4_ADD
				: this.commonUtil.fillUrlArgments(this.commonUrl.URL_GET_COMMON_CFG_GENERIC_DO_4_UPDATE, this.typeId);
      let param = this.operate == 'add' ? {'typeId': this.genericTypeId} : null;
      let requestData = {
        method: 'GET',
        url: url,
        param: param
      }
      this.vueRequest(requestData).then(result => {
        if (!result) return;
				this.form = result.data.commonCfgGeneric;
        this.$set(this.form, 'idText', '系统自动生成');
      });
    },

    inputTypeFormName() {
      this.form.name = this.commonUtil.filterChineseAndLetters(this.form.name);
    },

    handleTypeFormCancel() {
      this.clearTypeFormData();
			this.$emit("close", false);
    },

    handleSaveTypeForm() {
      this.$refs.form.validate((valid) => {
				if (!valid) return false;
				this.submitTypeFormData();
			})
    },

    submitTypeFormData() {
      let url = (this.operate == 'add') ? this.commonUrl.URL_SAVE_COMMON_CFG_GENERIC 
        : this.commonUrl.URL_UPDATE_COMMON_CFG_GENERIC;
      let method = (this.operate == 'add') ? 'POST' : 'PUT';
      this.$delete(this.form, 'idText');
      let requestData = {
        method: method,
        url: url,
        param: this.form,
        contentType: this.commonConst.CNTYPE_JSON
      }
      this.vueRequest(requestData).then(result => {
        if (!result) return;

				this.clearTypeFormVaild();
        this.$emit("close", true);
      });
    },

    clearTypeFormData() {
      this.form = {};
			this.clearTypeFormVaild();
		},

    clearTypeFormVaild() {
			this.$nextTick(() => {
				this.$refs["form"].clearValidate();
			});
		},
  },
}
</script>

<style scoped lang="scss">
.body-type-form {
  .dlg-footer {
    text-align: center;
  }
}
</style>
<style lang="scss">
.body-type-form {
  .el-form-item__label {
    text-align: right !important;
  }
}
</style>