<template>
  <div class="AppQxnDv">
    <div class="left">
      <AiDvPanel style="width: 100%; height: auto;" border="border6" title="单位列表">
      </AiDvPanel>
      <div class="left-list">
        <div
          class="left-item"
          v-for="(item, index) in areaList"
          :class="[gridParentId === item.gridId ? 'active' : '']"
          :key="index"
          @click="init(item.gridId)">
          <i>{{ index + 1 }}</i>
          <div class="left-item__top">
            <h2>{{ item.gridName }}</h2>
            <el-select v-model="gridId" @change="onStationChange" size="mini" v-if="gridParentId === item.gridId && index !== 0" placeholder="请选择派出所">
              <el-option
                :label="item.gridName"
                :value="item.gridId"
                v-for="(item, index) in policeStationList"
                :key="index">
              </el-option>
            </el-select>
          </div>
          <div class="left-item__bottom">
            <span>居民数量：{{ item.customerCount + item.groupMemberCount }}</span>
            <span>成员：{{ item.allWXMemberCount }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-left">
        <AiDvPanel style="width: 100%" border="border6" title="警格事件概況">
          <div class="right-left__total AppQxnDv-total">
            <div class="item">
              <h2>全部上报事件</h2>
              <div class="item-bottom">
                <span>{{ wxGridReportOverviewInfo['全部上报事件数量'] }}</span>
                <i>条</i>
              </div>
            </div>
            <div class="item">
              <h2>已办结事件</h2>
              <div class="item-bottom">
                <span>{{ wxGridReportOverviewInfo['已办结数量'] }}</span>
                <i>条</i>
              </div>
            </div>
            <div class="item">
              <h2>办理中事件</h2>
              <div class="item-bottom">
                <span>{{ wxGridReportOverviewInfo['办理中数量'] }}</span>
                <i>条</i>
              </div>
            </div>
            <div class="item">
              <h2>待处理事件</h2>
              <div class="item-bottom">
                <span>{{ wxGridReportOverviewInfo['待受理数量'] }}</span>
                <i>条</i>
              </div>
            </div>
          </div>
          <div class="right-left__top">
            <div class="wrapper">
              <div class="AppQxnDv-title">
                <h2>上报来源分布</h2>
              </div>
              <ai-echart-v2
                style="height: 220px; width: 245px; margin-top: 10px;"
                :ref="'chart1'"
                :data="chartData1"
                :ops="chartConfig1">
              </ai-echart-v2>
            </div>
            <div class="wrapper">
              <div class="AppQxnDv-title">
                <h2>事件办理情況</h2>
              </div>
              <ai-echart-v2
                style="height: 220px; width: 265px; margin-top: 10px;"
                :ref="'chart2'"
                :data="chartData2"
                :ops="chartConfig2">
              </ai-echart-v2>
            </div>
          </div>
          <div class="right-left__middle">
            <div class="left">
              <div class="wrapper">
                <div class="AppQxnDv-title">
                  <h2>事件受理率</h2>
                </div>
                <DoughnutChart :labelStyle="{width: '96px'}" :ratio="sllRate" :value="sllData"></DoughnutChart>
              </div>
              <div class="wrapper">
                <div class="AppQxnDv-title">
                  <h2>事件办结率</h2>
                </div>
                <DoughnutChart :labelStyle="{width: '96px'}" :ratio="sjbjRate" :value="sjbjData"></DoughnutChart>
              </div>
            </div>
            <div class="right wrapper">
              <div class="AppQxnDv-title">
                <h2>最新办理动态</h2>
                <el-select v-model="type" @change="onChange" style="width: 92px" size="mini" placeholder="请选择">
                  <el-option label="新办结" value="0"></el-option>
                  <el-option label="新受理" value="1"></el-option>
                </el-select>
              </div>
              <ai-table
                width="265px"
                style="margin-top: 10px;"
                height="210px"
                :tableData="tableData1"
                :col-configs="colConfigs1"
                :isShowPagination="false"
                @getList="() => {}">
              </ai-table>
            </div>
          </div>
          <div class="right-left__bottom">
            <div class="AppQxnDv-title">
              <div class="left AppQxnDv-title__tab">
                <h2
                  @click="onTypeChange(index)"
                  :class="[currIndex === index ? 'active' : '']"
                  v-for="(item, index) in eventList"
                  :key="index">
                  {{ item.categoryName }}
                </h2>
              </div>
            </div>
            <ai-echart-v2
              style="height: 236px; margin-top: 10px; width: 100%;"
              :ref="'chart3'"
              :data="chartData3"
              :ops="chartConfig3">
            </ai-echart-v2>
          </div>
        </AiDvPanel>
      </div>
      <div class="right-middle">
        <AiDvPanel style="width: 100%" border="border6" title="综合概况图">
          <div class="right-left__total AppQxnDv-total">
            <div class="item">
              <h2>警格上报事件</h2>
              <div class="item-bottom">
                <span>{{ middleTotalInfo['警格累计上报'] }}</span>
                <i>条</i>
              </div>
            </div>
            <div class="item">
              <h2>居民上报事件</h2>
              <div class="item-bottom">
                <span>{{ middleTotalInfo['居民累计上报'] }}</span>
                <i>条</i>
              </div>
            </div>
            <div class="item">
              <h2>今日待处理</h2>
              <div class="item-bottom">
                <span>{{ middleTotalInfo['今日上报'] - middleTotalInfo['今日办结'] }}</span>
                <i>条</i>
              </div>
            </div>
            <div class="item">
              <h2>今日办理中</h2>
              <div class="item-bottom">
                <span>{{ middleTotalInfo['今日上报'] - middleTotalInfo['今日办结'] }}</span>
                <i>条</i>
              </div>
            </div>
            <div class="item">
              <h2>今日已办结</h2>
              <div class="item-bottom">
                <span>{{ middleTotalInfo['今日办结'] }}</span>
                <i>条</i>
              </div>
            </div>
          </div>
          <div class="wrapper">
            <DvMap :instance="instance" style="width: 100%; height: 356px;" type="1"></DvMap>
          </div>
          <div class="right-middle__bottom">
            <div class="AppQxnDv-title">
              <h2>事件列表</h2>
              <div class="right">
                <el-select clearable @change="getReportList" v-model="search.source" style="width: 82px; margin-right:6px;" size="mini" placeholder="上报来源">
                  <el-option label="巡查上报" value="0"></el-option>
                  <el-option label="居民上报" value="1"></el-option>
                </el-select>
                <el-select clearable @change="getReportList" v-model="search.categoryId" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件类型">
                  <el-option
                    v-for="(item, index) in eventList"
                    :key="index"
                    :label="item.categoryName"
                    :value="item.categoryId">
                  </el-option>
                </el-select>
                <el-select clearable @change="getReportList" v-model="search.status" style="width: 82px; margin-right:6px;" size="mini" placeholder="事件状态">
                  <el-option label="待受理" value="0"></el-option>
                  <el-option label="办理中" value="1"></el-option>
                  <el-option label="已办结" value="2"></el-option>
                  <el-option label="已拒绝" value="3"></el-option>
                </el-select>
                <el-select clearable @change="getReportList" v-model="search.dateRange" style="width: 82px; margin-right:6px;" size="mini" placeholder="最近30天">
                  <el-option label="昨天" value="0"></el-option>
                  <el-option label="近7天" value="1"></el-option>
                  <el-option label="近30天" value="2"></el-option>
                </el-select>
                <el-input placeholder="关键词" v-model="search.param" v-throttle="() => {getReportList()}" style="width: 98px;">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
            </div>
            <ai-table
              style="margin-top: 10px; width: 556px;"
              height="420px"
              :tableData="tableData3"
              :col-configs="colConfigs3"
              :isShowPagination="false"
              @getList="() => {}">
            </ai-table>
          </div>
        </AiDvPanel>
      </div>
      <div class="right-right">
        <AiDvPanel class="bottom" style="width: 410px" border="border6" title="办理排行">
          <ai-table
            height="890px"
            :tableData="reportHandleList"
            :col-configs="colConfigs2"
            :isShowPagination="false"
            @getList="() => {}">
            <el-table-column slot="index" label="排名" align="center" width="58">
              <template slot-scope="{ $index }">
                <div class="table-index" :class="[$index < 3 ? 'table-index__active' : '']">
                  <span>{{ $index + 1 }}</span>
                </div>
              </template>
            </el-table-column>
          </ai-table>
        </AiDvPanel>
      </div>
    </div>
    <transition name="fade">
      <div class="event-info" v-if="isShow">
        <div class="info-mask" @click="isShow = false"></div>
        <div class="info-content">
          <div class="info-title">
            <h2>事件详情</h2>
          </div>
          <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/close.png" @click="isShow = false" />
          <h3 :title="eventInfo.desc">{{ eventInfo.desc }}</h3>
          <div class="info-wrapper">
            <div class="info-wrapper__item">
              <label>办理状态：</label>
              <span :style="{color: mapStatus(eventInfo.status, 'color')}">{{ mapStatus(eventInfo.status, 'name') }}</span>
            </div>
            <div class="info-wrapper__item">
              <label>上报来源：</label>
              <span>{{ eventInfo.typeName }}</span>
            </div>
            <div class="info-wrapper__item">
              <label>发生地点：</label>
              <span>{{ eventInfo.location.address }}</span>
            </div>
            <div class="info-wrapper__item">
              <label>事件类别：</label>
              <span>{{ eventInfo.case_name }}</span>
            </div>
          </div>
          <div class="info-bottom">
            <h3>办理流程</h3>
            <div class="info-bottom__wrapper">
              <div class="info-bottom__item" v-for="(item, index) in eventInfo.process_list" :key="index">
                <h4>{{ item.solve_username }}</h4>
                <div class="middle">
                  <p :title="item.process_desc">{{ item.process_desc }}</p>
                  <span>{{ $moment(item.solved_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </div>
                <i>{{ mapProcessType(item.process_type) }}</i>
              </div>
            </div>
            <div class="progress" v-if="false">
              <div class="progress-item active" v-for="(item, index) in eventInfo.process_list" :key="index">
                <h4>{{ mapStatus(item.status, 'name') }}</h4>
                <div class="progress-item__middle">
                  <i></i>
                </div>
                <p>{{ item.solve_username }}</p>
                <span>{{ $moment(item.solved_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import DvMap from './components/DvMap'
  import DoughnutChart from './components/DoughnutChart'
  export default {
    name: 'AppQxnEventDv',
    label: '事件上报',

    props: {
      instance: Function
    },

    components: {
      DvMap,
      DoughnutChart
    },

    data ()  {
      return {
        policeStationList: [],
        currIndex: 0,
        areaList: [],
        type: '0',
        isShow: false,
        middleTotalInfo: {},
        gridId: '',
        gridParentId: 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A',
        chartConfig1: {
          legend: {
            textStyle: {
              color: "#fff"
            }
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '40px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 102, 154, 0.65)',
            borderColor: 'rgba(0, 102, 154, 0.65)',
            textStyle: { color: '#fff' },
            axisPointer: { type: 'cross' }
          },
          color: ['#33CCCC', '#DBB36E'],
          xAxis: {
            type: "category",
            axisTick: {show: false},
            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
            axisLabel: {color: '#8FABBF', fontSize: 12}
          },
          yAxis: {
            nameGap: 23,
            minInterval: 1,
            splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
            axisLabel: {color: '#8FABBF', fontSize: 12},
            axisPointer: { snap: true }
          },
          series: [
            {
              name: '警格上报',
              type: 'bar',
              barWidth: '15',
              stack: 'one'
            },
            {
              name: '居民上报',
              barWidth: '15',
              type: 'bar',
              stack: 'one'
            }
          ]
        },
        chartConfig2: {
          legend: {
            itemWidth: 16,
            itemGap: 4,
            textStyle: {
              color: "#fff",
              fontSize: '12'
            },
            icon: 'roundRect'
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '40px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 102, 154, 0.65)',
            borderColor: 'rgba(0, 102, 154, 0.65)',
            textStyle: { color: '#fff' },
            axisPointer: { type: 'cross' }
          },
          color: ['#33CCCC', '#2C97E8','#BFEAFF', '#DBB36E'],
          xAxis: {
            type: "category",
            axisTick: {show: false},
            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } },
            axisLabel: {color: '#8FABBF', fontSize: 12}
          },
          yAxis: {
            nameGap: 23,
            minInterval: 1,
            splitLine: { lineStyle: { color: 'rgba(108, 128, 151, 0.3)', type: 'dashed' } },
            axisLabel: {color: '#8FABBF', fontSize: 12},
            axisPointer: { snap: true }
          },
          daemon: (color) => ({
            showSymbol: false,
            smooth: true,
            lineStyle: {
              shadowBlur: 4,
              shadowOffsetY: 2,
              width: 2
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                x2: 0,
                y: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: this.Hex2RGBA(color, 0.3) },
                  { offset: 1, color: this.Hex2RGBA(color, 0.1) }
                ]
              }
            }
          })
        },
        chartData3: [] ,
        chartConfig3: {
          xAxis: {
            type: "category",
            axisTick: {show: false},
            axisLabel: {color: '#8FABBF', fontSize: 12},
            axisLine: { lineStyle: { color: 'rgba(179, 223, 255, 0.4)' } }
          },
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 102, 154, 0.65)',
            borderColor: 'rgba(0, 102, 154, 0.65)',
            textStyle: { color: '#fff' },
            axisPointer: { type: 'cross' }
          },
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '40px',
            containLabel: true
          },
          legend: {
            textStyle: {
              color: "#fff"
            }
          },
          yAxis: {
            nameGap: 23,
            minInterval: 1,
            splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
            axisPointer: { show: false },
            axisLabel: {color: '#8FABBF', fontSize: 12}
          },
          axisPointer: {
            type: 'shadow',
            triggerTooltip: false,
            shadowStyle: { color: 'rgba(46, 153, 255, .2)' }
          },
          color: [
            {
              type: 'linear',
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(51, 204, 204, 1)' },
                { offset: 1, color: 'rgba(31, 89, 89, 0.25)' }
              ]
            },
            {
              type: 'linear',
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(44, 151, 232, 1)' },
                { offset: 1, color: 'rgba(21, 154, 255, 0)' }
              ]
            },
            {
              type: 'linear',
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(191, 234, 255, 1)' },
                { offset: 1, color: 'rgba(191, 234, 255, 0.1)' }
              ]
            },
            {
              type: 'linear',
              x: 0,
              x2: 0,
              y: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(219, 179, 110, 1)' },
                { offset: 1, color: 'rgba(219, 179, 110, 0.1)' }
              ]
            }
          ],
          series: [
            {
              name: '已办结',
              type: 'bar',
              barWidth: '8'
            },
            {
              name: '待受理',
              barWidth: '8',
              type: 'bar'
            },
            {
              name: '处理中',
              barWidth: '8',
              type: 'bar'
            },
            {
              name: '已拒绝',
              barWidth: '8',
              type: 'bar'
            }
          ]
        },
        wxGridReportOverviewInfo: {},
        tableData1: [],
        colConfigs1: [
          { prop: 'createTime',  label: '时间', align: 'center', width: '60px', dateFormat: 'MM/DD'  },
          { prop: 'reporterName',  label: '姓名', align: 'center' },
          { prop: 'caseName', label: '事件名称', align: 'left', width: 130 }
        ],
        eventInfo: {},
        reportHandleList: [],
        colConfigs2: [
          { slot: 'index' },
          { prop: 'name',  label: '姓名', align: 'center'  },
          { prop: 'overCount',  label: '已办结', align: 'center', width: 60 },
          { prop: 'handleCount', label: '办理中', align: 'center', width: 60 },
          { prop: 'reportCount', label: '上报数', align: 'center', width: 60 },
          {
            prop: 'reportCount',
            label: '联系TA',
            align: 'center',
            render: (h, params) => {
              return h(
                'p', {
                  style: {
                    width: '52px',
                    height: '22px',
                    textAlign: 'center',
                    lineHeight: '22px',
                    color: '#D4F2FF',
                    cursor: 'pointer',
                    margin: '0 auto',
                    borderRadius: '4px',
                    backgroundImage: 'linear-gradient(175deg, #02bcee99 0%, #0144d899 100%)'
                  },
                  on: {
                    click: e => {
                      console.log(params)
                    }
                  },
                }, '联系TA'
              )
            }
          }
        ],
        colConfigs3: [
          { prop: 'createTime',  label: '时间', align: 'center', dateFormat: 'MM/DD'  },
          { prop: 'desc',  label: '事件内容', align: 'left', width: 300 },
          {
            prop: 'status',
            label: '状态',
            align: 'center',
            render: (h, params) => {
              return h(
                'i', {
                  style: {
                    display: 'inline-block',
                    fontStyle: 'normal',
                    width: '52px',
                    height: '20px',
                    textAlgin: 'center',
                    lineHeight: '20px',
                    color: this.mapStatus(params.row.status, 'color'),
                    margin: '0 auto',
                    borderRadius: '2px',
                    background: this.mapStatus(params.row.status, 'bgColor'),
                  }
                }, this.mapStatus(params.row.status, 'name')
              )
            }
          },
          {
            prop: 'reportCount',
            label: '查看',
            align: 'center',
            render: (h, params) => {
              return h(
                'p', {
                  style: {
                    color: '#00AAFF',
                    cursor: 'pointer'
                  },
                  on: {
                    click: () => {
                      this.getEventInfo(params.row.orderId, params.row)
                    }
                  },
                }, '查看>>'
              )
            }
          }
        ],
        tableData3: [],
        search: {
          dateRange: '',
          param: '',
          source: '',
          status: '',
          categoryId: ''
        },
        eventList: []
      }
    },

    computed: {
      chartData1 () {
        if (!this.wxGridReportOverviewInfo['上报来源分布+事件办理情况']) {
          return []
        }

        return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
          return {
            name: v['月份'] + '月',
            '警格上报': v['警格上报'],
            '居民上报': v['居民上报']
          }
        })
      },

      chartData2 () {
        if (!this.wxGridReportOverviewInfo['上报来源分布+事件办理情况']) {
          return []
        }

        return this.wxGridReportOverviewInfo['上报来源分布+事件办理情况'].map(v => {
          return {
            name: v['月份'] + '月',
            '上报总数': v['上报数量'],
            '已办理': v['已拒绝数量'],
            '已拒绝': v['已拒绝数量']
          }
        })
      },

      sllData () {
        return [{
          key: '累计受理事件',
          value: this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量']
        },{
          key: '累计上报事件',
          value: this.wxGridReportOverviewInfo['全部上报事件数量']
        }]
      },

      sllRate () {
        if (!this.wxGridReportOverviewInfo['待受理数量']) {
          return 0
        }

        return Number((((this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量']) / this.wxGridReportOverviewInfo['全部上报事件数量']) * 100).toFixed(2))
      },

      sjbjData () {
        return [{key: '累计办结事件', value: this.wxGridReportOverviewInfo['已办结数量']}, {key: '累计受理事件', value: this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量']}]
      },

      sjbjRate () {
        if (!this.wxGridReportOverviewInfo['待受理数量']) {
          return 0
        }

        return Number(((this.wxGridReportOverviewInfo['已办结数量'] / (this.wxGridReportOverviewInfo['全部上报事件数量'] - this.wxGridReportOverviewInfo['待受理数量'])) * 100).toFixed(2))
      },
    },

    mounted () {
      this.instance.post(`/api/wxgridcata/list`, null, {
        params: {
          level: 1,
          corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
        }
      }).then(res => {
        if (res.code === 0) {
          this.eventList = res.data.records
          this.init()
        }
      })
    },

    methods: {
      mapProcessType (status) {
        return {
          '1': '创建',
          '2': '受理',
          '3': '分配',
          '4': '转交',
          '5': '办结',
          '6': '拒绝',
          '7': '办理中'
        }[status]
      },

      mapStatus (status, type) {
        const index = Number(status)
        return [{
          color: '#FFB300',
          name: '待受理',
          bgColor: 'rgba(255, 203, 82, 0.14)'
        }, {
          color: '#508AFE',
          name: '办理中',
          bgColor: 'rgba(123, 176, 254, 0.14)'
        }, {
          color: '#07B759',
          name: '已办结',
          bgColor: 'rgba(19, 246, 201, 0.14)'
        }, {
          color: '#FF4C4C',
          name: '已拒绝',
          bgColor: 'rgba(255, 112, 112, 0.14)'
        }][index][type]
      },

      init (gridId) {
        this.gridId = ''
        this.gridParentId = gridId || 'gr3AePMwAAFWlqlNvfJboAWkRNbnA14A'
        this.instance.post(`/api/wxgridinfo/tree`, null, {
          params: {
            gridParentId: gridId || '',
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
          }
        }).then(res => {
          if (res.code === 0) {
            this.getInfo()
            if (gridId) {
              this.policeStationList = res.data
            } else {
              this.areaList = res.data
            }
          }
        })
      },

      onStationChange () {
        this.$nextTick(() => {
          this.instance.post(`/api/wxgridinfo/tree`, null, {
            params: {
              gridParentId: this.gridId,
              corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
            }
          }).then(res => {
            if (res.code === 0) {
              this.getInfo()
            }
          })
        })
      },

      getEventInfo (orderId, info) {
        this.instance.post(`/api/wxgridinfo/reportInfo`, null, {
          params: {
            orderId,
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
          }
        }).then(res => {
          if (res.code === 0) {
            this.eventInfo = {
              ...res.data,
              typeName: info.type === '1' ? '居民上报' : '巡查上报',
              status: info.status
            }

            this.isShow = true
          }
        })
      },

      onTypeChange (index) {
        this.currIndex = index
        this.getWxGridReportCata()
      },

      onChange () {
        this.instance.post(`/api/wxgridinfo/wxGridReportNew`, null, {
          params: {
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
            gridId: this.gridId || this.gridParentId,
            type: this.type
          }
        }).then(res => {
          if (res.code === 0) {
            this.wxGridReportNewInfo = res.data
          }
        })
      },

      getReportList () {
        this.instance.post(`/api/wxgridinfo/reportList`, null, {
          params: {
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
            gridId: this.gridId || this.gridParentId,
            size: '50',
            ...this.search
          }
        }).then(res => {
          if (res.code === 0) {
            this.tableData3 = res.data
          }
        })
      },

      getWxGridReportCata () {
        this.instance.post(`/api/wxgridinfo/wxGridReportCata`, null, {
          params: {
            categoryId: this.eventList[this.currIndex].categoryId,
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
          }
        }).then(res => {
          if (res.code === 0) {
            this.chartData3 = res.data.map(v => {
              return {
                name: v['二级分类名称'],
                '已办结': v['已办结'] || 0,
                '待受理': v['待处理'] || 0,
                '处理中': v['处理中'] || 0,
                '已拒绝': v['已拒绝'] || 0
              }
            })
          }
        })
      },

      getInfo () {
        this.instance.post(`/api/wxgridinfo/comprehensiveOverview`, null, {
          params: {
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
          }
        }).then(res => {
          if (res.code === 0) {
            this.middleTotalInfo = res.data
          }
        })

        this.getWxGridReportCata()

        this.instance.post(`/api/wxgridinfo/reportHandleList`, null, {
          params: {
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
            gridId: this.gridId || this.gridParentId,
            size: '50',
            dateRange: '2'
          }
        }).then(res => {
          if (res.code === 0) {
            this.reportHandleList = res.data
          }
        })

        this.getReportList()

        this.instance.post(`/api/wxgridinfo/wxGridReportOverview`, null, {
          params: {
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
            gridId: this.gridId || this.gridParentId
          }
        }).then(res => {
          if (res.code === 0) {
            this.wxGridReportOverviewInfo = res.data
          }
        })

        this.instance.post(`/api/wxgridinfo/wxGridReportNew`, null, {
          params: {
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA',
            gridId: this.gridId || this.gridParentId,
            type: this.type
          }
        }).then(res => {
          if (res.code === 0) {
            this.tableData1 = res.data
          }
        })
      },

      Hex2RGBA(color, alpha = 1) {
        let hex = 0;
        if (color.charAt(0) == "#") {
          if (color.length == 4) {
            //检测诸如#FFF简写格式
            color = "#" + color.charAt(1).repeat(2) +
                color.charAt(2).repeat(2) +
                color.charAt(3).repeat(2);
          }
          hex = parseInt(color.slice(1), 16);
        }
        let r = hex >> 16 & 0xFF;
        let g = hex >> 8 & 0xFF;
        let b = hex & 0xFF;
        return `rgba(${r},${g},${b},${alpha})`;
      },
      RGBtoHex(r, g, b) {
        let hex = r << 16 | g << 8 | b;
        return "#" + hex.toString(16);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AppQxnDv {
    display: flex;
    height: 100%;
    padding-top: 16px;
    box-sizing: border-box;
    background: #0c0c0c;
    overflow: hidden;

    .event-info {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 111;
      width: 100%;
      height: 100%;
      overflow: hidden;

      .info-bottom__wrapper {
        height: 120px;
        margin-top: 20px;
        overflow-y: auto;
      }

      .info-bottom__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 1;
        margin-bottom: 12px;
        color: #fff;

        div {
          flex: 1;
          margin: 0 18px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 12px;
          color: #d0e1e8;

          p {
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        i {
          font-style: normal;
          font-size: 14px;
        }

        h4 {
          font-size: 14px;
          font-weight: normal;
          color: #9BB7D4;
        }
      }

      .info-mask {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.1);
      }

      .info-content {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 11;
        width: 498px;
        height: 430px;
        padding: 15px 25px 0;
        background: url(https://cdn.cunwuyun.cn/dvcp/dv/qxn/event-bg.png);
        background-size: 100% 100%;
        transform: translate(-50%, -50%);

        & > h3 {
          margin-top: 28px;
          font-weight: 600;
          font-size: 16px;
          color: #02FEFF;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          -webkit-line-clamp: 1;
        }

        .info-bottom {
          margin-top: 20px;
          padding-top: 14px;

          & > h3 {
            font-weight: 600;
            font-size: 16px;
            color: #02FEFF;
          }
        }

        .progress {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          margin-top: 18px;
          padding: 0 28px;
          color: #9BB7D4;
          font-size: 12px;
          text-align: center;

          .progress-item {
            display: flex;
            position: relative;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 78px;

            &:after {
              position: absolute;
              top: 37px;
              left: 0%;
              width: 105px;
              height: 2px;
              background: #647886;
              content: ' ';
            }

            &:first-child::after {
              width: 133px;
              left: -28px;
            }

            &:first-child::before {
              position: absolute;
              top: 38px;
              left: -28px;
              width: 8px;
              height: 8px;
              z-index: 11;
              background: #647886;
              border-radius: 50%;
              content: ' ';
              transform: translateY(-50%);
            }

            &:nth-of-type(4n)::before {
              position: absolute;
              top: 38px;
              right: -28px;
              z-index: 11;
              width: 8px;
              height: 8px;
              background: #647886;
              border-radius: 50%;
              content: ' ';
              transform: translateY(-50%);
            }

            &.active {
              h4 {
                color: rgba(7, 183, 89, 1);
              }

              &:first-child::before {
                background: rgba(7, 183, 89, 1);
              }

              &:nth-of-type(4n)::before {
                background: rgba(7, 183, 89, 1);
              }

              &:after {
                background: rgba(7, 183, 89, 1);
              }

              .progress-item__middle {
                background: rgba(7, 183, 89, 0.4);

                i {
                  background: rgba(7, 183, 89, 1);
                }
              }
            }

            h4 {
              margin-bottom: 12px;
              font-size: 12px;
              color: #fff;
              font-weight: 500;
            }

            .progress-item__middle {
              position: relative;
              z-index: 11;
              width: 20px;
              height: 20px;
              margin-bottom: 11px;
              border-radius: 50%;
              background: rgba(47, 140, 232, 0.4);

              i {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #2F8CE8;
                transform: translate(-50%, -50%);
                content: '';
              }
            }

            span {
              line-height: 16px;
            }

            p {
              margin-bottom: 5px;
            }
          }
        }

        .info-wrapper {
          margin-top: 18px;

          .info-wrapper__item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            line-height: 1;
            margin-bottom: 14px;

            &:last-child {
              margin-bottom: 0;
            }

            label {
              width: 70px;
              margin-right: 20px;
              color: #9BB7D4;
              text-align: right;
              font-size: 14px;
              font-weight: 500;
            }

            span {
              font-size: 14px;
              color: #fff;
            }
          }
        }

        img {
          position: absolute;
          top: 30px;
          right: 18px;
          z-index: 1;
          width: 24px;
          height: 24px;
          cursor: pointer;
          transition: all ease 300;

          &:hover {
            opacity: 0.6;
          }
        }

        .info-title {
          display: flex;
          align-items: center;

          h2 {
            font-size: 16px;
            color: #fff;
          }
        }
      }
    }
    .table-index {
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        width: 22px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #42BED5;
      }

      &.table-index__active span {
        border-color: #EDAA38;
      }
    }

    .wrapper {
      margin-bottom: 12px;
    }

    .AppQxnDv-title {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: space-between;
      height: 30px;
      line-height: 30px;
      color: rgba(172, 201, 230, 0.8);
      background-image: linear-gradient(270deg, rgba(31, 67, 102, 0) 0%, rgba(31, 67, 102, 0.25) 100%);

      & > div {
        display: flex;
        align-items: center;

        &:first-child {
          h2:first-child {
            &::after {
              position: absolute;
              bottom: 0;
              left: 27px;
              z-index: 1;
              width: 9px;
              height: 2px;
              background: rgba(41, 77, 102, 1);
              content: ' ';
            }
          }
        }
      }

      & > h2 {
        &::after {
          position: absolute;
          bottom: 0;
          left: 27px;
          z-index: 1;
          width: 9px;
          height: 2px;
          background: rgba(41, 77, 102, 1);
          content: ' ';
        }
      }


    .AppQxnDv-title__tab {
        h2 {
          cursor: pointer;
        }

        h2.active {
          color: #fff;
          font-size: 16px;
        }
      }
      h2 {
        position: relative;
        font-size: 16px;
        font-weight: 500;
        padding: 0 10px;
      }

      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 9px;
        height: 2px;
        background: #5299CC;
        content: ' ';
      }

      &::before {
        position: absolute;
        bottom: 0;
        left: 14px;
        z-index: 1;
        width: 9px;
        height: 2px;
        background: rgba(41, 77, 102, 1);
        content: ' ';
      }
    }

    .AppQxnDv-total {
      display: flex;
      align-items: center;
      margin-bottom: 16px;

      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex: 1;

        h2 {
          margin-bottom: 10px;
          font-size: 14px;
          font-weight: 500;
          color: #FFFFFF;
        }

        .item-bottom {
          display: flex;
          align-items: baseline;

          span {
            font-weight: 700;
            font-size: 18px;
            color: #02FEFF;
          }

          i {
            margin-left: 4px;
            font-style: normal;
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
          }
        }
      }
    }

    :deep(.el-select) {
      height: 24px;
      line-height: 24px;

      input {
        width: 100%;
        height: 24px;
        line-height: 24px;
        padding: 0 26px 0 6px;
        font-size: 12px;
        color: rgba(179, 229, 229, 1);
        border: 1px solid #2A7A92;
        border-radius: 2px;
        background: transparent;

        &::placeholder {
          color: rgba(179, 229, 229, 0.6);
        }
      }

      .el-input__suffix {
        right: 1px;
        top: 0px;
      }

      i {
        color: #B3E5E5;
      }
    }

    :deep(.el-input) {
      height: 24px;
      line-height: 24px;

      input {
        width: 100%;
        height: 24px;
        line-height: 24px;
        padding: 0 6px;
        font-size: 12px;
        color: rgba(179, 229, 229, 1);
        border: 1px solid #2A7A92;
        border-radius: 2px;
        background: transparent;

        &::placeholder {
          color: rgba(179, 229, 229, 0.6);
        }
      }

      .el-input-group__append {
        padding: 0 16px;
        background: #007994;
        border: none;
        border-radius: 0 2px 2px 0;
      }

      .el-input__suffix {
        right: 1px;
        top: 0px;
      }

      i {
        color: #B3E5E5;
      }
    }

    :deep(.ai-table) {
      .el-table {
        font-size: 12px;
        color: #d0e1e8;
        background-color: transparent!important;

        th.el-table__cell.is-leaf, .el-table td.el-table__cell {
          border: none!important;
        }

        tr.el-table__row--striped td {
          background: rgba(33, 180, 253, 0.1)!important;
        }

        .el-table__header tr th:first-child .cell {
          padding: 0!important;
        }

        .el-table__body tr td:first-child .cell {
          padding: 0!important;
        }

        &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
          background-color: rgba(33, 180, 253, 0.1)!important;
        }

        th.el-table__cell {
          background-color: transparent;
        }

        tr {
          background-color: transparent;
        }

        .el-table__cell {
          padding: 7px 0;
          color: #d0e1e8;
        }

        .el-table__header tr .cell {
          color: #02FEFF!important;
        }
      }
      .ai-table__header {
        background: rgba(33, 180, 253, 0.1)!important;
      }
    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 14px;
    }

    ::-webkit-scrollbar-corner {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      min-height: 20px;
      background-clip: content-box;
      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
    }

    ::-webkit-scrollbar-track {
      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
    }

    * {
      box-sizing: border-box;
    }

    & > .right {
      display: flex;
      flex: 1;
      overflow: hidden;

      .right-left {
        width: 530px;

        .right-left__middle {
          display: flex;
          justify-content: space-between;

          .left {
            width: 245px;
            margin-right: 12px;
          }

          .right {
            width: 275px;
          }
        }

        .right-left__top {
          display: flex;
          justify-content: space-between;

          div {
            width: 275px;

            &:first-child {
              width: 245px;
            }
          }
        }
      }
      .right-middle {
        width: 556px;
        margin: 0 40px;

        .right-middle__middle {
          display: flex;
          justify-content: space-between;
          margin-bottom: 16px;
        }
      }

      .right-right {
        display: flex;
        flex-direction: column;
        flex: 1;
      }
    }

    & > .left {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 240px;
      margin-right: 20px;

      .left-list {
        flex: 1;
        overflow-y: auto;
        width: 100%;

        .left-item {
          position: relative;
          width: 100%;
          cursor: pointer;
          margin-bottom: 10px;
          padding: 30px 14px 14px;
          background-image: linear-gradient(0deg, rgba(40, 182, 253, 0.08) 1%, rgba(0, 102, 154, 0.2) 100%);
          border-radius: 6px;
          box-shadow: inset 0 -1px 0 0 transparent;
          transition: all ease 0.3s;

          &:hover {
            opacity: 0.7;
          }

          &.active {
            background-image: linear-gradient(0deg, #28b6fd24 0%, #00669aa6 99%);
            box-shadow: inset 0 -1px 0 0 #23B2C7;

            &:hover {
              opacity: 1;
            }
          }

          i {
            position: absolute;
            left: 0;
            top: 0;
            width: 22px;
            height: 21px;
            line-height: 21px;
            text-align: center;
            font-weight: 600;
            font-style: normal;
            font-size: 14px;
            color: #FFFFFF;
            background-image: linear-gradient(177deg, #02eeee66 0%, #0190d866 100%);
            border-radius: 6px 0 6px 0;
          }

          .left-item__bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
              color: #fff;
              font-weight: 600;
              font-size: 12px;
            }
          }

          .left-item__top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;

            .el-select {
              width: 100px;
            }

            h2 {
              font-weight: 600;
              font-size: 14px;
              color: #FFFFFF;
            }
          }
        }
      }
    }
  }
</style>
