<template>
  <view class="page">
    <view class="block">
      <view
        class="flex-align-center"
        :style="{
          marginTop: index === 0 ? 0 : '40rpx',
        }"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="fs-32 lh-48 color-999" style="width: 192rpx">{{
          item.label
        }}</view>
        <view class="fs-28 lh-48 color-000" v-if="index === 7">
          <text style="color: rgba(255, 153, 0, 1)">{{ item.value }}</text>
          <text style="margin-left: 2px">元</text>
        </view>
        <view class="fs-28 lh-48 color-000" v-else>{{ item.value }}</view>
      </view>
    </view>
    <view class="block pt-40 pb-40 pl-30 pr-30 flex mt-30" v-if="email">
      <view class="fs-32 lh-48 color-999" style="width: 192rpx">电子邮箱</view>
      <view class="fs-28 lh-48 color-000">{{ email }}</view>
    </view>
    <view class="block pt-40 pb-40 pl-30 pr-30 flex mt-30">
      <view class="fs-32 lh-48 color-999" style="width: 192rpx">发票</view>
      <view class="ml-auto flex-align-center" @click="openInvoice">
        <view class="fs-28 color-primary mr-4">立即查看</view>
        <uni-icons
          type="right"
          size="14"
          color="var(--color-primary)"
        ></uni-icons>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { fetchInvoiceList, fetchInvoicePDF } from "@/api";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const openInvoiceId = ref();
const email = ref();
const list = ref([
  {
    label: "公司名称",
    value: "",
  },
  {
    label: "公司税号",
    value: "",
  },
  {
    label: "注册地址",
    value: "",
  },
  {
    label: "注册电话",
    value: "",
  },
  {
    label: "开户银行",
    value: "",
  },
  {
    label: "银行账号",
    value: "",
  },
  {
    label: "备注",
    value: "",
  },
  {
    label: "发票金额",
    value: "",
  },
  {
    label: "申请时间",
    value: "",
  },
]);

onLoad((options: any) => {
  uni.showLoading({
    title: "加载中",
  });
  fetchInvoiceList()
    .then((res) => {
      // console.log(res);
      uni.hideLoading();
      const fd = res.findIndex((item: any) => {
        if (item.orderDetails && item.orderDetails.length) {
          return item.orderDetails.some(
            (order: any) => order.startChargeSeq === options.id
          );
        }
        return false;
      });
      if (fd >= 0) {
        list.value[0].value = res[fd].invoiceTitle;
        list.value[1].value = res[fd].taxId;
        list.value[2].value = res[fd].address || "-";
        list.value[3].value = res[fd].phone || "-";
        list.value[4].value = res[fd].bankName || "-";
        list.value[5].value = res[fd].bankAccount || "-";
        list.value[6].value = res[fd].remark || "-";
        list.value[7].value = `${(Number(res[fd].invoiceAmount) / 100).toFixed(
          2
        )}`;
        list.value[8].value = res[fd].createTime;
        openInvoiceId.value = res[fd].id;
        email.value = res[fd].email || "";
        return;
      }
      return Promise.reject({
        errMsg: "找不到发票数据",
      });
    })
    .catch((err) => {
      uni.hideLoading();
      uni.showModal({
        content: `${err.errMsg},请重试`,
      });
    });
});

const openInvoice = () => {
  uni.showLoading({
    title: "加载中",
  });
  fetchInvoicePDF(openInvoiceId.value).then((res) => {
    uni.downloadFile({
      url: res.downloadUrl,
      success: function (res) {
        const filePath = res.tempFilePath;
        uni.openDocument({
          filePath,
          fileType: "pdf",
          showMenu: true,
          success: function (res) {
            uni.hideLoading();
            console.log("打开文档成功");
          },
          fail(err) {
            uni.hideLoading();
            uni.showModal({
              content: `${err.errMsg},请重试`,
            });
          },
        });
      },
      fail(err) {
        uni.hideLoading();
        uni.showModal({
          content: `${err.errMsg},请重试`,
        });
      },
    });
  });
};
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  background-color: #f6f7fa;
  padding: 20rpx;
}
.block {
  border-radius: 20rpx;
  background: #fff;
  padding: 30rpx;
}
</style>
