<template>
  <view>
    <view class="container">
      <view class="top">
        <Search
          background="rgba(255, 255, 255, 0.8)"
          backIcon="black"
          iconSrc="/static/assets/left.png"
          placeholderText="请输入要搜索的关键词"
        ></Search>
      </view>
      <view class="bac-img">
        <img class="bac" src="/static/rural/bacImg.png" style="width: 750rpx; height: 440rpx" />
      </view>
      <!--      热门-->
      <view style="display: flex; flex-direction: row">
        <view class="left-offer">
          <text class="left-title">特价专区</text>
          <img
            class="special-icon"
            src="/static/rural/specialOffer.png"
            style="width: 29rpx; height: 25rpx"
          />
          <img class="spe-img" src="/static/rural/img7.png" style="width: 306rpx; height: 204rpx" />
        </view>
        <view class="right-offer">
          <text class="left-title">日游直播</text>
          <img
            class="special-icon"
            src="/static/rural/dayTOur.png"
            style="width: 32rpx; height: 32rpx"
          />
          <img class="spe-img" src="/static/rural/img5.png" style="width: 306rpx; height: 204rpx" />
        </view>
      </view>
      <view class="hot-way">
        <view class="hot-title">热门路线</view>
        <view class="title-des">/ 玩转当地超值体验</view>
        <scroll-view
          class="scroll-x"
          show-scrollbar="false"
          scroll-x
          :scroll-with-animation="true"
          @scroll="scroll"
        >
          <view class="foodCard" v-for="(item, index) in 5" :key="index">
            <!--            <img-->
            <!--              class="img-icon"-->
            <!--              src="/static/rural/icon.png"-->
            <!--              style="width: 118rpx; height: 32rpx"-->
            <!--            />-->
            <image class="test5" src="/static/rural/img4.png" mode="widthFix" />
          </view>
        </scroll-view>
        <!--        列表-->
        <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-card">
          <view
            class="card-detail"
            v-for="(item, index) in cardList"
            :key="index"
            @tap="toRouteDetails"
          >
            <img class="card-img" :src="item.img" style="width: 248rpx; height: 240rpx" />
            <view class="detail-text">
              <text class="detail-title">{{ item.title }}</text>
              <text class="give">{{ item.give }}</text>
              <view class="tag">
                <wd-tag
                  bg-color="#EEEEEE"
                  round
                  v-for="(tag, tagIndex) in item.tag"
                  :key="tagIndex"
                >
                  {{ tag }}
                </wd-tag>
              </view>
              <view class="detail-score">
                <text class="score">{{ item.score }}分</text>
                <text class="num">月销{{ item.num }}</text>
              </view>
              <view class="venue">
                <text class="place">{{ item.place }}</text>
                <text class="price">￥{{ item.price }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Search from '../../components/index/Search.vue';
import Sort from '../../components/index/Sort.vue';
import DepartureDate from '../../components/index/DepartureDate.vue';
import ScenicSpots from '../../components/index/ScenicSpots.vue';
import Screen from '../../components/index/Screen.vue';

const rotate = ref(false);
const rotate2 = ref(false);
const rotate3 = ref(false);
const rotate4 = ref(false);
const cardList = ref([
  {
    img: '/static/rural/img2.png',
    title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
    give: '赠价值59元特产伴手礼一份',
    tag: ['可定明日', '无购物', '含保险'],
    score: '4.9',
    num: '2000',
    place: '云岩出发',
    price: '299.00',
  },
  {
    img: '/static/rural/img2.png',
    title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
    give: '赠价值59元特产伴手礼一份',
    tag: ['可定明日', '无购物', '含保险'],
    score: '4.9',
    num: '2000',
    place: '云岩出发',
    price: '299.00',
  },
  {
    img: '/static/rural/img2.png',
    title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
    give: '赠价值59元特产伴手礼一份',
    tag: ['可定明日', '无购物', '含保险'],
    score: '4.9',
    num: '2000',
    place: '云岩出发',
    price: '299.00',
  },
  {
    img: '/static/rural/img2.png',
    title: '红枫湖+青岩古镇+云漫湖+云顶高坡景区一日游',
    give: '赠价值59元特产伴手礼一份',
    tag: ['可定明日', '无购物', '含保险'],
    score: '4.9',
    num: '2000',
    place: '云岩出发',
    price: '299.00',
  },
]);
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 toRouteDetails() {
  // TODO: 跳转到线路详情
  xma.navigateTo({
    url: '/pages/RouteDetails/RouteDetails',
  });
}
</script>

<style lang="scss" scoped>
page {
  background-color: #eaf9f1;
}
.container {
  position: relative;
  left: 0rpx;
  top: 0rpx;
  width: 750rpx;
  height: 440rpx;
}
.bac {
  display: flex;
  margin-top: -80rpx;
}
.left-offer {
  width: 346rpx;
  height: 292rpx;
  border-radius: 16rpx;
  background: linear-gradient(179deg, #f9e3b1 0%, #ffffff 28%);
  margin-left: 20rpx;
  margin-top: 20rpx;
}
.right-offer {
  width: 346rpx;
  height: 292rpx;
  border-radius: 16rpx;
  background: linear-gradient(175deg, #ffd5c4 1%, #ffffff 28%);
  margin-left: 20rpx;
  margin-top: 20rpx;
}
.left-title {
  width: 128rpx;
  height: 28rpx;
  font-family: Source Han Sans;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 28rpx;
  text-align: center;
  letter-spacing: 0em;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
  margin-left: 20rpx;
  margin-top: 20rpx;
  position: absolute;
}
.special-icon {
  margin-left: 150rpx;
  margin-top: 20rpx;
}
.spe-img {
  margin-top: 14rpx;
  margin-left: 20rpx;
}
.hot-way {
  width: 710rpx;
  border-radius: 16rpx;
  background: #ffffff;
  margin-top: 20rpx;
  margin-left: 20rpx;
}
.scroll-x {
  width: 100%;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  overflow: hidden;
  padding-top: 26rpx;
  white-space: nowrap;
  width: 100%;
  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }
  background-color: transparent;
  .foodCard {
    width: 270rpx;
    height: 168rpx;
    border-radius: 16rpx;
    margin-left: 20rpx;
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;

    .test5 {
      width: 100%;
    }
  }
}
.hot-title,
.title-des {
  width: 336rpx;
  height: 28rpx;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  font-weight: 400;
}
.hot-title {
  font-size: 32rpx;
  line-height: 28rpx;
  letter-spacing: 0em;
  color: #3d3d3d;
  padding-top: 20rpx;
  padding-left: 20rpx;
}
.title-des {
  font-size: 22rpx;
  color: #767676;
  margin-top: -24rpx;
  margin-left: 160rpx;
}
.bootom {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-radius: 6rpx;
  background: #ffffff;
  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-card {
  width: 710rpx;
}
.card-img {
  margin-top: 20rpx;
  margin-left: 40rpx;
}
.card-detail {
  display: flex;
}
.detail-text {
  margin-top: 20rpx;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  width: 380rpx;
}
.detail-title,
.give,
.score,
.num,
.place,
.price {
  font-family: Source Han Sans;
  line-height: normal;
  letter-spacing: 0em;
  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
}
.detail-title {
  font-size: 28rpx;
  font-weight: 500;
  letter-spacing: 0em;
  color: #3d3d3d;
}
.give {
  font-size: 22rpx;
  font-weight: normal;
  line-height: 30rpx;
  color: #666666;
}
.tag .wd-tag {
  margin-right: 10px;
  margin-bottom: 5px;
}
.score,
.num,
.place {
  font-size: 24rpx;
  font-weight: 500;
  line-height: 28rpx;
  color: #0974f5;
}
.price {
  font-size: 28rpx;
  font-weight: bold;
  line-height: 28rpx;
  color: #fa5151;
}
.venue {
  display: flex;
  justify-content: space-between;
}
.score {
  margin-right: 40rpx;
}
::v-deep .wd-tag__text {
  font-size: 20rpx;
  margin-top: 4rpx;
}
.tag {
  margin-top: 10rpx;
  width: 400rpx;
}
::v-deep .search {
  margin-top: 60rpx;
}
::v-deep .icon {
  width: 56rpx;
  height: 56rpx;
}
</style>
