<template>
  <div class="hotel-list-page">
    <div class="banner-wrap">
      <SearchBar class="search-bar" @search="onSearch"></SearchBar>
    </div>
    <div class="select-wrap">
      <Select
        class="select"
        :valueList="starList"
        v-model="starIdx"
        :placeholder="'星级'"
      ></Select>
      <Select
        class="select"
        v-model="areaIdx"
        :valueList="areaList"
        :placeholder="'景点周边'"
      ></Select>
      <Select
        class="select"
        v-model="recoLevelIdx"
        :valueList="recoLevelList"
        :placeholder="'推荐指数'"
      ></Select>
    </div>
    
    <div class="card-list">
      <article
        v-for="(item, index) in hotelList"
        :key="index"
      >
        <div class="img-wrap">
          <img class="photo" :src="item.img" alt="" draggable="false">
          <div class="star">{{item.star}}星级</div>
          <div class="address">
            <img class="icon" src="@/assets/img/service/address-white.png" alt="" draggable="false">
            {{item.address}}
          </div>
          <div class="view-count">
            <img class="icon" src="@/assets/img/service/eye-white.png" alt="" draggable="false">
            {{item.viewCount}}
          </div>
        </div>
        <h2>{{item.title}}</h2>
        <div class="bottom-wrap">
          <div class="reco">
            推荐指数：
            <img v-for="index in item.reco" :key="index" class="" src="@/assets/img/service/star.png" alt="" draggable="false">
          </div>
          <div class="phone">
            电话：{{item.phone}}
          </div>
        </div>
      </article>
    </div>
    
  </div>
</template>

<script>
import SearchBar from "@/components/SearchTransparent.vue";
import Select from "@/components/Select.vue";
export default {
  components: {
    SearchBar,
    Select,
  },
  data() {
    return {
      starIdx: 0,
      areaIdx: 0,
      recoLevelIdx: 0,
      hotelList: [
        {
          img: require('@/assets/img/service/hotel.png'),
          star: 5,
          address: '镜湖区中山北路77号',
          viewCount: 157,
          title: '芜湖金鹰尚美酒店',
          reco: 5,
          phone: '0533-3888999',
        },
        {
          img: require('@/assets/img/service/hotel.png'),
          star: 5,
          address: '镜湖区中山北路77号',
          viewCount: 157,
          title: '芜湖金鹰尚美酒店',
          reco: 5,
          phone: '0533-3888999',
        },
        {
          img: require('@/assets/img/service/hotel.png'),
          star: 5,
          address: '镜湖区中山北路77号',
          viewCount: 157,
          title: '芜湖金鹰尚美酒店',
          reco: 5,
          phone: '0533-3888999',
        },
        {
          img: require('@/assets/img/service/hotel.png'),
          star: 5,
          address: '镜湖区中山北路77号',
          viewCount: 157,
          title: '芜湖金鹰尚美酒店',
          reco: 5,
          phone: '0533-3888999',
        },
      ]
    }
  },
  computed: {
    starList() {
      return [
        '全部',
        '五星',
        '四星',
        '三星',
      ]
    },
    areaList() {
      return [
        '全部',
        '景点一',
        '景点二',
        '景点三',
      ]
    },
    recoLevelList() {
      return [
        '全部',
        '五星',
        '四星',
        '三星',
        '二星',
        '一星',
      ]
    }
  },
  methods: {
    onSearch() {

    },
  },
}
</script>

<style lang="less" scoped>
.hotel-list-page {
  height: calc(100% - 80px);
  background-color: #fff;
  display: flex;
  flex-direction: column;
  > .banner-wrap {
    flex: 0 0 auto;
    height: 40vw;
    background-image: url(~@/assets/img/service/hotel-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    margin-bottom: 4.1vw;
    position: relative;
    > .search-bar {
      position: absolute;
      bottom: 4.8vw;
      left: 50%;
      width: 80.1vw;
      transform: translateX(-50%);
    }
  }
  > .select-wrap {
    flex: 0 0 auto;
    margin: 0 4vw 4vw 4vw;
    > .select {
      display: inline-block;
      margin-right: 5vw;
    }
  }
  > .card-list {
    flex: 1 0 1px;
    margin-left: 4vw;
    margin-right: 4vw;
    overflow: auto;
    > article {
      padding-bottom: 2.7vw;
      margin-bottom: 4vw;
      > .img-wrap {
        height: 53.3vw;
        border-radius: 1.1vw;
        position: relative;
        overflow: hidden;
        > img.photo {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        > .star {
          position: absolute;
          top: 0;
          right: 0;
          background: rgba(200, 17, 17, 0.75);
          padding: 2vw 2.5vw;
          font-size: 4vwpx;
          font-weight: 500;
          color: #ffe400;
        }
        > .address {
          position: absolute;
          left: 2vw;
          bottom: 2vw;
          font-size: 3.2vw;
          font-weight: 500;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          > img.icon {
            width: 2.7vw;
            height: 3.6vw;
            margin-right: 1.2vw;
          }
        }
        > .view-count {
          position: absolute;
          right: 2.3vw;
          bottom: 2vw;
          font-size: 3.2vw;
          font-weight: 500;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          > img.icon {
            width: 4.3vw;
            height: 3.1vw;
            margin-right: 1.3vw;
          }
        }
      }
      > h2 {
        margin: 2.7vw 2vw 3vw 2vw;
        font-size: 4.8vw;
        font-weight: 500;
        color: #515151;
      }
      > .bottom-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 2vw;
        > .reco {
          font-size: 3.5vw;
          color: #515151;
          > img {
            width: 3.3vw;
            height: 3.3vw;
            margin-right: 0.2vw;
          }
        }
        > .phone {
          font-size: 3.5vw;
          color: #515151;
        }
      }
    }
  }
}
</style>