<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { red_reasons } from "./../config/configs";
import { httpOpenInvoice } from "/@/api/InvoiceSales/redInk";
import { useAsync } from "/@/hooks";

const visible = ref(false);
const { run, loading } = useAsync();

const params = reactive({
  invRed: "",
  redreason: ""
});

const requesetOpenInvoice = () => {
  params.redreason
    ? run(httpOpenInvoice(params))
    : ElMessage.error("请输入红冲原因");
};

defineExpose({
  onDisplay(invRed) {
    visible.value = true;
    params.invRed = invRed;
    params.redreason = "";
  }
});
</script>

<template>
  <el-dialog
    title="提交开票"
    v-model="visible"
    center
    :close-on-click-modal="false"
  >
    <div flex items-start>
      <p w-100px>红冲原因：</p>
      <el-select placeholder="请选择红冲原因" v-model="params.redreason">
        <el-option
          v-for="reason in red_reasons"
          :key="reason.value"
          v-bind="reason"
        />
      </el-select>
    </div>

    <div w-full flex justify-end>
      <el-button type="primary" :loading="loading" @click="requesetOpenInvoice"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>
