<template>
  <view>
    <view class="page">
        <view class="avatarBox">
            <image class="avatar" :src="userInfo.avatarUrl"/>
        </view>
        <view class="infoBox">
            <view class="infoItem name">
                <view class="label">昵称</view>
                <view class="input"><input type="text" v-model="userInfo.name"></view>
            </view>
            <view class="infoItem phone">
                <view class="label">手机</view>
                <view class="input">{{userInfo.phone}}</view>
            </view>
            <view class="infoItem sex">
                <view class="label">性别</view>
                <view class="input">
                    <view class="sexBox">
                        <view class="sex" v-for="(item,index) in sexList" :key="index" @click="selectedSex(item)">
                            <view :class="item.value===userInfo.sex?'checked':'nochecked'"></view>
                            <view class="checkLabel">{{item.label}}</view>
                        </view>
                    </view>

                </view>
            </view>
            <view class="infoItem birthday">
                <view class="label">生日</view>
                <view class="input">
                    <view class="birthdayBox">
                        <view class="text">{{birthdayComuted}}</view>
                        <view class="btn" @click="changeBirthday">修改</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="saveBtn">
            <button class="btn">保存</button>
        </view>
    </view>
    <!-- <button @click="exit">退出</button> -->

    <u-datetime-picker
      :show="timerShow"
      :maxDate="(new Date()).valueOf()"
      :minDate="-631094400"
      @close="timerShow = false"
      @confirm="choseTime"
      v-model="userInfo.birthday"
      mode="date"
    ></u-datetime-picker>

    <Modal 
        class="modal" 
        title="确认更换生日日期？" 
        content="生日只可修改一次，是否想要修改？" 
        :show="birthdayModalShow"
        @close="birthdayModalShow = false"
        @ok="openTimer"
    />
  </view>
</template>

<script>
import Modal from '@/components/Modal/index.vue'
export default {
    components: { Modal },
    computed:{
        birthdayComuted(){
            const {birthday} = this.userInfo
            const date = new Date(birthday)
            const years = date.getFullYear()
            const month = date.getMonth()+1
            const days = date.getDate()
            return years+'.'+month+'.'+days
        }
    },
    data() {
        return {
            timerShow: false,
            birthdayModalShow:false,
            value1: Number(new Date()),
            userInfo: {
                avatarUrl:'../../../static/touxiang.png',
                name:'脸脸',
                phone:'152****8932',
                sex:0,
                birthday:1658679810130
            },
            sexList:[
                {
                    'label':'男',
                    'value':0
                },
                {
                    'label':'女',
                    'value':1
                },
            ]
        }
    },
    onLoad(option) {
        const {info} = option
        const {avatarUrl,gender,nickName} = JSON.parse(decodeURIComponent(info))
        this.userInfo.avatarUrl = avatarUrl
        this.userInfo.sex = gender
        this.userInfo.name = nickName
        const phoneNumber = uni.getStorageSync('phoneNumber')
        this.userInfo.phone = phoneNumber.substr(0,3) + "****" + phoneNumber.substr(7)
    },
    methods:{
        choseTime(e) {
            this.userInfo.birthday = e.value
            this.timerShow = false
        },
        openTimer() {
            this.birthdayModalShow = false
            this.timerShow = true
        },
        changeBirthday(){
            this.birthdayModalShow = true
        },
        selectedSex(val){
            console.log(val)
            this.userInfo.sex = val.value
        },
        exit(){
            wx.exitMiniProgram({
                success:()=>{
                    console.log(123)
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
.page{
    background: #F8F8F8;
    height: 100vh;
}
    .avatarBox {
        z-index: 1;
        width: 100%;
        height: 320rpx;
        display: flex;
        align-items: center;
        background: #FFFFFF;

        .avatar {
            width: 200rpx;
            height: 200rpx;
            border-radius: 50%;
            margin: 0 auto;
        }
    }

    .infoBox {
        z-index: 1;
        background: #FFFFFF;
        overflow: hidden;
        padding: 0rpx 38rpx 0rpx 40rpx;
        margin-top: 24rpx;

        .infoItem {
            height: 96rpx;
            border-bottom: 1rpx solid #ECECEC;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .label {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }

            .input {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                margin-left: 136rpx;

                .sexBox {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    .sex {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        margin-right: 64rpx;

                        .checked {
                            width: 24rpx;
                            height: 24rpx;
                            background: url('../../../static/imgs/duigouxuanzhong.png') center center no-repeat;
			        		background-size:100% 100%;
                            margin-right: 16rpx;
                        }

                        .nochecked {
                            width: 24rpx;
                            height: 24rpx;
                            background: url('../../../static/imgs/weixuanzhong.png') center center no-repeat;
			        		background-size:100% 100%;
                            margin-right: 16rpx;
                        }

                        .checkLabel {
                            font-size: 28rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                        }
                    }
                }
                
                .birthdayBox {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .btn {
                        width: 96rpx;
                        height: 48rpx;
                        border-radius: 2rpx;
                        border: 2rpx solid #0050F6;
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        text-align: center;
                        color: #0050F6;
                        line-height: 48rpx;
                        margin-left: 192rpx;

                    }
                }


            }
        }

        .infoItem:last-child {
            border: 0rpx;
        }
    }

    .saveBtn {
        width: 670rpx;
        height: 96rpx;
        margin: 0 auto;
        margin-top: 32rpx;

        .btn {
           background: #0050F6;
           border-radius: 2px;
           font-size: 32rpx;
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: #FFFFFF;
        }
        .btn::before {
           background: #0050F6;
           border-radius: 2px;
           font-size: 32rpx;
           font-family: PingFangSC-Regular, PingFang SC;
           font-weight: 400;
           color: #FFFFFF;
        }
    }
</style>