<template>
  <el-scrollbar class="page-scroll">
    <el-row>
      <div style="margin: 15px 0px; text-align: center;">
        <el-radio-group v-model="timeTerm" size="small" @change="changeTimeTerm()">
          <el-radio-button label="1">本月</el-radio-button>
          <el-radio-button label="2">前三月</el-radio-button>
          <el-radio-button label="3">前半年</el-radio-button>
          <el-radio-button label="4">前一年</el-radio-button>
        </el-radio-group>
      </div>
    </el-row>

    <div class="panelBlock">
      <el-row>
        <div class="subTitle">高发问题统计</div>
        <div class="dashedLine"/>
      </el-row>

      <el-row>
        <div>
          <high-freq-chart4-sup :list="highFreqList"/>
        </div>
      </el-row>
    </div>

    <div class="panelBlock">
      <el-row>
        <div class="subTitle">各单位处置情况</div>
        <div class="dashedLine"/>
      </el-row>

      <el-row>
        <div>
          <dept-handle-chart4-sup :list="handleCaseList"/>
        </div>
      </el-row>
    </div>

    <div class="panelBlock">
      <el-row>
        <div class="subTitle">问题来源统计</div>
        <div class="dashedLine"/>
      </el-row>

      <el-row>
        <div>
          <source-statis-chart4-sup :list="sourceList.slice(0,sourceList.length-1)"/>
        </div>
      </el-row>
    </div>
  </el-scrollbar>
<!--  <div>-->
<!--    <div class="panelBlock" style="">-->
<!--      <el-row>-->
<!--        <div class="subTitle">案卷情况</div>-->
<!--        <div class="dashedLine"/>-->
<!--      </el-row>-->

<!--      <el-row>-->
<!--        <el-col :span="12">-->
<!--          <div class="caseStatisBlock" style="background-color: rgb(217, 59, 66)">-->
<!--            <span v-text="caseCounts.labelText"/>立案<br>-->
<!--            <span v-text="caseCounts.register"/>件-->
<!--          </div>-->
<!--        </el-col>-->

<!--        <el-col :span="12">-->
<!--          <div class="caseStatisBlock" style="background-color: rgb(248, 176, 51)">-->
<!--            本日立案<br>-->
<!--            <span v-text="caseCounts.todayRegister" />件-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->

<!--      <el-row>-->
<!--        <el-col :span="12">-->
<!--          <div class="caseStatisBlock" style="background-color: rgb(217, 59, 66)">-->
<!--            <span v-text="caseCounts.labelText" />处理率<br>-->
<!--            <span v-text="caseCounts.oughtHandleRate" />%-->
<!--          </div>-->
<!--        </el-col>-->

<!--        <el-col :span="12">-->
<!--          <div class="caseStatisBlock" style="background-color: rgb(248, 176, 51)">-->
<!--            <span v-text="caseCounts.labelText" />未处理<br>-->
<!--            <span v-text="caseCounts.notHandled" />件-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->
<!--  </div>-->
</template>

<script>
import request from '@/utils/request'
import { getToday, getDate } from '@/utils/dateutils'
import highFreqChart4Sup from '@/views/otherComment/highFreq/highFreqChart4Sup'
import SourceStatisChart4Sup from '@/views/otherComment/sourceStatis/SourceStatisChart4Sup'
import DeptHandleChart4Sup from '@/views/otherComment/deptHandle/DeptHandleChart4Sup'
import { highCaseEventList, sourceList, departmentAssess } from '@/api/assess/assessDept'

