<script setup lang="ts">
import { watchEffect, ref, computed, unref } from "vue";
import { useAsync } from "/@/hooks";
import { mapInvoiceType, type InvoiceDetail,numToWords } from "./configs";
import { httpSaleInvoice, httpPurchaseInvoice } from "/@/api/invoice";
import { invoiceTypeList, xs_inv_type_options } from "/@/utils/status";

type InvoiceType = "sale" | "purchase";
const emit = defineEmits(["getInvoiceData"]);

const prop = ref<Partial<InvoiceDetail>>({});

const props = defineProps<{
  type: InvoiceType;
  invNo?: string;
  invNumber: string | null;
}>();


const isBuyerMore = ref(false)
const isSaleMore = ref(false)

const {
  isError,
  data: invoiceDetail,
  run: invoiceDetailRun,
  loading: invoiceLoading,
  setData: setnvoiceDetail
} = useAsync<InvoiceDetail>({
  initalData: {},
  noMessage: true,
  success: (data = []) => {
    if(data.length === 0 && isError.value === false){
      isError.value = true
    }
    emit("getInvoiceData", unref(invoiceDetail))
  }
});

const status = computed(() => {
  const statusMap = {
    "0": "待验证",
    "1": "正常",
    "2": "作废",
    "3": "已红冲"
  };

  const _status = (invoiceDetail.value as any)?.status;
  return statusMap[String(_status)];
});

const color = computed(() => {
  const colorMap = {
    "0": "#dedfe0",
    "1": "#67c23a",
    "2": "#909399",
    "3": "#f56c6c"
  };

  const _status = (invoiceDetail.value as any)?.status;

  return colorMap[String(_status)];
});

const title = computed(() => {
  const { type } = props;
  const invoiceData = unref(invoiceDetail) as any;

  return type === "sale"
    ? xs_inv_type_options.find(t => t.value === invoiceData.inv_type)?.label || '电子发票（增值税普通发票）'
    : invoiceTypeList.find(t => t.value === invoiceData.type)?.label;
});

function requesetInvoiceData() {
  const api = props.type === "purchase" ? httpPurchaseInvoice : httpSaleInvoice;
  //响应字段
  prop.value = mapInvoiceType[props.type];

  invoiceDetailRun(
    api({
      number: props.invNumber,
      ...(props.invNo ? { invNo: props.invNo } : {})
    })
  );
}

watchEffect(() => {
  setnvoiceDetail({});
  if (!props.invNumber) return (isError.value = true);
  requesetInvoiceData();
});
</script>

