<template>
  <app-container>
    <!--<div class="statistic-container">-->
    <search-area :need-clear="false" :need-search-more="false" type="default" size="small" @search="fetchData" @clear="clearInput">
      <!--一般查询条件-->
      <search-item>
        <el-date-picker
          v-model="year"
          type="year"
          placeholder="请选择统计年份"
          value-format="yyyy"
          size="small"
          @change="fetchData1"/>
      </search-item>
      <search-item>
        <el-date-picker
          v-model="month"
          type="month"
          placeholder="请选择统计年月"
          value-format="yyyy-MM"
          size="small"
          @change="fetchData1"/>
      </search-item>
      <search-item>
        <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>
      </search-item>
    </search-area>
    <div class="chart-container">
      <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>
  </app-container>
</template>

<script>
import { countByToilet, countByDay } from '@/api/system/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>
  $tableTitleColor:#fff;
  .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
        }
      }
    }
  }
  .chart-container{
    background-color: $tableTitleColor !important;
    border-top: 12px solid #ebebeb !important;
  }
</style>