<template>
  <view class="box" v-if="ifcondition" @click="close">
    <view class="shaixuanCondition">
      <scroll-view :scroll-y="true" class="scroll-Y" @scroll="scroll" @click.stop="a">
        <view class="top">
          <view class="tittle">价格区间(元)</view>
          <view class="btns">
            <!-- <view class="btn">最低价</view> -->
            <input type="text" class="btn" placeholder="最低价" v-model="zdj" />
            <!-- <view class="line"> -->
            <img src="../../static/img/shaixuanline.png" alt class="line" />
            <!-- </view> -->
            <!-- <view class="btn">最高价</view> -->
            <input type="text" class="btn" placeholder="最高价"  v-model="zgj"/>
          </view>
        </view>
        <view class="item1">
          <view class="tittle">品牌</view>
          <view @click.stop="xl">
            <img src="../../static/img/xiala.png" alt class="xiala" />
          </view>
          <view class="pinpai">
            <!-- <view class="pinpaiitem" @click="selected">
              <img src="../../static/img/pinpai.png" alt class="pinpai1" />
              <view :class="select">倍耐力/Pirelli</view>
            </view>-->
            <view class="pinpaiitem" @click="selected" data-key="0">
              <img :src="pinpai[0].img" alt class="pinpai1" />
              <view :class="select[0]">{{pinpai[0].desc}}</view>
            </view>
            <view class="pinpaiitem" @click="selected" data-key="1">
              <img :src="pinpai[1].img" alt class="pinpai1" />
              <view :class="select[1]">{{pinpai[1].desc}}</view>
            </view>
            <view class="pinpaiitem" @click="selected" data-key="2">
              <img :src="pinpai[2].img" alt class="pinpai1" />
              <view :class="select[2]">{{pinpai[2].desc}}</view>
            </view>
            <view class="pinpai" v-if="ifxl">
              <view
                class="pinpaiitem"
                @click="selected"
                v-for="(item,index) in pinpai1"
                :key="item.id"
                :data-key="index+3"
              >
                <img :src="item.img" alt class="pinpai1" />
                <view :class="select[index+3]">{{item.desc}}</view>
              </view>
            </view>
          </view>
          <!-- <view class="line"></view> -->
        </view>

        <view class="item2">
          <view class="tittle">花纹性能</view>
          <view @click="xlck">
            <img src="../../static/img/xiala.png" alt class="xiala" />
          </view>
          <view class="xingneng1">
            <view :class="xzxn[0]" @click="xingnengxz" data-key="0">{{xingneng[0].desc}}</view>
            <view :class="xzxn[1]" @click="xingnengxz" data-key="1">{{xingneng[1].desc}}</view>
            <view :class="xzxn[2]" @click="xingnengxz" data-key="2">{{xingneng[2].desc}}</view>
            <view class="xingneng2" v-if="ifxlck">
              <view
                :class="xzxn[index+3]"
                v-for="(item,index) in xingneng1"
                :key="item.id"
                @click="xingnengxz"
                :data-key="index+3"
              >操控</view>
              <!-- <view class="xingneng">操控</view>
              <view class="xingneng">操控</view>
              <view class="xingneng">操控</view>-->
            </view>

            <!-- </view> -->
            <!-- </view> -->
            <!-- <view class="line"></view> -->
          </view>

          <view class="item2">
            <view class="tittle">速度级别</view>
            <view @click="xlsd">
              <img src="../../static/img/xiala.png" alt class="xiala" />
            </view>
            <view class="xingneng1">
              <view :class="suduxz[0]" @click="speed" data-key="0">{{sudu[0].desc}}</view>
              <view :class="suduxz[1]" @click="speed" data-key="1">{{sudu[1].desc}}</view>
              <view :class="suduxz[2]" @click="speed" data-key="2">{{sudu[2].desc}}</view>
              <view class="xingneng2" v-if="ifxlsd">
                <view
                  :class="suduxz[index+3]"
                  v-for="(item,index) in sudu1"
                  :key="item.id"
                  @click="speed"
                  :data-key="index+3"
                >{{item.desc}}</view>
                <!-- <view class="xingneng">H</view>
                <view class="xingneng">Q</view>
                <view class="xingneng">M</view>-->
              </view>
            </view>
          </view>
          <!-- <view class="line"></view> -->
        </view>

        <view class="switch">
          <view class="left">仅查看防爆胎</view>
          <view class="right">
            <switch :checked="switch1" @change="switch1Change" style="transform:scale(0.9)" />
          </view>
        </view>
        <view class="line"></view>
        <view class="switch">
          <view class="left">仅查看雪地胎</view>
          <view class="right">
            <switch :checked="switch2" @change="switch2Change" style="transform:scale(0.9)" />
          </view>
        </view>
        <view class="btns">
          <view class="btn1" @click="reset">重置</view>
          <view class="btn1 btn2">确定</view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: "shaixuanCondition",
  data() {
    return {
      switch1: false,
      switch2: false,
      ifxl: false,
      ifxlck: false,
      ifxlsd: false,
      select: [],
      pinpai: [
        { id: 1, img: "../../static/img/pinpai.png", desc: "倍耐力/Pirelli" },
        { id: 2, img: "../../static/img/pinpai.png", desc: "倍耐力/Pirelli" },
        { id: 3, img: "../../static/img/pinpai.png", desc: "倍耐力/Pirelli" },
        { id: 4, img: "../../static/img/pinpai.png", desc: "倍耐力/Pirelli" },
        { id: 5, img: "../../static/img/pinpai.png", desc: "倍耐力/Pirelli" },
        { id: 6, img: "../../static/img/pinpai.png", desc: "倍耐力/Pirelli" }
      ],
      pinpai1: [],
      xingneng: [
        { id: 1, desc: "操控" },
        { id: 2, desc: "操控" },
        { id: 3, desc: "操控" },
        { id: 4, desc: "操控" },
        { id: 5, desc: "操控" },
        { id: 6, desc: "操控" }
      ],
      xingneng1: [],
      xzxn: [],
      sudu: [
        { id: 1, desc: "Q" },
        { id: 2, desc: "W" },
        { id: 3, desc: "E" },
        { id: 4, desc: "R" },
        { id: 5, desc: "M" },
        { id: 6, desc: "S" }
      ],
      sudu1: [],
      suduxz: [],
      zgj:"",
      zdj:""
    };
  },
  mounted() {
    this.pinpai1 = this.pinpai.slice(3, this.pinpai.length);
    this.xingneng1 = this.xingneng.slice(3, this.xingneng.length);
    this.sudu1 = this.sudu.slice(3, this.sudu.length);
    for (var i in this.pinpai) {
      this.select.push("desc");
    }
    for (var i in this.xingneng) {
      this.xzxn.push("xingneng");
    }
    for (var i in this.sudu) {
      this.suduxz.push("xingneng");
    }
    console.log(this.suduxz);
  },
  props: {
    ifcondition: {
      type: Boolean
    }
  },
  methods: {
    switch1Change(e) {
      this.switch1 = e.detail.value;
    },
    switch2Change(e) {
      this.switch2 = e.detail.value;
    },
    xl() {
      this.ifxl = this.ifxl == false ? true : false;
    },
    xlck() {
      console.log(111);
      this.ifxlck = this.ifxlck == false ? true : false;
    },
    xlsd() {
      this.ifxlsd = this.ifxlsd == false ? true : false;
    },
    close() {
      console.log(7946);
      this.$emit("condition", false);
    },
    scroll() {},
    a() {},
    selected(e) {
      this.select = [];
      console.log(e.currentTarget.dataset.key);
      for (var i in this.pinpai) {
        this.select.push("desc");
      }
      this.select[e.currentTarget.dataset.key] =
        this.select[e.currentTarget.dataset.key] == "desc" ? "active" : "desc";
      // this.select = this.select == "desc" ? "active" : "desc";
    },
    xingnengxz(e) {
      this.xzxn = [];
      console.log(e.currentTarget.dataset.key);
      for (var i in this.pinpai) {
        this.xzxn.push("xingneng");
      }
      this.xzxn[e.currentTarget.dataset.key] =
        this.xzxn[e.currentTarget.dataset.key] == "xingneng"
          ? "xingnengxz"
          : "xingneng";
      // this.select = this.select == "desc" ? "active" : "desc";
    },
    speed(e) {
      this.suduxz = [];
      console.log(e.currentTarget.dataset.key);
      for (var i in this.pinpai) {
        this.suduxz.push("xingneng");
      }
      this.suduxz[e.currentTarget.dataset.key] =
        this.suduxz[e.currentTarget.dataset.key] == "xingneng"
          ? "xingnengxz"
          : "xingneng";
      // this.select = this.select == "desc" ? "active" : "desc";
    },
    reset() {
      this.switch1 = false;
      this.switch2 = false;
      this.select=[];
      this.xzxn=[];
      this.suduxz=[];
      this.zgj="",
      this.zdj=""
      for (var i in this.pinpai) {
        this.select.push("desc");
      }
      for (var i in this.xingneng) {
        this.xzxn.push("xingneng");
      }
      for (var i in this.sudu) {
        this.suduxz.push("xingneng");
      }
    }
  }
};
</script>

