<template>
  <div class="d-flex flex-row main-content-df">
    <div class="d-20-df bb-color-df"></div>
    <template v-for="(item, index) in tabList">
      <template v-if="index !== tabList.length - 1">
        <div class="d-tab-df" :key="'tab_' + index" :class="{ selected: activeIndx == index }" @click="tabClick(item, index)">{{ item.tabText }}</div>
        <div class="d-2-df bb-color-df" :key="'tab_d_' + index"></div>
      </template>
      <template v-if="index === tabList.length - 1">
        <div class="d-tab-df" :key="'tab_' + index" :class="{ selected: activeIndx == index }" @click="tabClick(item, index)">{{ item.tabText }}</div>
      </template>
    </template>
    <div class="flex-1-dhc bb-color-df"></div>
    <template v-if="hasBtn">
      <template v-for="(item, index) in btnList">
        <template v-if="index !== btnList.length - 1">
          <div class="d-btn-df bb-color-df" :key="'btn_' + index">
            <van-button class="button-df btn-bc-df" v-if="item.btnType === '1'" @click="btnClick(item)">
              <span class="span-df font-size-16-dhc">{{ item.btnText }}</span>
            </van-button>
            <van-button class="button-df" color="#3975c6" v-if="item.btnType === '2'" @click="btnClick(item)">
              <span class="font-size-16-dhc">{{ item.btnText }}</span>
            </van-button>
          </div>
          <div class="d-20-df bb-color-df" :key="'btn_d_' + index"></div>
        </template>
        <template v-if="index === btnList.length - 1">
          <div class="d-btn-df bb-color-df" :key="'btn_' + index">
            <van-button class="button-df btn-bc-df" v-if="item.btnType === '1'" @click="btnClick(item)">
              <span class="span-df font-size-16-dhc">{{ item.btnText }}</span>
            </van-button>
            <van-button class="button-df" color="#3975c6" v-if="item.btnType === '2'" @click="btnClick(item)">
              <span class="font-size-16-dhc">{{ item.btnText }}</span>
            </van-button>
          </div>
        </template>
      </template>
      <div class="d-20-df bb-color-df"></div>
    </template>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { TabData } from "@/model/entity/TabData";
import { BtnData } from "@/model/entity/BtnData";

/**
 * @Description: 标签页导航组件
 * @author liuzehai
 * @date 2021-12-11
 * @time 10:49:59
 */
@Component({
  name: "TabNav",
})
export default class TabNav extends Vue {
  @Prop({ default: () => [] }) tabList: TabData[] | undefined; // 标签页信息
  @Prop({ default: false }) hasBtn: boolean | undefined; // 是否含有按钮
  @Prop({ default: () => [] }) btnList: BtnData[] | undefined; // 按钮信息(hasBtn为true时要传)
  activeIndx = 0; // 默认选中的标签页索引

  /**
   * @Description: 标签页点击事件
   * @author liuzehai
   * @date 2021-12-11
   * @time 11:43:58
   * @param item 标签页对象
   * @param 标签页inx 索引
   */
  tabClick(item: TabData, inx: number) {
    this.activeIndx = inx | 0;
    this.$emit("tabClick", item);
  }

  /**
   * @Description: 按钮点击事件处理
   * @author liuzehai
   * @date 2021-12-11
   * @time 14:18:16
   * @param item 按钮对象
   */
  btnClick(item: BtnData) {
    this.$emit("btnClick", item);
  }
}
</script>

<style lang="scss" scoped>
.main-content-df {
  height: 56px;
  min-height: 56px;
  width: 100%;
  .bb-color-df {
    border-bottom: #FF574C 1px solid;
  }
  .d-20-df {
    width: 20px;
  }
  .d-2-df {
    width: 2px;
  }
  .d-tab-df {
    margin-top: 20px;
    padding: 0 15px;
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    color: #999999;
    border-top: #cccccc 1px solid;
    border-left: #cccccc 1px solid;
    border-right: #cccccc 1px solid;
    border-bottom: #FF574C 1px solid;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    &.selected {
      color: #FF574C;
      border-top: #FF574C 1px solid;
      border-left: #FF574C 1px solid;
      border-right: #FF574C 1px solid;
      border-bottom: none;
    }
  }
  .d-btn-df {
    height: 100%;
    padding: 10px 0;
    .button-df {
      height: 36px;
      border-radius: 5px;
      min-width: 90px;
    }
    .span-df {
      color: #FF574C;
    }
    .btn-bc-df {
      border: #FF574C 1px solid;
    }
  }
}
</style>