<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
  <div class="contents">
    <div class="contetn_left">
      <div class="pagetab">
        <div class="item" ref="myDiv" v-focusable @click="toPage">
          ﹤加盟商/产品分析
        </div>
      </div>
      <ItemWrap class="contetn_left-top contetn_lr-item" title="区域销售金额占比">
        <LeftTop />
      </ItemWrap>
      <ItemWrap class="contetn_left-bottom contetn_lr-bitem" title="销售金额TOP15">
        <LeftBottom />
      </ItemWrap>
    </div>
    <div class="contetn_center">
      <dv-border-box-8 class="contetn_center-top">
        <CenterTop :totalNums="yearTotalNums" :totalAmount="yearTotalAmount"/>
      </dv-border-box-8>
      <CenterMap @onData="setYearData" class="contetn_center_topMap" />
      <ItemWrap class="contetn_center-bottom" title="品类销售分布">
        <CenterBottom />
      </ItemWrap>
    </div>
    <div class="contetn_right">
      <ItemWrap class="contetn_right-top contetn_lrr-item" title="销售趋势分析">
        <RightTop 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
    }
  },
  filters: {
    numsFilter (msg) {
      return msg || 0
    }
  },
  created () {
	  this.$nextTick(() => {
		  this.$tv.requestFocus(this.$refs.myDiv)
	  })
  },
  mounted () { },
  methods: {
    toPage () {
      this.$router.push({ name: 'fPanalysisReport' })
    },
    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>
