<template>
    <div id="mine">
        <div class="mine-top">
            {{model === 'exhibition' ? "我的信息":"修改信息"}}
        </div>
        <div class="mine-main">
                <div class="pic">
                    <el-upload
                    class="avatar-uploader"
                    :action="doupload()"
                    :before-upload="before_Upload"
                    :show-file-list="false"
                    :on-error="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl.value" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <!--
                    action: 图片上传的地址
                    show-file-list: 是否显示文件上传列表
                    accept: 可接受的上传类型，image/*为图片
                    headers: 头部信息
                    on-success: 上传成功事件
                    on-error: 上传失败事件
                    before-upload: 上传前处理事件，返回一个值，值为false将阻止上传
                    on-progress: 上传中事件
                    -->

                </div>
            <!-- 修改的信息 -->
            <div v-show="model === 'changing'">
                <div>
                    <a>用户名</a>
                    <el-input type="text" v-model="ruleForm.username"></el-input>
                </div>
                <div>
                    <a>E-mail</a>
                    <el-input type="text" v-model="ruleForm.email"></el-input>
                </div>
                <div>
                    <a>地址</a>
                    <el-input type="text" v-model="ruleForm.location"></el-input>
                </div>
                <div>
                    <a>联系电话</a>
                    <el-input type="text" v-model="ruleForm.phoneNum"></el-input>
                </div>
            </div>

            <!-- 展示的信息 -->
            <div v-show="model === 'exhibition'" class="mine-exh">
                <div>
                    <a>用户名</a>
                    <span>{{ruleForm.username}}</span>
                </div>
                <div>
                    <a>E-mail</a>
                    <span>{{ruleForm.email}}</span>
                </div>
                <div>
                    <a>地址</a>
                    <span>{{ruleForm.location}}</span>
                </div>
                <div>
                    <a>联系电话</a>
                    <span>{{ruleForm.phoneNum}}</span>
                </div>
            </div>

            <div>
                <a></a>
                <el-button type="danger" size="medium" @click="toggleMenu">{{model === 'exhibition' ? "修改":"保存"}}</el-button>
            </div>
            <div>
                
            </div>
        </div>
        
    </div>
</template>

<script>
import axios from 'axios'
import {ref,reactive, onMounted} from '@vue/composition-api'
import {GetMes, SaveMes, uploadImg} from '@/api/login.js'
export default {
    name: 'Mine', //当前的名称
    setup(props, {refs, root}){
        const model = ref('exhibition')
        const ruleForm = reactive({
            username: '',
            email: '',
            location: '',
            phoneNum: ''
        })

        const toggleMenu = (data => {
            let saveData = {
                username : ruleForm.username,
                money : 100,
                phoneNum : ruleForm.phoneNum,
                sex : true
            }
            if(model.value === 'changing') {
                SaveMes(saveData).then(response => {
                    console.log(response)
                }).catch(error => {
                    console.log(error)
                })
            }

            model.value = (model.value == 'exhibition'? 'changing':'exhibition')
            console.log(model.value)
        })
        const imageUrl = ref('')
        const myToken =  window.sessionStorage.getItem('token')
        const myHeaders = ref({Authorization: myToken})


        const doupload = () => {
            return ' '  // 一次接口
        }
        //上传
        const before_Upload = () => {
            // axios.post('http://47.97.82.72:8081/user/setHeadPortrait', {
            //     data: {
            //         photo: imageUrl.value
            //     }
            // }).then(function(res){
            //     console.log(res)
            // })
            
            uploadImg(imageUrl.value).then(response => {
                console.log(response)
            })

        }



        /* 图片点击函数 */
        // const selectImg = function(){
        //     document.getElementById('filed').click()
        // }
        /*----- 以下为常用处理代码 ------*/
        const handleAvatarSuccess = (res, file) => {
            console.log(URL.createObjectURL(file.raw))
            imageUrl.value = URL.createObjectURL(file.raw);
            
        }
    


        onMounted(() => {   //挂载完成时
            GetMes().then(response => {
                let message = response.data.data.userInfo
                ruleForm.username = message.username
                ruleForm.email = message.email
                ruleForm.location = message.credit
                ruleForm.phoneNum = message.registerTime
                console.log(response)
                // console.log(message)
            }).catch(error => {
                console.log(error)
            })
        })

        return {
            model,
            ruleForm,
            toggleMenu,
            imageUrl,
            handleAvatarSuccess,
            myHeaders,
            myToken,
            doupload,
            before_Upload
        }
    }
}
</script>

<style lang="scss" scoped>
.mine-top {
    color: rgb(170, 56, 30);
    font-size: 40px;
    text-align: center;
    margin: 50px 0;
}
.mine-main {
    div {
        margin: 10px 0;
    }
    a {
        display: inline-block;
        width: 10%;
        margin: 0 0 0 20%;
        color: rgb(154, 154, 154);
        font-size: 22px;
        font-family: Courier New;
    }
    .el-input {
        width: 40%;
    }
}
.mine-exh {
    div {
        margin: 52px 0;
    }
    div span {
        font-family: Courier New;
        margin-left: 10%;
        color: rgb(170, 56, 30);
    }
}
.pic {
    float: right;
    position: absolute;
    right: 250px;
     .avatar-uploader {
            border: 1px dashed black;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed black;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
}
</style>