<template>
  <div id='_main'>
    <div class="main-body" v-loading.fullscreen.lock="fullscreenLoading">
      <div class="main-container">
        <div class="main-con-top" id='main-fdkk-card'>
          <el-card class="fdkk-card fix_background top-fdkk-card " v-for="(card, i) in cards" :key="i">
            <div style="display:flex;height:120px;">
              <div class="flex-left">
                <div class="data-num">{{card.title}}</div>
                <div class="today-order" v-for="(label, i) in card.labels" :key="i">
                  <template v-if="label.text">{{label.text}}：</template>
                  <span class="today-order_font">{{initData[label.attr]}}</span>
                </div>
                <div class="reflash-date">刷新时间：{{refreshDate}}</div>
              </div>
              <div class="flex-right">
                <div class="flex-right-icon">
                  <img :src="card.icon" class="flex-right-icon">
                </div>
              </div>
            </div>
          </el-card>

          <el-card class="fdkk-card top-fdkk-card top-fdkk-card_long fix_background">
            <div style="display:flex;height:120px;">
              <div class="flex-left" style="flex: 1.1">
                <div class="data-num">本月营业额（元）</div>
                <div class="today-order" style="font-size: 22px;margin-bottom: 5px;">{{initData.monthMoney}}</div>
                <div class="today-order" >
                  相机：<span>{{initData.monthCamera}}</span> 充值：
                  <span>{{initData.monthRecharge}}</span>
                </div>
                <div class="reflash-date">刷新时间：{{refreshDate}}</div>
              </div>
              <div class="flex-right">
                <div class="data-num">上月营业额（元）</div>
                <div class="today-order" style="font-size: 22px;margin-bottom: 5px;">{{initData.lastMonthMoney}}</div>
                <div class="today-order">
                  相机：<span>{{initData.lastMonthCamera}}</span> 充值：
                  <span>{{initData.lastMonthRecharge}}</span>
                </div>
              </div>
              <div class="sub_static">
                <div style="float: right;">全部<span class="sub_static_span">{{(((initData.monthMoney-initData.lastMonthMoney)/initData.lastMonthMoney)*100)?(((initData.monthMoney-initData.lastMonthMoney)/initData.lastMonthMoney)*100).toFixed(2) : 0}}%</span></div>
                <div style="float: right;">相机<span class="sub_static_span">{{(((initData.monthCamera-initData.lastMonthCamera)/initData.lastMonthCamera)*100)?(((initData.monthCamera-initData.lastMonthCamera)/initData.lastMonthCamera)*100).toFixed(2) : 0}}%</span></div>
                <div style="float: right;">充值<span class="sub_static_span sub_static_span_active">{{(((initData.monthRecharge-initData.lastMonthRecharge)/initData.lastMonthRecharge)*100)?(((initData.monthRecharge-initData.lastMonthRecharge)/initData.lastMonthRecharge)*100).toFixed(2) : 0}}%</span></div>
              </div>
            </div>
          </el-card>
        </div>

        <div style="display: flex;flex-wrap: wrap;">
          <div class="main-con-footer">
            <div style="width:100%;height:300px;">
              <div class="echart_title">
                相机订单笔数趋势-<span class="echart_title_txt">最近12天记录</span>
                <span class="echart_title_num">平均数：{{(totalDataSum/12).toFixed(2)}}(单/天)</span>
                <span class="echart_title_num">总订单数：{{totalDataSum}}</span>
              </div>
              <div id="orderCount" style="width: 100%;height: 100%;"></div>
            </div>
          </div>
          <div class="main-con-footer">
            <div style="width:100%;height:300px;">
              <div class="echart_title">
                充值订单笔数趋势-<span class="echart_title_txt">最近12天记录</span>
                <span class="echart_title_num">平均数：{{(totalRechargeSum/12).toFixed(2)}}(单/天)</span>
                <span class="echart_title_num">总订单数：{{totalRechargeSum}}</span>
              </div>
              <div id="RechargeCount" style="width: 100%;height: 100%;"></div>
            </div>
          </div>
          <div class="main-con-footer">
            <div style="width:100%;height:300px;">
              <div class="echart_title">
                消费订单笔数趋势-<span class="echart_title_txt">最近12天记录</span>
                <span class="echart_title_num">平均数：{{(totalConsumeSum/12).toFixed(2)}}(单/天)</span>
                <span class="echart_title_num">总订单数：{{totalConsumeSum}}</span>
              </div>
              <div id="consumeCount" style="width: 100%;height: 100%;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')

// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')

