<script setup lang="ts">
import { onMounted } from "vue";
import { useAsync } from "/@/hooks";
import { type InvoiceDetail, RESPONSE_MAP } from "./configs";
import dayjs from "dayjs";

type InvoiceType = "sale" | "purchase";

let prop: InvoiceDetail = {};

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

const {
  data: invoiceDetail,
  run: invoiceDetailRun,
  loading: invoiceLoading
} = useAsync<InvoiceDetail>({
  initalData: {}
});

function requesetInvoiceData() {
  const { type, invNo } = props;
  //映射响应字段
  prop = RESPONSE_MAP[type];
  //todo:区分销售采购 -> 请求不同的接口
  const api = type === "purchase" ? "httpPurchase" : "httpSale";

  invoiceDetailRun(
    api({
      invNo
    })
  );
}

onMounted(() => requesetInvoiceData());
</script>

<template>
  <div class="InvoiceTmpDiv" v-loading="invoiceLoading">
    <el-row>
      <el-col :span="12" :offset="6" class="title no-border">
        {{ invoiceDetail[prop.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]
                ? dayjs(invoiceDetail[prop.openTime]).format("YYYY-MM-DD")
                : ""
            }}</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="15">
        <div flex mb-1>
          <span class="label">名称</span>：<span class="content">
            {{ invoiceDetail[prop.buyerTitle] }}
          </span>
        </div>
        <div flex mb-1>
          <span class="label">纳税人识别号</span>：<span class="content">
            {{ invoiceDetail[prop.buyerCode] }}
          </span>
        </div>
        <div flex mb-1>
          <span class="label">地址、电话</span>：<span class="content">
            {{ invoiceDetail[prop.buyerAddr] }}
            {{ invoiceDetail[prop.buyerMobile] }}
          </span>
        </div>
        <div flex mb-1>
          <span class="label">开户行及账号</span>：<span class="content">
            {{ invoiceDetail[prop.buyerBank] }}
            {{ invoiceDetail[prop.buyerBankNo] }}
          </span>
        </div>
      </el-col>
      <el-col :span="1">
        <ul class="tc">
          <li>密</li>
          <li>码</li>
          <li>区</li>
        </ul></el-col
      >
      <el-col :span="7" />
    </el-row>
    <div class="row-div">
      <el-row>
        <el-col :span="8" class="no-border">
          <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="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
        style="border-bottom: 1px solid #b16363"
        v-if="invoiceDetail && invoiceDetail[prop.goodList]"
      >
        <el-row
          v-for="(item, index) in invoiceDetail[prop.goodList]"
          :key="index"
        >
          <el-col :span="8" class="no-border">
            <div class="tc">{{ item[prop.listInfo.name] }}</div>
          </el-col>
          <el-col :span="3">
            <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>
      </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.amountTax] }}
          </div>
        </el-col>
        <el-col :span="1">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">
            {{ invoiceDetail[prop.amountPrice] }}
          </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">
      <el-col :span="1" class="no-border">
        <ul class="tc">
          <li>销</li>
          <li>售</li>
          <li>方</li>
        </ul>
      </el-col>
      <el-col :span="15">
        <div flex mb-1>
          <span class="label">名称</span>：<span class="content">
            {{ invoiceDetail[prop.sellerTitle] }}
          </span>
        </div>
        <div flex mb-1>
          <span class="label">纳税人识别号</span>：<span class="content">
            {{ invoiceDetail[prop.sellerCode] }}
          </span>
        </div>
        <div flex mb-1>
          <span class="label">地址、电话</span>：<span class="content">
            {{ invoiceDetail[prop.sellerAddr] }}
            {{ invoiceDetail[prop.sellerMobile] }}
          </span>
        </div>
        <div flex mb-1>
          <span class="label">开户行及账号</span>：<span class="content">
            {{ invoiceDetail[prop.sellerBank] }}
            {{ invoiceDetail[prop.sellerBankNo] }}
          </span>
        </div>
      </el-col>
      <el-col :span="1">
        <ul class="tc">
          <li>备</li>
          <li>&nbsp;</li>
          <li>注</li>
        </ul>
      </el-col>
      <el-col :span="7">{{ 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>
</template>

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