<template>
  <div class="add">
    <el-card class="add-container">
      <el-form
        :model="goodForm"
        :rules="rules"
        ref="userRef"
        label-width="100px"
        class="goodForm"
      >
        <el-form-item required label="登陆账户">
          <el-input
            style="width: 300px"
            v-model="goodForm.goodsName"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="goodsName">
          <el-input
            style="width: 300px"
            v-model="goodForm.goodsName"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">{{
            id ? '立即修改' : '立即创建'
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {
  reactive,
  ref,
  toRefs,
  onMounted,
  onBeforeUnmount,
  getCurrentInstance
} from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { editUser } from '@/api/user'
export default {
  name: 'AddGood',
  setup() {
    const { proxy } = getCurrentInstance()
    console.log('proxy', proxy)
    const editor = ref(null)
    const userRef = ref(null)
    const route = useRoute()
    const router = useRouter()
    const { Id } = route.query
    const state = reactive({
      Id: Id,
      goodForm: {
        LoginName: '',
        userName: ''
      },
      rules: {
        LoginName: [
          { required: 'true', message: '请输入登陆账户', trigger: ['change'] }
        ],
        UserName: [
          { required: 'true', message: '请输入用户姓名', trigger: ['change'] }
        ]
      }
    })

    const loadAllRoles = async () => {
      let response = await getRoleList(1, 10000)
      if (response.bussinessCode == 0) {
        this.roles = response.bussinessData
        this.roles.forEach((r) => {
          r.checked = false
        })
        this.formUser.userRoles.forEach((ur) => {
          this.roles.forEach((r) => {
            if (r.id == ur.id) {
              r.checked = true
            }
          })
        })
        console.log('this.roles', this.roles)
        console.log('this.formUser.userRoles', this.formUser.userRoles)
        this.$Spin.hide()
      } else {
        this.$Message.error(response.bussinessMsg)
      }
    }

    const onSubmit = () => {
      userRef.value.validate(async (vaild) => {
        if (vaild) {
          // 默认新增用 post 方法
          let params = {
            id,
            userName,
            loginName,
            roleIds
          }

          let res = await editUser(params)
          ElMessage.success(id ? '修改成功' : '添加成功')
          router.push({ path: '/right/user_list' })
        }
      })
    }
    return {
      ...toRefs(state),
      userRef,
      onSubmit,
      handleBeforeUpload,
      handleUrlSuccess,
      editor,
      handleChangeCate
    }
  }
}
</script>

<style scoped>
.add {
  display: flex;
}
.add-container {
  flex: 1;
  height: 100%;
}
.avatar-uploader {
  width: 100px;
  height: 100px;
  color: #ddd;
  font-size: 30px;
}
.avatar-uploader-icon {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #e9e9e9;
  padding: 32px 17px;
}
</style>
