<template>
  <cpt-card>
    <div class="title">
      <img src="@/assets/img/shuju/title-tip.png" />
      <span>事件处理分析</span>

      <div class="search">
        <div class="second-select cascader">
          <el-cascader class="customer_cascader"
                       ref="myCascader"
                       v-model="agencyIdArray"
                       :key="iscascaderShow"
                       :options="casOptions"
                       :props="optionProps"
                       :show-all-levels="false"
                       @change="handleChangeAgency"></el-cascader>
        </div>
        <div class="second-select">
          <el-select v-model="dataType"
                     :popper-append-to-body="false"
                     placeholder="请选择">
            <el-option v-for="(item) in dateArray"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
                       @click.native="handleChangeDate(item.value,true)">
            </el-option>
          </el-select>
        </div>

        <div v-if="dataType==='0'"
             class="second-select range-data">

          <el-date-picker v-model="timeRange"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          prefix-icon="el-icon-caret-bottom"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          @change="handleSelectChange">
          </el-date-picker>
        </div>
      </div>

    </div>
    <div class="g-cpt-resi">
      <div class="g-l">
        <div class="bottom_label"
             style="margin-top:20px">事件总览</div>
        <div class="l_top">

          <div v-if="!pieNoData && !dataLoading"
               class="g-pie">
            <div class="chart-container">
              <div class="chart"
                   id="cityGreenLand"
                   ref="chart"></div>
              <!-- <screen-echarts-frame class="echart-wr"
                                  @myChartMethod="pieInitOk"
                                  ref="pieChart"></screen-echarts-frame> -->
              <!-- 底座背景 -->
              <div class="bg"></div>
            </div>

            <!-- <div class="pie-legend">
              <div :class="['legend_item',{'item_last':index===legendArray.length-1}]"
                   v-for="(item,index) in legendArray"
                   :key="index">
                <div class="item_name">{{item.name}}</div>
                <img :src="item.url" />
               
              </div>
            </div> -->

          </div>
          <screen-nodata class="nodata"
                         v-if="pieNoData&& !dataLoading"></screen-nodata>
          <div class="table-status"
               v-if="dataLoading">
            <screen-loading>加载中</screen-loading>
          </div>

        </div>
        <div class="l_bottom">
          <div class="bottom_label">月度新增事件统计</div>
          <screen-echarts-frame v-if="!lineNoData&& !dataLoading"
                                class="echart-line"
                                @myChartMethod="lineInitOk"
                                ref="lineChart"></screen-echarts-frame>
          <screen-nodata class="nodata"
                         v-if="lineNoData&& !dataLoading"></screen-nodata>
          <div class="table-status"
               v-if="dataLoading">
            <screen-loading>加载中</screen-loading>
          </div>
        </div>
      </div>
      <div class="g-r">
        <div class="m-tb">

          <div class="tb">
            <cpt-tb :col-list="demand.colList"
                    :loading="demand.loading"
                    :header="demand.header"
                    :list="demand.list"
                    @operate="toEventInfo"></cpt-tb>

          </div>
          <div class="m-pagination">
            <el-pagination :current-page="demand.pageNo"
                           :page-size="demand.pageSize"
                           :total="demand.total"
                           background
                           layout="prev, pager, next,total"
                           @current-change="handlePageNoChange_demand">
            </el-pagination>
          </div>
        </div>

      </div>
    </div>

    <event-info v-if="showProject"
                :eventId="eventId"
                :orgId="orgId"
                :orgType="orgType"
                @close="showProject = false" />
  </cpt-card>
</template>

<script>

import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card";
import cptTb from "@/views/modules/visual/cpts/tb";
import screenEchartsFrame from "@/views/modules/visual/components/screen-echarts-frame";

import ScreenLoading from "@/views/modules/visual/components/screen-loading";
import ScreenNodata from "@/views/modules/visual/components/screen-nodata";
import eventInfo from "./event-info";

