<template>
  <div class="tab-style">
    <div :class="{'tab-content-bg':tabNum == 0}" class="tab-content" @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?base:unbase"><span
      :class="{'colored':tabNum == 0}">基本信息</span></div>
    <div :class="{'tab-content-bg':tabNum == 1}" class="tab-content" @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?trial:untrial"><span
      :class="{'colored':tabNum == 1}">租赁信息</span></div>
    <div :class="{'tab-content-bg':tabNum == 2}" class="tab-content" @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?sign:unsigned"><span
      :class="{'colored':tabNum == 2}">担保协议</span></div>
  </div>
</template>
<script>
import base from '@/assets/distributorSign/base.png'
import sign from '@/assets/distributorSign/sign.png'
import trial from '@/assets/distributorSign/trial.png'
import unbase from '@/assets/distributorSign/unbase.png'
import unsigned from '@/assets/distributorSign/unsigned.png'
import untrial from '@/assets/distributorSign/untrial.png'
export default {
  props: {
    tabNums: {
      type: Number,
      default: 0,
    },
  },
  data () {
    return {
      tabNum: 0,
      base: base,
      unbase: unbase,
      sign: sign,
      unsigned: unsigned,
      trial: trial,
      untrial: untrial,
    }
  },
  watch: {
    tabNums () {
      this.tabNum = this.tabNums
    },
  },
  methods: {
    sendTabNum () {
      this.$emit('getTabNum', this.tabNum)
    },
  },
}
</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;
      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: 0 8px;
    }
    .tab-content:nth-of-type(1) {
      margin-left: 10px
    }
    .tab-content:nth-of-type(3) {
      margin-right: 10px
    }
  }

</style>
