<template>
  <!-- 雨水专项规划 -->
  <div class="lyWaterTwo">
    <!-- 民众活跃动态 -->
    <div class="rainCount">
      <div class="publicTitle">民众活跃动态</div>
      <vue3-seamless-scroll :list="listData"
                            :singleHeight="66"
                            :singleWaitTime="2000"
                            :hover="true"
                            class="scroll">
        <div class="mzhydt"
             v-for="(item,index) in listData"
             :key="index">
          <p class="title">{{item.describ}}</p>
          <div class="part">
            <p class="name">{{item.nick}}</p>
            <p class="phone">{{item.telephone?item.telephone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'):''}}</p>
            <p class="date">{{item.createTime}}</p>
          </div>
        </div>
      </vue3-seamless-scroll>
    </div>
    <!-- 意见反馈统计 -->
    <div class="scene">
      <div class="publicTitle">意见反馈统计</div>
      <div id="echartsYsArea"></div>
    </div>
    <!-- 民众满意度 -->
    <div class="rainTime">
      <div class="publicTitle">民众满意度</div>
      <div class="dateCheck">
        <n-date-picker v-model:value="dateBjtj"
                       type="month" />
      </div>
      <div id="echartYsGuan"></div>
    </div>

  </div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount, } from "vue";
import * as echarts from "echarts";
import HighCharts from "highcharts";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { gzjbSearch } from "@/services";

export default {
  name: "lyWaterTwo",
  components: {
    Vue3SeamlessScroll,
  },
  setup() {
    const allData = reactive({
      dateBjtj: Date.now(),
      currentIndex: 1,
      tableLoading: false,
      timer: null,
      listData: [],

    })
    // 意见反馈统计
    let echartWaterys = null;
    const echartCount = () => {
      let option = {
        legend: {
          data: ["意见数量", "响应数量"],
          textStyle: {
            color: "#B4C9E0"
          },
          itemWidth: 12,
          itemHeight: 10,
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "0%",
          top: "16%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          axisLabel: {
            rotate: 45,
            textStyle: {
              color: "#B4C9E0"
            }
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
        },
        yAxis: {
          type: "value",
          name: "个",
          nameTextStyle: {
            color: "#B4C9E0"
          },
          axisLabel: {
            textStyle: {
              color: "#B4C9E0"
            }
          },
          axisLine: { show: false },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
        },
        series: [
          {
            name: "意见数量",
            type: "bar",
            barWidth: "30%",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#0BA67C",
                },
                {
                  offset: 1,
                  color: "#03595C",
                },
              ]),
              borderRadius: [12, 12, 12, 12],
            },
            data: [40, 20, 10, 10, 20, 80, 70, 20, 30, 10, 45, 80],
          },
          {
            name: "响应数量",
            type: "bar",
            barWidth: "30%",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#CCAD1E",
                },
                {
                  offset: 1,
                  color: "#CB6A16",
                },
              ]),
              borderRadius: [12, 12, 12, 12],
            },
            data: [40, 25, 30, 10, 20, 80, 70, 45, 26, 67, 48, 69],
          },
        ]
      }
      echartWaterys = echarts.init(document.getElementById('echartsYsArea'));
      echartWaterys.clear();
      echartWaterys.setOption(option);
      // 动效
      let app = {
        currentIndex: -1,
      };
      allData.timer = setInterval(function () {
        let dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        echartWaterys.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        //console.log(app.currentIndex);
        // 高亮当前图形
        echartWaterys.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        echartWaterys.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: app.currentIndex,
        });
      }, 2000);
    }
    // 民众满意度
    const echartAir = () => {
      let option = {
        chart: {
          type: 'pie',
          backgroundColor: "transparent",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          }
        },
        title: {
          style: {
            color: "transparent",
          },
        },
        credits: {
          enabled: false, //此处配置用来取消highcharts.com的链接
        },
        tooltip: {
          backgroundColor: "#F5F8FA",
          borderColor: "transparent",
          pointFormat: '{series.name}: <b>{point.options.y}%</b>',
          animation: true, // 是否启用动画效果
          style: {
            // 文字内容相关样式\
            fontSize: "14px",
            fontFamily: "Alibaba PuHuiTi",
            color: "#666666",
          },
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
              enabled: false,
              format: '{point.name}'
            },
            showInLegend: true,//控制图例显示
            center: ["50%", "25%"],
          }
        },
        legend: {
          layout: 'vertical',
          align: 'right',
          itemStyle: {
            color: "rgba(166, 201, 203, 1)",
            fontSize: "14px",
            fontWeight: 500,
          },
          itemMarginBottom: 10,
          navigation: {
            enabled: false,
          },
          itemHoverStyle: {
            color: "#fff",
          },
          verticalAlign: 'middle', //图例
          labelFormatter: function () {
            let str = "";
            str += `<div style="display:flex; align-items:center;just-content:space-around">
            <div>${this.options.name}</div> <div>${this.options.y}%</div>
            </div>`;
            return str;
          },
        },
        series: [{
          type: 'pie',
          name: '民众满意度',
          colors: [
            "rgba(50, 206, 228, .8)",
            "rgba(207, 160, 36, .8)",
            "rgba(23, 213, 171, .8)",
            "rgba(243, 100, 100, .8)",
            "rgba(9, 145, 253, .8)",
          ],
          data: [
            ['河道异味', 45,],
            ['空气污染程度', 26.8],
            ['周边噪音', 21],
            ['景观绿化', 16.8],
            ['河道清澈', 6.8],
          ]
        }]
      }
      HighCharts.chart(('echartYsGuan'), option);
    }
    // 河流湖泊点击切换
    const checkInfo = (val) => {
      allData.currentIndex = val;
    }
    // 民众活跃动态
    const getMzhyList = async () => {
      let params = {
        current: 0,
        size: 999
      }
      let res = await gzjbSearch(params);
      if (res && res.code == 200) {
        allData.listData = res.data.records;
      }
    }
    onMounted(() => {
      getMzhyList();
      echartCount();
      echartAir();
      //初始化地图视角
      mapbox._map.setPitch(60).setBearing(0)
      setTimeout(() => {
        mapbox.flyto([114.275596, 30.610028], 13.5, 0.8)
      }, 300)
    });
    onBeforeUnmount(() => {
      if (echartWaterys) echartWaterys.dispose();
      clearInterval(allData.timer);
      allData.timer = null;
      //!!window.timeranhan && clearInterval(window.timeranhan);
      //!!window.timerwater && clearInterval(window.timerwater);
      !!window.timertuokuan && clearInterval(window.timertuokuan);
      !!window.timerspread && clearInterval(window.timerspread);
      //!!window.timerflow && clearInterval(window.timerflow);
      !!window.timerbushui && clearInterval(window.timerbushui);
      mapbox._map.setPitch(60).setBearing(0)
      setTimeout(() => {
        mapbox.flyto([114.275596, 30.610028], 13.5, 0.8)
      }, 300)

    })
    return {
      ...toRefs(allData),
      checkInfo,
    };
  },
};
</script>
<style lang="less">
.lyWaterTwo {
  width: 100%;
  height: 100%;

  .scene {
    margin-top: 10px;
    #echartsYsArea {
      margin-top: 20px;
      width: 430px;
      height: 200px;
    }
  }
  .rainTime {
    margin-top: 20px;
    position: relative;
    .publicTitle {
      width: 260px;
    }
    .dateCheck {
      position: absolute;
      right: 0px;
      top: 0px;
      .n-date-picker {
        width: 150px;
      }
    }
    #echartYsGuan {
      margin-top: 20px;
      width: 430px;
      height: 200px;
    }
  }
  .rainCount {
    margin-top: 20px;
    .publicTitle {
      margin-bottom: 10px;
    }
    .mzhydt:nth-child(odd) {
      background: rgba(1, 27, 46, 0.3);
    }
    .scroll {
      height: 260px;
      overflow: hidden;
    }
    .mzhydt {
      height: 66px;
      color: rgba(180, 201, 224, 1);
      background: rgba(1, 27, 46, 0.6);
      border-radius: 3px;
      padding: 10px;
      .title {
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .part {
        display: flex;
        .name {
          width: 100px;
        }
        .phone {
          flex: 1;
          color: rgba(180, 201, 224, 0.3);
        }
        .date {
          width: 160px;
          color: rgba(180, 201, 224, 0.3);
        }
      }
    }
  }
}
</style>