<template>
  <view class="special-offer-zone-list-page">
    <view class="swiper">
      <wd-swiper
        customClass="swiper-custom"
        :list="shopSwiperList"
        autoplay
        height="440rpx"
        customStyle="border-radius: 0rpx !important;"
        :current="current"
        @click="handleClick"
        @change="onChange"
        :indicator="{ type: 'dots-bar' }"
      >
        <template #indicator="{ current, total }">
          <view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">
            {{ current + 1 }}/{{ total }}
          </view>
        </template>
      </wd-swiper>

      <!--        列表-->
      <view class="bootom">
        <view class="bootom-top">
          <view class="option" @tap="locationFiltering(0)">
            <text :class="{ rotate: rotate }">智能排序</text>
            <wd-icon
              :class="{ rotate: rotate }"
              name="fill-arrow-down"
              size="24rpx"
              class="icons"
            ></wd-icon>
          </view>
        </view>
        <view class="bootom-top">
          <view class="option" @tap="locationFiltering(1)">
            <text :class="{ rotate: rotate2 }">出发日期</text>
            <wd-icon
              :class="{ rotate: rotate2 }"
              name="fill-arrow-down"
              size="24rpx"
              class="icons"
            ></wd-icon>
          </view>
        </view>
        <view class="bootom-top">
          <view class="option" @tap="locationFiltering(2)">
            <text :class="{ rotate: rotate3 }">景点</text>
            <wd-icon
              :class="{ rotate: rotate3 }"
              name="fill-arrow-down"
              size="24rpx"
              class="icons"
            ></wd-icon>
          </view>
        </view>
        <view class="bootom-top">
          <view class="option" @tap="locationFiltering(3)">
            <text :class="{ rotate: rotate4 }">筛选</text>
            <wd-icon
              :class="{ rotate: rotate4 }"
              name="fill-arrow-down"
              size="24rpx"
              class="icons"
            ></wd-icon>
          </view>
        </view>
        <Sort v-show="rotate" />
        <DepartureDate v-show="rotate2" />
        <ScenicSpots v-show="rotate3" />
        <Screen v-show="rotate4" />
      </view>
      <view class="list">
        <view class="item" v-for="i in 10" :key="i">
          <image mode="aspectFill" src="@/static/assistingAgriculture/reviewDetails/fj.png"></image>
          <view class="info">
            <text class="title multi-line">红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游</text>
            <text class="subtitle">赠价值59元特产伴手礼一份</text>
            <view class="tag-list">
              <text class="tag">可定明日</text>
              <text class="tag">可定明日</text>
              <text class="tag">可定明日</text>
            </view>
            <view class="fs-box">
              <text class="fs-num">4.9分</text>
              <text style="margin-left: 20rpx" class="sales-volume">月销2000+</text>
            </view>
            <text class="address">云岩出发</text>
          </view>
          <text class="price">¥299.00</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import Sort from '../../../components/assistingAgriculture/index/Sort.vue';
import DepartureDate from '../../../components/assistingAgriculture/index/DepartureDate.vue';
import ScenicSpots from '../../../components/assistingAgriculture/index/ScenicSpots.vue';
import Screen from '../../../components/assistingAgriculture/index/Screen.vue';
const rotate = ref(false);
const rotate2 = ref(false);
const rotate3 = ref(false);
const rotate4 = ref(false);
const current = ref(0);
const shopSwiperList = ref([
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
]);
const locationFiltering = (index) => {
  switch (index) {
    case 0:
      rotate.value = !rotate.value;
      rotate2.value = false;
      rotate3.value = false;
      rotate4.value = false;
      break;
    case 1:
      rotate2.value = !rotate2.value;
      rotate.value = false;
      rotate3.value = false;
      rotate4.value = false;
      break;
    case 2:
      rotate3.value = !rotate3.value;
      rotate.value = false;
      rotate2.value = false;
      rotate4.value = false;
      break;
    case 3:
      rotate4.value = !rotate4.value;
      rotate.value = false;
      rotate2.value = false;
      rotate3.value = false;
      break;
  }
};
function handleClick(e) {
  console.log(e);
}
function onChange(e) {
  console.log(e);
}
</script>

<style lang="scss" scoped>
page {
  background: #f3f3f3;
}
.special-offer-zone-list-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 750rpx;
  .custom-indicator {
    padding: 0 12rpx;
    height: 48rpx;
    line-height: 48rpx;
    border-radius: 45%;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 24rpx;
  }
  .swiper {
    width: 100%;
    :deep(.wd-swiper__track) {
      border-radius: 0;
    }
  }
  .bootom {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-radius: 6rpx;
    position: relative;
    margin-top: 20rpx;
    .bootom-top {
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      justify-content: space-between;
      .option {
        text {
          font-size: 24rpx;
          color: #343434;
        }
        .red {
          color: #fa5151;
        }
        .icons {
          color: #d8d8d8;
          transform: rotate(-180deg);
          transition: all 0.3s linear;
        }
        .rotate {
          transform: rotate(0deg);
          transition: all 0.3s linear;
          color: #fa5151;
        }
      }
      .light {
        color: #ff7c00;
        background: #ffdcbb;
      }
    }
  }
  .list {
    width: 335 * 2rpx;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    border-radius: 16rpx;
    margin-top: 20rpx;
    .item {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
      display: flex;
      image {
        width: 240rpx;
        height: 240rpx;
        border-radius: 16rpx;
        flex-shrink: 0;
      }
      .info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 20rpx;
        .title {
          max-width: 400rpx;
          font-size: 14 * 2rpx;
          color: #3d3d3d;
        }
        .subtitle {
          font-size: 11 * 2rpx;
          color: #666666;
          margin-top: 10rpx;
        }
        .tag-list {
          display: flex;
          flex-wrap: wrap;
          margin-top: 10rpx;
          .tag {
            box-sizing: border-box;
            padding: 10rpx 16rpx;
            background: #eee;
            color: #3d3d3d;
            font-size: 16rpx;
            border-radius: 30rpx;
            margin-top: 10rpx;
            margin-left: 10rpx;
          }
        }
        .fs-box {
          margin-top: 10rpx;
          font-size: 12 * 2rpx;
          color: #0974f5;
        }
        .address {
          margin-top: 10rpx;
          font-size: 12 * 2rpx;
          color: #0974f5;
        }
      }
      .price {
        font-size: 14 * 2rpx;
        font-weight: bold;
        /* 主题色 */
        color: #fa5151;
        align-self: flex-end;
      }
    }
  }
}
</style>
