<template>
  <div v-if="data" class="data-screen2">
    <el-backtop />
    <div class="title">
      <div class="name">活动订货数据实时追踪</div>
      <div>五月重启 强力回归 （20200512-14）</div>
      <!-- <div class="countDown">距活动结束仅剩： {{ countDown }}</div> -->
    </div>
    <div class="topData">
      <div class="top">
        <img class="bg" src="@/assets/databg.png">
        <div class="data">
          <div class="top">
            <span style="font-size: 16px;">订单金额汇总:</span>
            <span class="num">{{ data.money | toThousandFilter }}</span><span class="unit">元</span>
          </div>
        </div>
      </div>
      <div class="bot">
        <div class="item">
          <span>精装版</span>
          <span class="num">{{ data.hard | toThousandFilter }}<span>套</span></span>
          <span class="yes" style="color:red">新增：+ {{ data.hard_today | toThousandFilter }}</span>
        </div>
        <div class="item center">
          <span>简约版</span>
          <span class="num">{{ data.simple | toThousandFilter }}<span>件</span></span>
          <span class="yes" style="color:red">新增：+ {{ data.simple_today | toThousandFilter }}</span>
        </div>
        <div class="item">
          <span>老人版</span>
          <span class="num">{{ data.old | toThousandFilter }}<span>件</span></span>
          <span class="yes" style="color:red">新增：+ {{ data.old_today | toThousandFilter }}</span>
        </div>
      </div>
    </div>
    <div v-if="data.list" class="map">
      <div id="china4" 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-if="showDataType === 0" class="header">
      <span>各省排名</span>
    </div>
    <div v-if="showDataType === 0" id="table-wrapper" class="table-wrapper">
      <el-table ref="table" :data="data.list" style="width: 100%" header-cell-class-name="fsdfasdfas" border>
        <el-table-column label="排名" :width="width / 8" type="index" align="center" />
        <el-table-column label="地区" :width="width / 6" prop="name" align="center" />
        <el-table-column label="精装版" :width="width / 6.5" prop="hard" align="center" />
        <el-table-column label="简约版" :width="width / 6.5" prop="simple" align="center" />
        <el-table-column label="老人版" :width="width / 6.5" 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">
      <el-table :data="crownRank" border>
        <el-table-column label="排名" type="index" align="center" :width="width / 13" />
        <el-table-column label="代理公司" prop="nickname" align="center" :width="width / 6.5" />
        <el-table-column label="精装版" prop="hard" align="center" :width="width / 6.5" />
        <el-table-column label="简约版" prop="simple" align="center" :width="width / 6.5" />
        <el-table-column label="老人版" prop="old" align="center" :width="width / 6.5" />
        <el-table-column label="下单金额" prop="money" align="center" :width="width / 6.5" />
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { isPC, offset } from '@/utils'
import { deepClone } from '@/utils'
export default {
  name: 'DataScreen4',
  props: {},
  data() {
    return {
      data: null,
      crownRank: [],
      showDataType: -1,
      width: document.body.offsetWidth,
      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: '/1' })
      return
    }
    this.loading = this.$loading()
    this.request()
    // this.timer = setInterval(() => this.request(), 30000)
    this.$on('renderDetail', (index) => {
      this.$nextTick(() => {
        document.getElementById('TooltipDetail').parentElement.parentElement.style.zIndex = 123
        document.getElementById('TooltipInfo').onclick = e => {
          console.log(e)
        }
        document.getElementById('TooltipDetail').onclick = () => {
          this.openScroll(index)
        }
      })
    })
  },
  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: {
    openScroll(index) {
      this.tabbleChartData = deepClone(this.data.list)
      this.dispatchClick = true
      this.showDataType = 0
      this.$nextTick(() => {
        const to = document.getElementsByClassName('el-table__row')[index]
        window.scrollTo(0, offset(to).top)
      })
    },
    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(() => {
          this.echarts = window.echarts.init(document.getElementById('china4'))
          this.echarts.setOption({
            backgroundColor: '#FFFFFF',
            textStyle: {
              fontSize: 6
            },
            tooltip: {
              trigger: 'item',
              enterable: true,
              alwaysShowContent: false,
              formatter: params => {
                this.$emit('renderDetail', params.dataIndex)
                return `
                  <div style="min-width: 123px; height: 72px; display:flex; align-items: center;">
                    <div id="TooltipInfo" style="flex: 1; height: 100%; font-size: 8px; line-height: 12px; padding-right: 6px; border-right: 0.4px solid #FFFFFF;">
                      <div>省份：${params.name}</div>
                      <div>排名：${params.dataIndex + 1}</div>
                      <div>总订货金额：${params.value}</div>
                      <div>精装版套数：${this.data.list[params.dataIndex].hard}</div>
                      <div>简约版件数：${this.data.list[params.dataIndex].simple}</div>
                      <div>老人版件数：${this.data.list[params.dataIndex].old}</div>
                    </div>
                    <div id="TooltipDetail" style="height: 100%; line-height: 72px; margin-left: 8px;">详情 ></div>
                  </div>
                `
              }
            },
            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 元' }
              ],
              itemGap: 0,
              itemWidth: 8,
              itemHeight: 5.6,
              textStyle: {
                fontSize: 8
              },
              color: ['#FF4C4C', '#FF6666', '#FF7F7F', '#FF9999', '#FFB2B2', '#FFCCCC', '#FFE5E5', '#EFEFEF']
            },
            series: [{
              name: '销售套数',
              type: 'map',
              mapType: 'china',
              aspectScale: 1,
              zoom: 1.23,
              label: {
                normal: { show: true },
                emphasis: { show: true }
              },
              data: this.data.list
            }],
            animation: true
          })
          if (!this.click) {
            this.click = true
            this.echarts.on('click', params => {
              console.log(params)
            })
          }
          this.echarts.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: maxIndex
          })
          this.$nextTick(() => {
            document.getElementById('TooltipDetail').parentElement.parentElement.style.zIndex = 123
            document.getElementById('TooltipInfo').onclick = e => {
              console.log(e)
            }
            document.getElementById('TooltipDetail').onclick = () => {
              this.openScroll(0)
            }
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .data-screen2 {
    background:rgba(242,244,245,1);
    .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 {
      display: flex;
      height: 240px;
      box-sizing: border-box;
      flex-direction: column;
      padding: 6px 15px 10px 15px;
      justify-content: space-between;
      >.top {
        height: 90px;
        display: flex;
        position: relative;
        z-index: 1;
        >.bg {
          width: 100%;
          height: 100%;
          position: absolute;
          z-index: -1;
        }
        >.data {
          flex: 1;
          display: flex;
          color: white;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          >.top {
            font-size: 25px;
            margin-bottom: 8px;
            >.unit {
              font-size: 12px;
            }
          }
          >.bot {
            font-size: 12px;
          }
        }
      }
      >.bot {
        height: 120px;
        display: flex;
        >.item {
          flex: 1;
          display: flex;
          font-size: 12px;
          line-height: 22px;
          border-radius: 3px;
          padding: 9px 13px;
          background: white;
          flex-direction: column;
          align-items: flex-start;
          box-sizing: border-box;
          box-shadow:0px 2px 4px 0px rgba(111,173,226,0.41);
          &.center {
            margin: 0 8px;
          }
          >.per {
            color: #4F87F7;
          }
          >.num {
            flex: 1;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: #9876E6;
            >span {
              font-size: 14px;
            }
          }
          >.yes {
            color: #999999;
            >span {
              color: #5AB4E6;
              &.reduce {
                color: #F7534F;
              }
            }
          }
        }
      }
    }
    .map {
      height: 60vw;
    }
    .chooseBar {
      overflow: hidden;
      margin: 17px 2.4vw 0;
      box-sizing: border-box;
      justify-content: space-between;
      .chooseItem {
        float: left;
        width: 21.333vw;
        height: 9.333vw;
        font-size: 12px;
        border-radius: 2px;
        line-height: 9.333vw;
        margin: 0.8vw 1.2vw;
        text-align: center;
      }
    }
    .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 8px;
      background: #F5F5F5;
      .el-select {
        width: 160px;
      }
    }
    .table-wrapper {
      width: 100vw;
      padding: 0;
    }
    .table-wrapper5 {
      >.el-table {
        >>> td[class^="el-table_6_column_"] {
          padding: 0;
          display: table-cell;
        }
        >>> .cell {
          padding: 0;
        }
        .merge-item-item {
          font-size: 12px;
          line-height: 36px;
          border-bottom: 1px solid rgb(223, 230, 236);
        }
        .merge-item-item:last-child {
          border-bottom: none;
        }
      }
    }
    .el-table >>> .el-table__header-wrapper {
      font-size: 3.11vw;
    }
    .el-table >>> .el-table__expanded-cell {
      padding: 0 8px 8px;
    }
  }
</style>
