<template>
  <div id="app">
     <div class="header">
       <div class="company-name">
         中德智慧看板
       </div>
       <div class="total-peice">
         <!-- ¥{{totalPrice}} -->
         <CountTo :number="totalPrice" ref="CountTo"/>
        </div>
       <div class="date">
        当前时间: {{date}}
       </div>
     </div>
     <div class="row">
       <div class="column">
          <div class="box1">
          <div class="title">
            京东旗舰店
          </div>
            <vue-chart style="width: 100%;height: 90%;"
            autoresize
            :options="jdPoP"
            />
            
          </div>
          <div class="footer"></div>
        </div>
        <div class="column">
          <div class="box1">
          <div class="title">
            京东自营店
          </div>
            <vue-chart style="width: 100%;height: 90%;"
            autoresize
            :options="jdSelf"
            />
            
          </div>
          <div class="footer"></div>
        </div>
        <div class="column">
          <div class="box1">
          <div class="title">
            天猫旗舰店
          </div>
            <vue-chart style="width: 100%;height: 90%;"
            autoresize
            :options="tmPop"
            />
            
          </div>
          <div class="footer"></div>
        </div>
     </div>
     <div class="line">
       <div class="tip">
         <div class="tip-box">
           <div class="tip-item"  v-for="item in colorList" :key="item.color">
             <div :style="{background: item.color}" class="tip-color"></div>
             <div class="label">{{item.label}}</div>
          </div>
         </div>
       </div>
       <div class="echarts">
          <vue-chart style="width: 100%;height: 90%;"
            autoresize
            :options="line"
            />
       </div>
       <div class="footer">

       </div>
     </div>
     
  </div>
</template>

<script>
// 10001 京东pop(旗舰) 10002 京东自营店 20001 天猫旗舰店

import CountTo from './countTo'
import options from './echartsData'
export default {
  name: 'App',
  components: {
    CountTo
  },
  watch: {
    newTotalPrice () {
      this.time = setTimeout( () => {
        this.totalPrice = this.newTotalPrice
      }, 1000)
      clearTimeout(this.time)
    }
  },
  created () {
    this.getCurSystemDate()
    this.initWebSocket()
  },
  data () {
    return {
      jdPoP: JSON.parse( JSON.stringify( options.pre)),
      jdSelf: JSON.parse( JSON.stringify( options.pre)),
      tmPop: JSON.parse( JSON.stringify( options.pre)),
      line: options.line,
      date: '',
      totalPrice: 0,
      newTotalPrice: 0,
      orderNum: ['0', '0', ',', '0', '0', '0', ',', '0', '0', '0'],
      // ['rgb(31, 172, 255)', 'rgb(105, 225, 176)', 'rgb(255, 149, 145)']
      colorList: [
        {
          label: '订单数',
          color: 'rgb(31, 172, 255)'
        },
        {
          label: '用户访问量',
          color: 'rgb(105, 225, 176)'
        },
        {
          label: '订单金额',
          color: 'rgb(255, 149, 145)'
        },
      ]
    }
  },
  methods: {
    initWebSocket () {
    const evtSource = new EventSource('https://open.luojigou.vip/data-panel/msg')

    evtSource.onmessage = e => {
      const { data } = e
      const { upData, downDate } = JSON.parse(data)   
      console.log(downDate, 'downDate');
      this.initPreData(upData)
      this.initLineData(downDate)
    }

    evtSource.onopen = () => {

    }

    evtSource.onerror = () => {
      console.log('error');
    }

    },
    // 转换名称
    initName (label) {
      switch (label) {
        case '10001':
          
          return 'jdPoP'
        case '10002':
          
          return 'jdSelf'
        case '20001':
          
          return 'tmPop'
      
        default:
          throw new Error('传回的店铺标识不匹配')
      }
    },
    // 折线数据
    initLineData (data) {

      this.line.yAxis[0].max = Math.floor(Math.max.apply(this, data.map(item => item.orderNum))) + 1000
      this.line.yAxis[1].max = Math.floor(Math.max.apply(this, data.map(item => item.uvNum))) + 1500
      this.line.yAxis[2].max = Math.floor(Math.max.apply(this, data.map(item => item.orderPrice ))) + 20000

      this.line.series[0].data = data.map(item => item.orderNum)
      this.line.series[1].data = data.map(item => item.uvNum)
      this.line.series[2].data = data.map(item => item.orderPrice)
      this.totalPrice = data.map(item =>  Number(item.orderPrice)).reduce( (pre, next) => pre + next )
      this.$refs['CountTo'].dispatch(this.totalPrice)
      this.line.xAxis.data = data.map(item => {
        let date = item.orderDate.substr(4)
        return [date.substr(0, 2), date.substr(2)].join('-')
      })

      console.log(this.line);
    },
    // 饼图转换数据
    initPreData (data) {
      console.log(data, 'data');
      const tmPop =  data['20001']
      const jdPoP =  data['10001']
      // eslint-disable-next-line no-prototype-builtins
      const jdSelf =  data['10002']
      console.log( [tmPop, jdPoP, jdSelf]);
      [tmPop, jdPoP, jdSelf].map( item => {
        item.name = this.initName(item.label)
        return item
      }).forEach( (item) => {

        this[item.name].series[0].data[0].value = ( item.monthPrice / 10000 ).toFixed(2)
        this[item.name].series[0].data[0].label.formatter = `{b|{b}：} {c|{c}万} \n {per|{d}%} \n  {r|月度目标: ${( item.monthTargetPrice / 10000 ).toFixed(2)}万}`
        this[item.name].series[0].data[1].value =  (( item.monthTargetPrice / 10000 ) - ( item.monthPrice  / 10000 )).toFixed(2) 


        this[item.name].series[1].data[0].value = ( item.yearPrice  / 10000 ).toFixed(2)
        this[item.name].series[1].data[0].label.formatter = `{b|{b}：} {c|{c}万} {per|{d}%} \n  {r|年度目标: ${( item.yearTargetPrice / 10000 ).toFixed(2)}万}`
        this[item.name].series[1].data[1].value = (( item.yearTargetPrice / 10000 ) - ( item.yearPrice  / 10000 )).toFixed(2)
      })

    },

    // 获取当前系统时间
    getCurSystemDate ( ) {
      setInterval( () => {
        let date = new Date();
        var YY = date.getFullYear() + '-';
        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        this.date =  YY + MM + DD + ' ' +  hh + mm + ss
      }, 1000 )
    }
  }
}
</script>

