<template>
 <!-- <div class="tab-style">
    <span @click="tabNum1 = 0;sendTabNum()"><img :src="tabNum == 0?check1:uncheck1"></span>
    <span @click="tabNum1 = 1;sendTabNum()"><img :src="tabNum == 1?check2:uncheck2" ></span>
    <span @click="tabNum1 = 2;sendTabNum()"><img :src="tabNum == 2?check3:uncheck3"></span>
  </div>-->
  <div class="tab-style">
    <div :class="{'tab-content-bg':tabNum1 == 0}" class="tab-content" @click="tabNum1 = 0;sendTabNum()"><img :src="tabNum1 == 0?check1:uncheck1"><span
      :class="{'colored':tabNum1 == 0}">基本信息</span></div>
    <div :class="{'tab-content-bg':tabNum1 == 1}" class="tab-content" @click="tabNum1 = 1;sendTabNum()"><img :src="tabNum1 == 1?check2:uncheck2"><span
      :class="{'colored':tabNum1 == 1}">银行信息</span></div>
    <div :class="{'tab-content-bg':tabNum1 == 2}" class="tab-content" @click="tabNum1 = 2;sendTabNum()"><img :src="tabNum1 == 2?check3:uncheck3"><span
      :class="{'colored':tabNum1 == 2}">开票信息</span></div>
  </div>
</template>
<script>
import check1 from '@/assets/userBind/check1.png'
import check2 from '@/assets/userBind/check2.png'
import check3 from '@/assets/userBind/check3.png'
import uncheck1 from '@/assets/userBind/uncheck1.png'
import uncheck2 from '@/assets/userBind/uncheck2.png'
import uncheck3 from '@/assets/userBind/uncheck3.png'
export default {
  props: {
    'tabNum': {
      default: 0,
      type: Number,
    },
  },

  data () {
    return {
      tabNum1: this.tabNum,
      check1: check1,
      check2: check2,
      check3: check3,
      uncheck1: uncheck1,
      uncheck2: uncheck2,
      uncheck3: uncheck3,
    }
  },
  methods: {
    sendTabNum () {
      this.$emit('getTabNum', this.tabNum1)
    },
  },
}
</script>
<style lang="less" scoped>
  .tab-style {
    position: relative;
    z-index: 50;
    background-color: #fff;
    display: flex;
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 8px;
    align-items: center;
    box-shadow: 0 2px 3px 0 rgba(220, 220, 221, 0.50);

    .tab-content {
      display: block;
      width: 45.9%;
      height: 32px;
      background: rgba(220, 220, 221, 0.26);
      border-radius: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
      margin: 0 2% 0 2%;
      span {
        margin-left: 2%;
        font-size: 14px;
        color: #383F45;
        font-weight: 600;
        font-family: PingFangSC-Semibold;
      }

      .colored {
        color: @headerColor
      }
    }
    .tab-content-bg{
      background: rgba(0,70,156,0.10);
    }

    img {
      height: 16px;
      // margin-right:5.7px;
    }

    .tab-content:nth-of-type(2) {
      margin-left: 7px;
    }
  }
</style>
