<template>
  <el-dialog
    :visible.sync="visible"
    @update:visible="handleUpdateVisible"
    :title="title"
    :width="width"
    :before-close="beforeClose"
  >
    <el-form
      :model="formObj"
      style="width: 100%"
      ref="ruleFormRef"
      :disabled="true"
    >
      <el-row :gutter="40">
        <!-- <el-col :span="8">
          <el-form-item label="项目名称" prop="projectName">
            <el-input
              v-model="formObj.projectName"
              placeholder="请输入项目名称"
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="topic" prop="topic">
            <el-input v-model="topicName" placeholder="请输入topic名称" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
          <el-form-item label="状态" prop="status">
            <el-input v-model="formObj.status" placeholder="请输入状态" />
          </el-form-item>
        </el-col> -->
      </el-row>
      <!-- <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="分区数(个)" prop="partitionCount">
            <el-input
              v-model="formObj.partitionCount"
              placeholder="请输入分区数(个)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="副本数(个)" prop="replicaCount">
            <el-input
              v-model="formObj.replicaCount"
              placeholder="请输入副本数(个)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="消息保留时间" prop="time">
            <el-input v-model="formObj.time" placeholder="请输入消息保留时间" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="数据大小" prop="totalVolume">
            <el-input
              v-model="formObj.totalVolume"
              placeholder="请输入数据大小"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人" prop="creatorName">
            <el-input
              v-model="formObj.creatorName"
              placeholder="请输入创建人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间" prop="createTime">
            <el-input
              v-model="formObj.createTime"
              placeholder="请输入创建时间"
            />
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <div class="list-content-tab">
      <span
        :class="{ 'list-tab': true, 'list-tab-active': tab.active }"
        v-for="tab in dialogTabList"
        :key="tab.id"
        @click="dialogTabChange(tab)"
        >{{ tab.name }}</span
      >
    </div>
    <!-- <div style="display: flex; margin-bottom: 10px">
            <div style="margin-right: 20px">
                Topic名称:
                <el-select v-model="value" placeholder="Select" style="width: 240px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
        </div>
        <div style="display: flex; align-items: center">
            <div style="margin-right: 20px">
                <el-input v-model="formObj.projectName" placeholder="1小时" />
            </div>
            <div>
                时间粒度:
                <el-select v-model="value" placeholder="1分钟" style="width: 240px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div style="display: flex; align-items: center; margin-left: 20px">
                <el-button :icon="Refresh" />
                <el-select v-model="value" placeholder="关闭" style="width: 80px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button :icon="MoreFilled" />
                <el-checkbox v-model="checked1" label="显示图例" size="large" />
            </div>
        </div> -->
    <div class="echarts-content">
      <div class="echarts-box" v-for="item in echartsList" :key="item.title">
        <div class="echarts-content">
          <div class="echarts-btn">
            <span>
              <i class="el-icon-message-solid"></i>
            </span>
            <span>
              <i class="el-icon-full-screen"></i>
            </span>
            <span>
              <i class="el-icon-more"></i>
            </span>
          </div>
          <div
            class="echarts-item"
             ref="lineChartRef"
            :key="item.title"
            :id="item.title"
          ></div>
          <div class="echarts-num">
            <div class="echarts-legend"></div>
            <span>最大值:0.00</span>
            <span>最小值:0.00</span>
            <span>平均值:0.00</span>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
    getAllJKIndex,
} from "@/api/unified-resources/link-monitor/link-monitor-center.js";
import * as echarts from "echarts"; // 引入 ECharts
export default {
  name: "StandardDialog",
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    tabName: [String], // 父组件传递的 ID
    title: {
      type: String,
      default: "弹窗标题",
    },
    width: {
      type: String,
      default: "60%",
    },
    rowObj: {
      type: Object,
      default: {},
    },
  },

  data() {
    return {
      echartsList:[],
      formObj: {},
      dialogTabList: [
        { id: 1, name: "Topic", active: true },
        // { id: 2, name: 'Consumer Group', active: false },
        // { id: 3, name: '集群', active: false }
      ],
      topicName: "",
      tableData: [],
      visible: this.value,
      searchForm: {},
      // 这是传递给表单组件的数据
      formData: {},
      isDisabled: false,
      itemView: {},
      dialogTitle: "",
      isDisabled: false,
    };
  },
  watch: {
    value(newVal) {
      this.visible = newVal;
    },
    visible(newVal) {
      this.$emit("input", newVal);
    },
    title: {
      handler(newVal) {
        this.dialogTitle = newVal;
        console.log(this.dialogTitle, "this.dialogTitle");
      },
      deep: true, // 深入监听
      immediate: true,
    },
    rowObj: {
      handler(newVal) {
        this.itemView = newVal;
      },
      deep: true, // 深入监听
      immediate: true,
    },
    tabName: {
        handler(tabName) {
            if (tabName) {
                this.topicName = tabName;
                this.fetchChartData(tabName); // 当 ID 改变时重新请求数据
                // this.getNum();
            }
        },
        deep: true, // 深入监听
        immediate: true,
    },
  },
  mounted() {
    // 如果 itemId 已有值，在组件加载时自动加载数据
    // if (this.url) {
    //   this.fetchChartData(this.url);
    // }
  },

  methods: {

  
    fetchChartData(tabName) {
        getAllJKIndex({ topic: tabName }).then(
        (res) => {
        //   if (+res.code === 200) {
        //     this.renderChart(res.data);
        //   }
        if (+res.code === 200) {
          this.echartsList = []; // 清空现有的 echartsList

          // 将返回的数据转换为所需的格式
          for (const key in res.data) {
            this.echartsList.push({ title: key, lineArr: res.data[key] });
          }

          // 渲染所有图表
          this.echartsList.forEach((item, index) => {
            this.$nextTick(() => {
              this.renderChart(item.title, index, item.lineArr);
            });
          });
        }
        }
      );
    },
    renderChart(title, index, data) {
      const chartElement = document.getElementById(title); // 通过动态 ref 引用图表容器
      if (!chartElement) return;

      const myChart = echarts.init(chartElement);
      myChart.clear(); // 清除之前的图表内容

      const option = {
        title: {
          text: title,
          left: "0", // 标题居中
          top: "0%", // 设置标题距离顶部5%的位置
          textStyle: {
            fontSize: 12, // 字体大小
            fontWeight: "500", // 字体加粗
            color: "#333", // 字体颜色
          },
        },
        xAxis: {
          type: 'category',
          data: data.map(item => item.createTime),
          axisLine: {
            lineStyle: {
              color: 'blue', // 设置x轴颜色为蓝色
            },
          },
          axisLabel: {
            textStyle: {
              color: '#909198',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee', // 网格线颜色
              type: 'dashed', // 网格线类型
            },
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee', // 网格线颜色
              type: 'dashed', // 网格线类型
            },
          },
          
        },
        grid: {
          show: true,
          borderWidth: 1,
          borderColor: '#eee', // 实线颜色
          backgroundColor: '#f9f9f9', // 网格背景色
          containLabel: true,
        },
        series: [
          {
            data: data.map(item => item.num),
            type: 'line',
          },
        ],
      };

      myChart.setOption(option);

      // 监听窗口大小变化，重新调整图表尺寸
      const resizeObserver = new ResizeObserver(() => {
        myChart.resize();
      });

      resizeObserver.observe(chartElement);
    },
 
    beforeClose(done) {
      this.visible = false;
      this.$emit("before-close", done);
    },
    // 取消按钮处理方法
    handleCancel() {
      this.visible = false;
      this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
    },

    // 确定按钮处理方法
    handleConfirm() {
      this.handleSave();
      // this.visible = false;
      // this.$emit("confirm"); // 可以在父组件监听 'confirm' 事件
    },
    handleUpdateVisible(val) {
      this.visible = val;
    },
  },
};
</script>

