<template>
  <div class="statistics-index">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="类型" prop="type">
        <el-select style="width: 150px" v-model="searchParam.type" size="small"
                   placeholder="请选择类型">
          <el-option key="1" label="国、省考河道" value="1"/>
          <el-option key="2" label="市、区级河道" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="巡检时间">
        <el-date-picker
          style="width: 220px"
          placeholder="选择的时间"
          clearable
          size="small"
          value-format="yyyy-MM-dd"
          v-model="searchParam.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button :loading="tableLoading" icon="el-icon-search" @click="search" size="small" type="primary">搜索
        </el-button>
      </el-form-item>
    </el-form>
    <div class="chart-box">
      <div>
        <div>河道巡检问题汇总表</div>
        <div id="c1"></div>
      </div>
      <div>
        <div>河道巡检问题分类表</div>
        <div id="c2"></div>
      </div>
    </div>
    <el-table stripe ref="table" v-loading="tableLoading" :data="dataList"
              border row-key="id">
      <el-table-column
        label="序号"
        align="center"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="driverAreaName" label="区属" align="center"/>
      <el-table-column show-overflow-tooltip prop="driverNum" label="河道数量" align="center"/>
      <el-table-column show-overflow-tooltip prop="inspectNum" label="巡检次数" align="center"/>
      <el-table-column show-overflow-tooltip prop="totalNum" label="问题总数" align="center"/>
      <el-table-column show-overflow-tooltip prop="surfaceWater" label="水面" align="center"/>
      <el-table-column show-overflow-tooltip prop="shoreLine" label="岸线" align="center"/>
      <el-table-column show-overflow-tooltip prop="outfall" label="排口" align="center"/>
      <el-table-column show-overflow-tooltip prop="waterQuality" label="水质" align="center"/>
      <el-table-column width="80" label="操作">
        <template slot-scope="scoped">
          <el-button @click="getDetail(scoped.row)" type="primary" size="mini" icon="el-icon-tickets">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import statisticsApi from '@/api/statistics/index'
  import G2 from '@antv/g2';

  export default {
    name: "statistics-index",
    data() {
      return {
        tableLoading: false,
        searchParam: {
          type: '1',
          time: ''
        },
        sumkey: '',
        filterDataList: [],
        filterBarList: [],
        dataList: [],
        chart: {},
        barChart: {},
        chartWidth: 500
      }
    },
    created() {
      this.chartWidth = (document.body.clientWidth - 300) / 2
    },
    mounted() {
      this.tableLoading = true
      this.initChar()
      this.initBar()
      let searchParam = window.sessionStorage.getItem('driver')
      if (searchParam) {
        this.searchParam = JSON.parse(searchParam)
      }
      window.sessionStorage.removeItem('driver')
      this.getAllList()
    },
    methods: {
      getDetail(row) {
        window.sessionStorage.setItem('driver', JSON.stringify(this.searchParam))
        this.$router.push({name: 'driverArea', params: {id: row.driverAreaId,searchParam:this.searchParam}})
      },
      initSearchParam() {
        this.searchParam = {
          type: '1',
          time: ''
        }
      },
      search() {
        this.tableLoading = true
        this.getAllList()
      },
      initChar() {
        let chart = new G2.Chart({
          container: 'c1',
          height: 400,
          width: this.chartWidth,
          padding: [40, 40, 40, 25]
        });
        chart.source(this.filterDataList, {
          driverAreaName: {
            range: [0, 1]
          }
        });
        chart.scale('value', {
          min: 0
        });
        chart.legend({
          position: 'top-center',
        });
        chart.tooltip({
          crosshairs: {
            type: 'line'
          },
          'g2-tooltip': {
            width: '150px',
            position: 'absolute',
            visibility: 'hidden',
            border: '1px solid #efefef',
            backgroundColor: '#666666',
            color: '#ffffff',
            fontSize: '16px',
            opacity: '0.8',
            padding: '5px 15px',
            transition: 'top 200ms,left 200ms',
          }, // 设置 tooltip 的 css 样式
          'g2-tooltip-list': {
            margin: '10px',
          },
        });
        chart.axis('driverAreaName', {
          line: {
            stroke: '#999999',
          },
          label: {
            textStyle: {
              fill: '#333333',
              fontSize: 14
            }
          }
        });
        chart.axis('value', {
          position: 'left',
          line: {
            stroke: '#999999',
          },
          label: {
            textStyle: {
              fill: '#333333',
              fontSize: 14
            }
          }
        });
        chart.line().position('driverAreaName*value').color('name');
        // 在x*y的坐标上按z值绘制圆点
        chart.point().position('driverAreaName*value').size(4).color('name').shape('circle');
        chart.render();
        this.chart = chart
      },
      initBar() {
        const chart = new G2.Chart({
          container: 'c2',
          height: 400,
          width: this.chartWidth,
          padding: [40, 40, 40, 25]
        });
        chart.source(this.filterBarList);
        chart.scale('value', {
          min: 0,
        });
        chart.axis('type', {
          label: {
            textStyle: {
              fill: '#333333',
              fontSize: 14
            }
          },
          tickLine: {
            alignWithLabel: false,
            length: 0
          },
          line: {
            stroke: '#999999',
          }
        });

        chart.axis('value', {
          label: {
            textStyle: {
              fill: '#333333',
              fontSize: 14
            }
          },
          line: {
            stroke: '#999999',
          },
          title: {
            offset: 50
          }
        });
        chart.legend('company', {
          position: 'top-center'
        });
        chart.tooltip({
          'g2-tooltip': {
            width: '120px',
            position: 'absolute',
            visibility: 'hidden',
            border: '1px solid #efefef',
            backgroundColor: '#666666',
            color: '#ffffff',
            fontSize: '16px',
            opacity: '0.8',
            padding: '5px 15px',
            transition: 'top 200ms,left 200ms',
          }, // 设置 tooltip 的 css 样式
          'g2-tooltip-list': {
            margin: '10px',
          },
        });
        chart.interval().position('type*value').color('company')
          .opacity(8)
          .adjust([{
            type: 'dodge',
            marginRatio: 10 / 32
          }])
        ;
        chart.render();
        this.barChart = chart
      },
      initDataList() {
        let list = JSON.parse(JSON.stringify(this.dataList))
        let filterDataList = []
        list.map(item => {
          let driverAreaName = item.driverAreaName.replace('新区', '').replace('区', '')
          let child = {
            driverAreaName: driverAreaName,
            name: '河道数量',
            value: item.driverNum
          }
          filterDataList.push(child)
          child = {
            driverAreaName: driverAreaName,
            name: '问题总数',
            value: item.totalNum
          }
          filterDataList.push(child)
          child = {
            driverAreaName: driverAreaName,
            name: '巡检次数',
            value: item.inspectNum
          }
          filterDataList.push(child)
        })
        this.filterDataList = Object.assign([], filterDataList)
      },
      initBarList() {
        let filterBarList = []
        let list = JSON.parse(JSON.stringify(this.dataList))
        list.map(item => {
          let type = item.driverAreaName.replace('新区', '').replace('区', '')
          filterBarList.push({company: '水面', type: type, value: item.surfaceWater})
          filterBarList.push({company: '岸线', type: type, value: item.shoreLine})
          filterBarList.push({company: '排口', type: type, value: item.outfall})
          filterBarList.push({company: '水质', type: type, value: item.waterQuality})
        })
        this.filterBarList = Object.assign([], filterBarList)
      },
      getAllList() {
        let searchParam = JSON.parse(JSON.stringify(this.searchParam))
        if (searchParam.time && searchParam.time.length > 0) {
          searchParam.inspectTime = searchParam.time[0] + '~' + searchParam.time[1]
        }
        delete searchParam.time
        statisticsApi.getData(searchParam).then(res => {
          this.dataList = res.data ? res.data : []
          this.initDataList()
          this.initBarList()
          this.chart.changeData(this.filterDataList);
          this.barChart.changeData(this.filterBarList)
          this.tableLoading = false
        }).catch(e => {
          this.dataList = []
          this.tableLoading = false
        })
      }
    }
  }
</script>

<style lang="less">
  .statistics-index {
    height: fit-content;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
    padding: 15px;

    .chart-box {
      margin-top: 20px;
      display: flex;

      > div {
        width: 50%;
      }
    }
  }
</style>
