<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="16" class="chart-body" >
          <ve-histogram :data="chartList" :settings="chartSettings" />
        </el-col>
        <el-col :span="8" class="chart-body">
          <el-table :data="list" class="table" border height="400">
            <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 { countByMonth } from '@/api/system/statistics'

export default {
  name: 'MaintainStatistics',
  data() {
    return {
      listQuery: {
        year: ''
      },
      columns: [
        {
          text: '时间',
          value: 'month',
          align: 'center'
        },
        {
          text: '桥梁',
          value: 'bridge',
          align: 'center'
        },
        {
          text: '次数',
          value: 'count',
          align: 'center'
        }
      ], // 显示列
      list: [], // 列表数据
      chartList: {
        'columns': ['时间'],
        'rows': []
      },
      chartSettings: {
        stack: { '时间': [] }
      }
    }
  },
  watch: {},
  mounted() {
    this.listQuery.year = new Date().getFullYear().toString()
    this.fetchData()
  },
  methods: {
    // 获取统计数据
    fetchData() {
      countByMonth(this.listQuery).then(response => {
        if (response.code === 200) {
          console.log(response)

          const that = this
          this.chartList.rows = []
          for (let i = 1; i <= 12; i++) {
            if (i < 10) {
              this.chartList.rows.push({
                '时间': this.listQuery.year + '-0' + i
              })
            } else {
              this.chartList.rows.push({
                '时间': this.listQuery.year + '-' + i
              })
            }
          }

          response.data.forEach(bridge => {
            Object.keys(bridge).forEach(function(k) {
              if (parseInt(k) === that.baseConfig.bridges[0].id) {
                // columns属性
                that.chartList.columns.push(that.baseConfig.bridges[0].name)

                // rows属性
                bridge[k].forEach(count => {
                  const index = parseInt(count.name.substring(5, 7)) - 1
                  that.chartList.rows[index][that.baseConfig.bridges[0].name] = count.count

                  if (count.count > 0) {
                    that.list.push({
                      'month': count.name,
                      'bridge': that.baseConfig.bridges[0].name,
                      'count': count.count
                    })
                  }
                })

                // stack属性
                that.chartSettings.stack['时间'].push(that.baseConfig.bridges[0].name)
              } else if (parseInt(k) === that.baseConfig.bridges[1].id) {
                // columns属性
                that.chartList.columns.push(that.baseConfig.bridges[1].name)

                // rows属性
                bridge[k].forEach(count => {
                  const index = parseInt(count.name.substring(5, 7)) - 1
                  that.chartList.rows[index][that.baseConfig.bridges[1].name] = count.count

                  if (count.count > 0) {
                    that.list.push({
                      'month': count.name,
                      'bridge': that.baseConfig.bridges[1].name,
                      'count': count.count
                    })
                  }
                })

                // stack属性
                that.chartSettings.stack['时间'].push(that.baseConfig.bridges[1].name)
              } else if (parseInt(k) === that.baseConfig.bridges[2].id) {
                // columns属性
                that.chartList.columns.push(that.baseConfig.bridges[2].name)

                // rows属性
                bridge[k].forEach(count => {
                  const index = parseInt(count.name.substring(5, 7)) - 1
                  that.chartList.rows[index][that.baseConfig.bridges[2].name] = count.count

                  if (count.count > 0) {
                    that.list.push({
                      'month': count.name,
                      'bridge': that.baseConfig.bridges[2].name,
                      'count': count.count
                    })
                  }
                })

                // stack属性
                that.chartSettings.stack['时间'].push(that.baseConfig.bridges[2].name)
              } else if (parseInt(k) === that.baseConfig.bridges[3].id) {
                // columns属性
                that.chartList.columns.push(that.baseConfig.bridges[3].name)

                // rows属性
                bridge[k].forEach(count => {
                  const index = parseInt(count.name.substring(5, 7)) - 1
                  that.chartList.rows[index][that.baseConfig.bridges[3].name] = count.count

                  if (count.count > 0) {
                    that.list.push({
                      'month': count.name,
                      'bridge': that.baseConfig.bridges[3].name,
                      'count': count.count
                    })
                  }
                })

                // stack属性
                that.chartSettings.stack['时间'].push(that.baseConfig.bridges[3].name)
              }
            })
          })
        }
      })
    }
  }
}
</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>