<!-- 详情 -->
<template>
  <el-dialog v-model="visible" :close-on-click-modal="false" title="详情" draggable width="1600px"
    @close="handleCloseDialog" style="height: 800px">
    <div class="default-main">
      <div class="title_1">
        <span class="monitoring-point">
          {{ props.detailsQuery.name || "" }}</span>
      </div>

      <el-tabs v-model="activeName" @tab-change="generateFn">
        <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.name + '次谐波'" style="height: 100%"
          :name="index" v-loading="loading">
          <div style="height: 680px; overflow-y: auto">
            <div class="box  mb10" v-for="(value, i) in item.dynamicOptions" :key="i">
              <div class="boxTab">
                <MyEChart :options="item.dynamicOptions[i]" style="flex: 1" :style="{
                  height: `calc((680px) / ${item.list.length == 0
                    ? 1
                    : item.list.length > 1
                      ? 2
                      : item.list.length
                    } - 21px)`,
                }" />
                <div style="width: 500px" class="tableBox">
                  <el-table ref="tableRef" :data="item.list[i]" size="small" :height="`calc((600px) / ${item.list.length == 0
                    ? 1
                    : item.list.length > 1
                      ? 2
                      : item.list.length
                    } - 21px)`" :header-cell-style="{ textAlign: 'center' }" border>
                    <el-table-column prop="customerName" align="center" label="用户名(用户号)" />
                    <el-table-column prop="responsibilityData" align="center" label="责任数据(%)" width="120">
                      <template #default="scope">
                        {{
                          Math.floor(scope.row.responsibilityData * 10000) / 10000
                        }}
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>

              <el-divider />

            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import MyEChart from "@/components/echarts/MyEchart.vue";
import { timeFormat } from "@/utils/common";
import { yMethod } from "@/utils/echartMethod";
import { displayHistoryData } from "@/api/manage_wx";

const props = defineProps<{
  detailsQuery?: any; // 根据实际类型调整
}>();

// const height = mainHeight(155);
const activeName = ref(0);
const tabList: any = ref([]);

const visible: any = ref(false);

const loading: any = ref(false);
const init = () => {
  let data =
    (Array.isArray(props.detailsQuery.time)
      ? props.detailsQuery.time[0]
      : props.detailsQuery.time
    )?.split(",") ?? [];
  tabList.value = [];
  data.forEach((item: any) => {
    tabList.value.push({
      name: item,
      dynamicOptions: [],
      list: [],
    });
  });
  activeName.value = 0;
  generateFn(0);
};

// 生成动态谐波责任数据
const generateFn = async (e: any) => {
  if (tabList.value[e].dynamicOptions.length != 0) return;

  loading.value = true;
  await displayHistoryData({
    id: props.detailsQuery.id,
    time: tabList.value[e].name,
  })
    .then((res: any) => {
      res.data.forEach((item: any) => {
        tabList.value[e].list.push(item.responsibilities);

        let [min, max] = yMethod(
          item.datas.map((k: any) => k.valueDatas).flat()
        );
        let series: any[] = [];
        let time: any[] = item.timeDatas.map((k: any) => timeFormat(k));
        item.datas.forEach((k: any) => {
          series.push({
            name: k.customerName,
            data: k.valueDatas.map((k: any, i: number) => [
              time[i],
              Math.floor(k * 10000) / 10000,
            ]),
            type: "line",
            symbol: "none",
            smooth: true,
          });
        });
        tabList.value[e].dynamicOptions.push({
          title: {
            text: `时间：${item.limitSTime} 至${item.limitETime}　限值：${item.limitValue}`,
          },
          xAxis: {
            type: "time",
            name: "时间",
            axisLabel: {
              formatter: {
                day: "{MM}-{dd}",
                month: "{MM}",
                year: "{yyyy}",
              },
            },
            // 刻度线样式
            axisTick: {
              lineStyle: {
                color: "#fff", // 刻度线白色
              },
            },

            // 轴线样式
            axisLine: {
              lineStyle: {
                color: "#fff", // 轴线白色
              },
            },
          },
          tooltip: {
            formatter(params: any) {
              let str = params[0].value[0] + "<br/>";
              for (let i = 0; i < params.length; i++) {
                str =
                  str +
                  params[i].marker +
                  params[i].seriesName +
                  "：" +
                  params[i].value[1] +
                  "<br/>";
              }

              return str;
            },
          },
          grid: {
            top: 30,
          },
          legend: {
            show: false,
          },
          yAxis: {
            min: min,
            max: max,
          },
          toolbox: {
            show: false,
          },

          options: {
            series: series,
          },
        });
      });
    })
    .catch(() => {
      loading.value = false;
    });
  loading.value = false;
};

const openDialog = () => {
  visible.value = true;
  if (props.detailsQuery) {
    nextTick(() => {
      init();
    });
  }
};

const handleCloseDialog = () => {
  visible.value = false;
};

// onMounted(() => {
//   init();
// });

defineExpose({
  openDialog,
});
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";

.title_1 {
  position: absolute;
  right: 10px;
  top: 65px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.monitoring-point {
  font-size: 14px;
  font-weight: 600;
}

.boxTab {
  display: flex;
}
</style>