import { pieOption } from './pieOption.js'
import { lineOption } from './lineOption.js'
import nextTick from 'dai-js/tools/nextTick'
import dateFormat from "dai-js/tools/dateFormat";

import * as echarts from 'echarts';
import 'echarts-gl';
import { getPie3D, getParametricEquation } from './chart.js' //工具类js，页面路径自己修改

const color = ['#0075ff', '#ffa516']

export default {
  name: "shijianchulifenxi",
  data () {
    return {
      dataLoading: true,
      pieNoData: false,
      lineNoData: false,
      isfirstInit: true,//记录地图是否第一次加载

      projectTotal: 0,
      processingCount: 0,
      processingRatio: 0,

      lineChart: '',
      lineOption: {},
      lineInitState: false,
      lineColorArray: [],
      lineData: [],
      lineXaxis: [],
      lineSeriesData: [],

      pieChartS: null,
      pieChart: '',
      pieOption: {},
      pieInitState: false,


      pieData: [],
      optionData: [
        {
          name: '处理中',
          value: 28
        },
        {
          name: '已完成',
          value: 72
        }
      ],
      optionDataLine: [
        {
          name: '处理中',
          value: 50
        },
        {
          name: '已完成',
          value: 50
        }
      ],
      statusChart: null,
      option: {},

      legendArray: [
        {
          name: '未结案',
          count: 0,
          percent: '0%',
          url: require('@/assets/img/shuju/measure/huang@2x.png')
        },
        {
          name: '已结案',
          count: 0,
          percent: '0%',
          url: require('@/assets/img/shuju/measure/lv@2x.png')
        }
      ],

      timeRange: [],

      orgId: '',
      orgType: 'agency',
      queryStartTime: '',
      queryEndTime: '',
      processStatus: 'closed_case',
      dataType: '1',

      casOptions: [],
      agencyIdArray: [],
      customerList: [],
      iscascaderShow: 0,

      optionProps: {
        multiple: false,
        value: 'agencyId',
        label: 'agencyName',
        children: 'subAgencyList',
        checkStrictly: true
      },
      dateArray: [
        {
          label: '近一年',
          value: '1'
        },
        {
          label: '近一个月',
          value: '2'
        },
        {
          label: '近三个月',
          value: '3'
        },
        {
          label: '近半年',
          value: '4'
        },
        {
          label: '自定义',
          value: '0'
        },
      ],

      tableList: [],
      demand: {
        loading: true,
        colList: [
          {
            align: "center",
            width: "5%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "25%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "5%",
          },

          {
            align: "center",
            width: "10%",
          },
        ],
        header: ["序号", "所属组织", "事件内容", "上报渠道", "报事人", "手机号", "状态", "操作"],
        list: [],
        pageSize: 10,
        pageNo: 1,
        total: 0,
      },

      showProject: false,
      eventId: '',

      beta: 20,
      selectedIndex: ''

    };
  },
  // mixins: [animate]
  beforeDestroy () {

  },
  async created () {

  },

  async mounted () {
    this.dataLoading = true
    //初始化时间、各组件
    this.initData()
    await this.getAgencylist()//获取组织级别
    this.handleChangeDate(this.dataType, false)
    //获取服务器数据

    await this.getProjectTotal()
    await this.getLineChart()
    await this.getTable()

    this.dataLoading = false


    this.assignData()

  },

  methods: {
    async getApiData () {
      this.getTable()
      await this.getProjectTotal()
      await this.getLineChart()

      this.assignData()

    },

    async handleChangeDate (index, isRefresh) {
      let end = new Date();
      let start = new Date();
      if (index === '1') {//近一年
        start.setFullYear(start.getFullYear() - 1);
        console.log(start.getDate())
      } else if (index === '2') {//近一个月
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);

      } else if (index === '3') {//近三个月
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);

      } else if (index === '4') {//近半年
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 183);
      }
      if (index != '0') {
        this.queryStartTime = dateFormat(start, 'yyyy-MM-dd') + " 00:00:00"
        this.queryEndTime = dateFormat(end, 'yyyy-MM-dd') + " 23:59:59"
      }
      if (index !== '0' && isRefresh) {
        await this.getApiData()

      }


    },

    assignData () {
      this.initChart()

      this.getLine()
    },

    handleSelectChange (value) {

      this.queryStartTime = value[0] + " 00:00:00"
      this.queryEndTime = value[1] + " 23:59:59"
      this.getApiData();
    },

    // 获取当前登录人员信息及组织信息
    async getAgencylist () {
      const url = "/gov/org/customeragency/agencygridtree";
      //const url = '/gov/org/customeragency/agencylist'

      let params = {};

      const { data, code, msg } = await requestPost(url, params);
      if (code === 0) {

        this.orgId = data.agencyId

        //组织级联数据
        ++this.iscascaderShow
        this.casOptions = []
        this.agencyIdArray.length = []

        if (data) {
          this.casOptions.push(data)
          this.agencyIdArray.push(this.orgId)
        }

      } else {
        this.$message.error(msg);
      }

    },

    //加载项目
    async getProjectTotal () {
      // if (this.$refs.pieChart) {
      //   this.$refs.pieChart.showLoading()
      //   this.$refs.pieChart.clear()
      // }

      const url = "/gov/project/icEvent/processAnalysis/processStatusRatio";
      //const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/processStatusRatio";
      let params = {
        orgId: this.orgId,
        orgType: this.orgType,
        queryStartTime: this.queryStartTime,
        queryEndTime: this.queryEndTime,
      };

      const { data, code, msg } = await requestPost(url, params);
      // if (this.$refs.pieChart) {
      //   this.$refs.pieChart.hideLoading()
      // }
      if (code === 0) {
        this.projectTotal = parseInt(data.processingCount) + parseInt(data.closedCount);

        this.legendArray = [
          {
            name: '已完成',
            count: data.closedCount,
            percent: data.closedRatio,
            url: require('@/assets/img/shuju/measure/huang@2x.png')
          },
          {
            name: '处理中',
            count: data.processingCount,
            percent: data.processingRatio,
            url: require('@/assets/img/shuju/measure/lv@2x.png')
          }
        ]
        let dataClosed = Math.floor(data.closedRatio * 10000) / 100
        let dataPro = Math.floor(data.processingRatio * 10000) / 100
        if (data.closedRatio === 0 && data.processingRatio === 0) {
          dataClosed = 50
          dataPro = 50
        }
        let dataClosedLine = Math.floor(data.closedRatio * 10000) / 100
        let dataProLine = Math.floor(data.processingRatio * 10000) / 100

        // dataClosed = 5
        // dataPro = 95

        // dataClosed = 10
        // dataPro = 90
        // dataClosedLine = 10
        // dataProLine = 90

        // dataClosed = 20
        // dataPro = 80

        // dataClosed = 30
        // dataPro = 70

        // dataClosed = 40
        // dataPro = 60

        // dataClosed = 50
        // dataPro = 50


        if (Math.abs(dataClosed - dataPro) > 80) {
          this.beta = 70
        } else if (Math.abs(dataClosed - dataPro) > 70) {
          this.beta = 60
        } else if (Math.abs(dataClosed - dataPro) > 50) {
          this.beta = 20
        } else if (Math.abs(dataClosed - dataPro) > 30) {
          this.beta = -20
        } else if (Math.abs(dataClosed - dataPro) > 10) {
          this.beta = -30
        } else {
          this.beta = -60
        }

        this.optionData = [
          {
            name: "已完成",
            value: dataClosed
          },
          {
            name: "处理中",
            value: dataPro
          },
        ]

        this.optionDataLine = [

          {
            name: "已完成",
            value: dataClosedLine
          },
          {
            name: "处理中",
            value: dataProLine
          },
        ]
        this.setLabel()

      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getTable () {
      const url = "/gov/project/icEvent/processAnalysis/eventList";
      //const url = "http://yapi.elinkservice.cn/mock/245/gov/project/icEvent/processAnalysis/eventList";
      let params = {
        processStatus: this.processStatus,
        orgId: this.orgId,
        orgType: this.orgType,
        queryStartTime: this.queryStartTime,
        queryEndTime: this.queryEndTime,
        pageNo: this.demand.pageNo,
        pageSize: this.demand.pageSize,
        biz: 'eventProcessAnalysis'
      };

      const { data, code, msg } = await requestPost(url, params);
      this.demand.loading = false;

      if (code === 0) {

        this.demand.total = data.total;
        this.tableList = data.list
        this.demand.list = data.list.map((item, index) => {
          return [
            index + 1,
            item.gridName ? item.gridName : '',
            item.eventContent ? item.eventContent : '',
            item.sourceTypeName ? item.sourceTypeName : '',
            item.reportUserName ? item.reportUserName : '',
            item.mobile ? item.mobile : 'processing',
            item.processStatus ? item.processStatus === 'closed_case' ? '已完成' : '处理中' : '',

            { type: "operate", list: ["查看"] },
          ];
        });
      } else {
        this.$message.error(msg);
      }
    },

    handlePageNoChange_demand (val) {
      this.demand.pageNo = val;
      this.getTable();
    },


    toEventInfo (index) {
      const { tableList } = this;
      this.eventId = tableList[index].eventId

      this.showProject = true

    },

    pieInitOk (dom) {
      this.pieChartS = dom
      this.pieInitState = true
    },
    lineInitOk () {

      this.lineInitState = true

    },
    getLine () {
      if (this.lineInitState) {
        this.assignLineChart()
      } else {
        setTimeout(() => {
          this.getLine()
        }, 500)
      }
    },
    // 获取折线图
    async getLineChart () {
      if (this.$refs.lineChart) {
        this.$refs.lineChart.clear()
        this.$refs.lineChart.showLoading()
      }
      const _that = this
      // this.$refs.pieChart.showLoading()
      const url = "/gov/project/icEvent/processAnalysis/monthlyIncrement";
      //const url = "http://yapi.elinkservice.cn/mock/245/api/gov/project/icEvent/processAnalysis/monthlyIncrement";
      let params = {
        orgId: this.orgId,
        orgType: this.orgType,
        queryStartTime: this.queryStartTime,
        queryEndTime: this.queryEndTime,
      };

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        // 获取pieChart配置

        this.lineXaxis = []
        this.lineSeriesData = []
        if (data && data.length > 0) {
          this.lineNoData = false
          data.forEach(item => {
            this.lineXaxis.push(item.monthName)
            this.lineSeriesData.push(item.increment)
          });
          this.lineData = data

        } else {
          this.lineNoData = true
        }

        if (this.$refs.lineChart) {
          this.$refs.lineChart.hideLoading()
        }

      } else {
        this.$message.error(msg);
      }


    },

    assignLineChart () {

      this.lineOption = lineOption()
      this.$refs.lineChart.setOption(this.lineOption, true)
      this.$refs.lineChart.setOption({
        xAxis: { data: this.lineXaxis },
        series: [
          { data: this.lineSeriesData },
          { data: this.lineSeriesData },

        ]
      }, true)
    },

    setLabel () {
      this.optionDataLine.forEach((item, index) => {

        item.itemStyle = {
          color: color[index]
        }
        item.label = {
          normal: {
            show: true,
            color: color[index],
            formatter: [
              '{d|{d}%}',
              '{b|{b}}'
            ].join('\n'), // 用\n来换行
            rich: {
              b: {
                color: '#fff',
                lineHeight: 25,
                align: 'left',
                fontSize: 13,
                marginTop: 20
              },
              c: {
                fontSize: 22,
                color: '#fff',
                textShadowColor: '#1c90a6',
                textShadowOffsetX: 0,
                textShadowOffsetY: 2,
                textShadowBlur: 5
              },
              d: {
                color: color[index],
                fontSize: 22,
                align: 'left'
              }
            }
          }
        }
        item.labelLine = {

          normal: {
            show: true,
            length: 30,
            length2: 80,
            lineStyle: {
              width: 1,
              color: 'rgba(255,255,255,0.7)'
            }
          }
        }
        item.labelLayout = function (params) {
          const isLeft = params.labelRect.x < myChart.getWidth() / 2;
          const points = params.labelLinePoints;
          // Update the end point.
          points[2][0] = isLeft
            ? params.labelRect.x
            : params.labelRect.x + params.labelRect.width;
          return {
            labelLinePoints: points
          };
        }
      })
      this.optionData.forEach((item, index) => {

        item.itemStyle = {
          color: color[index]
        }
        item.label = {
          normal: {
            show: true,
            color: color[index],
            formatter: [
              '{d|{d}%}',
              '{b|{b}}'
            ].join('\n'), // 用\n来换行
            rich: {
              b: {
                color: '#fff',
                lineHeight: 25,
                align: 'left',
                fontSize: 13,
                marginTop: 20
              },
              c: {
                fontSize: 22,
                color: '#fff',
                textShadowColor: '#1c90a6',
                textShadowOffsetX: 0,
                textShadowOffsetY: 2,
                textShadowBlur: 5
              },
              d: {
                color: color[index],
                fontSize: 22,
                align: 'left'
              }
            }
          }
        }
        item.labelLine = {

          normal: {
            show: true,
            length: 30,
            length2: 80,
            lineStyle: {
              width: 1,
              color: 'rgba(255,255,255,0.7)'
            }
          }
        }
        item.labelLayout = function (params) {
          const isLeft = params.labelRect.x < myChart.getWidth() / 2;
          const points = params.labelLinePoints;
          // Update the end point.
          points[2][0] = isLeft
            ? params.labelRect.x
            : params.labelRect.x + params.labelRect.width;
          return {
            labelLinePoints: points
          };
        }
      })
    },

    // 图表初始化
    initChart () {
      this.$nextTick(() => {
        // let statusChart = echarts.init(document.getElementById('cityGreenLand-charts'));
        this.statusChart = echarts.init(document.getElementById('cityGreenLand'));
        // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
        this.option = getPie3D(this.optionData, 0.8, 300, 28, 22, 0.5, this.beta)
        console.log(this.option)
        this.statusChart.setOption(this.option)
        // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
        this.option.series.push({
          name: '', //自己根据场景修改
          backgroundColor: 'transparent',
          type: 'pie',
          label: {
            opacity: 1,
            fontSize: 13,
            lineHeight: 20
          },
          startAngle: -this.beta, // 起始角度，支持范围[0, 360]。
          clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
          radius: ['30%', '35%'],
          center: ['50%', '50%'],
          data: this.optionDataLine,
          itemStyle: {
            opacity: 0  //这里必须是0，不然2d的图会覆盖在表面
          },

        })
        this.statusChart.setOption(this.option)
        this.bindListen(this.statusChart)
      })

    },
    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
    // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
    bindListen (myChart, optionName = 'option') {
      // let selectedIndex = ''
      let hoveredIndex = ''

      // 监听点击事件，实现选中效果（单选）
      myChart.on('click', (params) => {
        let dataIndex = null
        console.log('params', params)
        console.log('params.seriesIndex', params.seriesIndex)
        console.log('this[optionName].series', this[optionName].series)
        console.log('this[optionName].series[params.seriesIndex]', this[optionName].series[params.seriesIndex])

        if (params.componentSubType === 'pie') {//点击指引线
          dataIndex = params.dataIndex
          this.click3DPie(myChart, 'option', dataIndex)


          if (dataIndex === 0) {//序列1 已完成
            this.processStatus = 'closed_case'

          } else if (dataIndex === 1) {//序列2 处理中
            this.processStatus = 'processing'
          } else {
            this.processStatus = ''
          }
          if (!this.selectedIndex) {
            this.processStatus = ''
          }

        } else {//点击环形
          dataIndex = params.seriesIndex
          this.click3DPie(myChart, 'option', dataIndex)


          //刷新右侧table
          if (this.selectedIndex || this.selectedIndex === 0) {

            if (this.selectedIndex === 0) {
              this.processStatus = 'closed_case'
            } else if (this.selectedIndex === 1) {
              this.processStatus = 'processing'
            }


          } else {
            this.processStatus = ''

          }

        }
        this.getTable()

      })
      // 监听 mouseover，近似实现高亮（放大）效果
      // myChart.on('mouseover', (params) => {
      //   // 准备重新渲染扇形所需的参数
      //   let isSelected
      //   let isHovered
      //   let startRatio
      //   let endRatio
      //   let k
      //   // 如果触发 mouseover 的扇形当前已高亮，则不做操作
      //   if (hoveredIndex === params.seriesIndex) {
      //     // 否则进行高亮及必要的取消高亮操作
      //   } else {
      //     // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
      //     if (hoveredIndex !== '') {
      //       // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
      //       isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
      //       isHovered = false
      //       startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
      //       endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
      //       k = this[optionName].series[hoveredIndex].pieStatus.k
      //       // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
      //       this[optionName].series[
      //         hoveredIndex
      //       ].parametricEquation = getParametricEquation(
      //         startRatio,
      //         endRatio,
      //         isSelected,
      //         isHovered,
      //         k,
      //         this[optionName].series[hoveredIndex].pieData.value
      //       )
      //       this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
      //       // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
      //       hoveredIndex = ''
      //     }
      //     // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
      //     if (
      //       params.seriesName !== 'mouseoutSeries' &&
      //       params.seriesName !== 'pie2d'
      //     ) {
      //       // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
      //       isSelected =
      //         this[optionName].series[params.seriesIndex].pieStatus.selected
      //       isHovered = true
      //       startRatio =
      //         this[optionName].series[params.seriesIndex].pieData.startRatio
      //       endRatio = this[optionName].series[params.seriesIndex].pieData.endRatio
      //       k = this[optionName].series[params.seriesIndex].pieStatus.k
      //       // 对当前点击的扇形，执行高亮操作（对 option 更新）
      //       this[optionName].series[
      //         params.seriesIndex
      //       ].parametricEquation = getParametricEquation(
      //         startRatio,
      //         endRatio,
      //         isSelected,
      //         isHovered,
      //         k,
      //         this[optionName].series[params.seriesIndex].pieData.value + 60
      //       )
      //       this[optionName].series[
      //         params.seriesIndex
      //       ].pieStatus.hovered = isHovered
      //       // 记录上次高亮的扇形对应的系列号 seriesIndex
      //       hoveredIndex = params.seriesIndex
      //     }
      //     // 使用更新后的 option，渲染图表
      //     myChart.setOption(this[optionName])
      //   }
      // })
      // // 修正取消高亮失败的 bug
      // myChart.on('globalout', () => {
      //   // 准备重新渲染扇形所需的参数
      //   let isSelected
      //   let isHovered
      //   let startRatio
      //   let endRatio
      //   let k
      //   if (hoveredIndex !== '') {
      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
      //     isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
      //     isHovered = false
      //     k = this[optionName].series[hoveredIndex].pieStatus.k
      //     startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
      //     endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
      //     // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
      //     this[optionName].series[
      //       hoveredIndex
      //     ].parametricEquation = getParametricEquation(
      //       startRatio,
      //       endRatio,
      //       isSelected,
      //       isHovered,
      //       k,
      //       this[optionName].series[hoveredIndex].pieData.value
      //     )
      //     this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
      //     // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
      //     hoveredIndex = ''
      //   }
      //   // 使用更新后的 option，渲染图表
      //   myChart.setOption(this[optionName])
      // })

    },

    click3DPie (myChart, optionName, seriesIndex) {

      // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
      const isSelected = !this[optionName].series[seriesIndex].pieStatus.selected
      const isHovered = this[optionName].series[seriesIndex].pieStatus.hovered
      const k = this[optionName].series[seriesIndex].pieStatus.k

      const startRatio = this[optionName].series[seriesIndex].pieData.startRatio
      const endRatio = this[optionName].series[seriesIndex].pieData.endRatio


      // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
      if (this.selectedIndex !== '' && this.selectedIndex !== null && this.selectedIndex !== seriesIndex) {
        this[optionName].series[
          this.selectedIndex
        ].parametricEquation = getParametricEquation(
          this[optionName].series[this.selectedIndex].pieData.startRatio,
          this[optionName].series[this.selectedIndex].pieData.endRatio,
          false,
          false,
          k,
          this[optionName].series[this.selectedIndex].pieData.value
        )
        this[optionName].series[this.selectedIndex].pieStatus.selected = false
      }
      // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
      this[optionName].series[
        seriesIndex
      ].parametricEquation = getParametricEquation(
        startRatio,
        endRatio,
        isSelected,
        isHovered,
        k,
        this[optionName].series[seriesIndex].pieData.value
      )
      this[optionName].series[seriesIndex].pieStatus.selected = isSelected

      // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
      this.selectedIndex = isSelected ? seriesIndex : null
      // 使用更新后的 option，渲染图表
      myChart.setOption(this[optionName])
    },

    handleChangeAgency () {
      let obj = this.$refs["myCascader"].getCheckedNodes()[0].data
      if (obj) {
        this.orgType = obj.level === 'grid' ? 'grid' : 'agency'
        this.orgId = obj.agencyId

      } else {
        this.orgId = ''
        this.orgType = ''
      }

      this.getApiData()
    },

    //初始化时间
    initData () {
      var time = (new Date).getTime() - 24 * 60 * 60 * 1000;
      var nowdate = new Date(time); // 获取的是前一天日期
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth() + 1 < 10 ? "0" + (nowdate.getMonth() + 1) : nowdate.getMonth() + 1;
      var d = nowdate.getDate() < 10 ? "0" + nowdate.getDate() : nowdate.getDate();
      this.dateIdShow = y + '-' + m + '-' + d;
    },

  },
  props: {
    uid: {
      type: String,
      default: "",
      // default: "8ada68cb6f1e4b9a8333348a39ef3aee",
    },
  },

  computed: {},

  components: {
    cptCard,
    cptTb,
    screenEchartsFrame,
    eventInfo,
    ScreenLoading,
    ScreenNodata
  },

  watch: {
    dateIdShow () {

      // let dataArray = this.dateIdShow.split('-')
      // this.dateId = dataArray.join('')
    },
    uid (id) {
      this.userId = id;
    },
    userId () {

      window.scrollTo(0, 0);
    },
  },
};
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/shijianchulifenxi.scss"
  scoped
></style>
<style
  lang="scss"
  src="@/assets/scss/modules/visual/search_1.scss"
  scoped
></style>

<style lang='scss' scoped>
.chart-container {
  position: relative;
  width: 600px;
  height: 500px;
  margin-top: 0;

  .chart,
  .bg {
    width: 600px;
    height: 500px;
    z-index: 2;
  }

  .bg {
    position: absolute;
    bottom: 155px;
    left: 50%;
    z-index: 1;
    width: 250px;
    height: 140px;
    background: no-repeat center;
    background-image: url("../../../../../assets/img/shuju/3d-pid-bg.png");
    background-size: 100% 100%;
    transform: translateX(-50%);
  }
}
</style>


