<template>
    <div class="container">
        <div class="list">
            <div class="item">
                <div class="title">头像</div>
                <div class="icon" :style="{backgroundImage:'url('+userInfo.icon+')'}"></div>
                <img class="more" src="@/assets/icon_inter.png" alt="">
                <input class="fileInput" type="file" accept="image/*" ref="input" @change="changeIcon" />
            </div>
            <router-link :to="{name:'changeNick',query:{type:'nickname'},params:{isNext:1}}" class="item">
                <div class="title">昵称</div>
                <div class="val">{{userInfo.nickname}}</div>
                <img class="more" src="@/assets/icon_inter.png" alt="">
            </router-link>
            <div class="item" @click="showSex=true">
                <div class="title">性别</div>
                <div class="val">{{userInfo.sex}}</div>
                <img class="more" src="@/assets/icon_inter.png" alt="">
            </div>
            <div class="item" @click="openPicker">
                <div class="title">生日</div>
                <div class="val" :class="[birthday==nowTime?'notSet':'']">{{birthday==nowTime?'选择生日':birthday}}</div>

                <yd-datetime start-year="1960" :end-year='nowYear' ref='picker' type="date" @callback.native="backTime" style=" display:none" v-model="birthday" slot="right"></yd-datetime>
                <img class="more" src="@/assets/icon_inter.png" alt="">
            </div>

        </div>

        <div class="list">
            <router-link :to="{name:'changeNick',query:{type:'phone'},params:{isNext:1}}" class="item">
                <div class="title">手机</div>
                <div class="val">{{userInfo.phone}}</div>
                <img class="more" src="@/assets/icon_inter.png" alt="">
            </router-link>
            <div class="item">
                <div class="title" style="flex-grow:0">微信</div>
                <div class="sub">ID:{{userInfo.wechatName}}</div>
                <yd-switch :disabled='switch1' v-model="switch1" style="min-width:1rem" color='#15A8AA'></yd-switch>
            </div>
        </div>

        <yd-actionsheet :items="myItems1" v-model="showSex" cancel="取消"></yd-actionsheet>
    </div>
</template>
<script>
import Upload from '../components/uploadavatar'
import GmButton from '@/components/Button'
import { mapState } from "vuex";
import moment from 'moment'
require('../crop')
export default {
    data() {
        return {
            birthday: '',
            nowTime: '',
            nowYear: '',
            showSex: false,
            myItems1: [
                {
                    label: '男',
                    callback: () => {
                        this.userInfo.sex = '男'
                        this.updateUser('sex', '男')
                    }
                },
                {
                    label: '女',
                    callback: () => {
                        this.userInfo.sex = '女'
                        this.updateUser('sex', '女')
                    }
                }
            ],
            switch1: true
        }
    },
    watch: {
        birthday() {
            // this.userInfo.birthday
            console.log(this.birthday)
            if (this.birthday != this.getTime(this.userInfo.birthday)) {
                this.updateUser('birthday', Date.parse(new Date(moment(this.birthday,'YYYY-MM-DD'))))
            }

        }
    },
    created() {
        this.birthday = this.getTime(this.userInfo.birthday)
        this.nowTime = moment().format('YYYY-MM-DD')
        this.nowYear = moment().format('YYYY')
        // setTimeout(()=>{

        // },50)

    },
    computed: {
        ...mapState(["userInfo", 'customerPhone', 'baseUrl']),
    },
    methods: {
        getTime(time) {
            return moment(time).format('YYYY-MM-DD')
        },
        getDateTime(time) {
            return new Date(time)
        },
        changeIcon() {
            var reader = new FileReader();
            reader.onload = function () {
                new Crop({
                    src: reader.result,
                    url: this.baseUrl + '/assets/uploadImg',
                    confirm: function (res) {
                        this.$store.commit('updateLoading', false)
                        if (res.success) {
                            // this.newUserInfo.icon = res.data[0]
                            // this.upDateInfo('icon', this.newUserInfo.icon)

                            this.userInfo.icon = res.error
                            this.updateUser('icon', res.error).then(() => {

                            })
                        }
                    }.bind(this)
                })
            }.bind(this);
            reader.readAsDataURL(this.$refs.input.files[0]);
        },
        openPicker() {
            this.$refs.picker.open();
        },
        getSex() {
            console.log('男')
        },
        backTime() {
            console.log(this.birthday)
        }
    },
    components: { GmButton }
}
</script>
<style lang="less" scoped>
.list {
    margin: 0.3rem 0.3rem 0;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.12rem;
    padding: 0 0.3rem;

    .item {
        display: flex;
        align-items: center;
        height: 1.2rem;
        position: relative;

        .title {
            font-size: 0.28rem;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            line-height: 0.4rem;
            flex-grow: 1;
            min-width: 0.7rem;
        }

        .icon {
            width: 0.72rem;
            height: 0.72rem;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 100%;
            min-width: 0.72rem;
        }

        .val {
            font-size: 0.32rem;
            color: rgba(18, 28, 38, 1);
            line-height: 0.44rem;
            &.notSet {
                font-size: 0.26rem;
                color: rgba(170, 172, 173, 1);
                line-height: 0.36rem;
            }
        }

        .more {
            width: 0.24rem;
            height: 0.24rem;
            margin-left: 0.2rem;
        }

        .sub {
            flex-grow: 1;
            font-size: 12px;
            color: rgba(170, 172, 173, 1);
        }

        .fileInput {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            opacity: 0;
        }

        &:not(:last-child) {
            border-bottom: 0.02rem solid #f2f4f5;
        }
    }
}

.container {
    background: rgba(242, 242, 242, 1);
}
</style>