<style scoped lang="scss">
.list-content-tab {
  margin-left: 5px;
  display: flex;
  align-items: end;
  background-color: #fff;
  margin-bottom: 10px;
  .list-tab {
    width: 160px;
    height: 40px;
    border: 1px solid #e7e7e7;
    color: #000;
    line-height: 40px;
    text-align: center;
  }
  .list-tab-active {
    width: 160px;
    height: 40px;
    background-color: #1890ff;
    color: #fff;
  }
}

.echarts-content {
  margin: 20px 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .echarts-box {
    width: 33%;
    height: 300px;
    padding: 10px;
    .echarts-content {
      width: 100%;
      height: 100%;
      padding: 20px;
      margin-bottom: 20px;
      position: relative;
      border: 1px solid #dddee0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      .echarts-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        > span {
          margin: 0 5px;
        }
      }
      .echarts-num {
        position: absolute;
        bottom: 10px;
        left: 10px;
        display: flex;
        align-items: center;
        .echarts-legend {
          width: 12px;
          height: 12px;
          background: #549cff;
          margin-right: 5px;
        }
      }
      .echarts-item {
        // width: 33%;
        height: 300px;
        width: 100%;
        // height: 100%;
      }
    }

    // margin: 20px;
    // margin-right: 20px;
  }
}
</style>
