<template>
  <div class="comment-list">
    <div class="top-bar flex-align-center">
      <wd-icon name="thin-arrow-left"></wd-icon>
      <wd-search hide-cancel placeholder="点评关键词/特色" placeholder-left />
    </div>
    <scroll-view class="content" :scroll-y="true">
      <div class="filter-box">
        <div class="score-sort flex-between">
          <div class="score">
            <span class="num">6.9</span>
            <span class="t1">超棒</span>
            <span class="t2">527条</span>
            <wd-icon name="check-outline" class="t1"></wd-icon>
          </div>
          <div class="sort">
            <span class="active">推荐排序</span>
            ｜
            <span>重新点评</span>
          </div>
        </div>
        <div class="type flex-between">
          <p class="active">全部</p>
          <p v-for="(v, i) in commentTypeList" :key="i">{{ v.text }}({{ v.value }})</p>
        </div>
        <div class="tags" :style="{ 'max-height': showMoreTag ? '600px' : '90rpx' }">
          <div class="item" v-for="(v, i) in tagList" :key="i">{{ v.text }}({{ v.value }})</div>
          <div class="more" @click="showMoreTag = !showMoreTag">
            更多
            <wd-icon name="arrow-down" :class="{ rotate: showMoreTag }"></wd-icon>
          </div>
        </div>
      </div>
      <div class="card-list">
        <card v-for="v in 10" :key="v" />
      </div>
    </scroll-view>
    <div class="back">
      <button>返回预订</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import card from './card.vue';
const commentTypeList = [
  {
    text: '图/视频',
    value: 183,
  },
  {
    text: '追评',
    value: 5,
  },
  {
    text: '中差评',
    value: 5,
  },
  {
    text: '好评',
    value: 514,
  },
];
const tagList = [
  {
    text: '餐食棒',
    value: 44,
  },
  {
    text: '导游负责耐心',
    value: 44,
  },
  {
    text: '车辆条件好',
    value: 514,
  },
  {
    text: '餐食棒',
    value: 44,
  },

  {
    text: '餐食棒',
    value: 44,
  },
  {
    text: '导游负责耐心',
    value: 44,
  },
  {
    text: '行程安排合理',
    value: 5,
  },
  {
    text: '车辆条件好',
    value: 514,
  },
  {
    text: '行程安排合理',
    value: 5,
  },

  {
    text: '导游负责耐心',
    value: 44,
  },
  {
    text: '行程安排合理',
    value: 5,
  },
  {
    text: '车辆条件好',
    value: 514,
  },
];
const showMoreTag = ref(false);
</script>

<style lang="scss" scoped>
uni-page-body {
  height: 100%;
}
.comment-list {
  height: 100%;
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  .top-bar {
    padding: 16rpx 40rpx;
    font-size: 28rpx;
    background: #fff;
    .wd-search {
      width: 492rpx;
      height: 56rpx;
      padding: 0;
      margin-left: 20rpx;
    }
  }
  .content {
    height: 132rpx;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    flex-grow: 1;
    .filter-box {
      border-radius: 16rpx;
      padding: 20rpx;
      background-color: #fff;
      .score-sort {
        margin-bottom: 20rpx;
        .score {
          color: #0974f5;
          font-weight: bold;
          .num {
            font-size: 48rpx;
            margin-right: 12rpx;
          }
          .t2 {
            font-size: 24rpx;
            color: #abaaaa;
          }
          .wd-icon {
            margin-left: 12rpx;
          }
        }
        .sort {
          font-size: 24rpx;
          color: #abaaaa;
          &.active {
            color: #0974f5;
          }
        }
      }
      .type {
        font-size: 22rpx;
        color: #767676;
        .active {
          color: #3d3d3d;
          font-size: 24rpx;
          font-weight: bold;
          position: relative;
          &::after {
            content: '';
            display: block;
            position: absolute;
            width: calc(80%);
            height: 4rpx;
            bottom: -12rpx;
            left: 50%;
            background-color: #fa5151;
            transform: translateX(-50%);
          }
        }
      }
      .tags {
        margin-top: 32rpx;
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
        position: relative;
        max-height: 80rpx;
        overflow: hidden;
        transition: all 0.3s;
        .item {
          padding: 10rpx 16rpx;
          color: #3d3d3d;
          font-size: 16rpx;
          background-color: #eeeeee;
          border-radius: 300rpx;
        }
        .more {
          padding: 10rpx 0;
          padding-left: 40rpx;
          font-size: 24rpx;
          font-weight: 500;
          line-height: 28rpx;
          color: #0974f5;
          background-color: #fff;
          position: absolute;
          background: linear-gradient(90deg, #ffffff22 0%, #fff 20%);
          bottom: 0;
          right: 0;
          .rotate {
            transition: all 0.3s;
            transform: rotateZ(180deg);
          }
        }
      }
    }
    .card-list {
      margin-top: 10rpx;
      .card {
        margin-bottom: 10rpx;
      }
    }
  }
  .back {
    background-color: #fff;
    padding: 40rpx 0 68rpx;
    box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(0, 0, 0, 0.12);
    button {
      width: 690rpx;
      height: 88rpx;
      border-radius: 68rpx;
      background-color: #fa5151;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
</style>
