<template>
    <div>
         <Row type="flex" justify="center" align="middle" class="code-row-bg">
            <Card shadow v-if="!hasUser">
                <Alert type="error">无用户信息</Alert>
            </Card>
            <Col span="20" shadow v-if="hasUser">
                <Card shadow >
                    <p>
                        用户名&nbsp;&nbsp;{{userinfo.user_name}}
                    </p>
                </Card>
                <Card shadow v-if="hasUser">
                    <p slot="title">用户权限组</p>
                    <Form :model="role" :label-width="100">
                        <Form-item label="标志名">
                            <Input v-model="role.access" style="width: 300px"></Input>
                        </Form-item>
                        <Form-item >
                            <Button type="primary" @click="saveuserrole">保存</Button>
                        </Form-item>
                    </Form>
                    <Alert v-if="role.result" :type="role.type">{{role.msg}}</Alert>
                </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
import { searchUserInfo, saveuserrole } from '@/api/user'
export default {
  name: 'usersetting',
  data () {
    return {
      hasUser: false,
      role: {
        uid: 0,
        access: '',
        result: false,
        type: '',
        msg: ''
      },
      userinfo: {}
    }
  },
  methods: {
    saveuserrole () {
      saveuserrole(this.role).then(res => {
        this.role.result = true
        const data = res.data
        if (data.code === 200) {
          this.role.type = 'success'
        } else {
          this.role.type = 'error'
        }
        this.role.msg = data.msg
      })
    }
  },
  mounted () {
    console.log(this.$route.query)
    const uid = this.$route.query.id
    console.log(uid)
    searchUserInfo(uid).then(res => {
      const data = res.data
      if (data.code === 200) {
        this.role.uid = data.data.id
        this.userinfo = data.data
        console.log(data.data)
        this.hasUser = true
      } else {
        this.hasUser = false
        this.$Message.error(data.msg)
      }
    })
  }
}
</script>
