<template>
  <!-- 增加修改 -->
  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>{{ formTitle }}</b>
    </a-divider>
    <div style="margin-bottom:20px">
      <a-tree
        v-if="deptOptions.length"
        checkable
        :tree-data="deptOptions"
        :replaceFields="replaceFields"
        @select="onSelect"
        @check="onCheck"
      >
      </a-tree>
      <div v-else style="text-align: center;">
        <a-spin />
      </div>
    </div>

    <div class="bottom-control">
      <a-space>
        <a-button type="primary" @click="submitForm">
          保存
        </a-button>
        <a-button type="dashed" @click="cancel">
          取消
        </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>

import { getUser, insertGroupUser } from '@/api/system/user'

export default {
  name: 'CreateForm',
  props: {
    deptOptions: {
      type: Array,
      required: true
    },
    groupId: {
      type: Number,
      default () {
        return null
      }
    }
  },
  components: {
  },
  data () {
    return {
      replaceFields: { children: 'children', title: 'label', key: 'id', value: 'id' },
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      selectedKeys: [],
      userIds: [],
      // 默认密码
      initPassword: undefined,
      formTitle: '',
      // 表单参数
      form: {
        userId: undefined,
        deptId: 0,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: '3',
        status: '0',
        remark: undefined,
        postIds: [],
        roleIds: []
      },
      open: false,
      rules: {
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '用户昵称不能为空', trigger: 'blur' }
        ],
        deptId: [
          { required: true, message: '部门不能为空', trigger: 'change' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          {
            type: 'email',
            message: '请正确填写邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        phonenumber: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请正确填写手机号',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  filters: {
  },
  created () {
    this.getConfigKey('sys.user.initPassword').then(response => {
      this.initPassword = response.msg
    })
  },
  computed: {
  },
  watch: {
  },
  methods: {
     dataChange (data) {
       const arr = []
       data.map(item => {
            if (!isNaN(item / 1)) {
              arr.push(item)
            }
       })
       return arr
    },
    onCheck (checkedKeys, info) {
    this.userIds = this.dataChange(checkedKeys)
    },
    // 数据处理

    onSelect (selectedKeys, info) {
      this.selectedKeys = selectedKeys
    },
    onClose () {
      this.open = false
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: '3',
        status: '0',
        remark: undefined,
        postIds: [],
        roleIds: []
      }
    },
     /** 新增按钮操作 */
    handleAdd () {
      this.reset()
      this.$emit('select-tree')
      getUser().then(response => {
        this.postOptions = response.posts
        this.roleOptions = response.roles
        this.open = true
        this.formTitle = '新增用户'
        this.form.password = this.initPassword
      })
    },
     /** 提交按钮 */
    submitForm: function () {
            const data = {
              groupId: this.groupId,
              userIds: this.userIds
            }
            insertGroupUser(data).then(response => {
              this.$message.success(
                '新增成功',
                3
              )
              this.open = false
              this.$emit('ok')
          })
    }
  }
}
</script>
