<script setup>
import { ref } from 'vue'
import { QueryService, manageService, cancelService } from '@/api/admin'
const dialogTableVisible = ref(false)
const isManage = ref()
const typeList = ref()
const userId = ref()
const loading = ref(false)
const getTypeList = async (id) => {
  loading.value = true
  const {
    data: { data }
  } = await QueryService(id)
  isManage.value = data.isManage
  typeList.value = data.list
  loading.value = false
}

// 组件对外暴露一个方法 open ，基于 open 传来的参数，区分添加还是编辑
const open = (id) => {
  userId.value = id
  getTypeList(id)
  dialogTableVisible.value = true
}

// 移除关联场馆信息（场馆编号）
const deleteRow = (id) => {
  ElMessageBox.confirm('是否取消?', '提示', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    type: 'warning'
  })
    .then(async () => {
      const fmdata = new FormData()
      fmdata.append('userId', userId.value)
      fmdata.append('typeId', id)
      await cancelService(fmdata)
      close()
    })
    .catch(() => {})
}

// 添加场馆信息
const addRow = async (id) => {
  ElMessageBox.confirm('确认添加?', '提示', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    type: 'warning'
  })
    .then(async () => {
      const fmdata = new FormData()
      fmdata.append('userId', userId.value)
      fmdata.append('typeId', id)
      await manageService(fmdata)
      close()
    })
    .catch(() => {})
}

// 向外暴露
defineExpose({
  open
})

const emit = defineEmits(['success'])

const close = () => {
  dialogTableVisible.value = false
  ElMessage.success('操作成功')
  emit('success')
}
</script>
<template>
  <el-dialog v-model="dialogTableVisible" title="场馆信息" width="500">
    <el-table :data="typeList" stripe v-loading="loading">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column label="场馆名称" prop="vname"></el-table-column>
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="{ row }">
          <el-button
            link
            type="primary"
            size="small"
            v-if="isManage"
            @click="deleteRow(row.id)"
          >
            移除
          </el-button>
          <el-button
            link
            type="primary"
            size="small"
            v-else
            @click.prevent="addRow(row.id)"
          >
            管理
          </el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="无数据" />
      </template>
    </el-table>
  </el-dialog>
</template>
