<template>
  <div class="dashboardPage">
    <div class="top">
      <CardBox
        v-for="item in cardList" :key="item.value" :card-data="item" :title="item.title"
        :color="item.color"
        :background-color="item.background" :today-color="item.todayColor" class="cardbox"
      />
    </div>
    <div class="chartContainer">
      <h2>当日订单金额</h2>
      <div ref="chartMoney" class="chartMoney"></div>
      <h2>数据统计</h2>
      <div class="chartCard">
        <div class="dailyCard">
          <div class="cardContainer">
            <MiniCard :title="'当日订单数'" :precent="'日同比'" :nums="orderData.dayNum" :precent-data="orderData.dayPrecent" />
            <MiniCard
              :title="'当月订单数'" :precent="'月同比'" :nums="orderData.mounthNum"
              :precent-data="orderData.mounthPrecent"
            />
          </div>
          <div ref="orderTotal" class="chart"></div>
        </div>
        <div class="dailyCard">
          <div class="cardContainer">
            <MiniCard :title="'当日支付人数'" :precent="'日同比'" :nums="payData.dayNum" :precent-data="payData.dayPrecent" />
            <MiniCard
              :title="'当月支付人数'" :precent="'月同比'" :nums="payData.mounthNum"
              :precent-data="payData.mounthPrecent"
            />
          </div>
          <div ref="orderPeople" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CardBox from '@/views/dashboard/components/HomeCard.vue'
import MiniCard from '@/views/dashboard/components/miniCard.vue'
import {
  homeGetChartData,
  homeGetFormData
} from '@/api/home.js'
function ChartObj(ref, title) {
  this.name = ref
  this.chart = null
  this.title = title
  this.xAxis = []
  this.yAxis = []
  this.series = []
}
function CardData() {
  this.dayNum = 0
  this.dayPrecent = 0
  this.mounthNum = 0
  this.mounthPrecent = 0
}
export default {
  components: {
    CardBox,
    MiniCard
  },
  data() {
    return {
      cardList: [
        {
          title: '新增用户',
          color: '#1B55AF',
          background: '#F4F7FB',
          todayColor: '#C9D7EC',
          nums: '',
          precent: '',
          lastNums: '',
          value: 1
        },
        {
          title: '新增店铺',
          color: '#F45F20',
          background: '#FEF7F4',
          todayColor: '#FCD9CA',
          nums: '',
          precent: '',
          lastNums: '',
          value: 2
        },
        {
          title: '访客',
          color: '#427A0A',
          background: '#F2F6EE',
          todayColor: '#CFDDC0',
          nums: '',
          precent: '',
          lastNums: '',
          value: 3
        },
        {
          title: '浏览量',
          color: '#623CE7',
          background: '#F4F1FD',
          todayColor: '#D7CDF9',
          nums: '',
          precent: '',
          lastNums: '',
          value: 4
        }
      ],
      chart: [
        new ChartObj('chartMoney', '订单金额'),
        new ChartObj('orderTotal', '订单数'),
        new ChartObj('orderPeople', '订单支付人数')
      ],
      orderData: new CardData(),
      payData: new CardData()
    }
  },
  created() {
    this.getFormData()
    this.getChartData()
  },
  mounted() {
    this.chart.forEach((item) => {
      this.initChart(item)
    })
  },
  methods: {
    async getFormData() {
      const res = await homeGetFormData()
      this.cardList[0] = Object.assign(this.cardList[0], {
        nums: res.data.todayNewUser,
        precent: res.data.weekRelativeRatioNewUser,
        lastNums: res.data.yesterdayNewUser
      })
      this.cardList[1] = Object.assign(this.cardList[1], {
        nums: res.data.todayShopCount,
        precent: res.data.weekRelativeRatioShopCount,
        lastNums: res.data.yesterdayShopCount
      })
      this.cardList[2] = Object.assign(this.cardList[2], {
        nums: res.data.todayVisitUser,
        precent: res.data.weekRelativeRatioVisitUser,
        lastNums: res.data.yesterdayVisitUser
      })
      this.cardList[3] = Object.assign(this.cardList[3], {
        nums: res.data.todayVisitCount,
        precent: res.data.weekRelativeRatioVisitCount,
        lastNums: res.data.yesterdayVisitCount
      })
    },
    async getChartData() {
      const res = await homeGetChartData()
      // 过去一个月订单金额列表
      res.data.orderAmountList.forEach((item) => {
        if (!item.statsDate.split) { return }
        const xAxis = `${item.statsDate.split('-')[1]}.${item.statsDate.split('-')[2]}`
        this.chart[0].xAxis.push(xAxis)
        this.chart[0].series.push(item.amount)
      })
      // 过去一个月订单量
      res.data.orderCountList.forEach((item) => {
        if (!item.statsDate.split) { return }
        const xAxis = `${item.statsDate.split('-')[1]}.${item.statsDate.split('-')[2]}`
        this.chart[1].xAxis.push(xAxis)
        this.chart[1].series.push(item.totalCount)
      })
      // 过去一个月支付人数
      res.data.payUserCountList.forEach((item) => {
        if (!item.statsDate.split) { return }
        const xAxis = `${item.statsDate.split('-')[1]}.${item.statsDate.split('-')[2]}`
        this.chart[2].xAxis.push(xAxis)
        this.chart[2].series.push(item.totalCount)
      })
      this.orderData = {
        dayNum: res.data.todayOrderCount || 0,
        dayPrecent: res.data.dayToDayOrderCountRelativeRate || 0,
        mounthNum: res.data.curMonthOrderCount || 0,
        mounthPrecent: res.data.monthToMonthOrderCountRelativeRate || 0
      }
      this.payData = {
        dayNum: res.data.todayPayUserCount || 0,
        dayPrecent: res.data.dayToDayPayUserCountRelativeRate || 0,
        mounthNum: res.data.curMonthPayUserCount || 0,
        mounthPrecent: res.data.monthToMonthPayUserCountRelativeRate || 0
      }
      this.paintLineChart(this.chart[0])
      this.paintLineChart(this.chart[1])
      this.paintLineChart(this.chart[2])
    },
    initChart(chartObj) {
      chartObj.chart = this.$echarts.init(this.$refs[chartObj.name])
      chartObj.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c}',
          axisPointer: {
            type: 'cross'
          }
        }
      })
    },
    paintLineChart(chartObj) {
      chartObj.chart.setOption({
        color: [ '#5470c6' ],
        xAxis: {
          type: 'category',
          axis: 'auto',
          data: chartObj.xAxis
        },
        yAxis: {
          type: 'value',
          axisPointer: {
            snap: true
          }
        },
        series: [
          {
            name: chartObj.title,
            data: chartObj.series,
            type: 'line',
            smooth: true // 是否平滑
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboardPage {
	width: 100%;

	.top {
		padding: 28px 10px;
		background-color: #FFF;
		display: flex;
		justify-content: space-between;

		.cardbox {
			margin: 0 10px;
			cursor: default;
			flex: 1;
		}
	}

	.chartContainer {
		margin: 20px;
		padding: 20px;
		background-color: #FFF;

		h2 {
			margin: 12px 0;
			font-weight: bold;
		}

		.chartMoney {
			width: 100%;
			height: 400px;
		}

		.chartCard {
			min-height: 300px;
			display: flex;

			.dailyCard {
				flex: 1;
				padding: 12px 20px;

				.cardContainer {
					display: flex;
				}

				.chart {
					min-height: 300px;
				}
			}
		}
	}
}
</style>
