<template>
  <a-form name="basicCustomForm" :model="formData" :label-col="labelCol">
    <a-row>
      <a-col :span="12" v-if="hideObj['userName'] || true">
        <a-form-item label="用户姓名" name="userName" has-feedback v-bind="validateInfos.userName">
          <a-input v-model:value="formData.userName" :disabled="disabledObj['userName'] || false" class="w-fill-imp" @change="change" />
        </a-form-item>
      </a-col>
      <a-col :span="12" v-if="hideObj['sex'] || true">
        <a-form-item label="年龄" name="sex" has-feedback v-bind="validateInfos.sex">
          <a-input v-model:value="formData.sex" :disabled="disabledObj['sex'] || false" class="w-fill-imp" />
        </a-form-item>
      </a-col>
      <a-col :span="24" v-if="hideObj['details'] || true">
        <a-form-item label="合同审批申请详情" name="details">
          <a-textarea
            v-model:value="formData.details"
            :disabled="disabledObj['details'] || false"
            :rows="4"
            placeholder="申请详情"
            class="w-fill-imp"
          />
        </a-form-item>
      </a-col>
      <a-col :span="24" v-if="hideObj['seal'] || true">
        <a-form-item label="涉及使用的印章" name="seal">
          <a-checkbox-group
            v-model:value="formData.seal"
            :disabled="disabledObj['seal'] || false"
            :options="sealOptions"
            class="w-fill-imp"
          />
        </a-form-item>
      </a-col>
      <a-col :span="12" v-if="hideObj['projectName'] || true">
        <a-form-item
          label="项目名称"
          name="projectName"
          :disabled="disabledObj['projectName'] || true"
          has-feedback
          v-bind="validateInfos.projectName"
        >
          <a-input v-model:value="formData.projectName" class="w-fill-imp" @change="change" />
        </a-form-item>
      </a-col>
      <a-col :span="12" v-if="hideObj['projectCode'] || true">
        <a-form-item label="项目编号" name="projectCode">
          <a-input v-model:value="formData.projectCode" :disabled="disabledObj['projectCode'] || false" class="w-fill-imp" />
        </a-form-item>
      </a-col>
      <a-col :span="24" v-if="hideObj['customerName'] || true">
        <a-form-item label="客户名称" name="customerName">
          <a-input v-model:value="formData.customerName" :disabled="disabledObj['customerName'] || false" class="w-fill-imp" />
        </a-form-item>
      </a-col>
      <a-col :span="24" v-if="hideObj['contractContent'] || true">
        <a-form-item label="合同主要内容" name="contractContent">
          <a-input v-model:value="formData.contractContent" :disabled="disabledObj['contractContent'] || false" class="w-fill-imp" />
        </a-form-item>
      </a-col>
      <a-col :span="12" v-if="hideObj['contractAmount'] || true">
        <a-form-item label="合同金额" name="contractAmount">
          <a-input-number
            v-model:value="formData.contractAmount"
            :min="0"
            :max="10000"
            :step="0.01"
            :disabled="disabledObj['contractAmount'] || false"
            string-mode
            class="w-fill-imp"
          />
        </a-form-item>
      </a-col>
      <a-col :span="12" v-if="hideObj['rate'] || true">
        <a-form-item label="税率(%)" name="rate">
          <a-input-number
            v-model:value="formData.rate"
            :min="0"
            :max="100"
            :formatter="value => `${value}%`"
            :parser="value => value.replace('%', '')"
            class="w-fill-imp"
          />
        </a-form-item>
      </a-col>
      <a-col :span="12" v-if="hideObj['cycle'] || true">
        <a-form-item label="付款周期" name="cycle">
          <a-input v-model:value="formData.cycle" class="w-fill-imp" />
        </a-form-item>
      </a-col>
      <a-col :span="12" v-if="hideObj['warrantyPeriod'] || true">
        <a-form-item label="质保期" name="warrantyPeriod">
          <a-input v-model:value="formData.warrantyPeriod" class="w-fill-imp" />
        </a-form-item>
      </a-col>
      <a-col :span="24" v-if="hideObj['remark'] || true">
        <a-form-item label="备注" name="remark" has-feedback v-bind="validateInfos.remark">
          <a-textarea v-model:value="formData.remark" :rows="4" placeholder="备注" class="w-fill-imp" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { Form } from 'ant-design-vue';

// 表单
const useForm = Form.useForm;
const labelCol = reactive({ style: { width: '130px' } });

// 流程会取到提交到后台
const formData = ref({
  userName: '',
  details: '',
  sex: '',
  seal: [],
  projectName: '',
  projectCode: '',
  customerName: '',
  contractContent: '',
  contractAmount: 0,
  rate: 0,
  cycle: '',
  warrantyPeriod: '',
  remark: ''
});

const rulesRef = reactive({});

// 只读
const disabledObj = ref({});
// 隐藏
const hideObj = ref({});

const sealOptions = ref(['合同专用章', '公章', '法人章']);

const emit = defineEmits(['change']);

/**
 * 必填字段修改(填写触发)
 */
const change = () => {
  emit('change');
};

// 表单
const { resetFields, validate, validateInfos } = useForm(formData, rulesRef);

/**
 * 表单数据加载
 *
 * formReload 必须声明，名字一致
 *
 */
const formReload = data => {
  // 赋值
  if (data.formJson) {
    formData.value = data.formJson;
  }

  // 权限列表
  const fieldPermissionList = data.fieldPermissionList;
  if (fieldPermissionList && fieldPermissionList.length > 0) {
    for (let index = 0; index < fieldPermissionList.length; index++) {
      const fieldPermission = fieldPermissionList[index];
      // 必填
      if (fieldPermission.require) {
        rulesRef[fieldPermission.fieldCode] = [
          {
            required: true,
            message: `${fieldPermission.fieldName}不能为空`
          }
        ];
      }
      // 只读
      if (fieldPermission.edit) {
        disabledObj.value[fieldPermission.fieldCode] = false;
      } else {
        disabledObj.value[fieldPermission.fieldCode] = true;
      }

      // 隐藏
      if (fieldPermission.hide) {
        hideObj.value[fieldPermission.fieldCode] = false;
      } else {
        hideObj.value[fieldPermission.fieldCode] = true;
      }
    }
  }
};

/**
 * 提交回调方法
 */
const callback = data => {};

// 5个属性 必须暴露出来
defineExpose({
  formData,
  formReload,
  resetFields,
  validate,
  callback
});
</script>

<style scoped>
.w-fill-imp {
  width: 100%;
}
</style>
