<template>
  <div class="home">
    <a-alert message="欢迎登录合作商运营管理平台系统" type="info" showIcon />
    <div class="report-page">
      <!-- 查询条件 -->
      <a-row>
        <a-card class="search-panel">
          <div class="toolsBar">
            <a-form ref="searchForm" :model="searchForm" layout="inline">
              <a-form-item props="queryWord" label="统计区间">
                <a-range-picker
                  style="width: 220px;"
                  @change="dateChange"
                  id="statistics-queryWord"
                  v-model.trim="searchForm.queryWord"
                  :disabledDate="disabledDate"
                />
              </a-form-item>
              <a-form-item>
                快捷筛选：
                <span
                  :class="['searchItem',curentType==item.type?'active':'']"
                  id="statistics-quick"
                  v-for="(item,index) in tabList"
                  :key="index"
                  @click="getCurentSearchTime(item)">{{ item.name }}</span>
              </a-form-item>
            </a-form>
          </div>
        </a-card>
      </a-row>
      <!-- 业务量数据 -->
      <a-card class="panel" title="按业务量统计">
        <!-- 业务量趋势图表展示 -->
        <chart-line
          style="height: 350px;"
          color="#6C6FBE"
          :yMax="200"
          yUnit="单"
          :xAxisRotate="resize"
          :xAxisData="XdaysData"
          :seriesData="washCarsChartData"
          text="" />
        <span v-if="isNoData" class="noData">暂无数据</span>
      </a-card>
      <!-- 按各类型套餐销量查看 -->
      <a-card class="panel " title="按各类型套餐销量查看">
        <a-row :gutter="24">
          <a-col :md="4" :lg="4">
            <a-card class="border-radius background-skyblue">
              <div class="module-list ">
                <span>{{ chartData.xmbundleNum }}</span>
                <p>洗美套餐</p>
              </div>
            </a-card>
          </a-col>
          <a-col :md="4" :lg="4">
            <a-card class="border-radius background-greenBlue">
              <div class="module-list ">
                <span>{{ chartData.bybundleNum }}</span>
                <p>保养套餐</p>
              </div>
            </a-card>
          </a-col>
          <a-col :md="4" :lg="4">
            <a-card class="border-radius background-blackGreen">
              <div class="module-list ">
                <span>{{ chartData.xtyhbundleNum }}</span>
                <p>系统养护套餐</p>
              </div>
            </a-card>
          </a-col>
        </a-row>
        <!-- 套餐类型数据图表展示 -->
        <a-row :gutter="24">
          <a-col class="tab-card">
            <span :class="['tab-card-item',currentTabChart=='tab1'?'checked-item':'']" @click="currentTabChart='tab1'">详情数据</span>
            <span :class="['tab-card-item',currentTabChart=='tab2'?'checked-item':'']" @click="currentTabChart='tab2'">变化趋势</span>
          </a-col>
          <!-- 详情数据 -->
          <a-col span="24" v-if="currentTabChart=='tab1'">
            <chart-bar
              ref="ChartBar"
              style="height: 350px;"
              color="#6C6FBE"
              :xAxisRotate="resize"
              :yMax="200"
              yUnit="单"
              :xAxisData="XdaysData"
              :seriesData="washTypeBarData"
              text="" />
            <span v-if="isNoData" class="noData">暂无数据</span>
          </a-col>
          <!-- 变化趋势 -->
          <a-col span="24" v-if="currentTabChart=='tab2'">
            <chart-line
              ref="ChartLine"
              style="height: 350px;"
              color="#6C6FBE"
              :yMax="200"
              yUnit="单"
              :xAxisRotate="resize"
              :xAxisData="XdaysData"
              :seriesData="washTypeLineData"
              text="" />
            <span v-if="isNoData" class="noData">暂无数据</span>
          </a-col>
        </a-row>
      </a-card>
      <a-card class="panel chart-pie" title="各类型套餐销量分布">
        <a-row :gutter="24">
          <a-col span="12">
            <chart-pie
              ref="chartPie"
              class="chartPie-box"
              :searchData="XdaysData"
              :value="washTypePieData"
              title="套餐销售量(单)"
              :total="chartData.bundleNum"
              :color="washTypePieColor"
              :xAxisRotate="resize"
              text="" />
          </a-col>
          <a-col span="12">
            <!-- 套餐内总服务项目数使用展示 -->
            <chart-pie
              ref="serverChartPie"
              class="chartPie-box"
              :searchData="XdaysData"
              :value="couponChartData"
              title="套餐内总服务项目数(次)"
              :total="chartData.itemNum"
              :color="couponColor"
              :xAxisRotate="resize"
              text="" />
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script>
import {
  ChartPie,
  ChartBar,
  ChartLine
} from '@/components/Echarts'
import _ from 'lodash'
import getDate from '@/libs/getDate'
import moment from 'moment'
import { getOrderstatistics } from '@/api/report-charts.js'
export default {
  name: 'Home',
  components: {
    ChartPie,
    ChartBar,
    ChartLine
  },
  watch: {
    screenWidth (val) {
      // 为了避免频繁触发resize函数，使用定时器
      if (!this.timer) {
        this.screenWidth = val
        this.timer = true
        const that = this
        setTimeout(function () {
          // that.screenWidth = that.$store.state.canvasWidth
          console.log(that.screenWidth)
          that.timer = false
        }, 400)
      }
    }
  },
  computed: {
    resize () {
      console.log(this.screenWidth, 'this.screenWidth')
      if (this.screenWidth < 1640) {
        return 60
      } else {
        return 0
      }
    },
    // 各类型占比总计数据
    washTypePieData () {
      const data = [{
        'name': '洗美套餐',
        'value': this.chartData.xmbundleNum
      }, {
        'name': '保养套餐',
        'value': this.chartData.bybundleNum
      }, {
        'name': '系统养护套餐',
        'value': this.chartData.xtyhbundleNum
      }]
      return data
    },
    // 套餐内总服务项目数占比数据
    couponChartData () {
      const data = [{
        'name': '套餐服务核销量',
        'value': this.chartData.itemUsedNum
      }, {
        'name': '套餐服务未核销量',
        'value': this.chartData.itemUnUsedNum
      }]
      return data
    }
  },

  data () {
    return {
      screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
      timer: false,
      form: this.$form.createForm(this, { name: 'searchForm' }),
      isNoData: false, // 是否有每天营业额及进店量数据
      searchForm: {
        queryWord: null // 时间查询条件，默认本周
      },
      chartData: {
        xmbundleNum: 0, // 洗美套餐
        bybundleNum: 0, // 保养套餐
        xtyhbundleNum: 0, // 系统养护套餐
        itemNum: 0, // 服务数量
        itemUsedNum: 0, // 已使用服务数量
        itemUnUsedNum: 0, // 未使用服务数量
        bundleNum: 0 //  套餐销售量
      },
      // 快速删选tab
      tabList: [{
        name: '今天',
        type: 'today'
      },
      {
        name: '本周',
        type: 'thisWeek'
      },
      {
        name: '上周',
        type: 'lastWeek'
      },
      {
        name: '本月',
        type: 'thisMonth'
      }
      ],
      curentType: 'thisWeek', // 当前所选时间查询类型
      beginDate: null, // 开始时间
      endDate: null, // 结束时间
      // 套餐量图表数据
      washCarsChartData: [{
        name: '当日套餐销售量',
        type: 'line',
        data: []
      },
      {
        name: '当日套餐使用量',
        type: 'line',
        data: []
      }
      ],
      couponColor: ['#d48265', '#ff55ff'],
      // 套餐类型数据
      currentTabChart: 'tab1', // 套餐类型详情数据与变化趋势的tab 默认展示详情数据
      XdaysData: [], // 图表X轴时间集合
      // 套餐类型柱状图表数据
      washTypeBarData: [{
        name: '洗美套餐',
        type: 'bar',
        data: []
      },
      {
        name: '保养套餐',
        type: 'bar',
        data: []
      },
      {
        name: '系统养护套餐',
        type: 'bar',
        data: []
      }
      ],
      // 套餐类型折线图表数据
      washTypeLineData: [{
        name: '洗美套餐',
        type: 'line',
        data: []
      },
      {
        name: '保养套餐',
        type: 'line',
        data: []
      },
      {
        name: '系统养护套餐',
        type: 'line',
        data: []
      }
      ],
      // 各类型占比
      washTypePieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
      databack: {
        couponChartData: [],
        washTypePieData: [],
        chartData: {}
      }
    }
  },
  methods: {
    moment,
    // 时间改变
    dateChange (dates) {
      this.curentType = ''
      this.handleSearch()
    },
    // 不可选日期
    disabledDate (date) {
      return (date && date.valueOf() > Date.now()) || (date.valueOf() < Date.now() - (90 * 24 * 60 * 60 * 1000))
    },
    // 页面初始化
    pageInit () {
      this.form.resetFields()
      this.databack = {
        couponChartData: _.cloneDeep(this.couponChartData),
        washTypePieData: _.cloneDeep(this.washTypePieData),
        chartData: _.cloneDeep(this.chartData)
      }
    },
    // 查询
    handleSearch () {
      this.showChart = false
      if (this.searchForm.queryWord != ',' && this.searchForm.queryWord.length) {
        const searchTime = this.searchForm.queryWord.toString().split(',')
        this.beginDate = this.exitTime(searchTime[0])
        this.endDate = this.exitTime(searchTime[1])
        this.getPageData()
      } else {
        this.$message.error('请选择统计区间')
      }
    },
    // 格式化时间
    exitTime (time) {
      const D = new Date(time)
      const RES_DATE = D.getFullYear() + '-' + this.p((D.getMonth() + 1)) + '-' + this.p(D.getDate())
      return RES_DATE
    },
    // p为不够10添加0的函数
    p (s) {
      return s < 10 ? '0' + s : s
    },
    // 获取快速查询时间 并 赋值到时间选择框中
    getCurentSearchTime (item) {
      this.curentType = item ? item.type : this.curentType
      const quickType = {
        lastMonth: [moment(getDate.getLastMonthDays().starttime), moment(getDate.getLastMonthDays().endtime)],
        thisMonth: [moment(getDate.getCurrMonthDays().starttime), moment(getDate.getCurrMonthDays().endtime)],
        lastWeek: [moment(getDate.getLastWeekDays().starttime), moment(getDate.getLastWeekDays().endtime)],
        thisWeek: [moment(getDate.getCurrWeekDays().starttime), moment(getDate.getCurrWeekDays().endtime)],
        yesterday: [moment(getDate.getYesterday().starttime), moment(getDate.getYesterday().endtime)],
        today: [moment(getDate.getToday().starttime), moment(getDate.getToday().endtime)]
      }
      this.searchForm.queryWord = quickType[this.curentType]
      this.beginDate = quickType[this.curentType][0].format('YYYY-MM-DD')
      this.endDate = quickType[this.curentType][1].format('YYYY-MM-DD')
      this.getPageData()
    },
    // 根据查询条件获取所有数据
    getPageData () {
      this.XdaysData = [] // x轴置空
      const _date = {
        beginDate: this.beginDate,
        endDate: this.endDate
      }
      getOrderstatistics(_date).then(res => {
        if (res.status == 200) {
          this.chartData = res.data
          if (res.data.dateList && res.data.dateList.length) {
            this.isNoData = false
            this.filterData(res.data.dateList)
          } else {
            this.isNoData = true
          }
        } else {
          this.isNoData = true
        }
      })
    },
    // 整合图表每天数据
    filterData (data) {
      const days = [] // 日期合集
      const kxData = [] // 洗美套餐数据
      const jxData = [] // 保养套餐数据
      const dlxData = [] // 系统养护套餐数据
      const totalData = [] // 当日套餐销售量数据
      const useCouponData = [] // 当日套餐使用量数据
      console.log(data, '--data')
      data.map(item => {
        const itemDay = item.date.split('-')
        const month = Number(itemDay[1])
        const day = Number(itemDay[2])
        const time = month + '月' + day + '日'
        days.push(time)
        kxData.push(item.xmbundleNum)
        jxData.push(item.bybundleNum)
        dlxData.push(item.xtyhbundleNum)
        totalData.push(item.bundleNum)
        useCouponData.push(item.customerBundleUsedNum)
      })
      this.XdaysData = days
      const washTypeData = [kxData, jxData, dlxData]
      console.log(washTypeData, 'washTypeData')
      // 套餐类型柱状图表数据
      this.washTypeBarData.map((item, index) => {
        item.data = washTypeData[index]
      })
      // 套餐类型折线图表数据
      this.washTypeLineData.map((item, index) => {
        item.data = washTypeData[index]
      })
      // 套餐量图表数据赋值
      this.washCarsChartData[0].data = totalData
      this.washCarsChartData[1].data = useCouponData
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.pageInit()
      vm.curentType = 'thisWeek'
      vm.getCurentSearchTime()
    })
  },
  // 将 reisze 事件在 vue mounted 的时候 去挂载一下它的方法
  mounted () {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  }
}
</script>
<style lang="less" scoped>
  .home{
    width: 100%;
  }
  .report-page {
    margin-top: 10px;
    height: calc(100vh - 285px);
    overflow-y: scroll;
    overflow-x: hidden;
    .search-panel {
      .ivu-card-body>div {
        display: inline-block;
        margin-right: 20px;
      }

      .desc {
        color: #999;
      }

      .searchItem {
        padding: 8px 20px;
        border: 1px dashed #EEEEEE;
        margin: 0 5px;
        border-radius: 5px;
      }

      .active {
        background-color: #ff9900;
        color: #fff;
        border: none;
      }
    }

    .panel {
      margin-top: 10px;
      background-color: #FFFFFF;

      .noData {
        background-color: rgba(50, 50, 50, 0.7);
        color: #fff;
        padding: 15px 30px;
        position: absolute;
        top: 40%;
        left: 40%;
      }
      .chartPie-box{
        height: 400px;
        width: 100%;
      }
      .panel-title {
        font-size: 18px;
        color: #333;
        padding-bottom: 5px;
      }

      .tab-card {
        float: right;

        .tab-card-item {
          padding: 5px 10px;
          border: 1px solid #eee;
          cursor: pointer;
        }

        .checked-item {
          border-color: #2d8cf0;
          color: #2d8cf0;
        }
      }

      .border-radius {
        border-radius: 15px;
      }

      .background-blue {
        background-color: #157edf;
      }

      .background-green {
        background-color: #29aa4f;
      }

      .background-yellow {
        background-color: #dbb211;
      }

      .background-pop {
        background-color: #6C6FBE;
      }

      .background-black {
        background-color: #1f2c65;
      }

      .background-pink {
        background-color: #d23e57;
      }

      .background-skyblue {
        background-color: #00aaff;
      }

      .background-greenBlue {
        background-color: #1b9eaa;
      }

      .background-blackGreen {
        background-color: #357c09;
      }

      .background-orange {
        background-color: #ffaa00;
      }
    }

    .module-list {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #FFFFFF;

      span {
        font-weight: 600;
        font-size: 20px;
      }
    }

    .module-icon {
      width: 52px;
      height: 54px;

    }
  }
</style>
