<template>
    <div class="user-center">
        <div class="hd">
            <p class="date-wrapper">{{ yymmdd }} {{ weekDay }}</p>
            <div class="weather-wrapper">
                <iframe
                    width="200"
                    scrolling="no"
                    height="55"
                    frameborder="0"
                    allowtransparency="true"
                    src="https://i.tianqi.com?c=code&id=35&color=#FFF&icon=5&num=5&site=12"
                ></iframe>
            </div>
            <div class="user-img">
                <img :src="headImg" />
            </div>
        </div>
        <div class="bd">
            <div class="user-info">
                <div class="user-object">
                    <h4 class="h4 cle">
                        {{ userInfo.REALNAME }}
                        <el-button type="text" class="pull-right btn" @click="visibleDialog = true">
                            <i class="el-icon-edit"></i>
                        </el-button>
                    </h4>
                    <p>{{ userInfo.DUTY }}</p>
                    <p>
                        <i class="el-icon-mobile-phone"></i>
                        {{ userInfo.MOBILE }}
                    </p>
                    <p>
                        <i class="iconfont">&#xe60f;</i>
                        {{ userInfo.DEPARTMENTNAME }}
                    </p>
                    <p>
                        <i class="el-icon-timer"></i>
                        上次登陆时间：{{ userInfo.LASTVISIT }}
                    </p>
                </div>
            </div>
            <div class="calendar-wrapper scrollbar">
                <el-calendar v-model="newDate"></el-calendar>
            </div>
        </div>
        <edit-user-info :visible.sync="visibleDialog" :user-info="userInfo" @update="onUpdate"></edit-user-info>
    </div>
</template>

<script>
import * as dateUtil from '@/assets/utils/date'
import { getHeadImgDomain } from '@/assets/utils/host'
export default {
    name: 'UserCenter',
    components: {
        EditUserInfo: () => import('./EditUserInfo')
    },
    data () {
        return {
            newDate: new Date(),
            visibleDialog: false,
            userInfo: {
                REALNAME: '',
                GENDER: '',
                MOBILE: '',
                BIRTHDAY: '',
                QICQ: '',
                EMAIL: '',
                HOMEADDRESS: '',
                MyProperty: '',
                COMPANYNAME: '',
                TITLE: '',
                DUTY: '',
                Photo: '',
                LASTVISIT: '',
                DEPARTMENTNAME: ''
            }
        }
    },
    computed: {
        yymmdd () {
            return dateUtil.currentTime(new Date(), 1, 2)
        },
        weekDay () {
            return dateUtil.getWeekName()
        },
        headImg () {
            return getHeadImgDomain(this.userInfo.Photo)
        }
    },
    methods: {
        getTeacherSelfInfo () {
            this.$api.commonApi.getTeacherSelfInfo().then(res => {
                this.$handleResponse(res).then(data => {
                    this.userInfo = data
                    this.$emit('company-name', data.COMPANYNAME)
                })
            })
        },
        onUpdate () {
            this.visibleDialog = false
            this.getTeacherSelfInfo()
        }
    },
    created () {
        this.getTeacherSelfInfo()
    }
}
</script>

<style lang="stylus" scoped>
>>> .el-calendar-table .el-calendar-day
    height auto
    text-align center
.user-center
    height 100%
    display flex
    flex-direction column
    overflow hidden
.hd
    flex-shrink 0
    position relative
    height 140px
    background-image url('./../../../../assets/images/desktop_user.jpg')
    background-repeat no-repeat
    background-size cover
    display flex
    flex-direction column
    align-items flex-end
    justify-content space-around
    padding 15px 20px
    color #fff
    .weather-wrapper
        position relative
        &:after
            content ''
            position absolute
            top 0
            right 0
            left 0
            bottom 0
            z-index 10
            background transparent
    .date-wrapper
        font-size 18px
.bd
    flex 1
    border-width 0 1px 1px 1px
    border-style solid
    border-color #DCDFE6
    display flex
    flex-direction column
    overflow hidden
.user-info
    flex-shrink 0
    position relative
    padding 15px 15px 15px 122px
    min-height 130px
.user-img
    position absolute
    bottom -60px
    left 15px
    width 90px
    height 90px
    padding 4px
    border-radius 50%
    background #fff
    overflow hidden
    box-shadow 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    img
        width 82px
        height 82px
        border-radius 50%
        vertical-align middle
.user-object
    line-height 26px
    .h4
        color #333
        font-size 16px
.btn
    width 32px
    text-align center
    font-size 18px
    padding 0 !important
.calendar-wrapper
    flex 1
    overflow-y auto
</style>
