<template>
  <div class="abs-full title3">
    <div class="m-tt">
      <h4>桥梁监测</h4>
    </div>
    <div class="m-body">
      <div class="top" style="width: 100%; height: 50%">
        <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>
          <dl class="scrolling1">
            <!-- <dt>
              <span>监测项</span> <span>最近更新时间</span> <span>监测数据</span>
            </dt> -->
            <div class="list-wrap">
              <div class="list-content">
                <dd v-for="(item, index) in 10" :key="index">
                  <span><i style="width: 20px;height: 20px;display: block;margin-right: 25px;" :style="{backgroundColor:colorBlock[i]}"></i>{{ item.warehouseName }}</span>
                  <span :style="{color:colorBlock[index]}">{{ item.validityWarningCount }}</span>
                  <span :style="{color:colorBlock[index]}">{{ item }}</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: {
    dataList: {
      type: Array,
      default: () => [{ name: "测试1:", y: 6.3 }, { name: "测试2:", y: 16.3 }],
    },
    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:["#27BAFF", "#EEE485", "#25D8A9", "#008ADD","#25D8A9", "#EEE485", "#27BAFF", "#008ADD"],
      warehouseList:[],
      chartsTarget: null,
      option: {
        chart: {
          type: "pie", //饼图
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
          backgroundColor: "rgba(64, 158, 255, 0)", // 不显示背景色
        
        },
        // legend: {
        //   show: false,
        //   top: "-10%",
        //   itemStyle: {
        //     color: "#fff",
        //     fontSize: 10,
        //   },
        //   left: "center",
        //   itemWidth: 100,
        //   selectedMode: false,
        //   data: this.dataList.map((item, index) => {
        //     item.icon = "circle";
        //     return item;
        //   }),
        // },
        title: {
          text: "", //图表的标题文字
        },
        subtitle: {
          text: "", //副标题文字
        },
        plotOptions: {
            series: {
              cursor: 'pointer',
              // events: {
              //     click: function (event) {
              //         alert(
              //             this.name + ' clicked\n' +
              //             'Alt: ' + event.altKey + '\n' +
              //             'Control: ' + event.ctrlKey + '\n' +
              //             'Meta: ' + event.metaKey + '\n' +
              //             'Shift: ' + event.shiftKey
              //         );
              //     }
              // }
              events: {
                  click:  (event) => {
                    console.log('Clicked category:', event); // 在控制台输出类别名
                      if (event.point) { // 检查是否有被点击的点
                          var category = event.point.name; // 获取当前点击的类别名
                          this.getQiaoliangList()
                      }
                  }
              },
          },
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            innerSize: 100,
            showInLegend: true,
            depth: 15,
            dataLabels: {
              enabled: false,
              distance: 10,
              color: "#fff",
              style: {
                textOutline: "none",
                fontSize: "16",
              },
              formatter: function () {
                return this.point.name + this.y + "%";
              },
            },
          },
        },
        credits: {
          enabled: false,
        },
       
        series: [
          {
            type: "pie",
            name: "",
            showInLegend: false,
            data: this.generatePieData(),
            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.chartsTarget = Highcharts.chart("EchartsPie", this.option);

    this.startScrolling(
          ".bottom-qiaoliang .list-wrap",
          ".bottom-qiaoliang .list-content",
          "qiaoliang"
        );
  },

  methods: {
    getQiaoliangList(type){

    },
    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);
      const content = document.querySelector(contentClass);
      var affixHeight = -100;
      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">
.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.81rem;
    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 3px 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.16rem;
    .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.18rem;
        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;
      // 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: #01689D;
        opacity: 0.4;
        font-size: 0.14rem;
        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>
