<template>
    <div class="personal-info-container">
        <el-card class="personal-info-header">
            <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">{{
                            $t('personal.upload')
                        }}</el-button> -->
                    </el-upload>
                </div>
                <div class="header-info">
                    <el-row>
                        <el-col :span="8">
                            <div>
                                {{ $t('personal.name') }}：{{
                                    currentUser.user.fullname
                                }}
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div>
                                {{ $t('personal.role') }}：{{
                                    currentUser.role.roleName
                                }}
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <div>
                                {{ $t('personal.account') }}：{{
                                    currentUser.user.account
                                }}
                            </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="120px"
                style="width: 600px"
            >
                <h4>{{ $t('personal.info') }}</h4>
                <el-form-item :label="$t('personal.name')">
                    <el-input
                        v-model="form.fullname"
                        :placeholder="$t('common.input')"
                    ></el-input>
                </el-form-item>
                <el-form-item :label="$t('personal.gender')">
                    <el-input
                        v-model="form.sex"
                        :placeholder="$t('common.input')"
                    ></el-input>
                </el-form-item>
                <h4>{{ $t('personal.contact') }}</h4>
                <el-form-item :label="$t('personal.address')">
                    <el-input
                        type="textarea"
                        v-model="form.address"
                        :placeholder="$t('common.input')"
                    ></el-input>
                </el-form-item>
                <el-form-item :label="$t('personal.phone')">
                    <el-input
                        v-model="form.mobile"
                        :placeholder="$t('common.input')"
                    ></el-input>
                </el-form-item>
                <el-form-item :label="$t('personal.mailbox')">
                    <el-input
                        v-model="form.email"
                        :placeholder="$t('common.input')"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div style="width: 400px; text-align: center">
                <el-button type="primary" @click="updataInfo">{{
                    $t('common.save')
                }}</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;
    text-align: center;
  }
  .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 {
    border-radius: 20px;
    box-shadow: 0 2px 12px 0 rgba(133, 133, 133, 0.1);
}
</style>
