<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, computed, reactive, watchEffect } from "vue";
import { open_type_list } from "../../../status";

const props = defineProps<{
  isElectronic: boolean;
  isSupport: boolean;
  isSpecialTicket: boolean;
  isPlain: boolean;
  invType: string;
}>();

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

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

const formRef = ref(null);

const rules = reactive({
  status: [
    {
      required: true,
      message: "请选择审核状态",
      trigger: "change"
    }
  ],
  open_type: [
    {
      required: true,
      message: "请选择开票类型",
      trigger: "change"
    }
  ],
  remark: [
    {
      required: false,
      message: "请输入审核备注",
      trigger: "blur"
    }
  ]
});

//判断是否支持金税开票不支持金税开票
const openTypes = computed(() => {
  if (props.isSupport) {
    return props.isSpecialTicket
      ? [open_type_list[1], open_type_list[2]]
      : open_type_list;
  }

  return [open_type_list[2]];
});

function handleSave() {
  if (
    props.invType === "special_electronic" &&
    formData.value.open_type !== "3"
  ) {
    ElMessage.error("金税暂不支持开具电子专票");
    return;
  }

  formRef.value.validate(isValid => {
    console.log(isValid);
    isValid && emit("changeStatus", formData.value);
  });
}

watchEffect(() => {
  rules.remark[0].required = formData.value.status === "8";
  rules.open_type[0].required = formData.value.status === "2";
});
</script>

<template>
  <ElForm label-width="80px" ref="formRef" :model="formData" :rules="rules">
    <ElRow>
      <ElCol :span="12">
        <ElFormItem label="审核状态" prop="status">
          <ElSelect
            style="width: 100%"
            v-model="formData.status"
            placeholder="审核状态"
          >
            <ElOption label="通过" value="2" />
            <ElOption label="驳回" value="8" />
          </ElSelect>
        </ElFormItem>
      </ElCol>

      <ElCol :span="10">
        <ElFormItem label="开票方式" prop="open_type">
          <ElSelect
            style="width: 100%"
            placeholder="开票方式"
            v-model="formData.open_type"
          >
            <ElOption
              v-for="(si, sii) in openTypes"
              :key="'type' + si.value + sii"
              :label="si.label"
              :value="si.value"
            />
          </ElSelect>
        </ElFormItem>
      </ElCol>
    </ElRow>

    <ElFormItem label="备注" prop="remark">
      <ElInput placeholder="备注" type="textarea" v-model="formData.remark" />
    </ElFormItem>

    <ElFormItem>
      <div class="w-full flex justify-end">
        <ElButton type="primary" @click="handleSave">保存</ElButton>
      </div>
    </ElFormItem>
  </ElForm>
</template>
