<template>
  <div class="app-container">
    <div class="statistic-container">
      <el-row class="chart-tools">
        <el-col :span="5" >
          <el-date-picker
            v-model="listQuery.year"
            type="year"
            placeholder="请选择统计年份"
            value-format="yyyy"
            size="small"
            @change="fetchData"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="chart-body" >
          <div class="chart-body-title">各类型养护数量统计及占比</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="chart-body" >
          <pie-chart :list="chartList"/>
        </el-col>
        <el-col :span="12" class="chart-body">
          <el-table :data="list" class="table" border style="margin-top: 50px">
            <el-table-column align="center" type="index" label="排序" width="55"/>
            <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align">
              <template slot-scope="scope">
                <span>{{ scope.row[column.value] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { countByYear } 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: 'MaintainStatistics',
  components: { BarChart, PieChart, DeptSelect },
  data() {
    return {
      listQuery: {
        year: '',
        offset: 1,
        limit: 20,
        sort: 'count',
        order: 'desc'
      },
      columns: [
        {
          text: '养护类型',
          value: 'typeName',
          align: 'center'
        },
        {
          text: '养护数量',
          value: 'count',
          align: 'center'
        },
        {
          text: '占比',
          value: 'percent',
          align: 'center'
        }
      ], // 显示列
      list: [], // 列表数据
      chartList: [],
      chartshow: false
    }
  },
  watch: {},
  mounted() {
    this.fetchData()
  },
  activated() {
    this.fetchData()
  },
  methods: {
    // 获取统计数据
    fetchData() {
      console.log('this.fetchData')
      countByYear(this.listQuery).then(response => {
        // var data = response.data
        // for (var i = 0; i < data.length; i++) {
        //   data[i].num = parseInt(data[i].num)
        // }
        this.chartList = response.data.rows
        this.list = response.data.rows
      })
    },
    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{
    .statistic-container{
      background-color: #fffffb !important;
      height: auto;
      min-height: calc(100vh - 158px);
      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>