<script setup>
import { checkPassWord } from '@/utils/common'
import { apiSystemUser, apiSystemDepart } from '@/api/system'

const show = defineModel('show', { type: Boolean, default: false })
const props = defineProps({
  data: Object,
})
const emits = defineEmits(["success"])

// 获取部门数据
const departArr = ref([])
async function getDepartList() {
  const res = await apiSystemDepart.departList()
  if (res.Ret !== 200) return
  const list = res.Data.List || []
  departArr.value = list
}
getDepartList()

const depart = ref('')
watch(() => show.value, (newval) => {
  if (newval) {
    depart.value = props.data.SysDepartmentId || ''
  }
})

async function handleSubmitForm() {
  if(!depart.value){
    ElMessage.warning('请选择分组')
    return
  }
  const res=await apiSystemUser.moveUserDepart({
    sysuserid:props.data.SysUserId,
    SysDepartmentId:depart.value
  })
  if(res.Ret!==200) return
  ElMessage.success('移动分组成功')
  show.value=false
  emits("success")
}
</script>

<template>
  <el-dialog
    v-model="show"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    width="30%"
    title="移动分组"
  >
    <div class="dialog-content">
      <el-form label-width="100px">
        <el-form-item label="账号">
          <span>{{ props.data.SysRealName }}</span>
        </el-form-item>
        <el-form-item label="选择分组" prop="depart">
          <el-cascader
            style="width: 100%"
            :options="departArr"
            :props="{
              value: 'SysDepartmentId',
              label: 'SysDepartmentName',
              children: 'Child',
              checkStrictly: true,
              emitPath: false,
            }"
            v-model="depart"
            placeholder="请选择部门分组"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="btn-content">
        <el-button
          type="primary"
          style="width: 80px; margin-right: 24px"
          @click="handleSubmitForm"
          >保存</el-button
        >
        <el-button style="width: 80px" @click="show = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.btn-content {
  text-align: center;
  padding-bottom: 20px;
}
</style>
