<style scoped lang="scss">

</style>
<template>
  <div class="system-dialog-container">

    <el-dialog
        :title="state.dialog.title"
        v-model="state.dialog.isShowDialog"
        width="820px"
        draggable
        destroy-on-close
        :close-on-click-modal="false"
        align-center>
      <el-skeleton :rows="5" animated v-if="state.loading"/>
      <ext-detail-form v-else
                       ref="formRef"
                       v-model="state.ruleForm"
                       :columns="state.columns"
                       :rules="state.rules"
                       @on-change="handleFormChange"
      ></ext-detail-form>

      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button :loading="state.btnLoading" type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="UserDialog">
import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
import {Msg} from "/@/utils/message";
import {$body, $get} from "/@/utils/request";
import u from '/@/utils/u'

// 引入组件
const ExtDetailForm = defineAsyncComponent(() => import('/@/components/form/ExtDetailForm.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const formRef = ref();
//定义初始变量，重置使用
const initState = () => ({
  ruleForm: {
    id: 0
  },
  loading: true,
  btnLoading: false,
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
  columns: [
    {label: '基本信息', prop: 'un', type: 'divider', align: 'left'},
    {label: '头像', prop: 'avatar', type: 'avatar',},
    {label: '用户名', prop: 'userName', type: "text",tips:'用来登录的名称',rules:[u.validator.required]},
    {label: '名称', prop: 'name', type: 'text',tips:'用来展示的名称',rules:[u.validator.required]},
    {label: '手机号', prop: 'mobile', type: 'text',},
    {
      label: '用户状态',
      prop: 'status',
      sortable: 'custom',
      align: 'center',
      type: 'dict',
      conf: {dict: 'User.status'}
    },
    {label: '职业信息', prop: 'un', type: 'divider', align: 'left'},
    {label: '工号', prop: 'code', type: 'text',},
    {label: '邮箱', prop: 'email', type: 'text',},
    {label: '所属部门', prop: 'deptIdList', type: 'dept',conf:{multiple:true}},
    {label: '分配角色', prop: 'roleIdList', type: 'select',conf:{multiple:true,url: 'entity/list', query: {entity: 'role'}}},
    {label: '岗位职责', prop: 'postIdList', type: 'search',conf:{multiple:true,url: 'entity/list', query: {entity: 'post'}}},
    {label: 'boss权限', prop: 'boss', type: 'dict',conf:{dict:'User.boss'}},
    {label: '职业', prop: 'job', type: 'text',},
    {label: '上级领导', prop: 'leaderId', type: 'user',},


    {label: '其他信息', prop: 'un', type: 'divider', align: 'left'},
    {label: '本次登录地址', prop: 'ip', type: 'text',},
    {label: '上次登录地址', prop: 'lastIp', type: 'text',},
    {
      label: '上次登录时间', prop: 'lastLoginAt', type: 'datetime',
    },
    {
      label: '创建时间', prop: 'createAt', type: 'datetime',
    },
    {label: '备注', prop: 'remark', type: 'textarea',conf:{max:500,rowspan:3}},
    {
      label: '更新时间', prop: 'updateAt', type: 'datetime',
    },
  ],
  rules: {},
})

// 定义变量内容
const state = reactive(initState());


// 打开弹窗
const open = (action: string = 'add', row: any) => {
  state.dialog.title = u.dialog.actions[action].title + "『用户信息』"
  state.dialog.submitTxt = u.dialog.actions[action].btn + "『用户信息』"
  state.dialog.isShowDialog = true;
  if (action !== 'add') {
    loadData(row.id);
  } else {
    state.loading = false;
  }
};
// 关闭弹窗
const onClose = () => {
  state.dialog.isShowDialog = false;
  Object.assign(state, initState())
};
// 取消
const onCancel = () => {
  onClose();
};
// 提交
const onSubmit = () => {
  formRef.value.checkForm().then(() => {
    state.btnLoading = true;
    const url = state.ruleForm.id > 0 ? "user/modify" : "user/add"
    $body(url, state.ruleForm).then(() => {
      state.btnLoading = false;
      Msg.message();
      console.log('submit!')
      onClose();
      emit('refresh');
    })
  }).catch(() => {
    state.btnLoading = false;
    Msg.message('请完整填写表单', 'error');
  })
};

const handleFormChange = (formData: any) => {
  console.log(formData)
}

// 初始化表格数据
const loadData = (id: number) => {
  $get(`user/detail/${id}`).then((res: any) => {
    // let {user} = res;
    state.ruleForm = res;
    setTimeout(()=>state.loading = false,200)
  })
}

// 暴露变量
defineExpose({
  open
});


</script>