<template>
    <div id="app">
        <div class="header">
            <div class="logo">

            </div>
            <div class="title">
                中德线上销售业务实时数据
            </div>
            <div class="date">
                {{date}}
            </div>
        </div>

        <div class="content">
            <div class="column1">
                <div class="row1">
                    <slot-temp>
                        <div class="shop">
                            京东旗舰店
                        </div>
                        <div class="echarts">
                            <div class="echarts1">
                                <vue-chart 
                                    style="width: 100%;height: 100%;"
                                    autoresize
                                    :options="JDProMonth"
                                />
                                <div class="money">
                                    <div>
                                        {{JDProMonthTarget}}
                                   
                                    </div>
                                    <div>万</div>
                                </div>
                                <Label label="本月销售目标" text-color="#09ACEA" back-color="#0062EF"/>
                                <Label :label="`已完成: ${JDProMonthRate} ${JDProMonthSell}万`" text-color="#09ACEA" back-color="#FF0382"/>
                            </div>
                            <div class="echarts1">
                                <vue-chart 
                                style="width: 100%;height: 100%;"
                                autoresize
                                :options="JDProYear"
                                />
                                <div class="money">
                                    <div>{{JDProYearTarget}}</div>
                                    <div>万</div>
                                </div>
                                <Label label="本年销售目标" text-color="#09ACEA" back-color="#033188"/>
                                <Label :label="`已完成: ${JDProYearRate} ${JDProYearSell}万`" text-color="#09ACEA" back-color="#009DEF" />
                            </div>
                        </div>
                    </slot-temp>
                </div>
                <div class="row2">
                    <slot-temp>
                        <div class="shop">
                              京东自营店
                        </div>
                        <div class="echarts">
                            <div class="echarts1">
                                <vue-chart 
                                style="width: 100%;height: 100%;"
                                autoresize
                                :options="JDSelfMonth"
                                />
                                <div class="money">
                                    <div>{{JDSelfMonthTarget}}</div>
                                    <div>万</div>
                                </div>
                                <Label label="本月销售目标" text-color="#09ACEA" back-color="#FF0382" />
                                <Label :label="`已完成: ${JDSelfMonthRate} ${JDSelfMonthSell}万`" text-color="#09ACEA" back-color="#0062EF"/>
                            </div>
                            <div class="echarts1">
                                <vue-chart 
                                style="width: 100%;height: 100%;"
                                autoresize
                                :options="JDProYear"
                                />
                                <div class="money">
                                    <div>{{JDSelfYearTarget}}</div>
                                    <div>万</div>
                                </div>
                                <Label label="本年销售目标" text-color="#09ACEA" back-color="#009DEF"/>
                                <Label :label="`已完成: ${JDSelfYearRate} ${JDSelfYearSell}万`" text-color="#09ACEA" back-color="#033188"/>
                            </div>
                        </div>
                    </slot-temp>
                </div>
                <div class="row3">
                    <slot-temp>
                        <div class="shop">
                            天猫旗舰店
                        </div>
                        <div class="echarts">
                            <div class="echarts1">
                                <div class="columnar">
                                    <div class="month">
                                        <div class="label">
                                            本月
                                        </div>
                                        <img style="width: 0.56vw; height: 2.6vh; object-fit: contain" :src="require('@/assets/rect.png')" alt="">
                                        <div class="columnar-perture">
                                            <div class="columnar-perture-box">
                                                <div class="top-line" :style="{width: (TMMonthSell / TMMonthTarget) * 12.62 + 'vw'}" />
                                                <div class="price">{{TMMonthSell + '万'   }}</div>
                                            </div>
                                            
                                            <div class="columnar-perture-box">
                                                 <div class="bottom-line" />
                                                 <div class="price"> {{TMMonthTarget + '万'   }} </div>
                                            </div>
                                           
                                        </div>
                                    </div>
                                    <div class="year">
                                        <div class="label">
                                            本年
                                        </div>
                                        <img style="width: 0.56vw; height: 2.8vh; object-fit: contain" :src="require('@/assets/rect.png')" alt="">
                                        <div class="columnar-perture">
                                             <div class="columnar-perture-box">
                                                <div class="top-line" :style="{width: (TMYearSell / TMYearTarget) * 12.62 + 'vw'}" />
                                                <div class="price">{{TMYearSell + '万'   }}</div>
                                            </div>
                                            
                                            <div class="columnar-perture-box">
                                                 <div class="bottom-line" />
                                                 <div class="price"> {{TMYearTarget + '万'   }} </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="tip">
                                    <Label label="当前销量" text-color="#09ACEA" back-color="#0062EF"/>
                                    <Label label="目标销量" text-color="#09ACEA" back-color="#FF0382"/>
                                </div>
                            </div>
                        </div>
                    </slot-temp>
                </div>
                
            </div>
            <div class="column2">
                <div class="row1">
                    <div class="total-sell">
                        <div class="title">
                            年度总销售额
                        </div>
                        <div class="total-count">
                            <CountTo  
                                separator=','
                                :key="allYearPrice" 
                                style="font-size: 1.25rem" 
                                :startVal='initYearPrice' 
                                :endVal='allYearPrice' 
                                :duration='2000' />
                                <span>元</span>
                        </div>
                    </div>
                </div>
                <div class="row2">
                    <div class="header">
                        <div class="label">
                            订单数量
                        </div>
                        <div class="tip">
                            <Label style="margin-right: 0.3vw; width: 6vw" label="京东旗舰店" text-color="rgb(0, 157, 239)" back-color="rgb(1, 255, 233)" />
                            <Label style="margin-right: 0.3vw;width: 6vw" label="京东自营店" text-color="rgb(0, 157, 239)" back-color="rgb(140, 5, 233)" />
                            <Label style="width: 6vw" label="天猫旗舰店" text-color="rgb(0, 157, 239)" back-color="rgb(221, 178, 55)" />
                        </div>
                    </div>
                    <div class="echarts">
                        <vue-chart
                            style="width: 100%;height: 100%;"
                            autoresize
                            :options="yearOrderNum"
                        />
                    </div>
                </div>
                <div class="row3">
                    <slot-temp width="24.89vw" label="本周用户访问量" >
                        <div class="echarts">
                            <vue-chart
                                style="width: 100%;height: 100%;"
                                autoresize
                                :options="weekUvNum"
                            />
                            <div class="Label">
                                <Label style="margin-right: 0.3vw;width: 6vw" label="京东旗舰店" text-color="rgb(0, 157, 239)" back-color="rgb(0, 157, 239)" />
                                <Label style="margin-right: 0.3vw;width: 6vw" label="京东自营店" text-color="rgb(0, 157, 239)" back-color="rgb(120, 55, 217)" />
                                <Label label="天猫旗舰店" text-color="rgb(0, 157, 239)" back-color="#FF0382" />
                            </div>
                        </div>
                        
                    </slot-temp>
                    <slot-temp label="店铺订单分布">
                        <div class="echarts2">
                            <div class="echarts2-box">
                                <vue-chart
                                    style="width: 100%;height: 100%;"
                                    autoresize
                                    :options="ShopDistribution"
                                />
                            </div>
                            
                            <div class="label2">
                                <Label style="margin-right: 0.3vw" label="京东旗舰店" text-color="rgb(0, 157, 239)" back-color="rgb(0, 157, 239)" />
                                <Label style="margin-right: 0.3vw" label="京东自营店" text-color="rgb(0, 157, 239)" back-color="rgb(120, 55, 217)" />
                                <Label label="天猫旗舰店" text-color="rgb(0, 157, 239)" back-color="#FF0382" />
                            </div>
                        </div>
                    </slot-temp>
                </div>
            </div>
            <div class="column3">

                    <div
                        v-for="item in salePricesList"
                        :key="item.id"
                    >
                        <slot-temp 
                            :label="item.Label" 
                            img="box2" 
                            height="17.4vh"
                            
                        >
                            <div class="row1">
                                <div class="price">
                                    <span>¥</span>
                                     <CountTo
                                        :key="item.price" 
                                        style="font-size: 0.375rem" 
                                        :startVal='0' 
                                        :endVal='Number(item.price )' 
                                        :duration='2000' />
                                        <span v-if="item.Label !== '今日实时销售额'">万</span>
                                        <span v-else>元</span>
                             
                                </div>
                                <div class="rate">
                                    <div class="rate-count">
                                        <span class="rate-cate"> {{item.Label === '今日实时销售额' ? '日增' : item.Label === '本月销售额' ? '环比' : '同比'}} </span>
                                        <span class="up-text">{{ item.rate > 0 ? '+' : '' }}{{item.rate }}%</span>
                                        <img class="arrow-img" :src="item.arrow" alt="">
                                    </div>
                                    <img class="line-img" :src="item.url" />
                                </div>
                            </div>
                        </slot-temp>
                        <div class="empty"></div>
                    </div>
                    <slot-temp label="商品销售排行榜(本月)" img="box2" >
                        <div class="row1 row3" style="width: 20vw">
                            <vue-chart
                                style="width: 100%;height: 87%;"
                                autoresize
                                :options="sellRank"
                            />
                        </div>
                    </slot-temp>
                
            </div>
        </div>
    </div>
