<template>
  <BasePage>
    <div class="merchanttrade">
      <div class="top">
        <div class="line">
          <!-- <van-popover v-model:show="showPopover" :actions="option" @select="onSelect">
            <template #reference>
              <div class="pop_box">
                {{ value }}
                <img src="/img/down.png" alt="">
              </div>
            </template>
</van-popover> -->

          <div class="inputbox">
            <input v-model="searchKey" type="text" placeholder="订单编号搜索" @keydown.enter="filterList">
            <van-icon name="search" @click="filterList"></van-icon>
          </div>
        </div>
        <van-tabs v-model:active="searchParams.TradeStates" line-height="1.333vw" line-width="8vw" color="#22a56e"
          title-active-color="#222222" title-inactive-color="#222" @change="filterList">
          <van-tab title="全部" :name="99"></van-tab>
          <van-tab title="待付款" :name="0"></van-tab>
          <van-tab title="待处理" :name="2"></van-tab>
          <van-tab title="已完成" :name="4"></van-tab>
        </van-tabs>
      </div>

      <div class="mct-list">
        <div class="mct-item" v-for="item in filteredList">
          <div class="mct-top">
            <span class="orderNum"> 订单号：{{ item.TradeCode }}</span>
            <span class="state r" :class="getStateClass(item.TradeStates)"
              @click="$navigate(`MerchantTradeDetail?id=${item.TradeCode}`)">
              {{ GiftName[item.TradeStates] }}<van-icon name="arrow"></van-icon></span>
          </div>
          <div class="mct-user">
            <img :src="$file(item.Avatar)">
            <div>
              <span class="name">{{ item.NickName }}</span>
              <p>{{ item.Phone }}</p>
            </div>
            <span class="r">¥{{ item.OriginAmount }}</span>
          </div>
          <div class="_code">
            <span>
              下单人：13345678912
            </span>
            <span class="r">昵称：张保保</span>
          </div>
        </div>
      </div>
    </div>
  </BasePage>
</template>

<script>
export default {
  name: 'MerchantTrade',
  data() {
    return {
      GiftName: { 0: '待付款', 1: '待处理', 2: '待处理', 3: '已完成', 4: '已完成' },
      option: [
        { text: '全部' },
        { text: '单人优享' },
        { text: '家庭尊享' },
        { text: '购机' },
      ],
      searchParams: {
        GiftArea: 'ALL',
        TradeStates: 99,
        GiftType: 'ALL'
      },
      searchKey: '',
      value: '全部',
      allList: [
        { TradeCode: 'T20240418001', SkuSpecName: '年卡', TradeStates: 4, Avatar: '/img/co-1.png', NickName: '张三', Phone: '13800138001', OriginAmount: 2999.00, GiftArea: 'Store' },
        { TradeCode: 'T20240418002', SkuSpecName: '月卡', TradeStates: 2, Avatar: '/img/co-2.png', NickName: '李四', Phone: '13800138002', OriginAmount: 299.00, GiftArea: 'Rent' },
        { TradeCode: 'T20240418003', SkuSpecName: '季卡', TradeStates: 0, Avatar: '/img/co-3.png', NickName: '王五', Phone: '13800138003', OriginAmount: 899.00, GiftArea: 'Store' },
        { TradeCode: 'T20240417001', SkuSpecName: '半年卡', TradeStates: 4, Avatar: '/img/co.png', NickName: '赵六', Phone: '13800138004', OriginAmount: 1699.00, GiftArea: 'Buy' },
        { TradeCode: 'T20240417002', SkuSpecName: '体验卡', TradeStates: 4, Avatar: '/img/co-1.png', NickName: '钱七', Phone: '13800138005', OriginAmount: 99.00, GiftArea: 'Rent' },
      ]
    }
  },
  computed: {
    filteredList() {
      let result = [...this.allList];
      if (this.searchParams.GiftArea !== 'ALL') {
        result = result.filter(x => x.GiftArea === this.searchParams.GiftArea);
      }
      if (this.searchParams.TradeStates !== 99) {
        result = result.filter(x => x.TradeStates === this.searchParams.TradeStates);
      }
      if (this.searchParams.GiftType !== 'ALL') {
        // simplified filter
      }
      if (this.searchKey) {
        result = result.filter(x => x.TradeCode.includes(this.searchKey));
      }
      return result;
    }
  },
  methods: {
    filterList() {
      // trigger computed
    },
    onSelect(option) {
      this.value = option.text;
    },
    getStateClass(state) {
      switch (state) {
        case 4:
          return 'green';
        case 3:
          return 'green';
        case 2:
          return 'yellow';
        case 1:
          return 'yellow';
        case 0:
          return 'red';
        default:
          return '';
      }
    }
  },

}
</script>