<style lang="less" scoped>
@import './app.less';
// #app {
//   width: 100vw;
//   height: 100vh;
//   background: url('./assets/data-bg.jpg') no-repeat ;
//   background-size: 100% 100%;
// }

.header {
  background: url('./assets/head_bg.png') no-repeat  top center;
  position: relative;
  height: 1.25rem;
  background-size: 100% 100%;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3vw;
  .company-name {
    font-size: 0.25rem;
    margin-top: -0.3rem;
    color: rgba(255, 255, 255, 0.7)
  }
  .total-peice {
    font-size: 0.875rem;
    margin-left: 8vw;
    margin-bottom: 1vh;
  }
  .date {
    font-size: 0.25rem;
    margin-top: -0.3rem;
    color: rgba(255, 255, 255, 0.7)
  }
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5vw;
  margin-top: 5vh;
}

.column {
  position: relative;
  width: 28vw;
  height: 30vh;
  // margin-left: 5vw;
  padding: 0.5em 0.5em;
  background: url('./assets/line.png') no-repeat;
  border: 1px solid rgba(25, 186, 139, 0.17);
}

.box1 {
  width: 28vw;
  height: 30vh;
  position: relative;
  .title {
    color: #fff;
    font-size: 0.3rem;
    text-align: center;
  }
   .footer {
    width: calc(20vw - 3em);
    height: 1px;
    position: relative;
  }
}
.column::before  {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-left: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
}
.column::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
}

.footer::before  {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-left: 2px solid #02a6b5;
    border-bottom: 2px solid #02a6b5;
}
.footer::after  {
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
}


.line {
  width: 96vw;
  height: 40vh;
  position: relative;
  background: url('./assets/line.png') no-repeat;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 5vh;
  overflow: hidden;
  .echarts {
    width: 100%;
    height: 100%;
    margin-top: 2vh;
  }
  .tip {
    width: 100%;
    height: 2vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .tip-box {
      display: flex;
      .tip-item {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 0.3vw;
        .tip-color {
          width: 1vw;
          height: 1vh;
          border-radius: 0.1vw;
        }
        .label {
          color: #fff;
          font-size: 0.125rem;
          margin-left: 0.2vw;
        }
      }
    }
  }
}

.line::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
}
.line::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
}
</style>
