<template>
  <div id="root">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
       <el-form-item label="姓名" prop="userName">
          <el-input v-model="ruleForm.userName"/>
       </el-form-item>
    
     <el-form-item class="filter-item" label="手机号" prop="loginName" >
        <el-input v-model.trim="ruleForm.loginName" placeholder="手机号" />
      </el-form-item>
      <el-form-item label="角色" prop="menuArray">
        <!-- default-expanded-keys 展示选中的
             default-checked-keys 勾上选中的-->
        <el-tree
          ref="tree"
          :data="menuData"
          :default-expanded-keys="ruleForm.menuArray"
          :default-checked-keys="ruleForm.menuArray"
          :props="defaultProps"
          show-checkbox
          node-key="id"
          @check-change="handleCheckChange"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="ruleForm.remark"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        id: '',
        userName: '',
        loginName:'',
        remark: '',
        roleName: '',
        createUser: '',
        updateUser: '',
        updateDate: '',
        pageNum: 1,
        pageSize: 10,
        menuArray: [] // 已选中的权限资源
      },
      menuData: [], // 所有权限资源
      defaultProps: { // 设置树形节点的渲染的属性
        id: 'id',
        label: 'roleName',
        children: 'children'
      },
      rules: {
        userName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
        loginName: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        menuArray: [
          { required: true, message: '请选择角色', trigger: 'blur' }
        ],
        
      }
    }
  },
  mounted() {
     this.selectUser(this.$route.params.id)
     console.log('this.$route.params.id',this.$route.params.id)
     this.getById()
  },
  methods: {
    submitForm(formName) {
      // 获取选中的树形节点 key
      this.ruleForm.menuArray = this.$refs.tree.getCheckedKeys()
      this.$refs[formName].validate((valid) => {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        if (valid) {
          console.log('this.roleName',this.roleName)
          console.log('this.ruleForm.menuArray',this.ruleForm.menuArray)
          // 各种校验
          if(this.ruleForm.userName<=0){
              this.$message.error('名称不能为空!')
              loading.close()
               return
            }
          if(this.ruleForm.menuArray<0){
              this.$message.error('请您选择角色!')
              loading.close()
               return
            }
          this.$store.dispatch('UpDate', this.ruleForm).then((res) => {
            const resCode = res.code
            if (resCode === '0') {
              this.$message({
                message: res.message,
                type: 'success'
              })           
              loading.close()
              this.$router.push({ name: 'user-index' })
            }else {      
           this.$message.error(res.message)
           loading.close()
        }
          }).catch(() => {
            console.log('error AddUser')
            loading.close()
          })
        } else {
          console.log('error submit!!')
          loading.close()
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    handleCheckChange(data, checked, indeterminate) { // 树形图选择事件
      console.log(data, checked, indeterminate)
    },
    getMenuList() { // 获取 菜单列表
      this.$store.dispatch('GetMenuList').then((res) => {
        this.menuData = res.data
      }).catch(() => {
        console.log('error GetMenuList')
      })
    },
    getById(){
    this.$store.dispatch('UserRoleById', this.ruleForm).then((res) => {
      this.menuData = res.data
    }).catch(() => {
      console.log('error UserRoleById')
    })
},
    selectUser(id){
    this.ruleForm.id=id
      this.$store.dispatch('SelectUser', this.ruleForm).then((res) => {
        this.ruleForm.loginName=res.data.userList[0].loginName
        this.ruleForm.userName=res.data.userList[0].userName
        this.ruleForm.remark=res.data.userList[0].remark
        this.ruleForm.menuArray=res.data.roleList
        console.log('res.data',res.data)

    }).catch(() => {
      console.log('error SelectUser')
    })


  }
  }
  }
</script>

<style scoped>
.demo-ruleForm {
  width: 500px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
</style>
