<script setup>
import { ref } from 'vue'
import { venuesInquire, slotDel } from '@/api/slot'
// import { View, Delete, Plus } from '@element-plus/icons-vue'

const loading = ref(false)
const dialogVisible = ref(false)
const formData = new FormData()

// 加载场地列表
const venueList = ref([])
const getVenueList = async (id) => {
  loading.value = true
  const {
    data: { data }
  } = await venuesInquire(id)
  venueList.value = data
  loading.value = false
  console.log(data)
}

// 组件对外暴露一个方法 open ，基于 open 传来的参数，区分添加还是编辑
const timeStr = ref('')
const open = (str, id) => {
  getVenueList(id)
  formData.append('slotId', id)
  timeStr.value = str
  dialogVisible.value = true
}
// 向外暴露
defineExpose({
  open
})

// 关闭弹窗
const closeDialog = () => {
  formData.delete('slotId')
  formData.delete('venueId')
  dialogVisible.value = false
}

// 移除场地信息
const onRemove = (venueId) => {
  ElMessageBox.confirm('是否确认移除该条场地信息？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      formData.append('venueId', venueId)
      await slotDel(formData)
      ElMessage({
        type: 'success',
        message: '移除成功'
      })
      closeDialog()
    })
    .catch(() => {
      closeDialog()
    })
}
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="'时间段：' + timeStr"
    width="550"
    draggable
  >
    <el-table :data="venueList" v-loading="loading">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column prop="venueName" label="场地名称" width="250" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="{ row }">
          <el-button link type="danger" @click="onRemove(row.id)"
            >移除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
