<template>
  <view class="shaixuanChoice">
    <view class="left">
      <view @click="selected">
        <img :src="pic" alt class="select" />
        <text class="zi">置顶原配轮胎</text>
      </view>
    </view>
    <view class="mid" @click="tj">
      <text :class="midtext">推荐排序</text>
      <img  :src="xiala" alt class="xiala" />
    </view>
    <view class="right" @click="shaixuan">
      <text class="righttext">筛选</text>
      <img src="../../static/img/shaixuan.png" alt class="xiala" />
    </view>
  </view>
</template>

<script>
export default {
  name: "shaixuanChoice",
  data() {
    return {
      pic: "../../static/img/select.png",
      ifselect: false,
      midtext: "midtext",
      xiala:"../../static/img/xiala.png",
      iftj:false,
    };
  },
  methods: {
    radioChange(e) {
      console.log(e);
      this.select = !e.detail.value;
    },
    selected() {
      this.pic =
        this.pic == "../../static/img/select.png"
          ? "../../static/img/selected.png"
          : "../../static/img/select.png";
      this.ifselect = this.ifselect == false ? true : false;
      console.log(this.ifselect);
    },
    tj(){
      this.midtext=this.midtext=="midtext"?"midtext active":"midtext"
      this.xiala=this.xiala=="../../static/img/xiala.png"?"../../static/img/xialared.png":"../../static/img/xiala.png"
       this.iftj = this.iftj == false ? true : false;
      this.$emit("tuijian",this.iftj)
    },
    shaixuan(){
      this.$emit('ifsx',true)
    }
  }
};
</script>

<style lang="scss">
.shaixuanChoice {
  width: 100%;
  height: 78upx;
  background-color: white;
  display: flex;
  justify-content: space-between;
  border-top: 1upx solid #efefef;
  .left {
    width: 267upx;
    text-align: center;
    color: #545454;
    font-size: 26upx;
    line-height: 78upx;
    .select {
      width: 28upx;
      height: 28upx;
      margin: auto 0;
      position: relative;
      top: 5upx;
    }
    .zi {
      margin-left: 22upx;
    }
  }
  .mid {
    width: 280upx;
    height: 43upx;
    margin: auto 0;
    color: #545454;
    border-left: 1upx solid #efefef;
    border-right: 1upx solid #efefef;
    text-align: center;
    line-height: 43upx;
    .midtext {
      font-size: 26upx;
    }
    .xiala {
      width: 24upx;
      height: 14upx;
      margin-left: 14upx;
    }
  }
  .right {
    width: 202upx;
    line-height: 78upx;
    color: #545454;
    .righttext {
      font-size: 26upx;
      margin-left: 34upx;
    }
    .xiala {
      width: 24upx;
      height: 24upx;
      margin-left: 25upx;
      margin-top: 5upx;
    }
  }
  .active {
    color: #d35f79;
  }
}
</style>