<template>
  <!-- 添加或修改参数配置对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="600px"
    @close="close">
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户昵称" prop="nickName">
            <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="归属部门" prop="deptId">
            <treeselect
              v-model="form.deptId"
              :normalizer="normalizer"
              :options="deptOptions"
              placeholder="请选择归属部门" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phone">
            <el-input
              v-model="form.phone"
              maxlength="11"
              placeholder="请输入手机号码" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="form.email"
              maxlength="50"
              placeholder="请输入邮箱" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            v-if="form.id == undefined"
            label="用户账号"
            prop="userName">
            <el-input v-model="form.userName" placeholder="请输入用户账号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            v-if="form.id == undefined"
            label="用户密码"
            prop="password">
            <el-input
              v-model="form.password"
              placeholder="请输入用户密码"
              type="password" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户性别">
            <el-select v-model="form.sex" placeholder="请选择">
              <el-option
                v-for="dict in sexOptions"
                :key="dict.key"
                :label="dict.value"
                :value="dict.key" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in statusOptions"
                :key="dict.key"
                :label="dict.key">
                {{ dict.value }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位">
            <el-select v-model="form.postIds" multiple placeholder="请选择">
              <el-option
                v-for="item in postOptions"
                :key="item.id"
                :label="item.postName"
                :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色">
            <el-select v-model="form.roleIds" multiple placeholder="请选择">
              <el-option
                v-for="item in roleOptions"
                :key="item.id"
                :label="item.roleName"
                :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户组">
            <el-select v-model="form.groupIds" multiple placeholder="请选择">
              <el-option
                v-for="item in groupOptions"
                :key="item.id"
                :label="item.groupName"
                :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input
              v-model="form.remark"
              placeholder="请输入内容"
              type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="save">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import deptApi from '@/api/system/dept'
  import roleApi from '@/api/system/role'
  import postApi from '@/api/system/post'
  import groupApi from '@/api/system/group'
  import userApi from '@/api/system/user'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'UserEdit',
    components: { Treeselect },
    data() {
      return {
        form: {
          roles: [],
        },
        rules: {
          userName: [
            { required: true, message: '用户名称不能为空', trigger: 'blur' },
          ],
          nickName: [
            { required: true, message: '用户昵称不能为空', trigger: 'blur' },
          ],
          deptId: [
            { required: true, message: '归属部门不能为空', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '用户密码不能为空', trigger: 'blur' },
          ],
          email: [
            { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
            {
              type: 'email',
              message: "'请输入正确的邮箱地址",
              trigger: ['blur', 'change'],
            },
          ],
          phone: [
            { required: true, message: '手机号码不能为空', trigger: 'blur' },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: '请输入正确的手机号码',
              trigger: 'blur',
            },
          ],
        },
        title: '',
        dialogFormVisible: false,

        // 部门树选项
        deptOptions: undefined,
        // 部门名称
        deptName: undefined,
        // 默认密码
        initPassword: undefined,
        // 日期范围
        dateRange: [],
        // 状态数据字典
        statusOptions: [],
        // 性别状态字典
        sexOptions: [],
        // 岗位选项
        postOptions: [],
        // 角色选项
        roleOptions: [],
        // 用户组
        groupOptions: [],
        defaultProps: {
          id: 'id',
          children: 'children',
          label: 'deptName',
        },
        normalizer(node) {
          return {
            id: node.id,
            label: node.deptName,
            children: node.children,
          }
        },
      }
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val)
      },
    },
    created() {
      this.getDicts('sys_normal_disable').then((response) => {
        this.statusOptions = response.data.values || []
      })
      this.getDicts('sys_user_sex').then((response) => {
        this.sexOptions = response.data.values || []
      })
      this.getTreeselect()
      this.getRoleAndPost()
    },
    methods: {
      // 获取角色和岗位
      getRoleAndPost() {
        roleApi.getList({ status: '10' }).then((response) => {
          this.roleOptions = response.data.list
        })
        postApi.getList({ status: '10' }).then((response) => {
          this.postOptions = response.data.list
        })
        groupApi.getList({ status: '10' }).then((response) => {
          this.groupOptions = response.data.list
        })
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        deptApi.getTree().then((response) => {
          this.deptOptions = response.data
        })
      },
      async getUserInfo(id) {
        const { data: data } = await userApi.getUserInfo({ id: id })
        this.form = data.entity
        this.$set(this.form, 'roleIds', data.roleIds)
        this.$set(this.form, 'postIds', data.postIds)
        this.$set(this.form, 'groupIds', data.groupIds)
      },
      showEdit(row) {
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.getUserInfo(row.id)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.form.id) {
              const { msg } = await userApi.doEdit(this.form)
              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            } else {
              const { msg } = await userApi.doAdd(this.form)
              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
            }
            this.$emit('fetch-data')
            this.close()
          }
        })
      },
    },
  }
</script>