export default {
  data () {
    let cards = [
      {
        title: '总订单数',
        labels: [
          {text: '相机', attr: 'sumcamera'},
          {text: '充值', attr: 'allRechargeCount'}
        ],
        icon: require('@/assets/images/icon/zdds.png')
      },
      {
        title: '今日订单',
        labels: [
          {text: '相机', attr: 'todayOrder'},
          {text: '充值', attr: 'todayRecharge'}
        ],
        icon: require('@/assets/images/icon/jrdd.png')
      },
      {
        title: '待发货订单',
        labels: [
          {text: '相机', attr: 'waitCount'}
        ],
        icon: require('@/assets/images/icon/dfhdd.png')
      },
      {
        title: '总营业额（元）',
        labels: [
          {text: '', attr: 'allMoney'},
          {text: '相机', attr: 'allcameramoneys'},
          {text: '充值', attr: 'allRechargeTurnover'}
        ],
        icon: require('@/assets/images/icon/zyye.png')
      },
      {
        title: '今日营业额（元）',
        labels: [
          {text: '相机', attr: 'todayRechargeTurnover'},
          {text: '充值', attr: 'todayRechargeTurnover'}
        ],
        icon: require('@/assets/images/icon/zdds.png')
      },
      {
        title: '消费金额（元）',
        labels: [
          {text: '今天消费', attr: 'todayConsumeTurnover'},
          {text: '总消费', attr: 'allConsumeTurnover'}
        ],
        icon: require('@/assets/images/icon/xfje.png')
      }
    ]

    return {
      initData: {},
      cards,
      // 总订单数
      totalDataSum: 0,
      totalRechargeSum: 0,
      totalConsumeSum: 0,
      refreshDate: '',
      fullscreenLoading: true,
      sevenDayData: [],
      sevenDayDataTime: [],
      sevenDayDataSum: [],
      sevenDayHasPayDataSum: [],

      twelveDayData: [],
      twelveDayDataTime: [],
      twelveDayDataSum: [],

      twelveDayRechargeData: [],
      twelveDayRechargeTime: [],
      twelveDayRechargeSum: [],

      twelveDayConsumeData: [],
      twelveDayConsumeTime: [],
      twelveDayConsumeSum: []
    }
  },
  async mounted () {
    let data = await this.$http.post('/manager/home')
    this.initData = data.data
    this.refreshDate = (new Date()).format('yyyy-MM-dd hh:mm:ss')
    this.fullscreenLoading = false
    this.readyEchart()
  },
  methods: {
    doHandleMonth (month) {
      var m = month
      if (month.toString().length === 1) {
        m = '0' + month
      }
      return m
    },
    getDay (day) {
      var today = new Date()

      var targetdayMilliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day

      today.setTime(targetdayMilliseconds) // 注意，这行是关键代码

      var tYear = today.getFullYear()
      var tMonth = today.getMonth()
      var tDate = today.getDate()
      tMonth = this.doHandleMonth(tMonth + 1)
      tDate = this.doHandleMonth(tDate)
      return tYear + '-' + tMonth + '-' + tDate
    },
    drawLine () {
      let orderCount = (this.orderCount = echarts.init(
        document.getElementById('orderCount')
      ))
      let RechargeCount = (this.RechargeCount = echarts.init(
        document.getElementById('RechargeCount')
      ))
      let consumeCount = (this.consumeCount = echarts.init(
        document.getElementById('consumeCount')
      ))

      let trendTime = this.twelveDayDataTime.reverse()
      let trendNum = this.twelveDayDataSum.reverse()

      let rechargeTrendTime = this.twelveDayRechargeTime.reverse()
      let rechargeTrendSum = this.twelveDayRechargeSum.reverse()

      let consumeTrendTime = this.twelveDayConsumeTime.reverse()
      let consumeTrendSum = this.twelveDayConsumeSum.reverse()

      // 12天相机订单笔数趋势
      orderCount.setOption({
        // title: { text: '订单笔数趋势 (最近' + trendNum.length + '天记录)' },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          axisTick: { show: false },
          data: trendTime,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        label: {
          show: true,
          position: 'top',
          color: '#999'
        },
        grid: {
          x: 30,
          y: 30,
          x2: 0,
          y2: 40,
          borderWidth: 1
        },
        yAxis: {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        series: [
          {
            name: '总订单数',
            type: 'bar',
            data: trendNum,
            barWidth: '30',
            z: 10,
            itemStyle: {
              color: '#09e1c0'
            }
          }
        ]
      })

      // 12天充值订单笔数趋势
      RechargeCount.setOption({
        // title: {
        //   text: '充值订单笔数趋势 (最近' + rechargeTrendTime.length + '天记录)',
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          axisTick: { show: false },
          data: rechargeTrendTime,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        label: {
          show: true,
          position: 'top',
          color: '#999'
        },
        grid: {
          x: 30,
          y: 30,
          x2: 0,
          y2: 40,
          borderWidth: 1
        },
        yAxis: {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        series: [
          {
            name: '总订单数',
            type: 'bar',
            data: rechargeTrendSum,
            barWidth: '30',
            z: 10,
            itemStyle: {
              color: '#09e1c0'
            }
          }
        ]
      })

      // 12天消费订单笔数趋势
      consumeCount.setOption({
        // title: { text: '消费订单笔数趋势 (最近' + consumeTrendSum.length + '天记录)' },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          axisTick: { show: false },
          data: consumeTrendTime,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        label: {
          show: true,
          position: 'top',
          color: '#999'
        },
        grid: {
          x: 30,
          y: 30,
          x2: 0,
          y2: 40,
          borderWidth: 1
        },
        yAxis: {
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        series: [
          {
            name: '总订单数',
            type: 'bar',
            data: consumeTrendSum,
            barWidth: '30',
            z: 10,
            itemStyle: {
              color: '#09e1c0'
            }
          }
        ]
      })
    },
    readyEchart () {
      let { trend, consumeRecharge, trendRecharge } = this.initData
      for (let i = 7; i >= 0; i--) {
        this.sevenDayData[i] = {}

        this.sevenDayData[i]['time'] = this.getDay(-i)
        this.sevenDayData[i]['sum'] = 0
        this.sevenDayData[i]['hasPaySum'] = 0
      }
      for (let i = 12; i >= 0; i--) {
        this.twelveDayData[i] = {}

        this.twelveDayData[i]['time'] = this.getDay(-i)
        this.twelveDayData[i]['sum'] = 0

        this.twelveDayRechargeData[i] = {}

        this.twelveDayRechargeData[i]['time'] = this.getDay(-i)
        this.twelveDayRechargeData[i]['sum'] = 0

        this.twelveDayConsumeData[i] = {}

        this.twelveDayConsumeData[i]['time'] = this.getDay(-i)
        this.twelveDayConsumeData[i]['sum'] = 0
      }

      if (trend) {
        let tempTime
        let tempCount = 0
        for (let i = 0; i < trend.length; i++) {
          tempTime = new Date(trend[i].orderTime.time).format('yyyy-MM-dd')
          tempCount = trend[i].total

          for (let j = 0; j < 12; j++) {
            if (this.twelveDayData[j].time === tempTime) {
              this.twelveDayData[j].sum =
                this.twelveDayData[j].sum + tempCount
            }
          }
        }
      }

      if (trendRecharge) {
        let tempTime
        let tempCount = 0
        for (let i = 0; i < trendRecharge.length; i++) {
          tempTime = new Date(trendRecharge[i].createTime.time).format('yyyy-MM-dd')
          tempCount = trendRecharge[i].total

          for (let j = 0; j < 12; j++) {
            if (this.twelveDayRechargeData[j].time === tempTime) {
              this.twelveDayRechargeData[j].sum =
                this.twelveDayRechargeData[j].sum + tempCount
            }
          }
        }
      }

      if (consumeRecharge) {
        let tempTime
        let tempCount = 0
        for (let i = 0; i < consumeRecharge.length; i++) {
          tempTime = new Date(consumeRecharge[i].tradeTime.time).format('yyyy-MM-dd')
          // tempTime = new Date().Format(
          //   'yyyy-MM-dd'
          // )
          tempCount = consumeRecharge[i].total
          // console.log("wdwd", consumeRecharge[1], i)

          for (let j = 0; j < 12; j++) {
            if (this.twelveDayConsumeData[j].time === tempTime) {
              this.twelveDayConsumeData[j].sum =
                this.twelveDayConsumeData[j].sum + tempCount
            }
          }
        }
      }

      for (let i = 0; i < 7; i++) {
        this.sevenDayDataTime[i] = this.sevenDayData[i].time
        this.sevenDayDataSum[i] = this.sevenDayData[i].sum
        this.sevenDayHasPayDataSum[i] = this.sevenDayData[i].hasPaySum
      }
      for (let i = 0; i < 12; i++) {
        this.twelveDayDataTime[i] = this.twelveDayData[i].time
        this.twelveDayDataSum[i] = this.twelveDayData[i].sum

        this.twelveDayRechargeTime[i] = this.twelveDayRechargeData[i].time
        this.twelveDayRechargeSum[i] = this.twelveDayRechargeData[i].sum

        this.twelveDayConsumeTime[i] = this.twelveDayConsumeData[i].time
        this.twelveDayConsumeSum[i] = this.twelveDayConsumeData[i].sum || 0

        this.totalDataSum += this.twelveDayDataSum[i]
        this.totalRechargeSum += this.twelveDayRechargeSum[i]
        this.totalConsumeSum += this.twelveDayConsumeSum[i]
      }
      // console.log(totalSum);

      this.trend = trend

      this.drawLine()
    }
  }
}
</script>

<style scoped>
  @import url('./style.css');
</style>
<style>
  @import url('./pstyle.css');
</style>
