<template>
  <div class="user-form" v-loading="loading">
    <page-header :title="formData.name || '人员新增'" :back="true" />
    <el-form :model="formData" label-width="100px">
      <el-form-item label="名称" prop="name">
        <el-input v-model="formData.name" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formData.phone" />
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
        <el-dropdown @command="handleAvatar($event)">
          <span class="el-dropdown-link">
            <el-avatar :src="formData.avatar" :size="98"></el-avatar>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="avatar in avatars"
                :key="avatar"
                :command="avatar"
              >
                <el-avatar :src="avatar" :size="98"></el-avatar>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-form-item>
      <el-form-item label="登录账号" prop="loginName">
        <el-input v-model="formData.loginName" />
      </el-form-item>
      <el-form-item label="默认密码">
        <span style="color: #999">abc@123</span>
      </el-form-item>
      <el-form-item label="角色">
        <el-radio-group v-model="formData.roleId">
          <el-radio :label="'2'">业务人员</el-radio>
          <el-radio :label="'3'">运营人员</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="user-form__action">
        <el-button type="primary" @click="submit"><i class="fa fa-save">&nbsp;</i> 保 存</el-button>
        <el-button @click="handleCancel()">重置密码</el-button>
        <el-button @click="handleCancel()">取 消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { onMounted, onUpdated, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
import { useModel } from '@/store'

const defaultAvatars = new Array(12).fill('*').map((_, inx) => `https://zhiyun-image.oss-cn-shanghai.aliyuncs.com/common/images/avatar/${inx+1}.png`)

export default {
  setup(props) {
    const loading = ref(false)
    const formData = reactive({})
    const route = useRoute()
    const router = useRouter()

    const { id } = route.query

    const { saveUser, updateUser, getUser } = useModel('user')

    const submit = () => {
      if (!id) {
        saveFormData(formData)
      } else {
        updateFormData({
          ...formData,
          userId: id,
        })
      }
    }

    const updateFormData = data => {
      loading.value = true
      updateUser(data).then(res => {
        loading.value = false
        ElNotification.success({message: '更新成功'})
      }).catch(e => {
        console.error(e)
        loading.value = false
      })
    }

    const saveFormData = data => {
      loading.value = true
      saveUser(data).then(res => {
        loading.value = false
        ElNotification.success({message: '提交成功'})
        router.replace({name: 'user.edit', query: {id: res.userId}})      
      }).catch(e => {
        console.error(e)
        loading.value = false
      })
    }

    const handleCancel = () => {
      router.go(-1)
    }

    const handleAvatar = e => {
      formData.avatar = e
    }

    onMounted(() => {
      if (id) {
        loading.value = true
        getUser(id).then(res => {
          Object.keys(res).forEach(k => {
            formData[k] = res[k]
            loading.value = false
          })
        }).catch(e => {
          console.error(e)
          loading.value = false
        })
      }
    })

    return {
      formData,
      submit,
      handleCancel,
      avatars: defaultAvatars,
      handleAvatar,
    }
  }
}
</script>

<style lang="less" scoped>
.user-form {
  background-color: #fff;
  padding: 4em 1em;
  display: flex;
  justify-content: center;

  .el-form {
    width: 480px;
  }

  &__action {
    display: flex;
    justify-content: space-around;
  }
}
</style>