</template>

<script>

import options from './echartsData'
import Label from '@/components/label'
import SlotTemp from '@/components/SlotTemp'
import CountTo from 'vue-count-to'
export default {
  name: 'App',
  components: {
      Label,
      SlotTemp,
      CountTo
  },
  created () {
      this.getCurSystemDate()
      this.initSSE()
  },
  mounted () {

  },
  data () {
      return {
          date: 0,
        //   京东旗舰店
          JDProMonth: JSON.parse( JSON.stringify(options.pre) ),
          JDProYear: JSON.parse( JSON.stringify(options.pre) ),
          JDProYearTarget: 0,
          JDProMonthTarget: 0,
          JDProMonthRate: 0,
          JDProYearRate: 0,
          JDProMonthSell: 0,
          JDProYearSell: 0,
        // 京东自营
          JDSelfMonth: JSON.parse( JSON.stringify(options.pre) ),
          JDSelfYear: JSON.parse( JSON.stringify(options.pre) ),
          JDSelfYearTarget: 0,
          JDSelfMonthTarget: 0,
          JDSelfMonthRate: 0,
          JDSelfYearRate: 0,
          JDSelfMonthSell: 0,
          JDSelfYearSell: 0,
        // 天猫旗舰
          TMMonthSell: 0,
          TMMonthTarget: 0,
          TMYearSell: 0,
          TMYearTarget: 0,



          ShopDistribution: JSON.parse( JSON.stringify(options.ShopDistribution) ),
          yearOrderNum: JSON.parse( JSON.stringify(options.line) ),

          weekUvNum: JSON.parse( JSON.stringify(options.columnar)),

          sellRank: JSON.parse(JSON.stringify(options.sellColumnar)),
          allYearPrice: 0, // 全年总销售额
          initYearPrice: 0,
          //   日 月 年销售额
          salePricesList: []
      }
  },
  methods: {
      initSSE () {
        const evtSource = new EventSource('https://open.luojigou.vip/data-panel/msg')

        evtSource.onmessage = e => {
            console.log(e.data);
            const { shopSaleData, 
                    allYearPrice, 
                    weekUvNum, 
                    allYearOrderNum, 
                    shopOrderDistributionData, 
                    salePrices,
                  } = JSON.parse(e.data)

            console.log(allYearPrice, 'allYearPrice');

   
            this.allYearPrice = allYearPrice
            this.initColumn1(shopSaleData)
            this.initWeekUvNum(weekUvNum)
            this.initYearOrderNum(JSON.parse(JSON.stringify(allYearOrderNum)))
            this.initShopDistribution(shopOrderDistributionData)
            this.initSalePrice(salePrices)
        }

        evtSource.onopen = () => {

        }

        evtSource.onerror = () => {
        console.log('error');
        }
      },
      // 初始化销售额
      initSalePrice (salePrices) {
        this.salePricesList = salePrices.map( item => {
            
           

            if (item.code === 'toDay') {
                item.Label = '今日实时销售额'
                item.price = ((item.price ) + 0.00).toFixed(2) 
            } else if (item.code === 'nowMonth') {
                item.Label = '本月销售额'
                item.price = ((item.price / 10000) + 0.00).toFixed(2) 
            } else {
                item.Label = '上月销售额'
                item.price = ((item.price / 10000) + 0.00).toFixed(2) 
            }

            
            
            if (item.rate > 0) {
                item.url = require('@/assets/up.png')
                item.arrow = require('@/assets/up-arrow.png')
            }  else {
                item.url = require('@/assets/down.png')
                item.arrow = require('@/assets/down-arrow.png')
            }

            return item
        })
      },    

      initShopDistribution (shopOrderDistributionData) {
          
          const total = shopOrderDistributionData.tMallNum  + shopOrderDistributionData.jdFlagshipNum  + shopOrderDistributionData.jdSelfNum + 0.00
          this.ShopDistribution.series[0].data[0].value = shopOrderDistributionData.tMallNum 
          
          this.ShopDistribution.series[0].data[0].name = ((100 * (shopOrderDistributionData.tMallNum / total)+0.000) * 1).toFixed(2)+'%'

          this.ShopDistribution.series[0].data[1].value = shopOrderDistributionData.jdFlagshipNum 

          this.ShopDistribution.series[0].data[1].name = ((100 * (shopOrderDistributionData.jdFlagshipNum  / total)+0.000)*1).toFixed(2)+'%'

          this.ShopDistribution.series[0].data[2].value = shopOrderDistributionData.jdSelfNum  

          this.ShopDistribution.series[0].data[2].name = ((100 * (shopOrderDistributionData.jdSelfNum / total)+0.000)*1).toFixed(2) +'%'

          console.log( 100 * (shopOrderDistributionData.jdSelfNum  / total).toFixed(2) ,shopOrderDistributionData.tMallNum ,  shopOrderDistributionData.jdFlagshipNum ,  '---------------------------------' , total);
      },
     
      initYearOrderNum (allYearOrderNum) {
              this.yearOrderNum.series[0].data = allYearOrderNum.map(item => {
                  return item.jdFlagshipNum
              })
              this.yearOrderNum.series[1].data = allYearOrderNum.map(item => {
                  return item.jdSelfNum
              })
              this.yearOrderNum.series[2].data = allYearOrderNum.map(item => {
                  return item.tMallNum
              })
              this.$forceUpdate()
      },

      initWeekUvNum (weekUvNum) {
          this.weekUvNum.series[0].data = weekUvNum.map( item => {
              return item.jdFlagshipNum
          })
          this.weekUvNum.series[1].data = weekUvNum.map( item => {
              return item.jdSelfNum
          })
          this.weekUvNum.series[2].data = weekUvNum.map( item => {
              return item.tMallNum
          })

       
      },
      initColumn1 (shopSaleData) {
        //   const [ TMPro  ] = shopSaleData
        shopSaleData.forEach(  item => {
            const { code, monthPrice, monthTargetPrice, yearPrice, yearTargetPrice } = item
       
            if (code === '10001') {
                this.JDProMonthTarget = (monthTargetPrice / 10000 ).toFixed(2)
                this.JDProMonthSell =  (monthPrice / 10000 ).toFixed(2)
                
                this.JDProYearTarget = yearTargetPrice / 10000

                this.JDProMonth.series[0].data[0].value = (monthTargetPrice + monthPrice)
                this.JDProMonth.series[0].data[1].value = monthPrice

                this.JDProYear.series[0].data[0].value = (yearTargetPrice + yearPrice)
                this.JDProYear.series[0].data[1].value = yearPrice

                this.JDProYear.color = [ '#033188', '#009DEF' ]

                this.JDProMonthRate = (100 * (monthPrice / monthTargetPrice)+0.00).toFixed(0) + '%'

                this.JDProYearRate = (100 * (yearPrice / yearTargetPrice)+ 0.00).toFixed(0) + '%'
            
                this.JDProYearSell = (yearPrice / 10000).toFixed(2)

            } else if ( code === '10002') {
                this.JDSelfMonthTarget = (monthTargetPrice / 10000 ).toFixed(2)
                this.JDSelfMonthSell =  (monthPrice / 10000 ).toFixed(2)
                
                this.JDSelfYearTarget = yearTargetPrice / 10000

                this.JDSelfMonth.series[0].data[0].value = (monthTargetPrice + monthPrice)
                this.JDSelfMonth.series[0].data[1].value = monthPrice

                this.JDSelfYear.series[0].data[0].value = (yearTargetPrice + yearPrice)
                this.JDSelfYear.series[0].data[1].value = yearPrice
                this.JDSelfYear.color = [ '#033188', '#009DEF' ]

                this.JDSelfMonthRate = (100 * (monthPrice / monthTargetPrice) + 0.00).toFixed(2) + '%'

                this.JDSelfYearRate = (100 * (yearPrice / yearTargetPrice) +0.00).toFixed(2) + '%'
            
                this.JDSelfYearSell = (yearPrice / 10000).toFixed(2)
            } else {
                this.TMMonthTarget = ( monthTargetPrice / 10000).toFixed(0) 
                this.TMMonthSell = (monthPrice / 10000).toFixed(0) 

                this.TMYearTarget = ( yearTargetPrice / 10000).toFixed(0) 
                this.TMYearSell =  ( yearPrice / 10000).toFixed(0) 
            }
            
        })
      },
    numFormat (num) {
    num = num.toString().split(".");  // 分隔小数点
            var arr=num[0].split("").reverse();  // 转换成字符数组并且倒序排列
            var res=[];
        for(var i=0,len=arr.length;i<len;i++){
            if(i%3===0&&i!==0){
                res.push(",");   // 添加分隔符
            }
                res.push(arr[i]);
            }
                res.reverse(); // 再次倒序成为正确的顺序
            if(num[1]){  // 如果有小数的话添加小数部分
                res=res.join("").concat("."+num[1]);
            }else{
                res=res.join("");
            }
        return res;
    },
      // 获取当前系统时间
    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 scoped lang="less">
@import './app.less';
</style>