<template>
  <el-dialog v-model="addSign.visible" title="任务加签" width="400px">
    <el-form label-width="80px">
      <el-form-item label="加签人">
        <el-select
          v-model="addSign.userId"
          filterable
          placeholder="请选择加签人"
          style="width: 100%"
        >
          <el-option
            v-for="u in addSign.userList"
            :key="u.id"
            :label="u.realName || u.username"
            :value="u.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addSign.visible = false">取消</el-button>
      <el-button type="primary" :loading="addSign.loading" @click="handleSubmit">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useAddSign } from '@/composables/useAddSign'

const emit = defineEmits<{
  (e: 'success'): void
}>()

const addSign = reactive(useAddSign())

function handleSubmit() {
  addSign.submit(() => emit('success'))
}

defineExpose({
  open: addSign.open,
  reset: addSign.reset
})
</script>
