<template>
  <div class="home">
    <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"
                  v-model.trim="searchForm.queryWord"
                  :disabledDate="disabledDate"
                />
              </a-form-item>
              <a-form-item props="storeIds" label="清运网点">
                <a-select
                  allowClear
                  mode="multiple"
                  placeholder="选择网点"
                  v-model="searchForm.storeIdList"
                  style="width: 200px"
                  option-filter-prop="children"
                  :filter-option="filterOption">
                  <a-select-option :disabled="!isStationAll&&searchForm.storeIdList.length>0" value="all" key="all">全部</a-select-option>
                  <a-select-option :disabled="isStationAll" v-for="item in stationList" :value="item.stationNo" :key="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" class="search-btn" @click="handleSearch()">查询</a-button>
                <a-button type="" style="margin-left: 10px;" @click="handleReset()">重置</a-button>
              </a-form-item>
              <a-form-item>
                快捷筛选：
                <span
                  :class="['searchItem',curentType==item.type?'active':'']"
                  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: 300px;"
          color="#6C6FBE"
          ref="chartLine"
          :yMax="5000"
          yUnit="kg"
          :xAxisRotate="resize"
          :xAxisData="XdaysData"
          :seriesData="clearnChartData"
          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 ">
                <p>废旧金属</p>
                <span>{{ chartData.KX }}kg</span>
              </div>
            </a-card>
          </a-col>
          <a-col :md="4" :lg="4">
            <a-card class="border-radius background-greenBlue">
              <div class="module-list ">
                <p>废旧塑料</p>
                <span>{{ chartData.JX }}kg</span>
              </div>
            </a-card>
          </a-col>
          <a-col :md="4" :lg="4">
            <a-card class="border-radius background-blackGreen">
              <div class="module-list ">
                <p>废旧纸张</p>
                <span>{{ chartData.DLX }}kg</span>
              </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: 300px;"
              color="#6C6FBE"
              :xAxisRotate="resize"
              :yMax="1000"
              yUnit="kg"
              :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: 300px;"
              color="#6C6FBE"
              yUnit="kg"
              :yMax="1000"
              :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="清运总量(kg)"
              :total="chartData.allOrderNum"
              :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.allOrderNum"
              :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 { getCleanReport } from '@/api/cleanManage.js'
import { stationList } from '@/api/releaseRecord.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: {
    isStationAll () { //  是否选择全部网点
      let boolean
      if (this.searchForm.storeIdList.length > 0) {
        if (this.searchForm.storeIdList.indexOf('all') >= 0) {
          boolean = true
        } else {
          boolean = false
        }
      } else {
        boolean = false
      }
      return boolean
    },
    resize () {
      console.log(this.screenWidth, 'this.screenWidth')
      if (this.screenWidth < 1640) {
        return 40
      } else {
        return 0
      }
    },
    // 各类型占比总计数据
    washTypePieData () {
      const data = [{
        'name': '快速洗车',
        'value': this.chartData.KX
      }, {
        'name': '精致洗车',
        'value': this.chartData.JX
      }, {
        'name': '打蜡精洗',
        'value': this.chartData.DLX
      }]
      return data
    },
    // 洗车用券量占比数据
    couponChartData () {
      const data = [
        {
          'name': '未用券洗车量',
          'value': this.chartData.notUseCouponOrderNum
        },
        {
          'name': '用券洗车量',
          'value': this.chartData.useCouponOrderNum
        },
        {
          'name': '用券洗车量11',
          'value': this.chartData.useCouponOrderNum
        }
      ]
      return data
    }
  },
  data () {
    return {
      screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
      timer: false,
      form: this.$form.createForm(this, { name: 'searchForm' }),
      isNoData: false, // 是否有每天营业额及进店量数据
      stationList: [], // 洗车网点列表
      searchForm: {
        queryWord: null, // 时间查询条件，默认本周
        storeIdList: [] // 已选洗车网点
      },
      chartData: {
        KX: 0, // 快洗
        JX: 0, // 精洗
        DLX: 0, // 打蜡洗
        allOrderNum: 0, // 洗车总量
        useCouponOrderNum: 0, // 用券洗车量
        notUseCouponOrderNum: 0 // 未用券洗车量
      },
      // 快速删选tab
      tabList: [{
        name: '今天',
        type: 'today'
      },
      {
        name: '本周',
        type: 'thisWeek'
      },
      {
        name: '上周',
        type: 'lastWeek'
      },
      {
        name: '本月',
        type: 'thisMonth'
      }
      ],
      curentType: 'thisWeek', // 当前所选时间查询类型
      beginDate: null, // 开始时间
      endDate: null, // 结束时间
      // 洗车量图表数据
      clearnChartData: [{
        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) {
      console.log(dates, this.searchForm.queryWord, 'dddddd')
      this.curentType = ''
    },
    // 不可选日期
    disabledDate (date) {
      return (date && date.valueOf() > Date.now()) || (date.valueOf() < Date.now() - (90 * 24 * 60 * 60 * 1000))
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 查询网点列表
    getListStation () {
      stationList().then(res => {
        if (res.status == 200) {
          this.stationList = res.data || []
        } else {
          this.stationList = []
        }
      })
    },
    // 页面初始化
    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('请选择统计区间')
      }
    },
    // 重置
    handleReset () {
      this.searchForm.storeIdList = []
      this.curentType = 'thisWeek'
      this.getCurentSearchTime()
    },
    // 格式化时间
    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)]
      }
      console.log(quickType[this.curentType])
      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')
      console.log(this.searchForm.queryWord, '1111111')
      this.getPageData()
    },
    // 根据查询条件获取所有数据
    getPageData () {
      this.XdaysData = [] // x轴置空
      const _date = {
        beginDate: this.beginDate,
        endDate: this.endDate,
        storeIdList: this.searchForm.storeIdList
      }
      console.log(_date, '_date')
      getCleanReport(_date).then(res => {
        console.log(res, 'rrrrrrr')
        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 = [] // 清运量数据
      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)
        // console.log(days, 'ddddd')
        kxData.push(item.KX)
        jxData.push(item.JX)
        dlxData.push(item.DLX)
        totalData.push(item.allOrderNum)
        useCouponData.push(item.useCouponOrderNum)
      })
      this.XdaysData = days
      const washTypeData = [kxData, jxData, dlxData]
      // 各回收物类型柱状图表数据
      this.washTypeBarData.map((item, index) => {
        item.data = washTypeData[index]
      })
      // 各回收物类型折线图表数据
      this.washTypeLineData.map((item, index) => {
        item.data = washTypeData[index]
      })
      // 洗车量图表数据赋值
      this.clearnChartData[0].data = totalData
      this.clearnChartData[1].data = useCouponData
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.pageInit()
      vm.getListStation() // 获取网点列表
      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;
    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: 300px;
        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: #8544e0;
      }

      .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: #d2701b;
      }
    }

    .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>
