<template>
  <div class="ticket-order">
    <cr-dropdown-menu class="ticket-dropdown">
      <cr-dropdown-item
        v-model="queryParams.invoicePageType"
        title-class="ticket-dropdown-item"
        :options="option"
      />
      <span class="ticket-dropdown-help" @click="helpClickEvent">查看开票规则</span>
    </cr-dropdown-menu>
    <div v-if="invoiceMsg" class="ticket-message">
      <cr-icon type="info-o" size="15px" color="#c8c9cc" />
      <div class="ticket-message-left">
        <span class="ticket-message-red">可“合并开票”订单</span>
        <span class="ticket-message-black">请点击「筛选」切换</span>
      </div>
      <cr-icon type="cross" size="18px" color="#c8c9cc" @click="closeInvoiceMsg" />
    </div>
    <template v-if="!showEmpy">
      <cr-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :offset="100"
        class="ticket-list"
        loading-text=" "
        @load="onLoad"
      >
        <ProductCard
          v-for="item in orders"
          :key="item.id"
          :orders="item"
          @change="changeChecked"
          @customer="goCustomer"
        />
      </cr-list>
      <CheckedAll
        :check-all.sync="checkAll"
        :all-price="allPrice"
        :btn-disabled="btnDisabled"
        :check-disabled="checkDisabled"
        @change="checkAllOptions"
        @submit="showMergeMsgDialog"
      />
    </template>
    <Empy v-else />
  </div>
</template>

<script>
import api from '@/api/receipts.js';
import ProductCard from '../components/productCard.vue';
import CheckedAll from '../components/checkedAll.vue';
import Empy from '../components/empy.vue';
import jumpAppMixin from '../mixins/jumpApp.mixin';
import checkboxMixin from '../mixins/checkbox.mixin';
import customerMixin from '../mixins/customer.mixin';
import { afterStatusConfig } from '../config';
import localStorageService from '@/service/localStorage.service';

export default {
  components: {
    CheckedAll,
    ProductCard,
    Empy
  },
  mixins: [jumpAppMixin, checkboxMixin, customerMixin],
  props: {
    dropdownIndex: {
      type: Number,
      default: 1
    }
  },
  data() {
    const dropdownIndex = this.dropdownIndex;
    const invoiceMsg = localStorageService.get('invoiceMsg') || '';
    return {
      invoiceMsg: !invoiceMsg,
      option: [
        { text: '所有订单', value: 1 },
        { text: '可单独开票订单', value: 3 },
        { text: '可合并开票订单', value: 2 }
      ],

      finished: false,
      orders: [],
      queryParams: {
        pageNo: 1,
        pageSize: 5,
        invoicePageType: dropdownIndex
      }
    };
  },
  computed: {
    showEmpy() {
      return this.finished && !this.orders.length;
    }
  },
  watch: {
    'queryParams.invoicePageType': {
      handler(value) {
        this.$emit('update:dropdownIndex', value);
        this.resetOrderList();
      }
    }
  },
  methods: {
    helpClickEvent() {
      this.jumpAppUrl('/electronicReceipt/invoiceHelp');
    },
    closeInvoiceMsg() {
      localStorageService.set('invoiceMsg', 1);
      this.invoiceMsg = false;
    },
    dropdownChange(option) {
      console.log(option);
    },
    resetOrderList() {
      this.orders = [];
      this.queryParams.pageNo = 1;
      this.finished = false;
      this.onLoad();
    },
    async onLoad() {
      this.loading = true;
      try {
        const [res, error] = await api.getOrderList(this.queryParams);
        if (!error) {
          const newOrderList = this.filterOrderList(res.orderList || []);
          this.orders = [...this.orders, ...newOrderList];
          this.loading = false;
          this.checkAll = false;
          if (res.hasNext) {
            this.queryParams.pageNo++;
          } else {
            this.finished = true;
          }
        } else {
          this.loading = false;
          this.finished = true;
        }
      } catch (error) {
        console.log(error);
      }
    },
    filterOrderList(orderList) {
      return orderList.map(item => {
        const { skuList, ...other } = item;
        item.totalNum = skuList.reduce((sum, temp) => (sum += temp.count), 0);
        const filterItem = this.filterOrderItem(other);
        return { checked: false, ...item, ...filterItem };
      });
    },
    filterOrderItem(item) {
      const resetItem = { checked: false, disabled: false, warnMessage: '' };
      if (item.zero) {
        resetItem.disabled = true;
        resetItem.warnMessage = '除运费外实际支付为0的订单不支持发票开具';
      } else if (item.overAmt) {
        resetItem.customer = true;
        resetItem.disabled = true;
        resetItem.warnMessage = '10万元以上（含10万元）暂不支持开具电子发票';
      } else if (item.afterStatus !== 0) {
        resetItem.disabled = true;
        resetItem.warnMessage = afterStatusConfig[item.afterStatus];
      }
      return resetItem;
    }
  }
};
</script>

<style lang="less" scoped>
.ticket-order {
  padding-top: 40px;
}
.ticket-dropdown {
  position: fixed;
  top: 44px;
  left: 0;
  width: 100%;
  height: 36px;
  z-index: 1;
  background: #ffffff;
  padding-left: 16px;
  padding-right: 12px;
  box-sizing: border-box;
  @{deep} .cr-dropdown-menu__item {
    justify-content: initial;
    .ellipsis {
      .text-size(14);
      font-weight: bold;
    }
  }
  @{deep} .cr-dropdown-menu__title--active {
    color: @black;
  }
  @{deep} .cr-dropdown-menu__title::after {
    border: 5px solid;
    border-color: transparent transparent @black @black;
    top: calc(50% - 3px);
    right: -10px;
    opacity: 1;
  }

  @{deep} .cr-dropdown-menu__title--active::after {
    top: 50%;
  }
  @{deep} .cr-dropdown-item__option--selected {
    .cr-cell__title {
      color: @red;
      font-weight: bold;
    }
  }
  @{deep} .cr-dropdown-item__option {
    padding: 0;
    height: 35px;
    line-height: 35px;
    padding-left: 28px;
    &::after {
      display: none;
    }
    .cr-cell__value {
      display: none;
    }
  }
  &-help {
    .text-size(14);
    color: @black;
    display: flex;
    align-items: center;
  }
}
.ticket-message {
  .text-size(12);
  color: @black;
  width: 352px;
  height: 30px;
  display: flex;
  align-items: center;
  background: @white;
  border-radius: 4px;
  margin: 0 auto 8px auto;
  padding: 0 8px;
  box-sizing: border-box;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: @white;
    left: 26px;
    top: -5px;
    transform: rotate(45deg);
  }
  &-left {
    flex: 1;
  }
  &-red {
    color: @red;
    margin-left: 4px;
  }
}

.ticket-list {
  padding-bottom: calc(60px + constant(safe-area-inset-bottom));
  padding-bottom: calc(60px + env(safe-area-inset-bottom));
}
</style>
