<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-item" :title="'区域销售金额占比'">
        <LeftTop :curYear="curYear" />
      </ItemWrap>
      <ItemWrap class="contetn_left-bottom contetn_lr-bitem" :title="'销售金额TOP15'">
        <LeftBottom :curYear="curYear" />
      </ItemWrap>
    </div>
    <div class="contetn_center">
      <dv-border-box-8 class="contetn_center-top">
        <CenterTop :curYear="curYear" :totalNums="yearTotalNums" :totalAmount="yearTotalAmount"/>
      </dv-border-box-8>
      <CenterMap :curYear="curYear" @onData="setYearData" class="contetn_center_topMap" />
      <ItemWrap class="contetn_center-bottom" :title="'品类销售分布'">
        <CenterBottom :curYear="curYear" />
      </ItemWrap>
    </div>
    <div class="contetn_right">
      <ItemWrap class="contetn_right-top contetn_lrr-item" :title="'销售趋势分析'">
        <RightTop :curYear="curYear" style="height: 94%;" />
      </ItemWrap>
      <ItemWrap class="contetn_right-bottom contetn_right_bottom" title="本月/周销售">
        <RightBottom />
      </ItemWrap>
      <ItemWrap class="contetn_center-bottom" title="今日销售">
        <div class="table-head">
          <div class="col-1">加盟商</div>
          <div class="col-2">级别</div>
          <div class="col-3">销售数量</div>
          <div class="col-4">销售金额(元)</div>
        </div>
        <div style="padding-bottom: 20px;">
          <RightToday />
        </div>
      </ItemWrap>
    </div>
  </div>
</template>

<script>
import LeftTop from './left-top.vue'
import LeftBottom from './left-bottom.vue'
import CenterTop from './center-top.vue'
import CenterMap from './center-map.vue'
import CenterBottom from './center-bottom.vue'
import RightTop from './right-top.vue'
import RightBottom from './right-bottom.vue'
import RightToday from './right-today.vue'
export default {
  components: {
    LeftTop,
    LeftBottom,
    CenterTop,
    CenterMap,
    RightTop,
    RightBottom,
    CenterBottom,
    RightToday
  },
  data () {
    return {
      yearTotalNums: 0,
      yearTotalAmount: 0,
      curYear: '',
      isInnerPage: false,
      yearArr: []
    }
  },
  filters: {
    numsFilter (msg) {
      return msg || 0
    }
  },
  created () {
	  this.$nextTick(() => {
		  this.$tv.requestFocus(this.$refs.myDiv)
	  })
    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: 'fPanalysisReport', query: { year: this.curYear } })
      }else{
        this.curYear = curYear
        this.$router.replace({ name: 'bigRealTimeSalesReport', query: { year: curYear } })
      }
    },
    setYearData (data) {
      console.log(data)
      this.yearTotalNums = data.totalQty
      this.yearTotalAmount = data.totalAmount
    }
  }
}
</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;
    // padding: 16px 0;
  }

  .contetn_center {
    width: 760px;
  }

  //左右两侧 三个块
  .contetn_left-top,
  .contetn_right-top {
    margin-top: 15px;
  }

  .contetn_lr-item {
    height: 400px;
  }

  .contetn_lrr-item {
    height: 370px;
  }

  .contetn_lr-bitem {
    height: 560px;
  }

  .contetn_right_bottom {
    height: 260px;
  }

  .contetn_center_top,
  .contetn_center_topMap {
    width: 100%;
  }

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

  .contetn_center-top {
    height: 110px;
    margin-top: 10px;
  }

  .contetn_center-bottom {
    height: 310px;
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }

  .table-head {
    display: flex;
    align-items: center;
    font-size: 14px;
    .col-1 {
      width: 35%;
    }

    .col-2 {
      width: 25%;
    }

    .col-3 {
      width: 20%;
    }

    .col-4 {
      width: 20%;
    }

    >div {
      text-align: center;
      padding: 5px 0;
      color: rgba(0, 170, 255, 0.8);
    }
  }

  .right_center_wrap {
    overflow: hidden;
    width: 100%;
    height: 220px !important;
  }
}

@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }

  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }

  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
