<template>
  <div class="app-container">
      <div class="statistic-container">
        <el-row class="chart-tools">
          <el-col :span="5" >
            <el-date-picker
              v-model="year"
              type="year"
              placeholder="请选择统计年份"
              value-format="yyyy"
              size="small"
              @change="fetchData1"/>
          </el-col>
          <el-col :span="5">
            <el-date-picker
              v-model="month"
              type="month"
              placeholder="请选择统计年月"
              value-format="yyyy-MM"
              size="small"
              @change="fetchData1"/>
          </el-col>
          <el-col :span="5">
            <el-select v-model="listQuery.toiletId" placeholder="请选择公厕" size="small" clearable @change="fetchData1">
              <el-option
              v-for="item in toiletList"
              :key="item.toiletId"
              :label="item.name"
              :value="item.toiletId"/>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="chart-body" >
            <div class="chart-body-title">按年/月清洁次数统计</div>
            <bar-chart ref="chart1"/>
          </el-col>
          <!--<el-col :span="12" class="chart-body" >-->
            <!--<div class="chart-body-select">-->
              <!--<el-select v-model="listQuery.toiletId" placeholder="请选择公厕" size="small" clearable @change="fetchData2">-->
                <!--<el-option-->
                  <!--v-for="item in toiletList"-->
                  <!--:key="item.toiletId"-->
                  <!--:label="item.name"-->
                  <!--:value="item.toiletId"/>-->
              <!--</el-select>-->
            <!--</div>-->
            <!--<div class="chart-body-title" style="padding-top: 20px">按年/月清洁次数统计</div>-->
            <!--<bar-chart ref="chart2"/>-->
          <!--</el-col>-->
        </el-row>
      </div>
  </div>
</template>

<script>
import { countByToilet, countByDay } from '@/api/statistics'
import { getDayTime } from '@/utils/dateutils'
import DeptSelect from '@/components/DeptSelect/index'
import PieChart from './pieChart'
import BarChart from './barChart'

export default {
  name: 'WorkStatistics',
  components: { BarChart, PieChart, DeptSelect },
  data() {
    return {
      year: '',
      month: '',
      listQuery: {
        staticType: 'year',
        toiletId: '',
        startTime: '2020-01-01',
        endTime: '2020-12-30'
      },
      toiletList: [{toiletId: '9461', name: '公厕1'},{toiletId: '9462', name: '公厕2'},{toiletId: '9463', name: '公厕3'},], // 显示列
      list: [], // 列表数据
      chartList: [],
      chartList2: [],
      chartshow: false
    }
  },
  watch: {},
  mounted() {
    this.fetchData1()
    // this.fetchData2()
  },
  methods: {
    // 获取统计数据
    fetchData1() {
      this.$refs.chart1.fetchData(this.listQuery)
    },
    fetchData2() {
      this.$refs.chart2.fetchData(this.listQuery)
    },
    changeDate(date) {
      let beginTime, endTime

      if (date === 'today') {
        beginTime = getDayTime(new Date().getTime())
        endTime = new Date()
        this.timeRange = [beginTime, endTime]
      } else if (date === 'yesterday') {
        beginTime = getDayTime(new Date().getTime() - 24 * 60 * 60 * 1000)
        endTime = getDayTime(new Date().getTime())
      } else if (date === 'sevendays') {
        beginTime = getDayTime(new Date().getTime() - 24 * 7 * 60 * 60 * 1000)
        endTime = new Date()
      } else if (date === 'lastmonth') {
        beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
        endTime = new Date()
      }
      this.timeRange = [beginTime.Format('yyyy-MM-dd hh:mm:ss'), endTime.Format('yyyy-MM-dd hh:mm:ss')]
      // this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container{
    padding: 5px 10px 10px 10px;
    .statistic-container{
      margin: 10px;
      padding:0px;
      border: 1px solid #d3dce6;
      .chart-tools{
        background-color: #f2f2f2;
        line-height: 40px;
        padding-left: 10px;
        padding-right: 5px;
        .chart-tool-text{
          padding: 5px;
          line-height: 16px;
          margin-top:5px;
          font-size:13px;
        }
        .chart-tool-button{
          padding: 5px;
          line-height: 16px;
          margin-top:5px;
          font-size:13px;
        }
        .chart-tool-button:hover{
          background-color: #8cc5ff;
          cursor: pointer;
          color:white
        }
        .chart-tool-button:active{
          background-color: #8cc5ff;
          color:white
        }
        .editor--datetimerange.el-input__inner{
          width: 300px;
        }
      }
      .chart-title{
        margin: auto;
        text-align: center;
        margin-top: 15px;
      }
    }
    .chart-body{
      padding:15px;
      .chart-body-title {
        font-size:22px;
        text-align: center;
        background-color: white;
        padding-top: 20px;
      }
      .chart-body-select{
        margin-top:20px;
        text-align: center;
        .select-label{
          font-size: 15px;
          color: #606266;
          line-height: 40px;
          font-weight:500;
          padding: 0 6px 0 0
        }
      }
    }
  }
</style>