<template>
  <div class="success">
    <div class="success-container">
      <invoice-top title="提交申请成功" :label="topLabelText" :price="invoiceInfo.invoiceAmount" />
      <invoice-steps :step-list="invoiceProcesses" />
      <invoice-detail :invoice-info="invoiceInfo" />
    </div>

    <div class="success-footer">
      <div class="success-footer-button">
        <cr-button shape="circle" plain block type="primary" @click="buttonClickEvent(0)">
          返回首页
        </cr-button>
      </div>
      <div class="success-footer-button">
        <cr-button shape="circle" block type="primary" @click="buttonClickEvent(1)">
          查看开票记录
        </cr-button>
      </div>
    </div>
  </div>
</template>

<script>
import InvoiceTop from './components/InvoiceTop.vue';
import InvoiceSteps from './components/InvoiceSteps.vue';
import InvoiceDetail from './components/InvoiceDetail.vue';
import localStorageService from '@/service/localStorage.service';
import jumpAppMixin from '../mixins/jumpApp.mixin';
export default {
  components: {
    InvoiceTop,
    InvoiceSteps,
    InvoiceDetail
  },
  mixins: [jumpAppMixin],
  data() {
    return {
      invoiceInfo: {},
      invoiceProcesses: []
    };
  },
  computed: {
    topLabelText() {
      const count = this.invoiceInfo?.invoiceCount;
      return `预计可开 <b style="color: #000;">${count}</b> 张发票，发票总金额`;
    }
  },
  created() {
    const invoiceInfo = localStorageService.get('receiptSuccessOptions');
    if (invoiceInfo) {
      const { invoiceProcesses = [], ...other } = invoiceInfo || {};
      this.$set(this, 'invoiceProcesses', invoiceProcesses.reverse());
      this.$set(this, 'invoiceInfo', other);
      return;
    }
  },
  beforeDestroy() {
    localStorageService.remove('receiptSuccessOptions');
  },
  methods: {
    buttonClickEvent(state) {
      localStorageService.set('invoiceTab', state);
      this.jumpAppUrl('/electronicReceipt/invoiceList', {}, true);
      // this.$router.replace(`/electronicReceipt/invoiceList`);
    }
  }
};
</script>

<style lang="less" scoped>
.success {
  padding: 12px 12px 62px 12px;
  &-container {
    border-radius: 8px;
    background-color: @white;
    margin-bottom: 12px;
  }
  &-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    width: 100%;
    background-color: @white;
    box-sizing: border-box;
    border-top: solid #ededed 1px;
    display: flex;
    justify-content: space-between;
    &-button {
      width: calc(50% - 5px);
    }
  }
}
</style>
