<script setup lang="ts">
import { ref, unref, watch } from "vue";
import { ElForm } from "element-plus";
import { REMARK_MAX_LENGTH } from "/@/utils/global";
import { defaultRules } from "./_rules";

const emit = defineEmits(["approval"]);

const props = defineProps<{
  approveValue: string;
  rejectValue: string;
  rejectHiddenRemark: boolean
}>();

const formRef = ref<InstanceType<typeof ElForm> | null>(null);

const rules = ref({ ...defaultRules });

const formData = ref({
  status: "",
  remark: ""
});

function handleApproval() {
  formRef.value?.validate(isValid => {
    if (isValid) emit("approval", unref(formData));
  });
}

watch(
  () => formData.value,
  ({ status }) => {
    rules.value.remark[0].required = status === props.rejectValue;
  },
  {
    deep: true
  }
);
</script>

<template>
  <ElForm ref="formRef" :model="formData" :rules="rules" label-width="100px" size="small">
    <div flex flex-col style="width: 50%">
      <ElFormItem label="审核状态" prop="status">
        <el-select placeholder="请选择审核状态" v-model="formData.status">
          <el-option :value="approveValue" label="通过" />
          <el-option :value="rejectValue" label="驳回" />
        </el-select>
      </ElFormItem>

      <ElFormItem label="备注" prop="remark" v-if="formData.status !== rejectValue">
        <ElInput
          :rows="5"
          type="textarea"
          placeholder="请输入备注"
          v-model="formData.remark"
          v-bind="REMARK_MAX_LENGTH"
        />
      </ElFormItem>
    </div>

    <ElFormItem>
      <div class="w-full flex justify-end">
        <ElButton type="primary" @click="handleApproval" size="small">提交审核结果</ElButton>
      </div>
    </ElFormItem>
  </ElForm>
</template>
