<template>
  <div class="abs-full title3">
    <div class="m-tt">
      <h4>桥梁监测</h4>
    </div>
    <div class="m-body">
      <div class="top" style="width: 100%; height: 35%">
        <div class="echart-bt">
          <div class="echart-bg"></div>
          <div id="EchartsPie" class="EchartsPie"></div>
        </div>
      </div>
      <div class="bottom bottom-qiaoliang">
        <div class="dt">
          <span>监测项</span> <span>最近更新时间</span> <span>监测数据</span>
        </div>
        <div v-if="!dataList.length" class="emptyData">暂无数据</div>
        <dl class="scrolling1">
          <div class="list-wrap">
            <div class="list-content">
              <dd
                v-if="dataList.length"
                v-for="(item, index) in dataList"
                :key="index"
              >
                <span style="color:#fff;"  class="ellipsis">{{ item.monName }}</span>
                <span :style="{ color: colorBlock[index%4] }">{{
                  item.monDate
                }}</span>
                <span :style="{ color: colorBlock[index%4] }">{{
                  item.monNumber
                }}</span>
              </dd>
            </div>
          </div>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import Highcharts from "highcharts/highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(Highcharts);

import { getChartData, getListData } from "@/api/avoidanceSys/qiaoliang";

export default {
  props: {
    colors: {
      type: Array,
      default: () => [
        "#27BAFF",
        "#EEE485",
        "#25D8A9",
        "#008ADD",
        "#25D8A9",
        "#EEE485",
        "#27BAFF",
        "#008ADD",
      ],
    },
  },
  data() {
    return {
      // 应急预案
      interval4qiaoliang: null,
      scrollPosition4qiaoliang: 0,
      direction4qiaoliang: 1, // 1 for down, -1 for up
      step4qiaoliang: 1, // 每次滚动的像素
      intervalTime4qiaoliang: 40, // 每次滚动的时间间隔（ms）

      colorBlock: [
        "rgb(72,196,255)",
        "rgb(255,242,121)",
        "rgb(41,255,194)",
        "rgb(6,162,255)",
      ],
      dataList: [],
      chartsTarget: null,
      option: {
        chart: {
          type: "pie", //饼图
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
          backgroundColor: "rgba(64, 158, 255, 0)", // 不显示背景色
        },
        title: {
          text: "", //图表的标题文字
        },
        subtitle: {
          text: "", //副标题文字
        },
        plotOptions: {
          series: {
            cursor: "pointer",
            events: {
              click: (event) => {
                console.log("Clicked category:", event); // 在控制台输出类别名
                if (event.point) {
                  // 检查是否有被点击的点
                  var category = event.point.name; // 获取当前点击的类别名
                  this.getListData(category);
                }
              },
            },
          },
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            innerSize: 100,
            showInLegend: true,
            depth: 15,
            dataLabels: {
              enabled: true,
              // distance: 10,
              useHTML: true,
            formatter:function(){
              let name = this.point.name;
						  let fontSize = '0.16rem'
              return `<span style="color:${this.point.color};font-size:${fontSize};font-weight:500;">${name}: ${this.point.percentage.toFixed(1)}%</span>`
            },
              style: {
                textOutline: "none",
                fontSize: "0.17rem",
              },
            },
          },
        },
        credits: {
          enabled: false,
        },
        series: [
          {
            type: "pie",
            name: "",
            showInLegend: false,
            data: [],
            startAngle: 0,
            label: {
              show: false,
              position: "outside",
              formatter: "{b}：{d}%",
              normal: {
                show: false,
                fontSize: 14,
                formatter: ["  {a|{b}：{d}%}"].join("\n"),
                rich: {
                  a: {
                    left: 20,
                    padding: [0, -140, 0, -180],
                  },
                },
              },
            },
          },
        ],
      },
    };
  },

  watch: {},
  created() {},
  mounted() {
    this.getChartData();
    this.getListData("");
  },

  methods: {
    getChartData(type) {
      /** 查询应急预案信息列表 */
      getChartData({
        pageNum: 1,
        pageSize: 99999,
      }).then((response) => {
        const dataList = response.data;
        const chartData = dataList.map((item, index) => ({
          name: item.name,
          y: item.value,
          color: this.colors[index] || "#27BAFF", // Default color if no color is provided
        }));

        this.option.series[0].data = chartData;

        this.chartsTarget = Highcharts.chart("EchartsPie", this.option);
      });
    },
    getListData(type) {
      /** 查询应急预案信息列表 */
      getListData({
        pageNum: 1,
        pageSize: 99999,
        type,
      }).then((response) => {
        this.dataList = response.data;
        // if(type === '环境监测'){
        //   for (let index = 0; index < 5; index++) {
        //     this.dataList.push({
        //       name: index,
        //       value: index,
        //     });
        //   }
        // }
        this.$nextTick(() => {
          setTimeout(() => {
            this.startScrolling(
              ".bottom-qiaoliang .list-wrap",
              ".bottom-qiaoliang .list-content",
              "qiaoliang"
            );
          }, 100);
        });
      });
    },
    generatePieData() {
      return this.dataList.map((item, index) => ({
        name: item.name,
        y: item.value,
        color: this.colors[index] || "#27BAFF", // Default color if no color is provided
      }));
    },
    startScrolling(containerClass, contentClass, type) {
      const container = document.querySelector(containerClass);
      console.log('container.clientHeight', container.clientHeight)
      const content = document.querySelector(contentClass);


      if(this.dataList.length<5){
        content.style.transform = `translateY(0px)`;
        clearInterval(this["interval4" + type]);
        return
      }

      content.style.transform = `translateY(0px)`;
      console.log(content.scrollHeight, "content.scrollHeight");
      // return

      var affixHeight = -110;
      if (this["interval4" + type]) {
        clearInterval(this["interval4" + type]);
        // 每次请求，重置元素位置初始状态
      }

      this["interval4" + type] = setInterval(() => {
        this["scrollPosition4" + type] +=
          this["step4" + type] * this["direction4" + type];
        if (
          this["scrollPosition4" + type] + container.clientHeight >=
            content.scrollHeight + affixHeight ||
          this["scrollPosition4" + type] <= 0
        ) {
          this["direction4" + type] *= -1; // 改变滚动方向
        }
        content.style.transform = `translateY(-${
          this["scrollPosition4" + type]
        }px)`;
      }, this["intervalTime4" + type]);
    },
  },
};
</script>

