<script setup lang="ts">
import { shallowRef, ref, shallowReactive, watchEffect, reactive } from "vue";
import { useAsync } from "/@/hooks/core/useAsync";

import { httpBatchApproval } from "/@/api/InvoiceSales/invoiceApply";

import { open_type_list } from "../status";
import { required, verification } from "/@/utils/verification";
import { ElForm, ElMessage } from "element-plus";

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

const visible = shallowRef(false);
const formRef = ref<InstanceType<typeof ElForm> | null>(null);
const formData = shallowReactive({
  status: "2",
  open_type: "",
  remark: ""
});
const rules = reactive(
  verification(
    required("remark", "请输入备注"),
    required("status", "请选择审核状态"),
    required("open_type", "请选择开票方式")
  )
);

const selected = ref<Record<string, string>[]>([]);
const { run: batchApproval, loading } = useAsync({
  success: () => {
    visible.value = false;
    emit("onBatchApprovalComplete");
  }
});

function onBatchApproval() {
  formRef.value.validate(isValid => {
    if (!isValid) return;
    const invNos = selected.value.map(({ invNo }) => invNo);
    const { open_type, status, remark } = formData;

    if (open_type !== "3" && status === "2") {
      if (selected.value.some(({ is_ticket }) => String(is_ticket) !== "1")) {
        ElMessage.error("勾选的发票申请必须全部支持金税开票");
        return;
      }
      if (
        selected.value.some(({ inv_type }) => inv_type === "special_electronic")
      ) {
        ElMessage.error("金税暂不支持开具电子专票");
        return;
      }
    }

    batchApproval(
      httpBatchApproval({
        invNos,
        status,
        remark,
        open_type: status === "2" ? open_type : "0"
      })
    );
  });
}

watchEffect(() => {
  rules.open_type.required = formData.status === "2";
  rules.remark.required = formData.status === "8";
});

defineExpose({
  onDisplay: _selected => {
    selected.value = _selected;
    visible.value = true;
  }
});
</script>

<template>
  <el-dialog
    title="请选择批量审核状态"
    center
    v-model="visible"
    width="450px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="
      formData.status = '2';
      formData.open_type = '';
      formData.remark = '';
      selected = [];
      loading = false;
    "
  >
    <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="审核状态" prop="status">
        <el-select style="width: 100%" v-model="formData.status">
          <el-option label="通过" value="2" />
          <el-option label="驳回" value="8" />
        </el-select>
      </el-form-item>

      <el-form-item
        label="开票方式"
        prop="open_type"
        v-if="formData.status === '2'"
      >
        <el-select style="width: 100%" v-model="formData.open_type">
          <el-option
            v-for="openType in open_type_list"
            :key="openType.value"
            :label="openType.label"
            :value="openType.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="formData.remark" />
      </el-form-item>
    </el-form>

    <div class="flex justify-end mt-[20px]">
      <el-button type="primary" @click="onBatchApproval" :loading="loading"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>
