import { ref, reactive } from 'vue'
import { USER_STATUS } from '@/utils/dictionary.js'
import { getDeptAll } from '@/api/system/dept/index'
import { getRoleAll } from '@/api/system/role/index'
import { dataToSelect } from '@/utils/handleData.js'
const departmentOptions = ref()
const rolesOptions = ref()
export const form = reactive({
  userForm: {
    avatar: '',
    code: '',
    deptId: null,
    username: '',
    realname: '',
    password: '',
    roleIds: [],
    status: 1,
    note: ''
  },
  userRules: {
    imageStatus: [{ required: true, message: '请选择头像', type: 'string', trigger: 'blur' }],
    code: [{ required: true, message: '请输入编号', trigger: 'blur' }],
    realname: [{ required: true, message: '请输入用户姓名', type: 'string', trigger: 'blur' }],
    deptId: [{ required: true, message: '请选择部门', type: 'number', trigger: 'blur' }],
    status: [{ required: true, message: '请选择状态', type: 'number', trigger: 'blur' }],
    roleIds: [{ required: true, message: '请选择角色', type: 'array', trigger: 'blur' }],
    username: [{ required: true, message: '请输入用户账号', type: 'string', trigger: 'blur' }]
  },
  formItem: [
    // { type: 'oss', key: 'imageStatus', label: '头像', file: 'avatar', refIndex: 0 },
    { type: 'oss', key: 'imageStatus', label: '头像', file: 'avatar' },
    { type: 'input', key: 'code', label: '用户编号', props: { maxlength: '20', placeholder: '请输入用户编号', clearable: true }},
    { type: 'input', key: 'username', label: '用户账号', props: { maxlength: '20', placeholder: '请输入用户账号', clearable: true }},
    { type: 'input', key: 'password', label: '登录密码', props: { type: 'password', maxlength: '20', placeholder: '请输入登录密码', clearable: true }},
    { type: 'input', key: 'realname', label: '用户姓名', props: { maxlength: '20', placeholder: '请输入用户姓名', clearable: true }},
    { type: 'select', key: 'deptId', label: '所属部门', props: { options: departmentOptions, placeholder: '请选择所属部门' }},
    { type: 'select', key: 'roleIds', label: '角色', props: { multiple: true, options: rolesOptions, placeholder: '请选择角色' }},
    { type: 'radio', key: 'status', label: '状态', options: USER_STATUS },
    { type: 'input', key: 'note', label: '备注', props: { type: 'textarea', autosize: { maxlength: '200', minRows: 3, maxRows: 3 }}}
  ]
})

export const getDeptOptions = async function() {
  const res = await getDeptAll()
  departmentOptions.value = dataToSelect(res.data, { label: 'name', value: 'id' })
}

// 获取角色列表
export const getRoleOptions = async function() {
  const res = await getRoleAll()
  rolesOptions.value = dataToSelect(res.data, { label: 'name', value: 'id' })
}
