<template>
  <div v-if="data" class="data-screen1">
    <el-backtop />
    <!-- <div class="title">
      <div class="name">活动订货数据实时追踪</div>
      <div>五月重启 强力回归 （20200512-14）</div>
      <div class="countDown">距活动结束仅剩： {{ countDown }}</div>
    </div> -->
    <div class="topData">
      <div class="cards">
        <div class="cardItem">
          <img class="bg" src="@/assets/databg1.png">
          <div class="data">
            <div class="top">
              <div class="left">销售金额</div>
              <div class="right">{{ data.money | toThousandFilter }}<span>元</span></div>
            </div>
            <div class="bottom small" />
          </div>
        </div>
        <div class="cardItem">
          <img class="bg" src="@/assets/databg2.png">
          <div class="data">
            <div class="top">
              <div class="left">精装版</div>
              <div class="right">{{ data.hard | toThousandFilter }}<span>套</span></div>
            </div>
            <div class="bottom">
              <span class="yes">今日新增：{{ data.hard_today | toThousandFilter }}</span>
            </div>
          </div>
        </div>
        <div class="cardItem">
          <img class="bg" src="@/assets/databg3.png">
          <div class="data">
            <div class="top">
              <div class="left">简约版</div>
              <div class="right">{{ data.simple | toThousandFilter }}<span>件</span></div>
            </div>
            <div class="bottom">
              <span class="yes">今日新增：{{ data.simple_today | toThousandFilter }}</span>
            </div>
          </div>
        </div>
        <div class="cardItem">
          <img class="bg" src="@/assets/databg4.png">
          <div class="data">
            <div class="top">
              <div class="left">老人版</div>
              <div class="right">{{ data.old | toThousandFilter }}<span>件</span></div>
            </div>
            <div class="bottom">
              <span class="yes">今日新增：{{ data.old_today | toThousandFilter }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="data.list" class="map">
      <div id="china3" style="width:100%;height:100%;" />
    </div>
    <div class="chooseBar">
      <div class="chooseItem" style="background: #A583F3;" @click="showDataType = 0;">各省排名</div>
      <div class="chooseItem" style="background: #24A8E8;" @click="showDataType = 1">代理公司排名</div>
      <!-- <div class="chooseItem" style="background: #617FF1;" @click="showDataType = 1">代理公司排名</div>
      <div class="chooseItem" style="background: #25C1CA;" @click="showDataType = 3">政委战区排名</div>
      <div class="chooseItem" style="background: #617FF1;" @click="showDataType = 4">销售排名</div>
      <div class="chooseItem" style="background: #25C1CA;" @click="showDataType = 5">数据分析</div>
      <div class="chooseItem" style="background: #A583F3;" @click="showDataType = 6">往期对比</div>
      <div class="chooseItem" style="background: #24A8E8;" @click="showDataType = 7">报名数据</div> -->
    </div>
    <div v-show="showDataType === 0" class="header">
      <span>各省排名</span>
    </div>
    <div v-show="showDataType === 0" id="table-wrapper" class="table-wrapper">
      <el-table v-if="data.list" ref="table" :data="data.list" style="width: 100%" border>
        <el-table-column label="排名" type="index" align="center" :index="index => index + 1" />
        <el-table-column label="地区" prop="name" align="center" />
        <el-table-column label="精装版数量" prop="hard" align="center" />
        <el-table-column label="简约版数量" prop="simple" align="center" />
        <el-table-column label="老人版数量" prop="old" align="center" />
        <el-table-column label="总金额" prop="value" align="center" />
      </el-table>
    </div>
    <div v-if="showDataType === 1" class="header">
      <span>代理公司排名</span>
    </div>
    <div v-if="showDataType === 1" class="table-wrapper table-wrapper-rank">
      <el-table :data="crownRank" style="width: 100%" border>
        <el-table-column label="排名" type="index" align="center" :index="index => index + 1" />
        <el-table-column label="代理公司" prop="nickname" align="center" />
        <el-table-column label="精装版" prop="hard" align="center" />
        <el-table-column label="简约版" prop="simple" align="center" />
        <el-table-column label="老人版" prop="old" align="center" />
        <el-table-column label="销售金额" prop="money" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { isPC, offset } from '@/utils'
import { deepClone } from '@/utils'
export default {
  name: 'DataVisual',
  data() {
    return {
      data: {},
      showDataType: -1,
      crownRank: [],
      s: 1589205600000,
      e: 1589471999000,
      n: 0
    }
  },
  computed: {
    countDown() {
      const add0 = num => num < 10 ? '0' + num : num
      const sec = Math.floor((this.e - this.n) / 1000)
      const day = Math.floor(sec / 86400)
      const hour = Math.floor((sec % 86400) / 3600)
      const minite = Math.floor((sec - 86400 * day - hour * 3600) / 60)
      const second = Math.floor(sec - 86400 * day - hour * 3600 - minite * 60)
      return `${add0(day)}天${add0(hour)}时${add0(minite)}分${add0(second)}秒`
    }
  },
  watch: {
    showDataType(n) { // 点击数据类型
      if (n === 1) {
        this.loading = this.$loading()
        axios.get('http://api.admin.app.jiuweiyun.cn/api/data/get_crown').then(({ data: { data: { list }}}) => {
          list.sort((a, b) => b.money - a.money)
          this.crownRank = list
          this.loading.close()
        })
      }
      this.$nextTick(() => {
        window.scrollTo(0, document.getElementsByClassName('chooseBar')[0].offsetTop)
      })
    }
  },
  created() {
    if (!isPC()) {
      this.$router.replace({ path: '/2' })
      return
    }
    this.loading = this.$loading()
    this.request()
    // this.timer = setInterval(() => this.request(), 30000)
  },
  mounted() {
    this.n = Date.now()
    if (this.n >= this.s && this.n <= this.e) {
      this.timer = setInterval(() => {
        if (this.n > this.e) {
          clearInterval(this.timer)
        }
        this.n = Date.now()
      }, 1000)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: { // 然而实际的需求却是
    request() {
      axios.get('http://api.admin.app.jiuweiyun.cn/api/data/data').then(({ data: res }) => {
        this.loading.close()
        this.data = res.data
        res.data.list.sort((a, b) => b.value - a.value)
        let max = 0
        let maxIndex = 0
        this.data.list.forEach((e, i) => {
          if (e.value > max) {
            max = e.value
            maxIndex = i
          }
        })
        const step = Math.floor(max / 6)
        this.$nextTick(() => {
          const echarts = window.echarts.init(document.getElementById('china3'))
          echarts.setOption({
            backgroundColor: '#FFFFFF',
            tooltip: {
              trigger: 'item',
              alwaysShowContent: true,
              formatter: params => {
                return `
                  省份：${params.name} <br />
                  排名：${params.dataIndex + 1} <br />
                  总订货金额：${params.value} <br />
                  精装版套数：${this.data.list[params.dataIndex].hard} <br />
                  简约版件数：${this.data.list[params.dataIndex].simple} <br />
                  老人版件数：${this.data.list[params.dataIndex].old} <br />
                `
              }
            },
            visualMap: {
              show: true,
              x: 'left',
              y: 'bottom',
              splitList: [
                { start: step * 6, end: step * 7, label: `${step * 6} - ${step * 7} 元` },
                { start: step * 5, end: step * 6, label: `${step * 5} - ${step * 6} 元` },
                { start: step * 4, end: step * 5, label: `${step * 4} - ${step * 5} 元` },
                { start: step * 3, end: step * 4, label: `${step * 3} - ${step * 4} 元` },
                { start: step * 2, end: step * 3, label: `${step * 2} - ${step * 3} 元` },
                { start: step * 1, end: step * 2, label: `${step * 1} - ${step * 2} 元` },
                { start: 1, end: step * 1, label: `${1} - ${step * 1} 元` },
                { start: 0, end: 0, label: '0 元' }
              ],
              color: ['#30A6FE', '#44AFFE', '#5CB9FE', '#71C2FE', '#89CDFF', '#A5D8FE', '#C5E5FD', '#EFEFEF']
            },
            series: [{
              name: '销售套数',
              type: 'map',
              mapType: 'china',
              aspectScale: 1,
              zoom: 1.23,
              label: {
                normal: { show: true },
                emphasis: { show: true }
              },
              data: this.data.list
            }]
          })
          if (!this.click) {
            this.click = true
            echarts.on('click', params => {
              this.tabbleChartData = deepClone(this.data.list)
              this.dispatchClick = true
              this.showDataType = 0
              this.$nextTick(() => {
                const to = document.getElementsByClassName('el-table__row')[params.dataIndex]
                window.scrollTo(0, offset(to).top)
              })
            })
          }
          echarts.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: maxIndex
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .data-screen1 {
    padding: 0.5vw 1vw;
    box-sizing: border-box;
    background: #F2F4F5;
    .title {
      height: 128px;
      background: #ffffff;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      font-weight: bold;
      .name {
        font-size: 34px;
      }
      .countDown {
        color: red;
      }
    }
    .topData {
      height: 8vw;
      background: white;
      margin-bottom: 0.1vw;
      border-radius: 0.52vw;
      >.cards {
        height: 8vw;
        display: flex;
        justify-content: space-between;
        >.cardItem {
          width: 21vw;
          height: 100%;
          position: relative;
          z-index: 1;
          >.bg {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
          }
          >.data {
            height: 100%;
            color: white;
            box-sizing: border-box;
            padding: 1vw;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            >.top {
              display: flex;
              justify-content: space-between;
              >.left {
                font-size: 1.5vw;
              }
              >.right {
                font-size: 2vw;
                >span {
                  font-size: 1.5vw;
                }
              }
            }
            >.bottom {
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              >.left {
                font-size: 2vw;
              }
              >.right {
                font-size: 0.83vw;
                >.reduce {
                  color: #F7534F;
                }
              }
              &.small {
                >.left {
                  font-size: 1vw!important;
                }
              }
            }
          }
        }
      }
    }
    .chooseBar {
      overflow: hidden;
      .chooseItem {
        float: left;
        width: 10vw;
        height: 4.17vw;
        margin: 0.5vw 1.05vw;
        line-height: 4.17vw;
        text-align: center;
        cursor: pointer;
      }
    }
    .map {
      height: 567px;
    }
    .header {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #43464D;
      font-size: 18px;
      font-weight: bold;
      box-sizing: border-box;
      padding: 0 40px;
      background: #F5F5F5;
    }
    .el-table {
      td, th, .label {
        padding: 8px 0;
        text-align: center;
      }
    }
    .table-wrapper {
      padding: 0 32px;
    }
    .table-wrapper5 {
      >.el-table {
        >>> td[class^="el-table_6_column_"] {
          padding: 0;
          display: table-cell;
        }
        >>> .cell {
          padding: 0;
        }
        .merge-item-item {
          font-size: 14px;
          line-height: 40px;
          border-bottom: 1px solid rgb(223, 230, 236);
        }
        .merge-item-item:last-child {
          border-bottom: none;
        }
      }
    }
  }
</style>
