<template>
  <!-- 提交成功页面 -->
  <div class="receipt">
    <div class="receipt-top">
      <invoice-top
        :state="invoiceState"
        :title="invoiceStateText"
        :label="invoiceAmountText"
        :price="invoiceInfo.invoiceAmount"
      />
      <invoice-steps :step-list="invoiceProcesses" />
      <invoice-detail :invoice-info="invoiceInfo">
        <div
          v-if="invoiceInfo.pictureUrl || invoiceInfo.pdfUrl"
          class="detail-invoice"
          @click="openImageViewEvent"
        >
          <div class="detail-invoice__image">
            <cr-image
              src="@/assets/images/electronicInvoice/invoiceExample.png"
              width="100%"
              height="100%"
            />
            <p class="detail-invoice__count">共 {{ pictureUrlCount }} 张</p>
          </div>
          <p class="detail-invoice__msg">
            {{ invoiceInfo.pictureUrl ? '点击预览发票' : '点击分享发票' }}
          </p>
        </div>
      </invoice-detail>
    </div>

    <cr-cell
      v-if="invoiceInfo.orderInvoiceHis"
      class="receipt-histroy"
      is-link
      title="历史申请信息"
      @right-click="histroyClickEvent"
      @click="histroyClickEvent"
    />

    <div v-for="(orderItem, orderIndex) in orderInfosList" :key="orderIndex" class="order">
      <shop-card :orders="orderItem" />
      <div class="order-params">
        <div class="order-params-li">
          <span class="li__label">订单状态:</span>
          <span class="li__value">{{ orderItem.orderStatusStr }}</span>
        </div>
        <div class="order-params-li">
          <span class="li__label">订单时间:</span>
          <span class="li__value">{{ orderItem.orderCreatedAt }}</span>
        </div>
        <div class="order-params-li">
          <span class="li__label">订单编号:</span>
          <span class="li__value">{{ orderItem.orderNo }}</span>
        </div>
        <span class="order-params-copy" @click="copyText(orderItem.orderNo)">复制</span>
      </div>
    </div>

    <cr-dialog
      v-model="showHistory"
      class="receipt-history cr-dialog-invoice"
      confirm-button-text="我知道了"
    >
      <div slot="title">历史申请信息</div>
      <div class="receipt-history-content">
        <div class="receipt-history-li">
          <span class="li__label">发票内容</span>
          <span class="li__value">{{ contentType[orderInvoiceHis.invoiceContentType] || '' }}</span>
        </div>
        <div class="receipt-history-li">
          <span class="li__label">抬头类型</span>
          <span class="li__value">{{ titleType[orderInvoiceHis.invoiceTitleType] || '' }}</span>
        </div>
        <div class="receipt-history-li">
          <span class="li__label">发票抬头</span>
          <span class="li__value">{{ orderInvoiceHis.invoiceTitle }}</span>
        </div>
        <div class="receipt-history-li">
          <span class="li__label">发票税号</span>
          <span class="li__value">{{ orderInvoiceHis.taxNumber }}</span>
        </div>
      </div>
    </cr-dialog>
    <div class="receipt-footer">
      <cr-button
        v-for="(btnItem, btnIndex) in frontRadios"
        :key="btnIndex"
        shape="circle"
        size="small"
        plain
        :hairline="true"
        :type="btnConfig[btnItem].type"
        @click="buttonClickEvent(btnConfig[btnItem].event)"
        >{{ btnConfig[btnItem].text }}</cr-button
      >
    </div>
  </div>
</template>
<script>
import api from '@/api/receipts.js';
import InvoiceTop from './components/InvoiceTop.vue';
import InvoiceSteps from './components/InvoiceSteps.vue';
import InvoiceDetail from './components/InvoiceDetail.vue';
import shopCard from '../components/shopCard.vue';
import clipTextMixins from '@/mixins/clipText.mixins';
import jumpAppMixin from '../mixins/jumpApp.mixin';
import buttonEventMixins from '../mixins/buttonEvent.mixin';
import customerMixin from '../mixins/customer.mixin';
// import localStorageService from '@/service/localStorage.service';
import {
  contentType,
  titleType,
  INVOIC_LODING,
  BUTTON_CONFIG,
  invoiceStateConfig
} from '../config';
export default {
  components: {
    shopCard,
    InvoiceTop,
    InvoiceSteps,
    InvoiceDetail
  },
  mixins: [jumpAppMixin, buttonEventMixins, customerMixin, clipTextMixins], //
  data() {
    return {
      openImageView: false,
      showHistory: false,

      contentType,
      titleType,

      invoiceState: null, // 发票状态,1-开票中,2-已开票;3-开票失败,4-换开中,5-换开成功;6-发票失效
      frontRadios: [],
      invoiceInfo: {},
      orderInvoiceHis: {},
      invoiceProcesses: [],
      orderInfosList: [],

      btnConfig: BUTTON_CONFIG
    };
  },
  computed: {
    invoiceStateText() {
      const invoiceItem = invoiceStateConfig[this.invoiceState];
      return invoiceItem ? invoiceItem.text : '';
    },
    invoiceAmountText() {
      return INVOIC_LODING.includes(+this.invoiceState) ? '预计可开发票金额' : '开票金额';
    },
    pictureUrlCount() {
      const pictureUrl = this.invoiceInfo.pictureUrl;
      return pictureUrl ? pictureUrl.split(',').length : 1;
    }
  },
  created() {
    this.invoiceDetail();
  },
  methods: {
    refreshChange() {
      this.invoiceDetail();
    },
    async invoiceDetail() {
      const invoiceSerialNum = this.$route.query.invoiceSerialNum || '';
      const [res, error] = await api.invoiceDetail({ invoiceSerialNum });
      if (!error) {
        const { invoiceProcesses, orderInfos, frontRadios, invoiceState, ...other } = res;
        this.invoiceState = invoiceState;
        this.frontRadios = (frontRadios || []).filter(code => code !== 1 && code !== 11);
        console.log(this.frontRadios);
        this.orderInvoiceHis = res.orderInvoiceHis || {};
        this.invoiceProcesses = (invoiceProcesses || []).reverse();
        this.orderInfosList = orderInfos || [];
        this.$set(this, 'invoiceInfo', other);
      }
    },
    processesMarkClass(proceItem, proceIndex) {
      if (proceIndex === 0) {
        if (proceItem.title === '财务处理') {
          return 'time';
        }
        return 'high';
      }
      return '';
    },
    openImageViewEvent() {
      const { pictureUrl, pdfUrl, invoiceNo, invoiceCode } = this.invoiceInfo;
      if (pdfUrl) {
        this.shareInvoice({ pictureUrl, pdfUrl, invoiceNo, invoiceCode });
        return;
      }
      this.jumpAppUrl('/electronicReceipt/invoiceShare', {
        pictureUrl: pictureUrl,
        invoiceNo,
        invoiceCode
      });
    },
    copyText(text) {
      this.setClipboardData({
        data: text,
        success: () => {
          this.$toast.success('已复制');
        }
      });
    },
    histroyClickEvent() {
      this.showHistory = true;
    },
    backHome() {
      this.nativeBridge.closeBrowser();
    }
  }
};
</script>

<style lang="less" src="./index.less" scoped></style>
