<!--
 * @Author: 曹捷
 * @Date: 2019-08-19 15:24:34
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-02 16:22:22
 * @Description: file content
 -->
<template>
  <a-modal class="obit-modal-default" v-if="showModal" :maskClosable="false" :title="showTitle" v-model:visible="showModal"
    @cancel="closeDialog" @ok="saveInfo" cancelText="取消" okText="确认" width="40%">
    <a-form :inline="true" :model="formData" :rules="rules" ref="formRef" :label-col="{span: 4}"
      :wrapper-col="{span:18}">
      <a-form-item label="用户昵称" name="nickName">
        <a-input :maxlength="20" placeholder="请输入用户昵称" show-word-limit v-model:value="formData.nickName"></a-input>
      </a-form-item>
      <a-form-item label="归属部门" name="deptId">
        <obit-cascader :valueName="pData.id" :label="pData.label" :children="pData.children" :parentId="pData.parentId"
          :options="orgList" v-model:value="formData.deptId" placeholder="请选择归属部门">
        </obit-cascader>
      </a-form-item>
      <a-form-item label="手机号码" name="phonenumber">
        <a-input :maxlength="11" placeholder="请输入手机号码" show-word-limit v-model:value="formData.phonenumber">
        </a-input>
      </a-form-item>
      <a-form-item label="邮箱" name="email">
        <a-input :maxlength="32" placeholder="请输入邮箱" show-word-limit v-model:value="formData.email"></a-input>
      </a-form-item>
      <a-form-item label="登录账号" name="userName" v-if="addType === 'add'">
        <a-input :maxlength="20" placeholder="请输入用户登录账号" show-word-limit v-model:value="formData.userName"></a-input>
      </a-form-item>
      <a-form-item label="用户密码" name="password" v-if="addType === 'add'">
        <a-input :maxlength="20" placeholder="请输入用户登录密码" type="password" show-word-limit
          v-model:value="formData.password">
        </a-input>
      </a-form-item>
      <a-form-item label="用户性别" name="sex">
        <obit-dict dictCode="sys_user_sex" placeholder="请选择" v-model:value="formData.sex"></obit-dict>
      </a-form-item>
      <a-form-item label="状态" name="status">
        <obit-dict dictCode="sys_normal_disable" type="radio" placeholder="请选择" v-model:value="formData.status">
        </obit-dict>
      </a-form-item>
      <a-form-item label="岗位" name="posts">
        <a-select mode="multiple" v-model:value="formData.postIds" placeholder="请选择岗位">
          <a-select-option v-for="item in postSelectList" :key="item.postId">
            {{item.postName}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="角色" name="roles">
        <a-select mode="multiple" v-model:value="formData.roleIds" placeholder="请选择角色">
          <a-select-option v-for="item in roleSelectList" :key="item.roleId">
            {{item.roleName}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="formData.remark" placeholder="请输入内容" :auto-size="{ minRows: 2, maxRows: 5 }"
          :maxlength="250" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { computed, inject, reactive, toRefs, watch } from 'vue'
import { util } from '../../../entery'
import obitCascaderVue from '../../../components/obit-cascader/obit-cascader.vue'
export default {
  components: { obitCascaderVue },
  props: {
    open: {
      type: Boolean
    },
    addType: {
      type: String,
    },
    detailsInfo: {
      type: Object,
    },
  },
  setup (props, context) {
    let http = inject('http')
    let checkPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户登录密码'));
      } else {
        if (value.length < 6) {
          callback(new Error('密码长度不能低于6位'));
        } else {
          callback();
        }
      }
    }
    let checkMobile = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号码'));
      } else {
        let rules = /^1[345789]\d{9}$/
        if (rules.test(value)) {
          callback();
        } else {
          callback(new Error('请输入11位手机号'));
        }
      }
    }
    let _data = reactive({
      showModal: props.open,
      formData: {},
      orgList: {},
      formRef: null,
      roleSelectList: [],
      postSelectList: [],
      pData: { label: 'label', id: 'id', children: 'children', parentId: 'parentId' },
      rules: {
        nickName: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' }
        ],
        deptId: [
          { required: true, message: '请选择归属部门', trigger: 'blur' },
        ],
        userName: [
          { required: true, message: '请输入用户登录账号', trigger: 'blur' }
        ],
        password: [
          { required: true, validator: checkPassword, trigger: 'change' }
        ],
        phonenumber: [
          { required: true, validator: checkMobile, trigger: 'blur' }
        ],
      },
    })
    let _computed = {
      showTitle: computed(() => props.addType === 'add' ? '新增用户' : '修改用户')
    }
    let _methods = {
      getPostRole (url) {
        http.sysPost(url).then(res => {
          _data.roleSelectList = res.roles
          _data.postSelectList = res.posts
          _data.formData.postIds = []
          _data.formData.roleIds = []
          _data.formData.postIds = _methods.toStringArray(res.postIds)
          _data.formData.roleIds = _methods.toStringArray(res.roleIds)
        })
      },
      toStringArray (arr) {
        if (!arr) {
          return []
        } else {
          let list = []
          arr.forEach(item => {
            list.push(item.toString())
          })
          return list
        }
      },
      saveInfo () {
        _data.formRef.validate().then(() => {
          let param = util.util.cloneObj(_data.formData)
          http.saveSystemUserInfo(param, props.addType).then((res) => {
            context.emit('reload', props.addType === 'add')
            _methods.closeDialog()
          })
        })
      },
      closeDialog () {
        util.util.cleanObj(_data.formData)
        context.emit('update:open', false)
      },
    }
    watch(() => props.open, (value) => {
      _data.orgList = []
      http.sysGetTreeSelect().then(data => {
        _data.orgList = util.util.cloneObj(data)
      })
      if (value && props.addType === 'edit') {
        _data.formData = util.util.cloneObj(props.detailsInfo)
        _methods.getPostRole(`system/user/detail/${props.detailsInfo.userId}`)
      } else {
        _methods.getPostRole('system/user/detail')
        _data.formData = {}
        _data.formData.status = '0'
      }
    })
    return {
      ..._computed,
      ...toRefs(_data),
      ..._methods
    }
  },
}
</script>
<style lang="less">
</style>