<template>
  <div w-full h-200px v-loading="invoiceLoading" v-if="invoiceLoading" />
  <div class="InvoiceTmpDiv" v-if="!isError && !invoiceLoading">
    <el-row>
      <el-col :span="6">
        <div class="flex justify-center w-full">
          <p style="font-size: 27px" class="font-bold" :style="{ color }">
            {{ status }}
          </p>
        </div>
      </el-col>
      <el-col :span="12" class="title no-border">
        {{ title }}
      </el-col>
      <el-col :span="6" class="extra no-border">
        <div>
          <span class="label title-label">发票代码</span>：<span
            class="content"
            >{{ invoiceDetail[prop.code] }}</span
          >
        </div>
        <div>
          <span class="label title-label">发票号码</span>：<span
            class="content"
            >{{ invoiceDetail[prop.number] }}</span
          >
        </div>
        <div>
          <span class="label title-label">开票日期</span>：<span
            class="content"
            >{{ invoiceDetail[prop.openTime] }}</span
          >
        </div>
        <div>
          <span class="label title-label">校验码</span>：<span
            class="content"
            >{{ invoiceDetail[prop.checkNumber] }}</span
          >
        </div>
      </el-col>
    </el-row>
    <el-row class="row height84">
      <el-col :span="1" class="no-border">
        <ul class="tc">
          <li>购</li>
          <li>买</li>
          <li>方</li>
        </ul>
      </el-col>
      <el-col :span="11" style="padding: 5px">
        <div flex mb-1>
          <div class="label" style="width:75px">名称</div>：<div class="content" style="display:flex; justify-content:space-between;width:100%">
            <span>{{ invoiceDetail[prop.buyerTitle] }}</span>
            <ElButton link size="small" type="primary" @click="isBuyerMore = !isBuyerMore">{{ isBuyerMore ? '收起' : '展示更多' }}</ElButton>
          </div>
        </div>

        <div flex mb-1>
          <div class="label">纳税人识别号</div>：<span class="content">
            {{ invoiceDetail[prop.buyerCode] }}
          </span>
        </div>
       
        <template v-if="isBuyerMore">
          <div flex mb-1>
            <div class="label" style="width:75px">地址、电话</div>：<span class="content">
            {{ invoiceDetail[prop.buyerAddr] }}
            {{ invoiceDetail[prop.buyerMobile] }}
          </span>
          </div>
          <div flex mb-1>
            <div class="label" style="width:105px">开户行及账号</div>：<span class="content">
              {{ invoiceDetail[prop.buyerBank] }}
              {{ invoiceDetail[prop.buyerBankNo] }}
            </span> 
          </div>
        </template>
      </el-col>

      <el-col :span="1" class="no-border">
        <ul class="tc" style="height: 30px">
          <li>销</li>
          <li>售</li>
          <li>方</li>
        </ul>
      </el-col>
      <el-col :span="11" style="padding: 5px">
        <div flex mb-1>
          <div class="label" style="width:75px">名称</div>：<div class="content" style="display:flex; justify-content:space-between;width:100%">
            <span>{{ invoiceDetail[prop.sellerTitle] }}</span>
            <ElButton link size="small" type="primary" @click="isSaleMore = !isSaleMore">{{ isSaleMore ? '收起' : '展示更多' }}</ElButton>
          </div>
        </div>

        <div flex mb-1>
          <div class="label">纳税人识别号</div>：<span class="content">
            {{ invoiceDetail[prop.sellerCode] }}
          </span>
        </div>

        <template v-if="isSaleMore">
          <div flex mb-1>
            <div class="label" style="width:75px">地址、电话</div>：<span class="content">
              {{ invoiceDetail[prop.sellerAddr] }}
              {{ invoiceDetail[prop.sellerMobile] }}
            </span>
          </div>
          <div flex mb-1>
            <div class="label" style="width:95px">开户行及账号</div>：<span class="content">
              {{ invoiceDetail[prop.sellerBank] }}
              {{ invoiceDetail[prop.sellerBankNo] }}
            </span>
          </div>
        </template>
      </el-col>
    </el-row>
    <div class="row-div">
      <el-row>
        <el-col :span="5" class="no-border">
          <div class="tc">货物或应税劳务、服务名称</div>
        </el-col>

        <el-col :span="4" class="no-border">
          <div class="tc">税目编码</div>
        </el-col>

        <el-col :span="2">
          <div class="tc">规格型号</div>
        </el-col>
        <el-col :span="1">
          <div class="tc">单位</div>
        </el-col>
        <el-col :span="2">
          <div class="tc">数量</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">单价</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">金额</div>
        </el-col>
        <el-col :span="1">
          <div class="tc">税率</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">税额</div>
        </el-col>
      </el-row>
      <div
        v-if="invoiceDetail && invoiceDetail[prop.goodList]"
        style="border-bottom: 1px solid #b16363"
      >
        <el-scrollbar max-height="200px" always>
          <el-row
            v-for="(item, index) in invoiceDetail[prop.goodList]"
            :key="index"
          >
            <el-col :span="5" class="no-border">
              <div class="tc">{{ item[prop.listInfo.name] }}</div>
            </el-col>

            <el-col :span="4" class="no-border">
              <div class="tc">{{ item[prop.listInfo.cat_code] }}</div>
            </el-col>

            <el-col :span="2">
              <div class="tc">{{ item[prop.listInfo.spec] }}</div>
            </el-col>
            <el-col :span="1">
              <div class="tc">{{ item[prop.listInfo.unit] }}</div>
            </el-col>
            <el-col :span="2">
              <div class="tc">{{ item[prop.listInfo.num] }}</div>
            </el-col>
            <el-col :span="3">
              <div class="tc">
                {{ item[prop.listInfo.goodPrice] }}
              </div>
            </el-col>
            <el-col :span="3">
              <div class="tc">{{ item[prop.listInfo.totalPrice] }}</div>
            </el-col>
            <el-col :span="1">
              <div class="tc">{{ item[prop.listInfo.taxRate] }}</div>
            </el-col>
            <el-col :span="3">
              <div class="tc">{{ item[prop.listInfo.tax] }}</div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
      <el-row>
        <el-col :span="8" class="no-border">
          <div class="tc">合计</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="1">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="2">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">
            {{ invoiceDetail[prop.amountPrice] }}
          </div>
        </el-col>
        <el-col :span="1">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">
            {{ invoiceDetail[prop.amountTax] }}
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row class="row con">
      <el-col :span="8" class="no-border tc">
        价税合计（大写）

      </el-col>
      <el-col :span="9" class="no-border tl">
        {{ invoiceDetail[prop.TotalIncludingTax_C] }}
      </el-col>
      <el-col :span="7" class="no-border tc"
        >（小写）<span>{{
          invoiceDetail[prop.TotalIncludingTax_L]
        }}</span></el-col
      >
    </el-row>
    <el-row class="row height84" style="border-bottom: 1px solid #b15b16">
      <el-col :span="1">
        <ul class="tc">
          <li>备</li>
          <li>注</li>
        </ul>
      </el-col>
      <el-col :span="23">{{ invoiceDetail[prop.remarks] }}</el-col>
    </el-row>
    <!-- <el-row class="last-row">
      <el-col :span="6" class="no-border">
        <span>收款人：</span>
        <span class="content">{{ invoiceDetail[prop.payee] }}</span>
      </el-col>
      <el-col :span="6" class="no-border">
        <span>复核：</span>
        <span class="content">{{ invoiceDetail[prop.reviewer] }}</span>
      </el-col>
      <el-col :span="6" class="no-border">
        <span>开票人：</span>
        <span class="content">{{ invoiceDetail[prop.drawer] }}</span>
      </el-col>
      <el-col :span="5" class="no-border">
        <span>销售方：</span>
        <span class="content">{{ invoiceDetail[prop.seller] }}</span>
      </el-col>
    </el-row> -->
  </div>

  <div v-if="isError && !invoiceLoading" text-xl font-bold text-center w-full>
    未找到发票数据
  </div>
</template>

<style scoped lang="scss">
@use "./style.scss";
</style>
