<template>
  <!-- 小型弹窗，用于完成，删除，保存等操作 -->
  <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
             :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
    <div>
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px" :disabled="disabled">
        <el-form-item label="档案加密名称" prop="encryptName">
          <el-input class="form-item" v-model="form.encryptName" clearable show-word-limit
                    placeholder="请输入档案加密名称" maxlength="20" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="档案加密类型" prop="encryptType" style="width: 100%;">
          <el-select class="form-item" v-model="form.encryptType" filterable clearable
                     placeholder="请选择档案加密类型" :disabled="disabled">
            <el-option v-for="item in dict.type.file_encryption_type" :key="item.value" :label="item.label"
                       :value="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="档案加密参数" prop="encryptParams">
          <el-input class="form-item" v-model="form.encryptParams" clearable show-word-limit
                    placeholder="请输入档案加密参数" maxlength="32" :disabled="disabled"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer" v-if="!disabled">
            <el-button class="clear-btn" @click="handleClose">取消</el-button>
            <el-button type="primary" class="search-btn"
                       @click="submitForm('ruleForm')">确认</el-button>
        </span>
  </el-dialog>
</template>
<script>
import _ from 'lodash'
import {
  addEncryTypeAPI,
  updateEncryTypeAPI,
} from '@/api/filesTransfer/encryption'

export default {
  name: "EncryptionForm",
  dicts: ['file_encryption_type'],
  props: ["width", "dataForm", "title", "disabled", "isAdd", "rowData"],
  data() {
    return {
      lDialog: this.width > 500 ? "w700" : "w500",
      dialogVisible: true,
      isDisabled: true,
      form: {
        encryptName: '',
        encryptType: null,
        encryptParams: '',
      },
      loading: null,
      rules: {
        encryptName: [
          {required: true, message: '档案加密名称不能为空', trigger: 'blur'}
        ],
        encryptType: [
          {required: true, message: '档案加密类型不能为空', trigger: 'change'}
        ],
        encryptParams: [
          {required: true, message: '档案加密参数不能为空', trigger: 'blur'}
        ],
      },
      errorObj: {
        encryptName: '档案加密名称',
        encryptParams: '档案加密参数',
      },
    };
  },
  watch: {
    // 监听 rowData 变化，确保数据正确回显
    rowData: {
      handler(newVal) {
        if (newVal) {
          this.initFormData();
        }
      },
      immediate: true,
      deep: true
    },
    // 监听 disabled 变化，确保详情模式正确禁用
    disabled: {
      handler(newVal) {
        if (newVal) {
          // 在详情模式下，清空验证规则避免干扰显示
          this.rules = {};
        } else {
          // 非详情模式恢复验证规则
          this.rules = {
            encryptName: [
              {required: true, message: '档案加密名称不能为空', trigger: 'blur'}
            ],
            encryptType: [
              {required: true, message: '档案加密类型不能为空', trigger: 'change'}
            ],
            encryptParams: [
              {required: true, message: '档案加密参数不能为空', trigger: 'blur'}
            ],
          };
        }
      },
      immediate: true
    }
  },
  created() {
    this.initFormData();
  },
  methods: {
    /** 初始化表单数据 */
    initFormData() {
      if ((this.isAdd === 'edit' || this.isAdd === 'detail') && this.rowData) {
        // 编辑模式或详情模式：填充表单数据
        this.form = {
          id: this.rowData.id,
          encryptName: this.rowData.encryptName || '',
          encryptType: this.rowData.encryptType || null,
          encryptParams: this.rowData.encryptParams || '',
        };
      } else {
        // 新增模式：重置表单
        this.form = {
          encryptName: '',
          encryptType: null,
          encryptParams: '',
        };
      }
    },
    /*关闭弹窗 */
    handleClose() {
      this.dialogVisible = false;
      this.$emit("closeDialog");
    },
    /**确认弹窗 */
    sureBtnClick() {
      this.dialogVisible = false;
      this.$emit("closeDialog");
    },
    /**重置表单*/
    reset() {
      this.form = {
        encryptName: '',
        encryptType: null,
        encryptParams: '',
      };
      this.resetForm("ruleForm");
    },
    handleReuslt(res) {
      this.$modal.msgSuccess(res.msg);
      this.reset();
      this.$emit('handleQuery');
      this.handleClose();
    },
    /**验证 */
    submitForm(formName) {
      // 在详情模式下不执行提交操作，直接关闭弹窗
      if (this.disabled) {
        this.handleClose();
        return;
      }

      this.$refs[formName].validate(valid => {
        if (valid) {
          // 显示遮罩层
          this.loading = this.$loading({
            lock: true,
            text: "数据提交中，请稍候...",
            background: 'rgba(0,0,0,0.5)',
            target: this.$el.querySelector('.el-dialog') || document.body
          })
          let params = _.cloneDeep(this.form);
          if (this.isAdd === 'add') {
            addEncryTypeAPI(params).then(res => {
              this.loading.close();
              if (res.code === 200) {
                this.handleReuslt(res);
              } else {
                this.$modal.msgError(res.msg);
              }
            }).catch(error => {
              this.loading.close();
              this.$modal.msgError(this.errorMsg(error));
            });
          } else {
            updateEncryTypeAPI(params).then(res => {
              this.loading.close();
              if (res.code === 200) {
                this.handleReuslt(res);
              } else {
                this.$modal.msgError(res.msg);
              }
            }).catch(error => {
              this.loading.close();
              this.$modal.msgError(this.errorMsg(error));
            });
          }
        }
      });
    },
    errorMsg(error) {
      const errorMessage = error.message;
      const errorArr = errorMessage.split('：');
      const errorObjData = errorArr.length > 1 ? JSON.parse(errorArr[1]) : '';
      if (errorObjData) {
        return this.errorObj[errorObjData.paramName] + errorArr[0] + ':' + errorObjData.originalValue;
      } else {
        return errorMessage;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.w700 ::v-deep .el-dialog {
  width: 700px;
}

.w500 ::v-deep .el-dialog {
  width: 500px;
}

.w500 ::v-deep .el-dialog__header,
.w700 ::v-deep .el-dialog__header {
  .el-dialog__title {
    font-size: 16px;
  }
}

.yxq .el-range-separator {
  margin-right: 7px !important;
}

.el-date-editor--daterange.el-input__inner {
  width: 260px;
}

.form-item {
  width: 100%;
}

.select-style {
  display: flex;
  justify-content: space-between;
}

/* 详情模式下的样式 */
::v-deep .el-form-item.is-disabled .el-form-item__label {
  color: #606266;
}

::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}

::v-deep .el-select.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}
</style>
