<!--  -->
<template>
  <div class="report_index">
    <el-cascader
      :key="key"
      :props="props"
      :options="timeOptions"
      @change="handleChange"
      v-model="startId"
      style="width:250px">
    </el-cascader>
    <div class="report_content">
      <div class="header commonFont">
        <div v-for="(i,index) in statisticals" :key="i.id" @click="handleJump(i)">
          <div>
            <div>{{i.num}}</div>
             <div>{{i.desc}}</div>
          </div>
          <span v-if="index===0"></span>
        </div>
      </div>
      <div>
      <div class="num_title commonFont">考核人数分析</div>
      <div class="chart_content">
        <div class="num_chart commonFont">
          <div>考核人数分析</div>
          <div id="num_chart"></div>
        </div>
        <div class="num_report commonFont">
          <div>参与考核部门人数</div>
          <ul class="num_report_list">
            <li v-for="(assessItem, index) in assessNum" :key="assessItem.desc">
              <div class="rep_list">
                <div style="display:flex">
                  <div :style="handleliColor(index)">{{index+1}}</div>
                  <div style="margin-left:10px">{{assessItem.desc}} </div>
                </div>
                <div>{{ assessItem.num }}人</div>
              </div>
            </li>
            <li class="zanwu commonFont" v-if="assessNum.length === 0">暂无数据</li>
          </ul>
        </div>
      </div>
      <div class="level_title commonFont">结果分析</div>
    <div class="level_content">
        <div class="level_chart">
          <div class="level_tips commonFont">等级分布</div>
          <div id="level_chart"></div>
        </div>
        <div class='num_report'>
           <el-table
              :header-cell-style="{background:'#F5F7FA'}"
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column
                fixed
                sortable
                prop="desc"
                label="绩效等级">
              </el-table-column>
              <el-table-column
                prop="num"
                label="实际分布">
              </el-table-column>
              <el-table-column label="操作" width="140">
                  <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="handleDetailClick(scope.$index, scope.row)"
                        type="text"
                        size="small"
                      >
                      查看详情
                      </el-button>
                    </template>
            </el-table-column>
      </el-table>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
