<script setup>
import { useGroupStore } from '../stores/group'
import { useCheckStep } from '../composables/useData'
const { isCheck } = useCheckStep(5)
const groupStore = useGroupStore()
const { addGroup, updateGroup } = groupStore

const emit = defineEmits(['update:modelValue'])
const props = defineProps(['data'])

const form = reactive({
  type: 1,
  name: '',
  join_rule: '',
  remove_rule: '',
  reason: ''
})
watchEffect(() => {
  Object.assign(form, props.data)
})

const formRef = ref(null)
const rules = reactive({
  name: [{ required: true, message: '请输入', trigger: 'blur' }],
  join_rule: [{ required: true, message: '请输入', trigger: 'blur' }],
  remove_rule: [{ required: true, message: '请输入', trigger: 'blur' }],
  reason: [{ required: true, message: '请输入', trigger: 'blur' }]
})

const handleSubmit = async () => {
  await formRef.value.validate()
  props.data.id ? updateGroup(toRaw(form)) : addGroup(toRaw(form))
  emit('update:modelValue', false)
}
</script>

<template>
  <el-dialog title="用户群组设计" width="600" @closed="$emit('update:modelValue', false)">
    <el-form label-suffix=":" label-width="120" :model="form" :rules="rules" ref="formRef" :disabled="isCheck">
      <el-form-item label="用户群组类型">
        <el-radio-group v-model="form.type" disabled>
          <el-radio label="静态群组" :value="1"></el-radio>
          <el-radio label="动态群组" :value="2"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="群组名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="群组加入规则" prop="join_rule">
        <el-input type="textarea" v-model="form.join_rule" show-word-limit maxlength="100" :rows="4"></el-input>
      </el-form-item>
      <el-form-item label="群组移除规则" prop="remove_rule">
        <el-input type="textarea" v-model="form.remove_rule" show-word-limit maxlength="100" :rows="4"></el-input>
      </el-form-item>
      <el-form-item label="设计群组原因" prop="reason">
        <el-input type="textarea" v-model="form.reason" show-word-limit maxlength="100" :rows="4"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
        <el-button type="primary" auto-insert-space @click="handleSubmit" :disabled="isCheck">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
