<template>
  <view class="container" @click="filterShow = false">
    <view class="top-box">
      <view class="search-box">
        <view class="search-left">
          <u-search placeholder="请输入搜索内容" :showAction="false" v-model="keyword" />
        </view>
        <view class="search-right">取消</view>
      </view>
      <view class="filter-box">
        <view class="filter-item">
          <view class="fiter1 " >
            <u-icon name="map"></u-icon>
            <span class="filter-l">贵阳市青少年人才社区</span>
            <u-icon name="arrow-down-fill"></u-icon>
          </view>
          <view class="fiter2" @tap.stop="handlerSelectAllFilter(2)">
            <span>综合排序</span>
            <u-icon name="arrow-down-fill"></u-icon>
          </view>
          <view class="fiter1" @tap.stop="handlerSelectMenu(1)">
            <span>筛选</span>
            <u-icon name="arrow-down-fill"></u-icon>
          </view>
        </view>
        <view class="filter-drapdown" v-show="filterShow">
          <view class="filter1" v-show="filterType == 1">
            <view class="scroll-box">
              <scroll-view :scroll-top="scrollTop" scroll-y="true" class="filter-menu-left scroll-Y" @scrolltoupper="upper"
                @scrolltolower="lower" @scroll="scroll">
                <view id="demo1" class="scroll-view-item uni-bg-red menu-item"
                      :class="current == index ? 'act-left-menu' : ''"
                      v-for="(item,index) of menuList"
                      @click.stop='handlerSelectLMenu(item,index)'>{{ item.name }}
                </view>
              </scroll-view>
              <scroll-view :scroll-top="scrollTop" scroll-y="true" class="filter-menu-right scroll-Y" @scrolltoupper="upper"
                @scrolltolower="lower" @scroll="scroll">
                <view id="demo1" class="scroll-view-item uni-bg-red" v-for="item of 15">
                  <view class="menu-right-title">洗车</view>
                  <view class="menu-right-contentbox" >
                    <span class="menu-item" v-for="item of 7">测试</span>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
          <view class="filter2" v-show="filterType == 2">
            <view class="">离我最近</view>
            <view class="">好评优先</view>
            <view class="">离我有点远</view>
          </view>
        </view>
      </view>
    </view>

    <view class="content-box">
      <view class="content-item" v-for="item of 10">
        <view class="item-left">
          <image class="img" src="../../../static/logo.png" mode=""></image>
        </view>
        <view class="item-right">

          <view class="">
            <view class="item-title">
              <view class="tag">常去 </view>
              <view class="title">途虎养车洗车机（贵州省贵阳市云岩区）</view>
            </view>
            <view class="str-box">
              <view class="srt-left">
                <u-rate activeColor="#fc8400" :value="3.7" readonly></u-rate>
                <text>5.0</text>
              </view>
              <view class="border"></view>
              <view class="srt-right">998单</view>
            </view>
          </view>

          <view class="bottom-textbox">
            <view class="bottom-left">宝安中心区美容洗车</view>
            <view class="bottom-right">2.7km</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        keyword: null,
        filterShow: false,
        filterType: 0,

        current:0,

        menuList:[
          {name:'汽车'},
          {name:'汽车2'},
          {name:'汽车3'},
          {name:'汽车4'},
        ]
      }
    },
    methods: {
      // 点击综合排序
      handlerSelectAllFilter(e) {
        this.filterShow = true
        this.filterType = 2
      },
      //
      handlerSelectMenu(e){
         this.filterShow = true
         this.filterType = 1
      },
      // 选择左侧菜单
      handlerSelectLMenu(item,index){
        this.current = index
      },
      scroll(){

      },
      lower(){},
      upper(){},
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background-color: #efefef;

    .top-box {
      width: 100%;
      background-color: #fff;
      padding: 10rpx 20rpx;
      box-sizing: border-box;

      .search-box {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .search-left {
          width: 80%;

        }

        .search-right {
          text-align: center;
        }
      }

      .filter-box {
        margin-top: 20rpx;

        .filter-item {
          display: flex;
          justify-content: space-between;

          .fiter1,
          .fiter2 {
            display: flex;
            align-items: center;
          }

          .filter-l {
            width: 200rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .fiter1 {
            color: #808080;
            font-size: 24rpx
          }

          .fiter2 {}
        }

        .filter-drapdown {
          position: fixed;
          left: 0;
          width: 100%;
          background-color: #fff;
          // height: 300rpx;
          z-index: 999;
          box-shadow: 0 10rpx 20rpx -5rpx rgba(0, 0, 0, 0.2);
          .filter1{
            .scroll-box {
              display: flex;
              max-height: 1200rpx;
              .filter-menu-left{
                width: 30%;
                background-color: #ebebeb;
                overflow-y: scroll;
                .menu-item{
                  width: 100%;
                  height: 100rpx;
                  text-align: center;
                  line-height: 100rpx;
                  font-size: 30rpx;
                  background-color: #ebebeb;
                  color: #5a5a5a;
                }
                .act-left-menu{
                  background-color: #fff;
                  color: #5992bb;
                  border-right: 8rpx solid #5992bb !important;
                }
              }
              .filter-menu-right{
                background-color: #fff;
                padding: 10rpx 20rpx;
                box-sizing: border-box;
                width: 70%;
                overflow-y: scroll;
                .menu-right-title{
                  font-size: 30rpx;
                  color: #000;
                  margin-bottom: 10rpx;
                }
                .menu-right-contentbox{
                  padding: 0 0 0 30rpx;
                  display: flex;
                  justify-content: left;
                  flex-wrap: wrap;
                  .menu-item{
                    // width: 100rpx;
                    padding: 0 20rpx;
                    height: 40rpx;
                    background-color: #cccccc;
                    color: #000;
                    text-align: center;
                    line-height: 40rpx;
                    margin: 10rpx 20rpx;
                  }
                }
              }
            }
          }
          .filter2 {
            padding: 20rpx 50rpx;
            box-sizing: border-box;
            view {
              margin: 30rpx 0;
            }
          }
        }
      }
    }


    .content-box {
      width: 100%;

      .content-item {
        background-color: #fff;
        padding: 10rpx 20rpx;
        box-sizing: border-box;
        margin: 10rpx 0;
        display: flex;

        .item-left {
          margin-right: 10rpx;

          .img {
            width: 200rpx;
            height: 200rpx;
            border-radius: 10rpx;
          }
        }

        .item-right {
          height: 200rpx;
          align-content: space-between;

          .item-title {
            display: flex;
            align-items: center;

            .tag {
              width: 80rpx;
              height: 46rpx;
              // line-height: 50rpx;
              padding: 4rpx;
              font-size: 22rpx;
              box-sizing: border-box;
              background-color: #f6e7d4;
              color: #f99a47;
              border: 2rpx solid #f99a47;
              text-align: center;
              // align-items: center;
              margin-right: 10rpx;
            }

            .title {
              font-size: 30rpx;
              color: #000;
              font-weight: bold;
              flex-wrap: wrap;
            }
          }

          .str-box {
            display: flex;
            margin-top: 10rpx;

            .srt-left {
              display: flex;
              color: #fc8400;
            }

            .border {
              border-left: 2rpx solid #cfcfcf;
              margin: 0 20rpx;
            }

            .srt-right {}
          }


          .bottom-textbox {
            display: flex;
            justify-content: space-between;
            font-size: 26rpx;
            margin-top: 40rpx;

            .bottom-left {
              color: #c7c7c7;
            }

            .bottom-right {
              color: #000;
            }
          }
        }
      }
    }
  }


</style>
