<template>
  <view class="searchTap">
    <view :class="select[0]" @click="xz" data-tap="0">{{tabname}}</view>
    <view :class="select[1]" @click="xz" data-tap="1">{{tabname1}}</view>
    <view :class="select[2]" @click="xz" data-tap="2">{{tabname2}}</view>
    <!-- <view :class="select[3]" @click="xz" data-tap="4">{{tabname3}}</view> -->
  </view>
</template>

<script>
export default {
  name: "searchTap",
  data() {
    return {
      select: ["active", "", "", ""],
      tabname:"",
      tabname2:'wwww',
      tabname1:'ppp',
      tabname3:'eeeee',
      ceshi:"actice"
    };
  },
  props:{
    tabtittle:{
      type:String
    },
    iforder:{
      type:Boolean
    }
  },
      mounted(){
    this.tabname=this.tabtittle.split(',')[0]
    this.tabname1=this.tabtittle.split(',')[1]
    this.tabname2=this.tabtittle.split(',')[2]
    // this.tabname3=this.tabtittle.split(',')[3]
  },
  methods: {
    xz(e) {
      if(e.currentTarget.dataset.tap==0){
           this.select = ["active", "", ""]
      }else if(e.currentTarget.dataset.tap==1){
           this.select = ["", "active", ""];
      }else if(e.currentTarget.dataset.tap==2){
        this.select = ["", "", "active"];
      }
      this.$emit("shaixuan",e.currentTarget.dataset.tap)
   
    },

  }
};
</script>

<style lang="scss">
.searchTap {
  height: 75upx;
  display: flex;
  justify-content: space-around;
  font-size: 26upx;
  color: #333333;
  border-top: 3upx solid #eeeeee;
  line-height: 75upx;
  .active {
    color: #d35f79;
  }
  .active1{
    color: #F57426;
    border-bottom: 1upx solid #F57426;
  }
}
</style>