<style lang="scss">
.box {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0upx;
  z-index: 999;
  background-color: rgba(119, 119, 119, 0.08);
}
.shaixuanCondition {
  width: 601upx;
  height: 100vh;
  background-color: white;
  position: relative;
  right: 0;
  top: 220upx;
  z-index: 999;
  float: right;
  .tittle {
    font-size: 26upx;
    text-indent: 39upx;
    margin-top: 32upx;
    margin-bottom: 41upx;
  }
  .top {
    height: 177upx;
    border-bottom: 2upx solid #dadada;

    .btns {
      display: flex;
      justify-content: space-around;
      .btn {
        width: 219upx;
        height: 56upx;
        color: #666666;
        font-size: 26upx;
        text-align: center;
        line-height: 56upx;
        background: rgba(248, 248, 248, 1);
        border: 2upx solid rgba(218, 218, 218, 1);
      }
      .line {
        width: 31upx;
        height: 4upx;
        .line1 {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .item1 {
    // height: 236upx;
    border-bottom: 2upx solid #dadada;
    .xiala {
      width: 30upx;
      height: 16upx;
      float: right;
      position: relative;
      top: -60upx;
      right: 34upx;
    }
    .line {
      width: 100%;
      height: 2upx;
      position: relative;
      top: -15upx;
      background-color: #dadada;
    }
    .pinpai {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      position: relative;
      top: 4upx;
      .pinpaiitem {
        width: 166upx;
        height: 102upx;
        margin-bottom: 30upx;
        .pinpai1 {
          width: 166upx;
          height: 72upx;
        }
        .desc {
          color: #999999;
          font-size: 20upx;
          text-align: center;
        }
        .active {
          color: #dc3547;
          font-size: 20upx;
          text-align: center;
        }
      }
    }
  }
  .item2 {
    // height: 183upx;
    border-bottom: 2upx solid #dadada;
    .xiala {
      width: 30upx;
      height: 16upx;
      float: right;
      position: relative;
      top: -60upx;
      right: 34upx;
    }
  }
  .xingneng {
    width: 161upx;
    height: 61upx;
    color: #777777;
    font-size: 30upx;
    text-align: center;
    line-height: 61upx;
    margin-bottom: 25upx;
    border: 1upx solid #dadada;
  }
  .switch {
    height: 126upx;
    line-height: 126upx;
    display: flex;
    justify-content: space-around;
    .left {
      color: #000000;
      font-size: 26upx;
    }
  }
  .line {
    width: 100%;
    height: 2upx;
    background-color: #dadada;
  }
  .btns {
    display: flex;
    justify-content: center;
    .btn1 {
      width: 300upx;
      height: 108upx;
      border: 2upx solid #eeeeee;
      color: #666666;
      font-size: 30upx;
      margin-top: 35upx;
      line-height: 108upx;
      text-align: center;
    }
    .btn2 {
      background-color: #dc3547;
      color: white;
    }
  }
  .xingneng1 {
    // position: relative;
    // top:12upx;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .scroll-Y {
    height: 1100upx;
  }
  .xingneng2 {
    width: 100%;
    margin-left: 5upx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .xingneng {
      width: 161upx;
      height: 61upx;
      color: #777777;
      font-size: 30upx;
      text-align: center;
      line-height: 61upx;
      margin-bottom: 25upx;
      border: 1upx solid #dadada;
      margin-right: 5upx;
      // margin-left: 10upx;
    }
  }
  .xingnengxz {
    width: 161upx;
    height: 61upx;
    color: white;
    font-size: 30upx;
    text-align: center;
    line-height: 61upx;
    margin-bottom: 25upx;
    border: 1upx solid #dadada;
    margin-right: 5upx;
    background-color: #dc3547;
    // margin-left: 10upx;
  }
}
</style>