<template>
  <el-dialog
   :close-on-click-modal="false"
    :title="(dialogForm.id ? '修改' : '添加') + '员工信息'"
    :visible.sync="dialogVisible"
    width="450px"
    top="15vh"
    @close="closeDialog">
    <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="100px" v-loading="dialogLoading">
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="登录账号" prop="empuid" required>
            <el-input v-model="dialogForm.empuid"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="登录密码" prop="password" required>
            <el-input type="password" v-model="dialogForm.password"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="显示姓名" prop="cnname" required>
            <el-input v-model="dialogForm.cnname"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="邮箱">
            <el-input v-model="dialogForm.email"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import { getUserDetail, saveUser, resetDefault } from '@/api/system_manage'
import { getUserDetail, addUser } from '@/api/system_manage'

export default {
  name: 'UserAdd',
  data() {
    return {
      dialogVisible: this.value,
      dialogLoading: false,
      dialogForm: {},
      rules: {
        empuid: [
          { required: true, message: '登录账号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '登录密码不能为空', trigger: 'blur' }
        ],
        cnname: [
          { required: true, message: '显示姓名不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    checkItem: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  watch: {
    value(val) {
      if (val) {
        if (this.checkItem.id) {
          this.requestData(this.checkItem.id)
        } else {
          this.dialogForm = {}
        }
      }
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    closeDialog() {
      this.$refs.dialogForm.resetFields()
    },
    requestData(id) {
      this.dialogLoading = true
      getUserDetail(id).then((rt) => {
        this.dialogForm = rt.data
        this.dialogLoading = false
      }).catch(() => {
        this.dialogLoading = false
      })
    },
    async submit() {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          this.dialogLoading = true
          console.log(this.dialogForm)
          // return ''
          addUser(this.dialogForm).then((rt) => {
            this.dialogLoading = false
            if (rt.status === '200') {
              this.$emit('confirm')
              this.dialogVisible = false
              this.$message({
                message: `${this.dialogForm.id ? '修改' : '添加'}成功`,
                type: 'success'
              })
              // resetDefault({
              //   confirmedPassword: '123456',
              //   newPassword: '123456',
              //   originalPassword: '123456',
              //   token: 'string',
              //   userId: this.dialogForm.empuid
              // }).then(res => {
              //   console.log(res)
              // })
            }
          }).catch(() => {
            this.dialogLoading = false
          })
        }
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
</style>
