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

<script>
export default {
  name: "orderTab",
  data() {
    return {
      select: ["active", "", "", ""],
      tabname:"",
      tabname2:'wwww',
      tabname1:'ppp',
      tabname3:'eeeee',
      ceshi:"actice"
    };
  },
  props:{
    tap:{
      type:Number
    },
    tabtittle:{
      type:String
    },
    ifnull:{

    }
  },
      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]
      if(this.tap==3){
           this.select = ["active", "", "", ""]
      }else if(this.tap==0){
           this.select = ["", "active", "", ""];
      }else if(this.tap==1){
        this.select = ["", "", "active", ""];
      }else if(this.tap==2){
        this.select = ["", "", "", "active"];
      }
  },
  methods: {
    xz(e) {
      if(e.currentTarget.dataset.tap==3){
           this.select = ["active", "", "", ""]
      }else 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("tabchange",e.currentTarget.dataset.tap)
    },

  }
};
</script>

<style lang="scss">
.orderTab {
  height: 75upx;
  display: flex;
  justify-content: space-around;
  font-size: 26upx;
  color: #333333;
  border-top: 3upx solid #eeeeee;
  line-height: 75upx;
  background-color: white;
  .active {
      // width:94upx;
      text-align: center;
        color: #F57426;
    border-bottom: 1upx solid #F57426;
  }

}
</style>
