<template>
  <view class="flex-column-start order-list-container">
    <tabs-list
      :list="tabsList"
      :isScroll="false"
      :currentIndex="curTabIndex"
      flexClass="flex-row-around"
      @change="onTabChange"
    />
    <view class="order-list-content">
      <list-page-temp
        :requestData="{ status: tabsList[curTabIndex].id }"
        :getDataPromise="getMyServiceCouponList"
        :reloadFlag="reloadFlag"
      >
        <template v-slot:item="{ data }">
          <service-coupon-item
            :data="data"
            :showOptBtn="false"
            :disabled="data.status === 3 || data.status === 4"
            :showOrderBtn="data.status === 2"
            @jumpToDetails="jumpToDetails"
          >
            <image
              v-if="data.status === 3"
              slot="status"
              class="use-icon"
              src="./static/coupon_used.png"
            />
          </service-coupon-item>
        </template>
      </list-page-temp>
    </view>
  </view>
</template>

<script>
import TabsList from "@/components/TabsList.vue";
import ListPageTemp from "./ListPageTemp.vue";
import ServiceCouponItem from "@/components/coupon/ServiceCouponItem";

import { getMyServiceCouponList } from "@/api/coupon";

export default {
  components: {
    TabsList,
    ListPageTemp,
    ServiceCouponItem,
  },
  data() {
    return {
      curTabIndex: 0,
      reloadFlag: 0,
    };
  },
  computed: {
    tabsList() {
      return [
        {
          name: "待使用",
          id: 2,
        },
        {
          name: "已使用",
          id: 3,
        },
        {
          name: "已过期",
          id: 4,
        },
      ];
    },
  },
  options: {
    styleIsolation: "shared",
  },
  onShow() {
    this.reloadFlag = Math.random();
  },
  methods: {
    getMyServiceCouponList,
    onTabChange(item, index) {
      this.curTabIndex = index;
    },
    jumpToDetails(data) {
      uni.navigateTo({
        url: `/pages/client/service/details?id=${data.fuwuquan_id}`
      })
    } 
  },
};
</script>

<style lang="scss" scoped>
.order-list-container {
  height: 100%;
  align-items: stretch;
  justify-content: flex-start;

  ::v-deep {
    .list-wrapper {
      padding: 0 100rpx;
    }
  }

  .order-list-content {
    flex: 1;
    overflow: hidden;
    padding-left: 32rpx;

    ::v-deep {
      .coupon-price {
        color: $app_fc_alarm;
      }
    }

    .use-icon {
      width: 100rpx;
      height: 100rpx;
    }
  }
}
</style>
