<template>
  <div class="contents">
    <div class="contetn_left">
      <div class="pagetab" v-if="!isInnerPage">
        <div class="item" ref="myDiv" v-focusable @click="toPage">
          ﹤实时销售看板
        </div>
      </div>
      <div class="pagetab" v-else>
        <div class="item" style="width: 120px;margin-right:10px" v-focusable>
          <select @click="changeYear">
            <option v-for="item in yearArr" :key="item" :value="item" :selected="curYear==item" >
              {{item}} 年
            </option>
          </select>
        </div>
      </div>
      <ItemWrap class="contetn_left-top contetn_lr-aitem" title="加盟商分布">
        <LeftBottom />
      </ItemWrap>
    </div>
    <div class="contetn_center">
      <ItemWrap class="contetn_center-bottom contetn_lr-item" title="加盟商总数量">
        <CenterTop :total="jmsTotal" />
        <LeftTop @total="setJmsTotal" style="height: 380px;" />
      </ItemWrap>
      <ItemWrap class="contetn_center-bottom contetn_lr-bitem" title="产品总数量">
        <CenterTop :total="cpTotal"/>
        <CenterBottom @total="setCpTotal" style="height: 370px;"/>
      </ItemWrap>
    </div>
    <div class="contetn_right">
      <ItemWrap
        class="contetn_right-top contetn_lr-item"
        :title="'采购金额TOP100加盟商('+curYear+'年)'"
        mode="left"
      >
        <div class="table-head">
          <div class="col-1">排名</div>
          <div class="col-5">加盟商</div>
          <div class="col-6">级别</div>
          <div class="col-6">采购金额(万元)</div>
        </div>
        <RightTop :curYear="curYear"/>
      </ItemWrap>
      <ItemWrap
        class="contetn_right-bottom contetn_lr-bitem"
        :title="'销售数量/金额TOP100产品('+curYear+'年)'"
        mode="left"
      >
        <div class="tab-panel">
          <span ref="curTab1" :class="curTab==1?'focus':''" v-focusable @onFocus="nextFocus(1)" @click="curTab=1">按数量</span>
          <span ref="curTab2" :class="curTab==2?'focus':''" v-focusable @onFocus="nextFocus(2)" @click="curTab=2">按金额</span>
        </div>
        <div class="table-head">
          <div class="col-1">排名</div>
          <div class="col-2">产品编码</div>
          <div class="col-3">产品分类</div>
          <div class="col-4">{{ curTab==1?'销售数量':'销售金额(万元)' }}</div>
        </div>
        <RightBottom :curYear="curYear" :curTab="curTab"/>
      </ItemWrap>
    </div>
  </div>
</template>

<script>
import LeftTop from './left-top.vue'
import LeftBottom from './left-bottom.vue'
import CenterTop from './center-top.vue'
import CenterBottom from './center-bottom.vue'
import RightTop from './right-top.vue'
import RightBottom from './right-bottom.vue'

export default {
  components: {
    LeftTop,
    LeftBottom,
    CenterTop,
    RightTop,
    RightBottom,
    CenterBottom
  },
  data () {
    return {
      curTab: 1,
      jmsTotal: 0,
      cpTotal: 0,
      curYear: '',
      isInnerPage: false,
      yearArr: []
    }
  },
  filters: {
    numsFilter (msg) {
      return msg || 0
    }
  },
  created () {
	  this.$nextTick(() => {
		  this.$tv.requestFocus(this.$refs.curTab2)
	  })
    const year = location.href.split('?')[1]
    this.curYear = year ? year.split('=')[1] : new Date().getFullYear()
    this.isInnerPage = this.$route.path.indexOf("bigStatistics")>=0
  },
  mounted () {
    const toYeay = new Date().getFullYear()
    this.yearArr = [toYeay-3,toYeay-2,toYeay-1,toYeay]
  },
  methods: {
    changeYear(e){
      this.toPage(e.target.value)
    },
    toPage (curYear) {
      if(!this.isInnerPage){
        this.$router.push({ name: 'realTimeSalesReport', query: { year: this.curYear } })
      }else{
        this.curYear = curYear
        this.$router.replace({ name: 'bigfPanalysisReport', query: { year: curYear } })
      }
    },
    setJmsTotal (val) {
      this.jmsTotal = val
    },
    setCpTotal (val) {
      this.cpTotal = val
    },
    nextFocus (e) {
      console.log(e)
      this.curTab = e
    }
  }
}
</script>
<style lang="less" scoped>
// 内容
.contents {
  width: 100%;
  display: flex;
  min-height: calc(100% - 60px);
  justify-content: space-between;
  .contetn_left,
  .contetn_right {
    width: 540px;
    box-sizing: border-box;
  }

  .contetn_center {
    width: 760px;
  }

  //左右两侧 三个块
  .contetn_left-top, .contetn_right-top{
	  margin-top: 15px;
  }
  .contetn_lr-item {
    height: 480px;
  }
  .contetn_lr-bitem {
    height: 480px;
  }
  .contetn_lr-aitem {
    height: 980px;
  }

  .contetn_center_top {
    width: 100%;
  }

  // 中间
  .contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .contetn_center-top{
    margin-top: 10px;
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }
  .tab-panel{
      display: flex;
      align-items: center;
      position: absolute;
      right: 0;
      top: -28px;
      z-index: 1000;
      font-size: 16px;
      > span{
        display: block;
        cursor: pointer;
        padding: 0 10px;
        border-right: 1px solid #999;
        &:last-child{
          border: 0;
        }
        color: rgba(255, 255, 255, 0.4);
      }
      .focus{
        color: rgba(255, 255, 255, 0.8);
      }
    }
    .table-head{
      display: flex;
      align-items: center;
      font-size: 14px;
      .col-1{
        width: 10%;
      }
      .col-2{
            width: 25%;
      }
      .col-3{
            width: 40%;
      }
      .col-4{
            width: 25%;
      }
      .col-5{
        width: 40%;
      }
      .col-6{
        width: 25%;
      }
      > div{
        text-align: center;
        padding: 5px 0;
        color: rgba(0, 170, 255, 0.8);
      }
  }
}
</style>
