<template>
  <!-- 发票记录页面 -->
  <div class="recordlist">
    <template v-if="!showEmpy">
      <cr-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :offset="100"
        loading-text=" "
        @load="onLoad"
      >
        <div
          v-for="(item, index) in receiptsList"
          :key="index"
          class="card"
          @click.stop="goInvoiceReceiptAfter(item)"
        >
          <div class="card-time">
            <div class="card-time__left">开票时间：{{ item.invoiceCreateAt }}</div>
            <div :class="['card-time__right', `state-${item.invoiceState}`]">
              {{ item.invoiceStateText }}
            </div>
          </div>
          <div class="card-info">
            <div class="card-info__wrapper">
              <dl class="card-info__value">
                <dt>{{ item.title }}</dt>
                <dd>抬头名称：{{ item.invoiceTitle }}</dd>
                <dd v-if="item.taxNumber">税号：{{ item.taxNumber }}</dd>
              </dl>
              <div class="card-info__price">
                <p>开票金额</p>
                <h3>¥{{ item.invoiceAmount }}</h3>
              </div>
            </div>
          </div>
          <div class="card-bottom">
            <cr-button
              v-for="(btnItem, btnIndex) in item.frontRadios"
              :key="btnIndex"
              shape="circle"
              size="small"
              plain
              :hairline="true"
              :type="btnConfig[btnItem].type"
              @click.stop="buttonClickEvent(btnConfig[btnItem].event, item)"
              >{{ btnConfig[btnItem].text }}</cr-button
            >
          </div>
        </div>
      </cr-list>
    </template>
    <Empy v-else />
  </div>
</template>
<script>
import api from '@/api/receipts.js';
import Empy from '../components/empy.vue';
import buttonEventMixin from '../mixins/buttonEvent.mixin';
import jumpAppMixin from '../mixins/jumpApp.mixin';
import customerMixin from '../mixins/customer.mixin';
import { BUTTON_CONFIG } from '../config';
export default {
  components: {
    Empy
  },
  mixins: [jumpAppMixin, buttonEventMixin, customerMixin],
  data() {
    return {
      loading: false,
      finished: false,

      receiptsList: [],

      queryParams: {
        pageNo: 1,
        pageSize: 4
      },
      btnConfig: BUTTON_CONFIG
    };
  },
  computed: {
    showEmpy() {
      return this.finished && !this.receiptsList.length;
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    goInvoiceReceiptAfter(item) {
      const invoiceSerialNum = item.invoiceSerialNum;
      this.jumpAppUrl('/electronicReceipt/invoiceReceiptAfter', { invoiceSerialNum });
    },
    async onLoad() {
      this.loading = true;
      try {
        const [res, error] = await api.getReceiptList(this.queryParams);
        if (!error) {
          this.receiptsList = [...this.receiptsList, ...(res.invoiceList || [])];
          this.loading = false;
          if (res.hasNext) {
            this.queryParams.pageNo++;
          } else {
            this.finished = true;
          }
        } else {
          this.loading = false;
          this.finished = true;
        }
      } catch (error) {
        console.log(error);
        this.loading = false;
        this.finished = true;
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import '../components/common.less';

.state-1,
.state-4 {
  color: @orange;
}
.state-2,
.state-5 {
  color: #07c160;
}
.state-3,
.state-6 {
  color: @red-dark;
}

.card {
  background-color: @white;
  border-radius: 10px;
  border: 1px solid @white;
  width: 352px;
  margin: 0 auto;
  margin-bottom: 12px;
  &-time {
    display: flex;
    justify-content: space-between;
    padding: 15px 13px;
    .border-bottom(0, inherit);
    &__left {
      color: @gray-4;
      .text-size(12);
    }

    &__right {
      .text-size(14);
      font-weight: bold;
    }
  }
  &-info {
    padding: 12px;

    &__wrapper {
      padding: 12px 10px 10px 12px;
      background: @gray-1;
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &__value {
      dt {
        .text-size(14);
        margin-bottom: 8px;
      }
      dd {
        .text-size(12);
        max-width: 230px;
        color: @gray-4;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    &__price {
      text-align: right;
      p {
        .text-size(12);
        color: @gray-4;
      }
      h3 {
        .text-size(18);
        font-weight: bold;
      }
    }
  }
  &-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 9px;
    padding-bottom: 12px;
    @{deep} .cr-button {
      margin-left: 8px;
    }
    @{deep} .cr-button--default {
      color: #666666;
      &::before {
        border-color: #999999;
      }
    }
  }
}
</style>
