<template>
  <el-drawer
    :title="title"
    :visible="true"
    :before-close="handleClose"
    :close-on-press-escape="false"
    :wrapper-closable="false"
    :modal-append-to-body="true"
    :append-to-body="true"
    custom-class="drawer-auto-layout"
  >
    <div class="drawer-form">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="formData"
        label-position="right"
        label-width="70px"
      >
        <el-form-item :label="$t('pages.sysUserManager.form.account')" prop="loginName">
          <div v-if="isAdd">
            <el-input
              v-model.trim="formData.loginName"
              :placeholder="$t('pages.sysUserManager.placeholder.account')"
            />
          </div>
          <div v-else>{{ formData.loginName }}</div>
        </el-form-item>

        <el-form-item :label="$t('pages.sysUserManager.form.nickname')" prop="nickname">
          <el-input
            v-model.trim="formData.nickname"
            :placeholder="$t('pages.sysUserManager.placeholder.nickname')"
          />
        </el-form-item>

        <el-form-item :label="$t('pages.sysUserManager.form.phone')" prop="phone">
          <el-input
            v-model="formData.phone"
            v-number
            :placeholder="$t('pages.sysUserManager.placeholder.phone')"
          />
        </el-form-item>

        <el-form-item :label="$t('pages.sysUserManager.form.email')" prop="email">
          <el-input
            v-model.trim="formData.email"
            :placeholder="$t('pages.sysUserManager.placeholder.email')"
          />
        </el-form-item>

        <el-form-item :label="$t('pages.sysUserManager.form.role')" prop="roleIds">
          <!-- multiple: keep role multi-select support disabled if product needs it later -->
          <el-select
            v-model="formData.roleIds"
            v-loading="roleLoading"
            style="width:100%"
            class="filter-item"
            multiple
            :placeholder="$t('pages.sysUserManager.placeholder.role')"
          >
            <el-option
              v-for="item in roles"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>

      <div class="drawer-footer">
        <el-button @click="handleClose">
          {{ $t('pages.sysUserManager.action.cancel') }}
        </el-button>
        <el-button
          type="primary"
          :loading="submitLoading"
          @click="handleSubmit"
        >
          {{ $t('pages.sysUserManager.action.submit') }}
        </el-button>
      </div>
    </div>

  </el-drawer>
</template>
<script>
import { getRoles, addUser, updateUser } from '@/api/ops-system'
export default {
  name: 'EditUser',
  props: {
    updateData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      roleLoading: false,
      submitLoading: false,
      roles: [],
      formData: {
        loginName: '',
        nickname: '',
        phone: '',
        email: '',
        roleIds: []
      }
    }
  },
  computed: {
    isAdd() {
      return this.updateData === null
    },
    title() {
      return this.isAdd
        ? this.$t('pages.sysUserManager.drawer.create')
        : this.$t('pages.sysUserManager.drawer.edit')
    },
    rules() {
      return {
        loginName: [
          { required: true, message: this.$t('pages.sysUserManager.validation.accountRequired'), trigger: 'blur' }
        ],
        nickname: [
          {
            required: true,
            message: this.$t('pages.sysUserManager.validation.nicknameRequired'),
            trigger: 'blur'
          }
        ],
        roleIds: [
          { required: true, message: this.$t('pages.sysUserManager.validation.roleRequired'), trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    updateData: {
      immediate: true,
      deep: true,
      handler(newVal) {
        Object.assign(this.formData, newVal)
        if (this.formData && this.formData.userRoles) {
          this.formData.roleIds = this.formData.userRoles.map(item => item.roleId)
        }
      }
    }
  },
  created() {
    const that = this
    that.roleLoading = true
    getRoles().then(res => {
      that.roleLoading = false
      const { body } = res
      that.roles = body
    }).catch(er => {
      that.roleLoading = false
    })
  },
  methods: {
    handleClose() {
      if (this.submitLoading === true) {
        this.$opsMessage.warn('Processing submission!')
        return
      }
      this.$emit('close')
    },
    handleSubmit() {
      const that = this
      that.$refs.dataForm.validate(valid => {
        if (valid) {
          that.submitLoading = true
          if (that.isAdd) {
            addUser(that.formData).then(res => {
              that.submitLoading = false
              this.$emit('success')
            }).catch(er => {
              that.submitLoading = false
              console.error(er)
              this.$emit('fail')
            })
            return
          }
          updateUser(that.formData).then(res => {
            that.submitLoading = false
            this.$emit('success')
          }).catch(er => {
            that.submitLoading = false
            console.error(er)
            this.$emit('fail')
          })
        } else {
          console.error('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
