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

const drawerVisible = ref(false)

// 禁用时间段数据
const slotModel = ref({})
// 可用场地列表
const venues = ref([])
// 选择场地组
const checkedGroup = ref([])

// 组件对外暴露一个方法 open ，基于 open 传来的参数，区分添加还是编辑
// const timeStr = ref('')
const open = async (venueData) => {
  console.log(venueData)
  venues.value = []
  slotModel.value = { ...venueData }
  const {
    data: { data }
  } = await venuesQuery(venueData.id)
  console.log(data)
  venues.value = data

  drawerVisible.value = true
}
// 向外暴露
defineExpose({
  open
})

// 关闭抽屉
const closeDrawer = () => {
  drawerVisible.value = false
  checkedGroup.value = []
}

// 提交修改
const onSubmit = async () => {
  ElMessageBox.confirm('是否确认添加？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const formData = new FormData()
      formData.append('ids', checkedGroup.value)
      formData.append('slotId', slotModel.value.id)
      await slotSet(formData)
      ElMessage({
        type: 'success',
        message: '添加成功'
      })
      closeDrawer()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '错误信息'
      })
      closeDrawer()
    })
}
</script>
<template>
  <el-drawer v-model="drawerVisible" title="详细信息" width="450" draggable>
    <em>禁用日期: {{ slotModel.reservationDate }}</em>
    <hr />
    <em>禁用时间: {{ slotModel.slotStart + ' ~ ' + slotModel.slotEnd }}</em>
    <hr />
    <div v-if="venues.length === 0">
      <el-empty description="暂无可添加场地信息"> </el-empty>
    </div>
    <div v-else>
      <div v-for="(item, index) in venues" :key="index">
        <h4>{{ item.vname }} 可选择场地:</h4>
        <div v-if="item.list.length === 0">
          <el-empty description="暂无可添加场地信息"> </el-empty>
        </div>
        <div v-else>
          <el-checkbox-group v-model="checkedGroup">
            <el-checkbox
              v-for="(item1, index1) in item.list"
              :key="index1"
              :label="item1.id"
              border
              >{{ item1.venueName }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <hr />
      </div>
    </div>
    <span class="drawer-footer">
      <el-button type="primary" @click="onSubmit"> 确认添加 </el-button>
    </span>
  </el-drawer>
</template>
