<!--
  @description: 统计报表-头部
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/27
-->
<template>
  <div class="header">
    <!-- 头部 -->
    <div class="header-content clearfix">
      <!-- 左边 -->
      <div class="head-left fl">
        <div class="backBtn pointer" @click="backHome">
          返回
        </div>
        <!--        <div class="supplierNumber">-->
        <!--          供应商数量-->
        <!--          <span>-->
        <!--            {{ headData.supplierNumber }}-->
        <!--          </span>-->
        <!--        </div>-->
      </div>
      <!-- 标题 -->
      <div class="head-title fl">
        <span class="pointer" @click="backHome">
          <!--          中铸产业网电子招标采购平台-->
          中国机械工业电子招标采购平台
        </span>
      </div>
      <!-- 右边 -->
      <div class="head-right fr hint">
        <!--        专家数量<span>{{ headData.expertNumber }}</span>个-->
        平台统计的累计数据默认为当年
      </div>
    </div>
    <div class="header-footer">
      <!-- 菜单 -->
      <ul class="header-tabs">
        <li
          v-for="(item, index) in tabs"
          :key="index"
          :class="{'active':tab.code===item.code}"
          @click="tabClick(index)"
        >
          <p class="tabs-name">
            {{ item.name }}
          </p>
          <p class="tabs-bg" />
        </li>
      </ul>
      <p class="header-date">
        数据统计截止今日
        <span>
          {{ timeDay }}
        </span>
        时
      </p>
    </div>
  </div>
</template>
<script>
/* api */
import { getTime } from '@api/common/tools.js' // 获取服务器时间
import { getExpertNumberAndSupplierNumber } from '@api/statisticalAnalysis/reportChart.js'
/* 公共方法*/
import { addChineseUnit } from '@/assets/js/utils' // 为数字加上单位：万或亿
/**
   * tabs
   * {
   *  name:"", 标题
   *  code:"",编码
   *  path:"",// 路由地址
   * }
   */
export default {
  props: {
    tabs: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      headData: {
        expertNumber: 0, // 在库专家
        supplierNumber: 0 // 在库供应商
      },
      timeDay: '', // 当前几点,
      // ta索引
      tab: {
      }
    }
  },
  created() {
    this.tabClick(0)// 设置初始值tab
    this.initChart()// 初始化数据
  },
  methods: {
    // 返回本系统桌面
    backHome() {
      this.$store.dispatch('setHome')
    },
    // tab切换
    tabClick(index) {
      this.tab = this.tabs[index]
      this.$emit('tabChange', this.tab)
      this.initChart()// 初始化数据
    },
    // 初始化数据
    initChart() {
      this.initData()// 获取数据
      this.initDate()// 获取当前时间
    },
    // 获取数据
    initData() {
      const data = {}
      getExpertNumberAndSupplierNumber(data).then(res => {
        this.headData = {
          expertNumber: addChineseUnit(res.data.expertNumber), // 在库专家
          supplierNumber: addChineseUnit(res.data.supplierNumber) // 在库供应商
        }
      })
    },
    // 获取当前时间
    initDate() {
      getTime().then(res => {
        this.timeDay = this.$Moment(res.data.time).format('HH')
      })
    }
  }
}
</script>
<style lang="less" scoped>
// 引入变量
@import "./../reportChart.public.less";
@header-color:#ffeb7b; //header头部-文字高亮的颜色
@tab-ighlight:@text-ighlight; //当前tab选项高亮
@tab-H: 2.5rem; //tab高度
/*样式颜色边距修改-在上面的变量修改即可*/

.header {
  color: @main_color;
  margin-bottom: @main_M;
  overflow: hidden;
  .header-content {
    background-color: @highlight-bg;
    padding: @main_P;
    height: 4.75rem;
    line-height: 4.75rem;
    overflow: hidden;
    width: 100%;
    .backBtn{
      //position: absolute;
      //top: -25px;
      //left: 0;
      //height: 20px;
      font-size: 12px;
    }
    // 标题
    .head-title {
      width: 68%;
      background: url(~@/assets/img/statisticalAnalysis/reportChart/logo-tit.svg)
        center center no-repeat;
      background-size: 100% auto;
      font-weight: bolder;
      height: 100%;
      text-align: center;
      line-height: 3.125rem;
      font-size: 1.625rem;
    }
    //.head-left{
    //  position: relative;
    //}
    //左右文字
    .head-left,
    .head-right {
      width: 16%;
      font-size: 1rem;
      span {
        color: @header-color;
        padding: 0.25rem;
        font-size: 1.5rem;
      }
    }
    .head-right {
      text-align: right;
    }
    .hint{
      font-size: 14px;
    }
  }
  .header-footer {
    margin: @main_M @main-p;
    font-weight: 500;

    // 菜单
    .header-tabs {
      float: left;
      li {
        &:first-of-type{
          margin-left: .625rem;
        }
        float: left;
        position: relative;
        height: @tab-H;
        line-height: @tab-H;
        margin-right: 10px;
        cursor: pointer;
        .tabs-bg,
        .tabs-name {
          padding: 0 1.875rem;
        }
        .tabs-name {
          position: relative;
          z-index: 1;
        }
        .tabs-bg {
          box-sizing: border-box;
          z-index: 0;
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          background: @highlight-bg;
          transform: skewX(-20deg);
          height: 100%;
        }
      }
      li.active {
        color: @tab-ighlight;
        .tabs-bg {
          border: 1px solid @tab-ighlight;
        }
      }
    }
    .header-date {
      float: right;
      height: @tab-H;
      line-height: @tab-H;
      span {
        color: @tab-ighlight;
        padding: 0 0.25rem;
      }
    }
  }
}
</style>
