<template>
  <div>
    <el-row class="mb-[20px]">
      <el-button class="button" type="primary" :icon="Plus" @click="dialogVisible = true">添加事件</el-button>
    </el-row>

    <el-table :data="tableData" show-overflow-tooltip border>
      <el-table-column prop="date" label="事件名称" width="180" align="center" />
      <el-table-column prop="name" label="事件描述" width="180" align="center" />
      <el-table-column prop="address" label="生效时间" align="center" />
      <el-table-column prop="address" label="结束事件" align="center" />
      <el-table-column prop="address" label="关联图片" align="center" />
      <el-table-column prop="address" label="启用/停用" align="center">
        <template #default="scope">
          <el-switch v-model="scope.row.switch" size="small" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template #default="scope">
          <el-button link size="small" type="primary" @click="emits('change', '查看图片', scope.row)">
            查看图片
          </el-button>
          <el-button link size="small" type="primary" @click="uploadImageChange(scope.row)">
            上传图片
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加事件弹窗 -->
    <AddDialog v-model="dialogVisible" />
    <!-- 上传图片弹窗 -->
    <UploadImage v-model="dialogVisibleUploadImage" width="80%" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import AddDialog from './addDialog.vue';
import UploadImage from './UploadImage.vue';

const emits = defineEmits(["update:change"]);

const dialogVisible = ref(false);

type TableData = {
  address: string
  date: string
  name: string
  switch: boolean
}
const tableData: TableData[] = [
  {
    date: '亲子周活动',
    name: '私汤区到图腾泡池的道路关闭',
    address: '2025-12-12 07:38:29',
    switch: false,
  },
  {
    date: '道路封闭',
    name: '社媒打卡赢亲子套餐体验券',
    address: '2025-12-12 07:38:29',
    switch: true,
  },
];

// 上传图片弹窗
const dialogVisibleUploadImage = ref(false);
const uploadImageChange = (row) => {
  dialogVisibleUploadImage.value = true;
}
</script>

<style scoped>
:deep(.el-button.button) {
  background: linear-gradient(180deg, #4A8FF9 0%, rgba(0, 0, 0, 0) 100%), #2B7FFF;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.24);
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #1447E6;
  padding-top: 18px;
  padding-bottom: 18px;
}
</style>