<template>
  <div class="app-container">
    <div>
      <el-row class="chart-tools">
        <el-col :span="21">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            size="middle"
            @change="fetchData"/>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        <span class="chart-title">各部门考核情况统计</span>
        <!--<el-button type="primary" size="small" style="margin-left: 20px" @click="order">排序</el-button>-->
      </el-row>
      <div>
        <ve-histogram
          :data="chartData"
          :settings="chartSettings"
          :extend="extend"/>
      </div>
    </div>
  </div>
</template>

<script>
import { getStatistics } from '@/api/assessResult'
import { getDayTime } from '@/utils/dateutils'

export default {
  name: 'ChartDeptResult',
  data() {
    return {
      chartSettings: {
        labelMap: {
          'text': '权属单位',
          'value': '考核得分'
        }
      },
      extend: {
        series: {
          label: { show: true, position: 'top' },
          itemStyle: {
            normal: {
              barBorderRadius: [3, 3, 0, 0]
            }
          },
          barMaxWidth: 30
        },
        xAxis: {
          axisLabel: {
            // rotate: 25 // 代表逆时针旋转45度
          }
        }
      },
      listQuery: {
        startTime: '',
        endTime: ''
      },
      dateRange: [],
      deviceTypeList: [],
      showDeviceType: true,
      chartData: {
        columns: ['text', 'value'],
        rows: []
      },
      loading: false
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    fetchData() {
      var beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
      var endTime = new Date()
      this.dateRange = [beginTime, endTime]
      this.listQuery.startTime = beginTime
      this.listQuery.endTime = endTime
      getStatistics(this.listQuery).then(response => {
        // this.$message.success('2222')
        this.chartData.rows = response.data
      })
    },
    order() {

    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container{
    padding: 10px;
  }
  $tableTitleHeight:46px;
  .table{
    margin-bottom: 20px;
  }
  .chart-title{
    text-align: center;
    font-size:19px;
    font-weight:600;
    margin-top: 40px
  }
  .pagination-container{
    margin-bottom: 50px;
  }
  .table-title{
    background-color:rgba(243, 243, 243, 1);
    height: $tableTitleHeight;
    .title-header{
      line-height:$tableTitleHeight;
      color: #606266;
      font-size: 15px;
      i{
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
  .edit_btns{
    .edit_btn{
      float:right;
      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
    }
  }
  .warning-state{
    color:red
  }
</style>