<template>
    <div class="personal-info-container">
        <el-card
            class="personal-info-header"
            body-style="height:calc(100% - 40px)"
        >
            <div class="header-content">
                <div class="avator-container">
                    <el-avatar :size="80" :src="photoUrl"></el-avatar>
                    <el-upload
                        action="string"
                        :http-request="updateUserImage"
                        :show-file-list="false"
                    >
                        <el-button size="mini" type="primary"
                            >点击上传</el-button
                        >
                    </el-upload>
                </div>
                <div class="header-info">
                    <el-row>
                        <el-col :span="6">
                            <div>姓名：{{ currentUser.user.fullname }}</div>
                        </el-col>
                        <el-col :span="6">
                            <div>注册时间：</div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <div>账号：{{ currentUser.user.account }}</div>
                        </el-col>
                        <el-col :span="6">
                            <div>角色：{{ currentUser.role.roleName }}</div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-card>
        <el-card
            class="personal-info-bottom"
            body-style="height:calc(100% - 50px);overflow:auto"
        >
            <el-form
                ref="form"
                :model="form"
                label-width="80px"
                style="width: 400px"
            >
                <h4>个人信息</h4>
                <el-form-item label="姓名">
                    <el-input
                        v-model="form.fullname"
                        placeholder="请输入姓名"
                    ></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input
                        v-model="form.sex"
                        placeholder="请输入姓名"
                    ></el-input>
                </el-form-item>
                <h4>联系信息</h4>
                <el-form-item label="地址">
                    <el-input
                        type="textarea"
                        v-model="form.address"
                        placeholder="请输入地址"
                    ></el-input>
                </el-form-item>
                <el-form-item label="手机">
                    <el-input
                        v-model="form.mobile"
                        placeholder="请输入手机号码"
                    ></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input
                        v-model="form.email"
                        placeholder="请输入邮箱"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div style="width: 400px; text-align: center">
                <el-button type="primary" @click="updataInfo"
                    >更新信息</el-button
                >
            </div>
        </el-card>
    </div>
</template>

<script>
import uc from '@/api/uc.js'
export default {
    name: 'personal-info',
    data() {
        return {
            currentUser: {
                role: {},
                user: {},
            },
            form: {},
            photoUrl: window.context.front + '/img/defaultPhoto.jpg',
            photo: '',
        }
    },
    mounted() {
        this.getInfo()
    },
    methods: {
        updateUserImage(param) {
            const formData = new FormData()
            formData.append('files', param.file)
            uc.fileUpload(formData)
                .then((response) => {
                    this.photo = response.fileId
                    this.form.photo = response.fileId
                    this.$store
                        .dispatch('menu/downloadImg', response.fileId)
                        .then((res) => {
                            if (res != '') {
                                this.photoUrl = res
                            }
                        })
                    param.onSuccess() // 上传成功的图片会显示绿色的对勾
                    this.$message.success('上传成功')
                })
                .catch((response) => {
                    param.onError()
                })
        },
        getInfo() {
            let currentUser = sessionStorage.getItem('currentUser')
            let account = JSON.parse(currentUser).account
            if (account) {
                uc.getUser(account).then((res) => {
                    this.currentUser = res
                    this.form = res.user
                    if (this.form.photo) {
                        this.$store
                            .dispatch('menu/downloadImg', this.form.photo)
                            .then((res) => {
                                if (res != '') {
                                    this.photoUrl = res
                                }
                            })
                    }
                })
            }
        },
        updataInfo() {
            this.$http
                .post(
                    window.context.uc + '/api/user/v1/user/updateUser',
                    this.form
                )
                .then((res) => {
                    if ((res.status = 200)) {
                        this.$message.success('更新成功')
                        this.$bus.updataUserInfo()
                    }
                })
        },
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.personal-info-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #f8fcff;
  .el-header {
    display: flex;
    align-items: center;
    border-bottom :1px solid #E7EAEC;
    background: #314351;
}
    .title{
        font-size:16px;
        color: #fff;
    }
  .personal-info-header {
    height: 200px;
    margin: 10px 0;
  }
  .personal-info-bottom {
  }
  .header-content {
    display: flex;
    height: 100%;
  }
  .avator-container {
    width: 120px;
    height: 100%;
    margin-right: 10px;
    box-sizing: border-box;
  }
  .header-info {
    color: #333;
    width: calc(100% - 130px);
    padding: 20px 0;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
}
h4 {
  color: #333;
}
.el-card.is-always-shadow {
    box-shadow: 0 2px 12px 0 rgba(133, 133, 133, 0.1);
}
</style>
