<script setup>
import { ref } from 'vue'
import { slotPageService, slotDel } from '@/api/slot'
import { View, Delete, Plus } from '@element-plus/icons-vue'
import VenueEdit from './components/VenueEdit.vue'
import VenueAdd from './components/VenueAdd.vue'
import TimeAdd from './components/TimeAdd.vue'
const loading = ref(false)
const total = ref(0)
const timeList = ref([])
const params = ref({
  current: 1,
  size: 10
})

// 加载禁用的时间段集合
const getTimeList = async () => {
  loading.value = true
  const {
    data: { data }
  } = await slotPageService(params.value)
  timeList.value = data.list
  total.value = data.total
  loading.value = false
}
getTimeList()

// 修改当前页
const handleCurrentChange = (current) => {
  params.value.current = current
  getTimeList()
}

// 修改每页数据条数
const handleSizeChange = (size) => {
  params.value.current = 1
  params.value.size = size
  getTimeList()
}

// 编辑场地信息
const venueEditRef = ref()
const editMsg = (row) => {
  venueEditRef.value.open(
    row.slotStart + ' ~ ' + row.slotEnd + '(' + row.reservationDate + ')',
    row.id
  )
}

// 添加场地信息
const venueAddRef = ref()
const addMsg = (row) => {
  venueAddRef.value.open(row)
}

// 添加预约时间段
const timeAddRef = ref()
const onAdd = () => {
  timeAddRef.value.open()
}

// 移除时间段信息
const onDelete = (sid) => {
  ElMessageBox.confirm('确认移除此时间段？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const formData = new FormData()
      formData.append('venueId', -1)
      formData.append('slotId', sid)
      await slotDel(formData)
      ElMessage({
        type: 'success',
        message: '移除成功'
      })
      handleSizeChange(5)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '移除失败'
      })
    })
}
</script>
<template>
  <page-container title="禁用记录">
    <template #extra>
      <el-button type="primary" @click="onAdd">+ 添加禁用时间段</el-button>
    </template>

    <!-- 表格区域 -->
    <el-table :data="timeList" stripe v-loading="loading">
      <el-table-column type="index" label="序号" width="100" />
      <!-- <el-table-column label="禁用场地（场馆）" prop="venueName"> -->
      <!-- </el-table-column> -->
      <el-table-column
        label="禁用日期"
        prop="reservationDate"
      ></el-table-column>
      <el-table-column label="开始时间" prop="slotStart"></el-table-column>
      <el-table-column label="结束时间" prop="slotEnd"></el-table-column>
      <el-table-column label="设置人" prop="username"></el-table-column>
      <el-table-column label="设置时间" prop="addTime"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            circle
            plain
            type="success"
            :icon="View"
            @click="editMsg(row)"
            title="查看当前禁用时间段下有哪些场地"
          ></el-button>
          <el-button
            circle
            plain
            type="primary"
            :icon="Plus"
            @click="addMsg(row)"
            title="添加场地数据"
          ></el-button>
          <el-button
            circle
            plain
            type="danger"
            :icon="Delete"
            @click="onDelete(row.id)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="无禁用时间段数据" />
      </template>
    </el-table>
    <!-- 分页框 -->
    <el-pagination
      v-model:current-page="params.current"
      v-model:page-size="params.size"
      :page-sizes="[10, 20, 50]"
      background
      layout="total,sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="float: right; margin-top: 30px"
    />
  </page-container>

  <!-- 场地信息编辑框 -->
  <VenueEdit ref="venueEditRef"></VenueEdit>
  <!-- 场地信息添加框 -->
  <VenueAdd ref="venueAddRef"></VenueAdd>
  <!-- 添加禁用时间段 -->
  <TimeAdd ref="timeAddRef" @success="getTimeList"></TimeAdd>
</template>
