<template>
  <div>
    <!-- 时间选择组件 -->
    <div class="filter-container">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="～"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        :default-value="['2025-02-16', '2025-02-19']"
      >
      </el-date-picker>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column prop="operationTime" label="操作时间"> </el-table-column>
      <el-table-column prop="operator" label="操作人"> </el-table-column>
      <el-table-column>
        <template #header>
          <span>ID</span>
          <i class="el-icon-warning-outline" style="margin-left: 10px"></i>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
          <el-tooltip content="ID提示信息" placement="top">
            <i
              class="el-icon-info"
              style="margin-left: 6px; color: #909399"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column>
        <template #header>
          <span>名称</span>
          <i class="el-icon-warning-outline" style="margin-left: 10px"></i>
        </template>
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
          <el-tooltip content="名称提示信息" placement="top">
            <i
              class="el-icon-info"
              style="margin-left: 6px; color: #909399"
            ></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="operationType" label="操作类型"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "operationRecords",
  data() {
    return {
      // 时间选择组件的默认值
      dateRange: ["2025-02-16", "2025-02-19"],
      // 表格数据（暂时为空）
      tableData: [],
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

<style lang="scss" scoped>
.filter-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.el-icon-info {
  cursor: pointer;
}
.table-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}
</style>
