<template>
  <div>
    <div class="tabBox" :class="pageData.mainProduct.bgColor[3]?'borderColor':''" :style="{'border-color': pageData.mainProduct.bgColor[3]}">
      <div class="tab" v-for="(item,index) in tabArr" :key="index" @click="$emit('tabClick',item)">
        <img :src="item.icon" alt="" />
        <div>{{item.tabName}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabArr: []
    }
  },
  props: {
    isApplet: Boolean
  },
  computed: {
    user () {
      return this.$store.state.user
    },
    pageData () {
      return this.$store.state.pageData
    }
  },
  created () {
    if (this.pageData.remarks.tabArr && this.pageData.remarks.tabArr.length > 0) {
      this.tabArr = this.pageData.remarks.tabArr
      let arr = []
      this.tabArr.forEach(val => {
        // if (val.tabName == '订购记录') {
        //   let obj = {}
        //   obj.tabName = val.tabName
        //   obj.tabUrlBasics = val.tabUrlBasics
        //   obj.tabUrlApplet = val.tabUrlApplet
        //   obj.icon = require("../templates/assets/record.png")
        //   arr.push(obj)
        // }
        if (val.tabName == '流量激活') {
          let obj = {}
          obj.tabName = val.tabName
          obj.tabUrlBasics = val.tabUrlBasics
          obj.tabUrlApplet = val.tabUrlApplet
          obj.icon = require("./img/icon_jihuo.png")
          arr.push(obj)
        } if (val.tabName == '一键反馈') {
          let obj = {}
          obj.tabName = val.tabName
          obj.tabUrlBasics = val.tabUrlBasics
          obj.tabUrlApplet = val.tabUrlApplet
          obj.icon = require("./img/icon_fankui.png")
          arr.push(obj)
        }
        if (val.tabName == '退订产品') {
          let obj = {}
          obj.tabName = val.tabName
          obj.tabUrlBasics = val.tabUrlBasics
          obj.tabUrlApplet = val.tabUrlApplet
          obj.icon = require("./img/icon_tuiding.png")
          arr.push(obj)
        }
        if (val.tabName == '剩余流量查询' && this.isApplet == false) {
          let obj = {}
          obj.tabName = "流量查询"
          obj.tabUrlBasics = val.tabUrlBasics
          obj.tabUrlApplet = val.tabUrlApplet
          obj.icon = require("./img/icon_chaxun.png")
          arr.push(obj)
        }
        // if (val.tabName == '会员领取') {
        //   let obj = {}
        //   obj.tabName = val.tabName
        //   obj.tabUrlBasics = val.tabUrlBasics
        //   obj.tabUrlApplet = val.tabUrlApplet
        //   obj.icon = require("../templates/assets/huiyuan.png")
        //   arr.push(obj)
        // }
      })
      this.tabArr = arr
    } else {
      // if (this.pageData.remarks.jiluBtn === '1') {
      //   let obj = {}
      //   obj.tabUrlBasics = ""
      //   obj.tabUrlApplet = ""
      //   obj.icon = require("../templates/assets/record.png")
      //   obj.tabName = '订购记录'
      //   this.tabArr.push(obj)
      // } 
      if (this.pageData.remarks.jihuoBtn === '1') {
        let obj = {}
        obj.tabUrlBasics = ""
        obj.tabUrlApplet = ""
        obj.icon = require("./img/icon_jihuo.png")
        obj.tabName = '流量激活'
        this.tabArr.push(obj)
      }
      // if (this.pageData.remarks.memberBtn === '1') {
      //   let obj = {}
      //   obj.tabUrlBasics = ""
      //   obj.tabUrlApplet = ""
      //   obj.icon = require("../templates/assets/huiyuan.png")
      //   obj.tabName = '会员领取'
      //   this.tabArr.push(obj)
      // }
      if (this.pageData.remarks.chaxunBtn === '1' && this.isApplet == false) {
        let obj = {}
        obj.tabUrlBasics = ""
        obj.tabUrlApplet = ""
        obj.icon = require("./img/icon_chaxun.png")
        obj.tabName = '流量查询'
        this.tabArr.push(obj)
      }
      if (this.pageData.remarks.guanzhuBtn === '1') {
        let obj = {}
        obj.tabUrlBasics = ""
        obj.tabUrlApplet = ""
        obj.icon = require("./img/icon_fankui.png")
        obj.tabName = '一键反馈'
        this.tabArr.push(obj)
      } if (this.pageData.remarks.tuidingBtn === '1') {
        let obj = {}
        obj.tabUrlBasics = ""
        obj.tabUrlApplet = ""
        obj.icon = require("./img/icon_tuiding.png")
        obj.tabName = '退订产品'
        this.tabArr.push(obj)
      }
    }
  },

}
</script>

<style lang="scss" scoped>

.borderColor {
  border-width: 3px;
  border-style: solid;
}
.tabBox {
  // margin: 20px 30px;
  width: 714px;
  margin: 0 auto;
  border-radius: 20px;
  background: #ffffff;
  display: -webkit-box;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 56px;

  .tab {
    width: 160px;
    margin: 26px 5px;

    img {
      width: 62px;
      height: 62px;
      margin: 0 55px;
    }

    div {
      text-align: center;
      font-size: 28px;
      // font-weight: bold;
      color: #0d0d0d;
      margin-top: 20px;
    }
  }
}
</style>