<!-- Dialog.vue -->
<template>
  <el-dialog
    :visible.sync="visible"
    @update:visible="handleUpdateVisible"
    :title="title + '统一接入方'"
    :width="width"
    :before-close="beforeClose"
  >
    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-date-picker
            v-model="searchForm.value1"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="primary" @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 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 * as echarts from 'echarts';  // 引入 ECharts
export default {
  name: "StandardDialog",
  components: {
    MyForm
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    itemId: [Number,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 {
      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
    }
  },
  mounted() {
    // 如果 itemId 已有值，在组件加载时自动加载数据
    if (this.itemId) {
      this.fetchChartData(this.itemId);
    }
  },

  methods: {
    fetchChartData(id) {
      // 模拟请求，实际开发中可以用 axios 或 fetch 发起请求
      // 这里只是一个简单的例子
      const data = {
        1: { x: ['11:00', '12:00', '13:00'], y: [10, 15, 20] },
        2: { x: ['11:00', '12:00', '13:00'], y: [5, 10, 25] },
        3: { x: ['11:00', '12:00', '13:00'], y: [20, 30, 40] },
      };
      
      const chartData = data[id];
      
      if (chartData) {
        this.renderChart(chartData);
      }
    },
    renderChart(chartData) {
      const chart = echarts.init(this.$refs.lineChart);
      const option = {
        xAxis: {
          type: 'category',
          data: chartData.x
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: chartData.y,
          type: 'line'
        }]
      };
      chart.setOption(option);
    },
    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' 事件
    },


  }
};
</script>
  
  <style scoped lang="scss">
/* 你可以根据需要为弹窗添加样式 */

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

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