// 引入基本模板
import { getChartData, getStartsData } from '@/api/report'
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/bar')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data () {
    return {
      defaultId: '',
      // 当前选择的月份
      pickerTime: '',
      // 当前的绩效id
      startId: [0, 0],
      //
      statisticals: [
        {num: '0', desc: '参与人数'},
        {num: '0', desc: '目标制定'},
        {num: '0', desc: '目标确认'},
        {num: '0', desc: '执行中'},
        {num: '0', desc: '结果值录入'},
        {num: '0', desc: '评分'},
        {num: '0', desc: '考核结束'}],
      // 表格内容
      tableData: [],
      // 考核人数
      assessNum: [],
      //
      value: [],
      timeOptions: [{
        startId: 0,
        time: '月度',
        children: []
      }, {
        startId: 1,
        time: '自定义',
        children: []
      }],
      //
      props: {
        value: 'startId',
        label: 'time',
        expandTrigger: 'hover'
      },
      // 考核人数报表持有类
      option: {
        color: ['#409EFF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter (params) {
            for (let x in params) {
              return '考核部门：' + params[x].axisValueLabel + '<br/>考核人数:' + params[x].value
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            minInterval: 1,
            type: 'value'
          }
        ],
        series: [
          {
            barWidth: 15,
            name: '',
            type: 'bar',
            data: []
          }
        ]
      },
      key: 0,
      // 等级分布数据报表持有类
      levelOption: {
        color: ['#409EFF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter (params) {
            for (let x in params) {
              return '绩效等级：' + params[x].axisValueLabel + '<br/>实际分布:' + params[x].value
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            minInterval: 1,
            type: 'value'
          }
        ],
        series: [
          {
            barWidth: 15,
            name: '直接访问',
            type: 'bar',
            data: []
          }
        ]
      }
    }
  },
  computed: {
  },
  beforeMount () { },
  async mounted () {
    this.defaultId = Number(this.$route.query.id)
    await this.handleChartDataReq()
    await this.handleStartsReq()
  },
  methods: {
    handleJump (item) {
      this.$router.push({name: 'assessment-stepList', query: {id: this.startId[1], step: item.flowProcess}})
    },
    // 背景色计算
    handleliColor (val) {
      let color
      switch (val) {
        case 0:
          color = '#ff7705'
          break
        case 1:
          color = '#ff8b22'
          break
        case 2:
          color = '#ff9e45'
          break
        default:
          color = '#bcbcbc'
          break
      }
      return {
        width: '20px',
        height: '20px',
        'text-align': 'center',
        'line-height': '20px',
        color: 'white',
        background: color
      }
    },
    // 页面跳转
    handleDetailClick (index, rows) {
      this.$router.push({
        name: ('reportDetial'),
        query: Object.assign({}, {startId: this.startId[1]}, rows)
      })
    },
    // Y轴坐标计算，取靠近最大值的3的倍数作为上限，然后划分成4个刻度(0为初始刻度)
    handleChartYMul (val) {
      let max = val
      max = max + (3 - max % 3)
      return [0, max / 3 * 1, max / 3 * 2, max]
    },
    // 绩效分析
    handleNumChart () {
      let numChart = echarts.init(document.getElementById('num_chart'))
      numChart.setOption(this.option)
    },
    // 结果分析
    handleLevelChart () {
      let levelChart = echarts.init(document.getElementById('level_chart'))
      levelChart.setOption(this.levelOption)
    },
    //
    handleChange (val) {
      this.$router.replace({
        name: 'reportHome',
        query: {
          id: val[1]
        }
      })
      this.startId = val
      this.handleChartDataReq(val[1])
    },
    // 获取报表内容
    async handleChartDataReq (startId = this.defaultId || '') {
      let params = {
        startId: startId
      }
      try {
        this.$loadingStart()
        const result = await getChartData(params)
        this.$loadingEnd()
        result.data.forEach((val, index) => {
          if (val.type === 0) {
            // 头部数据
            this.statisticals = val.statisticals
            if (!this.defaultId) this.defaultId = val.defaultId
            console.log('this.defaultId : ', this.defaultId)
          } else if (val.type === 1) {
            // 等级分布数据
            this.tableData = val.statisticals
            this.levelOption.series[0].data = Array.from(this.tableData).map(item => (item.num))
            this.levelOption.xAxis[0].data = Array.from(this.tableData).map(item => (item.desc))
            this.handleLevelChart()
          } else if (val.type === 2) {
            // 报表数据
            this.assessNum = val.statisticals
            this.option.series[0].data = Array.from(this.assessNum).map(item => (item.num))
            this.option.xAxis[0].data = Array.from(this.assessNum).map(item => (item.desc))
            this.handleNumChart()
          }
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 为了不分页直接传999
    async handleStartsReq (type, handleNode) {
      let params = {
        currentPage: 1,
        cycleType: type,
        pageSize: 999
      }
      try {
        for (let i in this.timeOptions) {
          let res = await getStartsData(Object.assign({}, params, { cycleType: this.timeOptions[i].startId }))
          if (res.code !== 200) return this.$message.error(res.msg)
          res = res.data
          this.key += 10
          this.timeOptions[i].children = res.list.map((m, mindex) => {
            if (m.startId === this.defaultId) {
              this.startId = [this.timeOptions[i].startId, this.defaultId]
            }
            return m
          })
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  watch: {}
}
</script>

<style lang='less' scoped>
.report_index{
   display: flex;
   flex-direction: column;
}
.report_content {
  background: white;
  border: #fcfcfc solid 1px;
  margin-top:20px;
  padding-top:40px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom:40px;
}
.header {
  background: #fcfcfc;
  display: flex;
  align-items: center;
  justify-content: space-between;
   padding:0 20px;
}
.header > div{
  display: flex;
  cursor: pointer;
  align-items: center;
  flex: 1;
}
.header > div>div {
  flex-grow: 1;
  text-align: center;
  padding:20px
}
.header > div >div> div:nth-child(1) {
  color: black;
  font-weight: bold;
  font-size: 20px;
}
.header > div>div > div:nth-child(2) {
  color: #3a3a3a;
  font-size: 14px;
}
.header  span {
  display: inline-block;
  background: #333333;
  height: 30px;
  width: 1px;
}
.num_title{
  margin-top:20px;
  margin-bottom: 25px;
  color: #333333;
}
.chart_content{
  display: flex;
}
.num_tips{
  display: flex;
}
.num_chart{
  flex-grow: 1
}
.num_chart>:nth-child(1){
  color: #3a3a3a;
  font-size: 14px;
  padding-left: 20px;
}
.num_report {
  width: 500px;
  display: flex;
  flex-direction: column;
}
.num_report>:nth-child(1){
  color: #3a3a3a;
  font-size: 14px;
}
.num_report_list{
  margin-top: 20px;
  height: 360px;
  overflow:auto;
  .zanwu{
    .center();
    height: 200px;
    width: 100%;
  }
}
.rep_list{
  width: 200px;
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
}
.rep_list>:nth-child(2){
  text-align: start;
}
.level_title{
  margin-top:20px;
  margin-bottom: 25px;
  color: #333333;
}
.level_tips{
  color: #3a3a3a;
  font-size: 14px;
  width: fit-content;
  padding-left: 20px;
  position: relative;
}
.num_report{
  display: flex
}
#num_chart {
  flex: 1;
  padding-right: 100px;
  height: 360px;
}
.level_content{
  display: flex;
}
.level_chart {
  // display: flex;
  flex-grow: 1;
}
#level_chart {
  flex: 1;
  padding-right: 100px;
  height: 360px;
}
</style>
