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

const emit = defineEmits(["changeStatus"]);
const rules = reactive({ ...upload_invoice_rules });

const disabled = computed(() => formData.input_type === "1");

const noPass = computed(() => formData.status === "4");

const scanInputValue = ref("");

const formData = reactive({
  status: "",
  open_type: "",
  remark: "",
  invCode: "",
  invNum: "",
  open_date: null,
  total_fee: 0,
  input_type: "",
  subtotal_fee: 0
});

function handleSaveStatus() {
  const { input_type: _, subtotal_fee, total_fee, ...otherParams } = formData;

  emit(
    "changeStatus",
    formData.status === "4"
      ? { status: "4", remark: formData.remark }
      : {
          ...otherParams,
          subtotal_fee: subtotal_fee.toFixed(2),
          total_fee: total_fee.toFixed(2)
        }
  );
}

function handleScanKeydown(evt: KeyboardEvent) {
  const { keyCode } = evt;

  if (keyCode !== 13) return;

  //校验扫描枪值是否含有中文逗号
  if (scanInputValue.value.indexOf("，") >= 0) {
    ElMessage.error("不能包含中文逗号");
    return (scanInputValue.value = "");
  }

  const [_1, _2, ...chunks] = scanInputValue.value.split(",");
  const [invCode, invNum, subtotal_amount, open_time] = chunks;

  const year = open_time.slice(0, 4);
  const month = open_time.slice(4, 6);
  const day = open_time.slice(6);

  formData.invCode = invCode;
  formData.invNum = invNum;
  formData.subtotal_fee = Number(subtotal_amount);
  formData.total_fee = Number(subtotal_amount);
  formData.open_date = dayjs(`${year}-${month}-${day}`).format(
    "YYYY-MM-DD HH:mm:ss"
  );

  scanInputValue.value = "";
}
</script>

<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-width="90px"
    class="demo-ruleForm"
    size="small"
    status-icon
  >
    <el-row>
      <el-col :span="8">
        <el-form-item label="审核状态" prop="status">
          <el-select v-model="formData.status" placeholder="菜单名称">
            <el-option label="通过" value="1" />
            <el-option label="不通过" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="开票类型" prop="open_type" v-if="!noPass">
          <el-select
            v-model="formData.open_type"
            style="width: 100%"
            placeholder="菜单类型"
          >
            <el-option
              v-for="(si, sii) in open_type_list"
              :key="'type' + si.value + sii"
              :label="si.label"
              :value="si.value"
            />
          </el-select> </el-form-item
      ></el-col>

      <el-col :span="16">
        <el-form-item label="审核备注" prop="remark">
          <el-input
            v-model="formData.remark"
            :rows="3"
            type="textarea"
            maxlength="2000"
            placeholder="申请备注"
          /> </el-form-item
      ></el-col>
    </el-row>
    <el-row v-show="formData.open_type !== '1'" v-if="!noPass">
      <el-col :span="8">
        <el-form-item label="输入类型" prop="input_type">
          <el-select
            v-model="formData.input_type"
            style="width: 100%"
            placeholder="菜单类型"
          >
            <el-option
              v-for="(si, sii) in input_type_list"
              :key="'type' + si.value + sii"
              :label="si.label"
              :value="si.value"
            /> </el-select></el-form-item
      ></el-col>
      <el-col
        :span="16"
        style="padding: 0 0 0 16px"
        v-show="formData.input_type === '1'"
      >
        <el-input
          v-model="scanInputValue"
          :rows="1"
          type="textarea"
          maxlength="30"
          placeholder="扫码枪输入处"
          @keydown="handleScanKeydown"
        />
      </el-col>
    </el-row>
    <el-row v-show="formData.open_type !== '1'" v-if="!noPass">
      <el-col :span="8">
        <el-form-item label="发票号码" prop="invCode">
          <el-input
            v-model="formData.invCode"
            placeholder="发票号码"
            :disabled="disabled"
          /> </el-form-item
      ></el-col>
      <el-col :span="8">
        <el-form-item label="发票代码" prop="invNum">
          <el-input
            v-model="formData.invNum"
            placeholder="发票代码"
            :disabled="disabled"
          /> </el-form-item
      ></el-col>
      <el-col :span="8">
        <el-form-item label="开票日期" prop="open_date">
          <el-date-picker
            value-format="YYYY-MM-DD HH:mm:ss"
            v-model="formData.open_date"
            :disabled="disabled"
          /> </el-form-item
      ></el-col>
      <el-col :span="8">
        <el-form-item label="税前金额" prop="subtotal_fee">
          <el-input-number
            v-model="formData.subtotal_fee"
            :precision="2"
            style="width: 100%"
            :min="0"
            :max="999999"
            :disabled="disabled"
          /> </el-form-item
      ></el-col>
      <el-col :span="8">
        <el-form-item label="税后金额" prop="total_fee">
          <el-input-number
            v-model="formData.total_fee"
            :precision="2"
            style="width: 100%"
            :min="0"
            :max="999999"
            :disabled="disabled"
          /> </el-form-item
      ></el-col>
    </el-row>
    <div class="flex justify-end">
      <el-button type="primary" @click="handleSaveStatus">保存</el-button>
    </div>
  </el-form>
</template>