export default {
  name: 'SupStatisPanel',
  components: { DeptHandleChart4Sup, highFreqChart4Sup, SourceStatisChart4Sup },
  data() {
    return {
      highFreqList: [],
      sourceList: [],
      handleCaseList: [],
      timeTerm: '1',
      caseCounts: {
        labelText: '本月',
        register: 0, // 本期立案数
        todayRegister: 0, // 当日立案数
        totalCheckNum: 0, // 本期总应处置数
        checkedNum: 0, // 本期处置数
        oughtHandleRate: 0, // 本期应处置率
        notHandled: 0 // 本期未处置数
      },
      query: {
        begTime: getToday('yyyy-MM') + '-01',
        endTime: getDate(1, 'yyyy-MM-dd')
      },
      query4Regist: {
        beginDate: getToday('yyyy-MM') + '-01',
        endDate: getDate(1, 'yyyy-MM-dd')
      },
      query4Today: {
        beginDate: getToday('yyyy-MM-dd'),
        endDate: getDate(1, 'yyyy-MM-dd')
      }
    }
  },
  mounted() {
    this.fetchHighFreqData()
    this.fetchSourceListData()
    this.fetchHandleListData()

    this.getCaseCountStatis()
    this.getTodayCaseCountStatis()
  },
  methods: {
    fetchHighFreqData() {
      highCaseEventList(this.query).then(res => {
        if (res.code === 200) {
          this.highFreqList = res.data
        }
      })
    },
    fetchSourceListData() {
      sourceList(this.query).then(res => {
        if (res.code === 200) {
          this.sourceList = res.data
        }
      })
    },
    fetchHandleListData() {
      departmentAssess(this.query).then(res => {
        if (res.code === 200) {
          const array = [] // 0--部门; 1--seriesData
          const depts = []
          const series = []
          const seriesToDispatch = {
            name: '派发数',
            type: 'bar',
            barMaxWidth: 15,
            barGap: 0,
            data: []
          } // 派发数
          const seriesToHandle = {
            name: '处置数',
            type: 'bar',
            barMaxWidth: 15,
            barGap: 0,
            data: []
          } // 处置数
          res.data.forEach(dept => {
            if (dept.depId !== '') {
              depts.push(dept.departName)
              seriesToDispatch.data.push(dept.currentCheckNum)
              seriesToHandle.data.push(dept.checkedNum)
            } else {
              // 取出合计数
              this.caseCounts.checkedNum = dept.checkedNum
              this.caseCounts.totalCheckNum = dept.totalCheckNum

              // 计算
              this.caseCounts.notHandled = this.caseCounts.totalCheckNum - this.caseCounts.checkedNum
              if (this.caseCounts.totalCheckNum !== '0') {
                const rate = this.caseCounts.checkedNum / this.caseCounts.totalCheckNum
                this.caseCounts.oughtHandleRate = (rate * 100).toFixed(2)
              } else {
                this.caseCounts.oughtHandleRate = 0
              }
            }
          })
          series.push(seriesToDispatch)
          series.push(seriesToHandle)
          array.push(depts)
          array.push(series)

          this.handleCaseList = array
        }
      })
    },
    getCaseCountStatis() {
      request({
        url: 'assess/overview',
        method: 'get',
        params: this.query4Regist
      }).then(response => {
        if (response.code === 200) {
          this.caseCounts.register = response.data.register
        }
      })
    },
    getTodayCaseCountStatis() {
      request({
        url: 'assess/overview',
        method: 'get',
        params: this.query4Today
      }).then(response => {
        if (response.code === 200) {
          this.caseCounts.todayRegister = response.data.register
        }
      })
    },
    changeTimeTerm() {
      if (this.timeTerm === '1') {
        this.caseCounts.labelText = '本月'

        // 本月
        const thisMon = getToday('yyyy-MM')

        this.query.begTime = thisMon + '-01'
        this.query.endTime = getDate(1, 'yyyy-MM-dd')
        this.query4Regist.beginDate = thisMon + '-01'
        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
      } else if (this.timeTerm === '2') { // 前三个月
        this.caseCounts.labelText = '本期'

        this.query.begTime = getDate(-90, 'yyyy-MM-dd')
        this.query.endTime = getDate(1, 'yyyy-MM-dd')
        this.query4Regist.beginDate = getDate(-90, 'yyyy-MM-dd')
        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
      } else if (this.timeTerm === '3') { // 前半年
        this.caseCounts.labelText = '本期'

        this.query.begTime = getDate(-180, 'yyyy-MM-dd')
        this.query.endTime = getDate(1, 'yyyy-MM-dd')
        this.query4Regist.beginDate = getDate(-180, 'yyyy-MM-dd')
        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
      } else if (this.timeTerm === '4') { // 前一年
        this.caseCounts.labelText = '本期'

        this.query.begTime = getDate(-365, 'yyyy-MM-dd')
        this.query.endTime = getDate(1, 'yyyy-MM-dd')
        this.query4Regist.beginDate = getDate(-365, 'yyyy-MM-dd')
        this.query4Regist.endDate = getDate(1, 'yyyy-MM-dd')
      }

      this.getCaseCountStatis()
      this.fetchHighFreqData()
      this.fetchHandleListData()
      this.fetchSourceListData()
    }
  }
}
</script>

<style scoped>
  .page-scroll {
    height: 100%;
  }

  .page-scroll >>> .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .panelBlock {
    background-color: rgb(47, 56, 86);
    margin: 2px;
    padding-bottom: 15px;
  }

  .dashedLine {
    border-bottom: 1px dashed #f0f0f0;
  }

.caseStatisBlock {
  text-align: center;
  margin: 5px;
  padding: 10px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
}

.subTitle {
  font-weight: bold;
  font-family: '微软雅黑',serif;
  color: #fff;
  font-size: 16px;
  margin: 15px;
  margin-bottom: 5px;
}
</style>