<!-- Dialog.vue -->
<template>
  <el-dialog
    :visible.sync="visible"
    @update:visible="handleUpdateVisible"
    :title="title"
    :width="width"
    :before-close="beforeClose"
  >
    <div class="header_search">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="时间">
          <el-date-picker
            v-model="searchForm.time"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
             value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button  @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <div>
        <el-button type="primary" @click="onUpload" icon="el-icon-upload"
          >导出</el-button
        >
      </div>
    </div>

    <div class="chart-container">
      <!-- 图表显示区域 -->
      <div class="count_box">
        最高:
        <span class="num_danger"
          ><i class="el-icon-caret-bottom"></i>{{ highest }}</span
        >
        平均:
        <span class="num_warning"
          ><i class="el-icon-caret-left"></i>{{ average }}</span
        >
        最低:
        <span class="num_success"
          ><i class="el-icon-caret-top"></i>{{ minimum }}</span
        >
      </div>
      <div
        id="lineChart"
        ref="lineChart"
        style="width: 100%; height: 400px"
      ></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 {
  getDatalogDetailByTableEnglishNamee,
  getLinkTitle,
} 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,
    },
    tableName: [String], // 父组件传递的 ID
    title: {
      type: String,
      default: "弹窗标题",
    },
    width: {
      type: String,
      default: "60%",
    },
    rowObj: {
      type: Object,
      default: {},
    },
  },
  // watch: {
  //   // itemId(newId) {
  //   //   if (newId) {
  //   //     this.fetchChartData(newId); // 当 ID 改变时重新请求数据
  //   //   }
  //   // },

  // },
  data() {
    return {
      highest: 0,
      average: 0,
      minimum: 0,
      name: "",
      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,
    },
    tableName: {
      handler(tableName) {
        if (tableName) {
          this.name = tableName;
          this.fetchChartData(tableName); // 当 ID 改变时重新请求数据
          this.getNum();
        }
      },
      deep: true, // 深入监听
      immediate: true,
    },
  },
  mounted() {
    // 如果 itemId 已有值，在组件加载时自动加载数据
    // if (this.url) {
    //   this.fetchChartData(this.url);
    // }
  },

  methods: {
    onSearch() {
      console.log(this.searchForm.time,'this.searchForm.time');
      
      getDatalogDetailByTableEnglishNamee({ tableEnglishName: this.name,startTime:this.searchForm.time[0],endTime:this.searchForm.time[1]}).then((res) => {
        if (+res.code === 200) {
          this.renderChart(res.data)
        }
      })
    },
    onReset() {
      this.searchForm={}
      this.fetchChartData(this.name)
    },
    onUpload() {
      this.download(
        "/web/tab-datalog/exportDetaile",
        {
          tableEnglishName: this.name,
        },
        `作业监控日志详情_${new Date().getTime()}.xlsx`
      );
    },
    fetchChartData(tableName) {
      getDatalogDetailByTableEnglishNamee({ tableEnglishName: tableName }).then((res) => {
        if (+res.code === 200) {
          this.renderChart(res.data);
        }
      });
    },
    renderChart(chartData) {
      const chart = echarts.init(this.$refs.lineChart);
      chart && chart.clear();
      const option = {
        title: {
          text: "响应时间ms", // 主标题
          left: "60", // 标题居中
          top: "0%", // 设置标题距离顶部5%的位置
          textStyle: {
            fontSize: 12, // 字体大小
            fontWeight: "500", // 字体加粗
            color: "#333", // 字体颜色
          },
        },
        xAxis: {
          type: "category",
          data: chartData.map((item) => item.time),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: chartData.map((item) => item.num),
            type: "line",
          },
        ],
      };
      chart.setOption(option);
    },
    getNum() {
      // 最高 平均 最低
      getLinkTitle({ tableEnglishName: this.name }).then((res) => {
        if (+res.code === 200) {
          this.highest = res.data.big;
          this.average = res.data.average;
          this.minimum = res.data.small;
        }
      });
    },

    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">
/* 你可以根据需要为弹窗添加样式 */
.header_search {
  display: flex;
  justify-content: space-between;
}
.chart-container {
  position: relative;
  .count_box {
    position: absolute;
    top: 0;
    left: 180px;
    .num_danger {
      color: #e04d54;
      margin-right: 20px;
    }
    .num_warning {
      color: #ffc83a;
      margin-right: 20px;
    }
    .num_success {
      color: #3ead58;
      margin-right: 20px;
    }
  }
}

.titel {
  font-size: 18px;
  margin: 20px 0;
}

.mt-4 {
  margin-bottom: 20px;
}
</style>
