<template>
  <div class="app-container">
    <div class="search-div">
      <el-form ref="dataForm" :inline="true" :model="listQuery" :rules="rules" class="form-container">
        <el-row>
          <el-col :span="3">
            <el-form-item prop="deptId">
              <el-select v-model="listQuery.deptId" placeholder="考核部门" @change="changeDept">
                <el-option
                  v-for="item in deptList"
                  :key="item.id"
                  :label="item.simplename"
                  :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="statisticsTime">
              <el-date-picker
                v-model="listQuery.statisticsTime"
                type="year"
                placeholder="年份"
                value-format="yyyy"
                size="middle"/>
            </el-form-item>
          </el-col>
          <el-col :span="3" style="margin-left: 60px">
            <el-form-item prop="indexType">
              <el-select v-model="listQuery.indexType" placeholder="指标类型">
                <el-option
                  v-for="item in typeList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="middle" @click="search">查询</el-button>
            <el-button type="primary" size="middle" @click="changeChart">{{ buttonName }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row style="margin-top: 40px">
        <el-col :span="6" :offset="10">
          <span class="chart-title">{{ title }}</span>
        </el-col>
      </el-row>
      <div class="chart-body">
        <ve-histogram
          v-if="chartType==='histogram'"
          :loading="loading"
          :data="chartData"
          :settings="chartSettings"
          :extend="extend"
          :legend-visible="false"/>
        <ve-pie v-if="chartType==='pie'" :data="chartDataPie" />
      </div>
    </div>
  </div>
</template>

<script>
import selectTree from '@/components/SelectTree/singleSelect'
import { statisticsByIndex } from '@/api/assessResult'
import { getDeptList } from '@/api/assessRules'
import HistogramDeptStatistics from '../components/histogramDeptStatistics'
import PieDeptStatistics from '../components/pieDeptStatistics'

export default {
  name: 'DeptStatistics',
  components: { selectTree, HistogramDeptStatistics, PieDeptStatistics },
  data() {
    return {
      buttonName: '饼图展示',
      chartType: 'histogram',
      chartSettings: {
        // axisSite: { right: ['value2'] },
        // yAxisType: ['number', 'percent'],
        yAxisName: ['分数'],
        xAxisName: '月份',
        labelMap: {
          'text': '月份',
          'value': '分数'
        },
        showLine: ['value2']
      },
      extend: {
        series: {
          // label: { show: true, position: 'top' },
          itemStyle: {
            normal: {
              barBorderRadius: [3, 3, 0, 0]
            }
          },
          barMaxWidth: 30
        },
        xAxis: {
          axisLabel: {
            // rotate: 25 // 代表逆时针旋转45度
          }
        }
      },
      listQuery: {
        deptId: '',
        statisticsTime: '',
        indexType: ''
      },
      rules: {
        indexType: [{ required: true, message: '指标类型必选', trigger: ['blur', 'change'] }],
        statisticsTime: [{ required: true, message: '年份必选', trigger: ['blur', 'change'] }],
        deptId: [{ required: true, message: '部门必选', trigger: ['blur', 'change'] }]
      },
      deptList: [],
      title: '',
      deptName: '',
      deptId: '',
      dateRange: [],
      typeList: [
        { name: '部门职能' },
        { name: '专题专项' },
        { name: '经济发展' },
        { name: '行政综合' }
      ],
      deviceTypeList: [],
      showDeviceType: true,
      chartData: {
        columns: ['text', 'value', 'value2'],
        rows: []
      },
      chartDataPie: {
        columns: ['text', 'value'],
        rows: []
      },
      loading: true
    }
  },
  mounted() {
    this.listQuery.statisticsTime = (new Date()).Format('yyyy')
    this.fetchDeptList()
  },
  methods: {
    // 查询数据
    search() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.fetchData()
        }
      })
    },
    // 获取数据
    fetchData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.listLoading = true
          console.log(this.listQuery.indexType)
          statisticsByIndex(this.listQuery).then(response => {
            for (var i = 0; i < response.data.length; i++) {
              response.data[i].value2 = response.data[i].value
            }
            this.title = this.deptName + this.listQuery.indexType + '指标' + this.listQuery.statisticsTime + '年考核情况'
            this.chartData.rows = response.data
            this.listLoading = false
          })
        }
      })
    },
    fetchDeptList() {
      getDeptList('24').then(response => {
        this.deptList = response.data
        this.listQuery.deptId = this.deptList[0].id
        this.listQuery.indexType = this.typeList[0].name
        this.deptName = this.deptList[0].simplename
        this.fetchData()
      })
    },
    changeDept() {
      this.deptName = this.deptList.find(val => val.id === this.listQuery.deptId).simplename
      // this.fetchData()
    },
    changeChart() {
      debugger
      if (this.buttonName === '饼图展示') {
        console.log(this.buttonName)
        this.buttonName = '柱状图展示'
        this.chartType = 'pie'
        this.chartDataPie.rows = this.chartData.rows
        console.log('this.chartData.rows:::' + this.chartData.rows)
      } else if (this.buttonName === '柱状图展示') {
        console.log(this.buttonName)
        this.buttonName = '饼图展示'
        this.chartType = 'histogram'
      }
    }
  }
}
</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>