<template>
  <div class="app-container">
    <div class="chart-container">
      <el-row>
        <el-col :span="3">
          <el-select v-model="deptId" placeholder="考核部门" @change="changeDept(item)">
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.simplename"
              :value="item.id"/>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            size="middle"/>
        </el-col>
        <el-col :span="3" :offset="3">
          <el-button type="primary" size="middle" @click="search">查询</el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 40px">
        <el-col :span="4" :offset="10">
          <span class="chart-title">{{ title }}</span>
        </el-col>
        <el-col :span="6">
          <!--<el-button type="primary" size="small" @click="order">排序</el-button>-->
          <el-button type="primary" size="small" @click="changeType">{{ chartType }}</el-button>
        </el-col>
      </el-row>
      <div class="chart-body">
        <ve-histogram
          v-if="buttonName==='饼图展示'"
          :loading="loading"
          :data="chartData"
          :settings="chartSettings"
          :extend="extend"
          :data-empty="dataEmpty"/>
        <ve-pie v-if="buttonName==='柱状图展示'" :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
      </div>
    </div>
  </div>
</template>

<script>
import selectTree from '@/components/SelectTree/singleSelect'
import { statisticsByDepartment } from '@/api/assessResult'
import { getDeptList } from '@/api/assessRules'

export default {
  name: 'DeptStatistics',
  components: { selectTree },
  data() {
    return {
      chartSettings: {
        axisSite: { right: ['value2'] },
        yAxisType: ['number', 'percent'],
        yAxisName: ['分数', '权重'],
        labelMap: {
          'text': '权属单位',
          'value': '分数',
          'value2': '权重'
        },
        type: ''
      },
      extend: {
        series: {
          label: { show: true, position: 'top' },
          itemStyle: {
            normal: {
              barBorderRadius: [3, 3, 0, 0]
            }
          },
          barMaxWidth: 30
        },
        xAxis: {
          axisLabel: {
            // rotate: 25 // 代表逆时针旋转45度
          }
        }
      },
      listQuery: {
        deptId: '',
        startTime: '',
        endTime: ''
      },
      deptList: [],
      title: '',
      deptName: '',
      deptId: '',
      dateRange: [],
      deviceTypeList: [],
      showDeviceType: true,
      chartData: {
        columns: ['text', 'value', 'value2'],
        rows: []
      },
      dataEmpty: false,
      loading: true,
      chartType: '饼图'
    }
  },
  mounted() {
    this.fetchDeptList()
    this.fetchData()
  },
  methods: {
    // 查询数据
    search() {
      this.fetchData()
    },
    // 获取数据
    fetchData() {
      this.listLoading = true
      this.listQuery.deptId = this.deptId
      this.listQuery.startTime = this.dateRange[0]
      this.listQuery.endTime = this.dateRange[1]
      statisticsByDepartment(this.listQuery).then(response => {
        this.title = this.deptName + '指标考核情况统计图'
        this.chartData.rows = response.data
        this.listLoading = false
      })
    },
    fetchDeptList() {
      getDeptList('24').then(response => {
        this.deptList = response.data
        this.deptId = this.deptList[0].id
        this.deptName = this.deptList[0].simplename
        this.title = this.deptName + '指标考核情况统计图'
        this.listQuery.deptId = this.deptId
        // if (this.deptList) {
        //   this.listQuery.dept = this.deptList[0].id
        //   getDeptList(this.listQuery.dept).then(response => {
        //     this.subDeptList = response.data
        //   })
        // }
      })
    },
    changeType() {
      if (this.chartType === '饼图') {
        this.chartType = '柱状图'
        this.chartSettings.type = 'pie'
      } else if (this.chartType === '柱状图') {
        this.chartType = '饼图'
        this.chartSettings.type = 'histogram'
      }
    },
    order() {
    },
    changeDept(item) {
      this.deptName = item.label
    }
  }
}
</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>