<style scoped lang="scss">
.ellipsis {
  width: 90%; /* 设置容器宽度 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的文本 */
  text-overflow: ellipsis; /* 当文本溢出容器时显示省略号 */
}
.emptyData {
  font-size: 0.18rem;
  text-align: center;
  padding-top: 0.6rem; 
}
.echart-bt {
  width: 100%;
  height: 1.8rem;
  position: relative;
  .echart-bg {
    position: absolute;
    width: 2.1rem;
    height: 2.2rem;
    background-image: url(~@/assets/images/bigscreen/chart.png);
    background-repeat: no-repeat;
    background-position: cover;
    background-size: 100% 100%;
    -webkit-transform: rotateX(60deg);
    transform: rotateX(58deg);
    left: 25%;
    top: -0.05rem;
  }
}
.EchartsPie {
  width: 100%;
  height: 100%;
}
::v-deep .highcharts-credits {
  display: none;
}
::v-deep .highcharts-container {
  // height: 50% !important;
}
</style>

<style scoped lang="scss">
.abs-full {
  position: relative;
  display: flex;
  flex-direction: column;

  &.title3 {
    height: 4.3rem;
    width: 4.65rem;
    background: no-repeat center center
      url("~@/assets/images/dpNew2/title3.png");
    background-size: 100% 100%;
  }
  background: linear-gradient(
    to right,
    rgba(0, 60, 144, 0.9),
    /* #003c90 - 90% 不透明度 */ rgba(0, 44, 106, 0.7)
      /* #002c6a - 70% 不透明度 */
  );

  .chart {
    position: relative;
  }
}
.m-tt {
  height: 0.48rem;
  width: 100%;

  position: absolute;
  top: 0.07rem;
  left: 0.2rem;
  h4 {
    height: 100%;
    line-height: 0.48rem;
    margin: 0;
    font-size: 0.22rem;
    letter-spacing: 0.01rem;
    padding-left: 0.4rem;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0px 12px 8px rgba(19, 80, 113, 0.48);
    background: linear-gradient(180deg, #ffffff 54.00390625%, #28caff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.m-body {
  display: flex;
  flex-direction: column;
  padding: 0.2rem;
  padding-top: 0.5rem;
  .top {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.3rem;
  }
  .bottom {
    height: 2.8rem;
    overflow: hidden;
    margin-top: 0.06rem;
    .dt {
      height: 0.42rem;
      line-height: 0.42rem;
      // margin-top: 0.05rem;
      color: #0adfff;
      display: grid;
      grid-template-columns: 1.5rem 1.5rem 0.9rem;

      font-family: PingFang SC;
      font-weight: 500;
      font-size: 0.17rem;
      text-align: center;
      border-radius: 4px 4px 0px 0px;
    }
    .scrolling1 {
      min-height: 2.55rem;
      max-height: 2.55rem;
      overflow-y: auto;
      border-radius: 4px 4px 0px 0px;
      border: 1px solid #0aabff;
      margin-top: 0;
      // opacity: 0.5;

      dd {
        width: 4.28rem;
        height: 0.34rem;
        margin-left: 0.01rem;
        color: #d3dfeb;
        margin-right: 0px;
        display: grid;
        grid-template-columns: 1.5rem 1.5rem 0.9rem;
        text-align: center;
        background: #01689d52;
        font-size: 0.16rem;
        align-items: center;
        border-bottom: 0.01rem solid #1f77c2;
        background-size: cover;
        position: relative;
        margin-bottom: 0.1rem;
        border: none;
      }
    }
  }
  .bottom-qiaoliang {
    height: 2.4rem;
    .scrolling1 {
      position: relative;
      overflow: hidden;
      border: none;
      min-height: 2.8rem;
      max-height: 2.8rem;
      .list-content {
        position: absolute; /* 绝对定位 */
        transition: transform 0.2s ease; /* 添加平滑过渡 */
        top: 0.05rem;
      }
    }
  }
}
</style>
