<template>
  <view class="container">
    <wd-icon name="thin-arrow-left" class="icon" @tap="back"></wd-icon>
    <scroll-view class="tabs" scroll-x="true" @scroll="scroll">
      <text
        @tap="choice(index, item.value)"
        class="tab"
        :class="{ light: active === index }"
        v-for="(item, index) in tabs"
        :key="index"
      >
        {{ item.label }}
      </text>
    </scroll-view>
    <view class="itemBox">
      <view
        class="item"
        v-for="(item, index) in listData"
        :key="index"
        @tap="toDetail(item.shopId)"
      >
        <image class="commodity" :src="item.shopLogo" mode="aspectFill" />
        <view class="describe">
          <text class="title">{{ item.shopName }}</text>
          <view class="oneBox">
            <text class="price">￥{{ item.price }}</text>
            <view class="afterTheCoupon">
              <text class="afterTheCoupon1">券后￥</text>
              <text class="afterTheCoupon2">{{ (item.price - item.reduceAmount).toFixed(1) }}</text>
            </view>
          </view>
          <view class="twoBox">
            <text class="coupon">商家券</text>
            <text class="discounted">已优惠￥{{ item.reduceAmount }}元</text>
          </view>
          <view class="threeBox">
            <text class="fullReduction">{{ item.couponName }}</text>
            <view class="receive">领劵</view>
          </view>
        </view>
      </view>
      <wd-status-tip image="content" tip="暂无内容" v-if="listData.length === 0" />
      <view
        style="width: 100%; text-align: center; font-size: 24rpx; margin: 10rpx 0; color: #888989"
        v-if="show"
      >
        没有更多啦~
      </view>
    </view>
  </view>
</template>

<script setup>
import {} from 'vue';
import { getCoupon, getShopAndProdPage } from '../../api/index';
import { getLocation } from '../../utils/tool';
const tabs = ref(['推荐', '附近美食', '果蔬生鲜', '数码商城', '小吃快餐', '数码商城', '餐饮券']);
const params = {
  current: 1,
  size: 6,
};
let total;
const active = ref(0);
const listData = ref([]);
const show = ref(false);
// 获取优惠券
onMounted(() => {
  getCoupons();
  getShop();
});
const back = () => {
  xma.navigateBack({
    delta: 1,
  });
};
const toDetail = (id) => {
  xma.navigateTo({
    url: `/pages/ticket/detail?shopId=${id}`,
  });
};
// 数据重置
const reset = () => {
  params.current = 1;
  params.size = 6;
  listData.value = [];
  show.value = false;
};
const choice = (index, value) => {
  reset();
  active.value = index;
  if (value === '999') {
    delete params.classification;
  } else {
    params.classification = value;
  }
  getShop();
  // emit('nearby', distance);
};
// 领券中心-分类列表
const getCoupons = () => {
  getCoupon().then((res) => {
    res.data.unshift({ label: '推荐', value: '999' });
    tabs.value = res.data;
    console.log('优惠券', res);
  });
};

// 领券中心-店铺商品列表分页
const getShop = async () => {
  xma.showLoading({
    title: '加载中',
  });
  const { lon, lat } = await getLocation();
  params.lng = lon;
  params.lat = lat;
  getShopAndProdPage(params).then((res) => {
    xma.hideLoading();
    total = res.data.total;
    res.data.records.forEach((item) => {
      item.pic = import.meta.env.VITE_APP_IMG_URL + item.pic;
      item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
    });
    console.log('优惠券', res);
    listData.value = [...listData.value, ...res.data.records];
  });
};

onPullDownRefresh(() => {
  getCoupons();
  getShop();
});
onReachBottom(() => {
  if (listData.value.length < total) {
    params.current++;
    getShop();
    return;
  }
  show.value = true;
});
</script>

<style lang="scss" scoped>
page {
  background: #f3f3f3;
}
.container {
  position: relative;
  .icon {
    font-size: 28rpx;
    margin-right: 40rpx;
    position: absolute;
    left: 30rpx;
    top: 37rpx;
    z-index: 999;
  }
  .tabs {
    white-space: nowrap;
    padding: 0 30rpx;
    padding-left: 80rpx;
    box-sizing: border-box;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
    background: white;
    position: sticky;
    top: 0;
    z-index: 99;

    .tab {
      display: inline-block;
      margin-right: 40rpx;
    }
    .light {
      color: #f12a2a;
    }
  }
  .itemBox {
    padding: 0 23rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 341rpx;
      // height: 674rpx;
      background: #ffffff;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin-bottom: 18rpx;
      box-sizing: border-box;
      padding-bottom: 20rpx;
      // flex-shrink: 0;
      .commodity {
        width: 341rpx;
        height: 401rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
      }
      .describe {
        padding: 0 12rpx;
        box-sizing: border-box;
        .title {
          font-weight: bold;
          color: #333333;
          font-size: 26rpx;
          font-family:
            PingFang SC,
            PingFang SC;
          display: inline-block;
          height: 80rpx;
        }
        .oneBox {
          display: flex;
          align-items: end;
          margin-bottom: 20rpx;
          .price {
            font-weight: bold;
            color: #f12a2a;
            font-size: 28rpx;
          }
          .afterTheCoupon {
            border-radius: 21rpx 21rpx 21rpx 21rpx;
            // height: 41rpx;
            text-align: center;
            padding: 0 10rpx;
            background: #f12a2a;
            margin-left: 20rpx;
            display: flex;
            align-items: center;
            .afterTheCoupon1 {
              color: #ffffff;
              font-size: 20rpx;
            }
            .afterTheCoupon2 {
              color: #ffffff;
              font-size: 36rpx;
            }
          }
        }
        .twoBox {
          display: flex;
          align-items: center;
          .coupon {
            text-align: center;
            height: 32rpx;
            font-size: 22rpx;
            line-height: 32rpx;
            min-width: 73rpx;
            color: #ffffff;
            border-radius: 6rpx 6rpx 6rpx 6rpx;
            background: linear-gradient(90deg, #ff4d33 0%, #ff1d2e 100%);
          }
          .discounted {
            font-size: 20rpx;
            min-width: 136rpx;
            height: 28rpx;
            color: #f12a2a;
            font-weight: 400;
            background: #feebf0;
            border-radius: 6rpx 6rpx 6rpx 6rpx;
            line-height: 28rpx;
            text-align: center;
          }
        }
        .threeBox {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 13rpx;
          .fullReduction {
            font-size: 20rpx;
            font-family:
              PingFang SC,
              PingFang SC;
            font-weight: 400;
            color: #f12a2a;
          }
          .receive {
            background: linear-gradient(90deg, #ff4d33 0%, #ff1d2e 100%);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            height: 35rpx;
            width: 81rpx;
            text-align: center;
            line-height: 35rpx;
            color: #ffffff;
            font-size: 24rpx;
          }
        }
      }
    }
  }
}
</style>
