<template>
  <app-container>
    <div class="search-div">
      <search-area :need-clear="false" :need-search-more="false" type="seperate" size="small" search-more-type="default" @search="fetchData" >
        <!--一般查询条件-->
        <search-item>
          <el-date-picker
            v-model="registerTime"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </search-item>
        <search-item>
          <el-select v-model="listQuery.caseType" clearable placeholder="案卷类型">
            <el-option
              v-for="item in caseTypeList"
              :key="item.typeCode"
              :label="item.typeName"
              :value="item.typeCode"
            />
          </el-select>
        </search-item>
      </search-area>
    </div>
    <el-row style="margin-top: 40px;margin-bottom: 50px">
      <el-col :span="8">
        <div ref="chart" class="chart-body" style="width:100%;"/>
      </el-col>
      <el-col :span="16">
        <div ref="chart2" class="chart-body" />
      </el-col>
    </el-row>
  </app-container>
</template>

<script>
import echarts from 'echarts'
import { getCaseType } from '@/api/seo/seo'
import { highCaseEventList } from '@/api/assess/assessDept'
import { highCaseEventByStreet } from '@/api/assess/assessDept'
export default {
  name: 'CaseStatistics',
  data() {
    return {
      query: {
        begTime: '',
        endTime: ''
      },
      listQuery: {
        begTime: '',
        endTime: '',
        caseType: ''
      },
      caseTypeList: [],
      registerTime: '',
      list: [],
      list1: []
    }
  },
  computed: {
    pieData() {
      const tmp = []
      this.list.forEach((item, index) => {
        if (item.caseMajorType) {
          const obj = {}
          obj.name = item.caseMajorType
          obj.value = item.caseNum
          tmp.push(obj)
        }
      })
      console.log(tmp)
      return tmp
    }
  },
  watch: {
    registerTime(val) {
      if (val && val.length > 0) {
        this.listQuery.begTime = val[0]
        this.listQuery.endTime = val[1]
      } else {
        this.listQuery.begTime = ''
        this.listQuery.endTime = ''
      }
    }
  },
  mounted() {
    getCaseType().then(res => {
      this.caseTypeList = res.data
    })
    this.fetchData()
  },
  methods: {
    fetchData() {
      highCaseEventList(this.listQuery).then(res => {
        this.list = res.data
        this.initChart()
      })
      // this.list1 = [{ streetName: '222222', caseNum: '22' }]
      // this.initChart1()
      highCaseEventByStreet(this.listQuery).then(res => {
        this.list1 = res.data
        this.initChart1()
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption({
        tooltip: {
          show: true
        },
        title: {
          text: '各大类案卷数量及占比',
          left: 'center'
        },
        color: [
          '#19d4ae', '#5ab1ef', '#fa6e86',
          '#ffb980', '#0067a6', '#c4b4e4',
          '#d87a80', '#9cbbff', '#d9d0c7',
          '#87a997', '#d49ea2', '#5b4947',
          '#7ba3a8'
        ],
        legend: {
          orient: 'vertical',
          right: 0,
          data: this.pieData.map(item => item.name)
        },
        series: [{
          name: '各大类案卷数量及占比',
          type: 'pie',
          radius: 120,
          data: this.pieData,
          label: {
            show: false
          },
          tooltip: {
            formatter: '{b}<br/>上报数: {c}({d}%)'
          }
        }]
      })
      this.chart.resize()
    },
    initChart1() {
      this.chart = echarts.init(this.$refs.chart2)
      this.chart.setOption({
        tooltip: {
          show: true
        },
        title: {
          text: '各街道案卷数量统计',
          left: 'center'
        },
        color: [
          '#19d4ae', '#5ab1ef', '#fa6e86',
          '#ffb980', '#0067a6', '#c4b4e4',
          '#d87a80', '#9cbbff', '#d9d0c7',
          '#87a997', '#d49ea2', '#5b4947',
          '#7ba3a8'
        ],
        xAxis: {
          type: 'category',
          data: this.list1.map(item => item.streetName)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          barMaxWidth: 50, // 柱图宽度
          data: this.list1.map(item => item.caseNum),
          type: 'bar',
          tooltip: {
            formatter: '{b}<br/>案卷数: {c}'
          }
        }]
      })
      this.chart.resize()
    }
  }
}
</script>

<style scoped>
.chart-container{
}
.chart-body{
  /*text-align: center;*/
  height: 50vh;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}
.form-container{
  margin-bottom: 20px;
  background-color: white;
}
</style>