<script setup lang="ts">
import dayjs from "dayjs";
import { INV_TYPE } from "/@/utils/details/inv-open";
defineProps<{
  invoiceData: Record<string, string>;
  isRed: boolean;
}>();
</script>

<template>
  <div class="InvoiceTmpDiv" v-if="Object.keys(invoiceData || {}).length > 0">
    <el-row>
      <el-col :span="12" :offset="6" class="title no-border">{{
        INV_TYPE.find(t => t.value === invoiceData?.inv_type)?.label
      }}</el-col>
      <el-col :span="6" class="extra no-border">
        <div>
          <span class="label title-label">发票代码</span>：<span
            class="content"
            >{{ invoiceData.invoiceCode }}</span
          >
        </div>
        <div>
          <span class="label title-label">发票号码</span>：<span
            class="content"
            >{{ invoiceData.invoiceNumber }}</span
          >
        </div>
        <div>
          <span class="label title-label">开票日期</span>：<span
            class="content"
            >{{
              invoiceData.open_time
                ? dayjs(invoiceData.open_time).format("YYYY-MM-DD")
                : ""
            }}</span
          >
        </div>
        <div>
          <span class="label title-label">校验码</span>：<span
            class="content"
            >{{ invoiceData.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">
            {{ invoiceData.buyer_title }}
          </span>
        </div>
        <div flex mb-1>
          <span class="label">纳税人识别号</span>：<span class="content">
            {{ invoiceData.buyer_code }}
          </span>
        </div>
        <div flex mb-1>
          <span class="label">地址、电话</span>：<span class="content">
            {{ invoiceData.buyer_addr }} {{ invoiceData.buyer_mobile }}
          </span>
        </div>
        <div flex mb-1>
          <span class="label">开户行及账号</span>：<span class="content">
            {{ invoiceData.buyer_bank }} {{ invoiceData.buyer_bankNo }}
          </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-button class="fr" type="primary"> 添加订单数据 </el-button> -->
      </el-col>
    </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="invoiceData && invoiceData.goodList"
      >
        <el-row v-for="(item, index) in invoiceData.goodList" :key="index">
          <el-col :span="8" class="no-border">
            <div class="tc">{{ item.goodName }}</div>
          </el-col>
          <el-col :span="3">
            <div class="tc">{{ item.specInfo }}</div>
          </el-col>
          <el-col :span="1">
            <div class="tc">{{ item.unitName }}</div>
          </el-col>
          <el-col :span="2">
            <div class="tc">{{ item.goodNum }}</div>
          </el-col>
          <el-col :span="3">
            <div class="tc">
              {{ isRad ? "-" + item.totalPrice : item.totalPrice }}
            </div>
          </el-col>
          <el-col :span="3">
            <div class="tc">{{ item.amount }}</div>
          </el-col>
          <el-col :span="1">
            <div class="tc">{{ item.tax_rate }}</div>
          </el-col>
          <el-col :span="3">
            <div class="tc">{{ item.tax }}</div>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="8" class="no-border" v-if="invoiceData.item_list">
          <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">
            {{ invoiceData.subtotal_amount }}
          </div>
        </el-col>
        <el-col :span="1">
          <div class="tc">&nbsp;</div>
        </el-col>
        <el-col :span="3">
          <div class="tc">
            {{ invoiceData.subtotal_tax }}
          </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" />
      <el-col :span="7" class="no-border tc"
        >（小写）<span>{{ invoiceData.inv_value }}</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">
            {{ invoiceData.seller_title }}
          </span>
        </div>
        <div flex mb-1>
          <span class="label">纳税人识别号</span>：<span class="content">
            {{ invoiceData.seller_code }}
          </span>
        </div>
        <div flex mb-1>
          <span class="label">地址、电话</span>：<span class="content">
            {{ invoiceData.seller_addr }} {{ invoiceData.seller_mobile }}
          </span>
        </div>
        <div flex mb-1>
          <span class="label">开户行及账号</span>：<span class="content">
            {{ invoiceData.seller_bank }} {{ invoiceData.seller_bankNo }}
          </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">{{ invoiceData.remarks }}</el-col>
    </el-row>
    <el-row class="last-row">
      <el-col :span="6" class="no-border">
        <span>收款人：</span>
        <span class="content">{{ invoiceData.payee }}</span>
      </el-col>
      <el-col :span="6" class="no-border">
        <span>复核：</span>
        <span class="content">{{ invoiceData.reviewer }}</span>
      </el-col>
      <el-col :span="6" class="no-border">
        <span>开票人：</span>
        <span class="content">{{ invoiceData.drawer }}</span>
      </el-col>
      <el-col :span="5" class="no-border">
        <span>销售方：</span>
        <span class="content">{{ invoiceData.seller_title }}</span>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.InvoiceTmpDiv {
  font-size: 12px;
  width: 100%;
  .title {
    font-size: 26px;
    color: #b16363;
    text-align: center;
    line-height: 56px;
  }
  .extra {
    color: #b15b16;
    padding: 0 0 6px 0;
    div {
      line-height: 18px;
    }
    .content {
      color: #181818;
    }
  }
  .height84 {
    [class*="el-col-"] {
      border-right: 1px solid #b16363;
      &:last-child {
        border-right: 0px;
      }
    }
    ul {
      padding: 15px 0;
      // border-right: 1px solid #b16363;
      li {
        height: 20px;
        line-height: 20px;
      }
    }
    .el-col-15 {
      padding: 5px 10px;
      div {
        line-height: 20px;
      }
    }
    .el-col-7 {
      padding: 5px 10px;
      line-height: 20px;
    }
  }
  .row {
    border: 1px solid #b16363;
    border-bottom: none;
    color: #b15b16;
    &.con {
      padding: 5px 0;
      line-height: 22px;
    }
    .content {
      color: #181818;
    }
    .col_1 {
      width: 4.16%;
    }
    .col_2 {
      width: 8.33%;
    }
    .col_3 {
      width: 12.5%;
    }
    .col_5 {
      width: 20.83%;
    }
    .col_6 {
      width: 25%;
    }
    .col_7 {
      width: 29.16%;
    }
    .col_8 {
      width: 33.33%;
    }
    .col_14 {
      width: 58.33%;
    }
    .col_15 {
      width: 62.5%;
    }
    .col_17 {
      width: 70.83%;
    }
    .col_18 {
      width: 75%;
    }
    .col_24 {
      width: 100%;
    }
    .col_1,
    .col_2,
    .col_3,
    .col_4,
    .col_5,
    .col_6,
    .col_7,
    .col_8,
    .col_14,
    .col_15,
    .col_17,
    .col_18,
    .col_24 {
      display: inline-block;
      padding: 8px;
      box-sizing: border-box;
      vertical-align: middle;
      border-left: 1px solid #b16363;
      height: 100%;
      &.no-border {
        border-left: none;
      }
    }
  }
  .row-div {
    border: 1px solid #b16363;
    // padding:7px 0;
    border-bottom: 0px;
    [class*="el-col-"] {
      padding: 4px 0;
      line-height: 22px;
      border-right: 1px solid #b16363;
      &:last-child {
        border-right: 0px;
      }
    }
    .el-row {
      &:first-child {
        [class*="el-col-"] {
          padding-top: 8px;
        }
      }
      &:last-child {
        [class*="el-col-"] {
          padding-bottom: 10px;
        }
      }
    }
  }

  .last-row {
    padding: 6px 0 0 0;
    .content {
      color: #181818;
    }
    color: #b15b16;
    border-top: 1px solid #b16363;
  }
  .label {
    width: 78px;
    display: inline-block;
    text-align-last: justify;
    text-align: justify;
  }
  .title-label {
    width: 52px;
  }
}
</style>
