<template>
  <div class="app-container">
    <div class="chart-container">
      <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="dateRange">
              <el-date-picker
                v-model="listQuery.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                size="middle"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-button type="primary" size="middle" @click="search">查询</el-button>
            <el-button type="primary" size="middle" @click="changeChart">{{ buttonName }}</el-button>
            <!--<el-button type="primary" size="middle" @click="exportImage">导出</el-button>-->
          </el-col>
        </el-row>
        <el-row style="margin-top: 40px; text-align: center">
          <span class="chart-title">{{ title }}</span>
          <!--<el-button type="primary" size="small" style="margin-left: 20px" @click="order">排序</el-button>-->
        </el-row>
      </el-form>
      <div class="chart-body">
        <ve-histogram
          v-if="chartType==='histogram'"
          :loading="loading"
          :data="chartData"
          :settings="chartSettings"
          :extend="extend"/>
        <ve-pie v-if="chartType==='pie'" :data="chartDataPie" />
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'DeptStatistics',
  components: { selectTree, HistogramDeptStatistics, PieDeptStatistics },
  data() {
    const validDateRange = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error('请选择起止日期'))
      } else {
        callback()
      }
    }
    return {
      buttonName: '饼图展示',
      chartType: 'histogram',
      chartDataPie: {
        columns: ['text', 'value'],
        rows: []
      },
      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: '',
        dateRange: []
      },
      deptList: [],
      title: '',
      deptName: '',
      chartData: {
        columns: ['text', 'value', 'value2'],
        rows: []
      },
      rules: {
        dateRange: [{ required: true, validator: validDateRange }],
        deptId: [{ required: true, message: '部门必选', trigger: ['blur', 'change'] }]
      },
      dataEmpty: false,
      loading: true,
      showType: 'histogram'
    }
  },
  watch: {
    // this.listQuery.dateRange(val) {
    //   if (val && val.length > 0) {
    //     this.listQuery.startTime = val[0]
    //     this.listQuery.endTime = val[1]
    //   } else {
    //     this.listQuery.startTime = ''
    //     this.listQuery.endTime = ''
    //   }
    // }
  },
  mounted() {
    var beginTime = getDayTime(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)
    var endTime = new Date()
    this.listQuery.dateRange = [beginTime.Format('yyyy-MM-dd'), endTime.Format('yyyy-MM-dd')]
    this.fetchDeptList()
  },
  methods: {
    // 查询数据
    search() {
      this.listLoading = true
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.fetchData()
        }
      })
    },
    // 获取数据
    fetchData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.listLoading = true
          this.listQuery.startTime = this.listQuery.dateRange[0]
          this.listQuery.endTime = this.listQuery.dateRange[1]
          statisticsByDepartment(this.listQuery).then(response => {
            this.title = this.deptName + this.listQuery.startTime + '~' + this.listQuery.endTime + '指标考核情况'
            this.chartData.rows = response.data
            this.chartDataPie.rows = response.data
            this.listLoading = false
            console.log(3333333)
          })
        }
      })
    },
    fetchDeptList() {
      getDeptList('24').then(response => {
        debugger
        this.deptList = response.data
        console.log(response.data)
        this.listQuery.deptId = this.deptList[0].id
        this.deptName = this.deptList[0].simplename
        this.fetchData()
      })
    },
    exportImage() {
      this.$nextTick(() => {})
      const canvas = document.getElementsByTagName('canvas')[0]
      const image = canvas.toDataURL({
        type: 'png',
        pixelRatio: 2,
        backgroundColor: '#fff'// 不设置此项，导出图片的底色是黑色
      })
      // box.innerHTML = '<img src="' + image + '" alt="">'
    },
    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'
      }
    },
    order() {
    },
    changeDept() {
      console.log(1111111111)
      this.deptName = this.deptList.find(val => val.id === this.listQuery.deptId).simplename
      console.log(2222222222222)
      // this.fetchData()
    }
  }
}
</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>