<template>
  <el-dialog v-model="visible" title="批量资源授权" width="500px">
    <el-form label-width="80px">
      <el-form-item label="授权项目">
        <el-checkbox-group v-model="form.types">
          <el-checkbox label="access">门禁权限</el-checkbox>
          <el-checkbox label="electric">智能控电</el-checkbox>
          <el-checkbox label="network">校园网</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="有效期至">
        <el-date-picker v-model="form.expireTime" type="date" placeholder="选择日期" style="width: 100%" />
      </el-form-item>
      <el-form-item label="授权说明">
        <div class="text-gray text-xs">将对当前筛选出的所有学生应用此授权设置</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="confirm">确认执行</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['success'])

const visible = ref(false)

const form = reactive({
  types: ['access', 'electric'],
  expireTime: '2026-07-01'
})

const open = () => {
  form.types = ['access', 'electric']
  form.expireTime = '2026-07-01'
  visible.value = true
}

const confirm = () => {
  visible.value = false
  ElMessage.success('批量授权指令已下发')
  emit('success')
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.text-xs { font-size: 12px; }
.text-gray { color: #909399; }
</style>
