<template>
  <BasePage>
    <div class="tradelist">
      <div class="tabs">
        <van-tabs class="area" v-model:active="TradeArea" color="#f00" title-active-color="#222"
          title-inactive-color="#999" line-width="0" line-height=".667vw" @change="changeMall">
          <van-tab v-for="i in mallList" :title="i.label" :name="i.value"></van-tab>
        </van-tabs>

        <van-tabs class="states" v-model:active="activeTab" color="#ca2904" title-active-color="#ca2904"
          title-inactive-color="#000" line-width="4vw" line-height=".667vw" @change="onTabChange">
          <van-tab title="全部" name=""></van-tab>
          <van-tab v-for="i in tradeStates" :title="i.label" :name="String(i.value)"></van-tab>
        </van-tabs>
      </div>
      <van-search v-model="searchParams.ordernum" left-icon=" " shape="round" placeholder="输入订单号搜索" @search="onSearch"
        @clear="onClear">
        <template #right-icon>
          <van-icon name="/img/sort-search.png" @click="onSearch"></van-icon>
        </template>
      </van-search>

      <BaseList v-if="TradeArea !== 2" ref="baseList" url="/v1/client/FOrdersClient" :params="searchParams"
        :parseData="res => res.data.items" style="padding: 3.33vw;" @refresh="onRefresh">
        <template #default="{ item }">
          <div class="list">
            <div class="order_box">
              <span>
                订单编号:{{ item.ordernum }}
              </span>
              <img src="/img/copy_b.png" @click="$copyText(item.ordernum); $showSuccessToast('复制成功')" alt="">
            </div>

            <div class="goods_box">
              <img :src="$file(item.proimg)" alt="">

              <div class="goods_info">
                <div class="tit">{{ item.proname }}</div>
                <div class="spec">
                  <span>{{ item.proskuname }}</span>
                  <p>x{{ item.buynums }}</p>
                </div>
                <div class="concession">
                  <span>¥{{ item.realmoney?.toFixed(2) }}</span>
                  <p v-if="item.discountratio">{{ item.discountratio }}%让利</p>
                </div>
              </div>
            </div>

            <div class="price">
              实付：<span>￥<b>9999.05</b></span>
            </div>

            <div class="state_box">
              <b :class="'b' + item.state">
                {{ item.statename }}
              </b>

              <div class="btn_box">
                <button v-if="item.state === 0">取消订单</button>
                <button v-if="item.state === 3">查看物流</button>
                <button @click="$navigate(`TradeDetail?ordernum=${item.ordernum}`)">查看详情</button>
                <button v-if="item.state === 0">立即支付</button>
              </div>
            </div>
          </div>
        </template>
      </BaseList>

      <BaseList v-else ref="baseList" url="/v1/client/FOrdersshopClient" :params="searchParams"
        :parseData="res => res.data.items" style="padding: 3.33vw;" @refresh="onRefresh">
        <template #default="{ item }">
          <div class="list">
            <div class="merchant_info">
              <img class="icon" :src="$file(item.shopimg)" alt="">
              <div class="inf">
                <span>{{ item.shopname }}</span>
                <div>
                  <p>￥{{ item.ordermoney?.toFixed(2) }}</p>
                  <span class="dr" v-if="item.discountratio">
                    {{ item.discountratio }}%让利
                  </span>
                </div>
              </div>
            </div>

            <div class="price">
              实付：<span>￥<b>{{ item.ordermoney?.toFixed(2) }}</b></span>
            </div>

            <div class="detail_box">
              <div>
                <span>订单编号:</span>
                <span class="r">
                  {{ item.ordernum }}
                  <img src="/img/copy_b.png" @click="$copyText(item.ordernum); $showSuccessToast('复制成功')" alt="">
                </span>
              </div>

              <div>
                <span>下单时间:</span>
                <span class="r">
                  {{ $formatGMT(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}
                </span>
              </div>
            </div>

            <div class="state_box">
              <b :class="'b' + item.state">
                {{ item.statename }}
              </b>

              <div class="btn_box">
                <button @click="$navigate(`CheckoutTrade?ordernum=${item.ordernum}&type=user`)">查看详情</button>
              </div>
            </div>
          </div>
        </template>
      </BaseList>


    </div>
  </BasePage>
</template>

<script>
export default {
  name: 'TradeList',
  data() {
    return {
      activeTab: '',
      TradeArea: Number(this.$route.query.TradeArea) || 3,
      searchParams: {
        ordernum: '',
        state: '',
        mallstate: Number(this.$route.query.TradeArea) || 3,
      },
      tradeStates: [
      ],
      mallList: [
        { value: 3, label: '商城订单' },
        { value: 1, label: '礼包订单' },
        { value: 2, label: '买单订单' },
      ],
    }
  },
  mounted() {
    this.getTradeStates();
  },
  watch: {
    TradeArea(val) {
      this.searchParams.mallstate = val;
    },
    '$route.query.state': {
      handler(newVal) {
        if (newVal !== undefined && newVal !== '') {
          this.activeTab = String(newVal);
          // this.getTradeStates();
        } else {
          this.activeTab = '';
        }
      }
    }
  },
  methods: {
    back() {
      this.$router.push('/My')
    },
    onTabChange(name) {
      this.searchParams.state = name;
      this.$refs.baseList?.refresh();
    },
    changeMall(name) {
      this.searchParams.mallstate = Number(name) || 3;
      this.searchParams.state = '';
      this.$refs.baseList?.refresh();
    },
    onSearch() {
      this.$refs.baseList?.refresh();
    },
    onClear() {
      this.searchParams.ordernum = '';
      this.$refs.baseList?.refresh();
    },
    getTradeStates() {
      this.$get('/v1/client/FOrdersClient/orderstate').then(res => {
        this.tradeStates = res.data;
        this.$nextTick(() => {
          const stateFromRoute = this.$route.query.state;
          if (stateFromRoute !== undefined && stateFromRoute !== '') {
            this.activeTab = String(stateFromRoute);
            this.searchParams.state = stateFromRoute;
          }
        });
      }).catch((err) => {
        this.$showFailToast(err.message || '获取订单状态失败');
      });
    },
    onRefresh() {
    },
    cancelTrade(item) {
      this.$showConfirmDialog({
        title: "是否确认取消订单",
      }).then(() => {
        this.$put(`/v1/client/FOrdersClient/${item.ordernum}/cancel`).then(() => {
          this.$showSuccessToast('取消订单成功');
          this.$refs.baseList?.refresh();
        }).catch(err => {
          this.$showFailToast(err.message || '取消失败');
        });
      }).catch(() => { });
    },
  }
}
</script>
