<template>
    <app-layout title="我的" btnType="unset">
        <view class="member-header">
            <block v-if="isLogin">
                <view class="headimg">
                    <image
                        v-if="!userInfo.avatar"
                        class="img-src"
                        :src="require('@/static/temp/member/1.png')"
                        mode="aspectFill"
                    />
                    <image v-else @click="updateInfoModal = true" class="img-src" :src="userInfo.avatar" mode="aspectFill" />
                </view>
                <view class="member-desc">
                    <text class="nickname">{{ userInfo.nickname || "微信用户" }}</text>
                    <view class="mobile">
                        <text class="text">{{ userInfo.mobile }}</text>
                    </view>
                </view>
            </block>
            <block v-else>
                <view class="member-desc">
                    <text class="nickname">微信用户</text>
                    <view class="mobile">
                        <text class="text">请登录后继续</text>
                    </view>
                </view>
            </block>
        </view>
        <view class="menu-container">
            <view class="common-form-widget-group">
                <view class="widget-item" @click="utils.toPage('/pages/address/address?openType=list')">
                    <text class="iconfont icon-dingwei icon"></text>
                    <text class="title">我的地址</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item" @click="utils.toPage('/pages/member/complaint')">
                    <text class="iconfont icon-tousu icon"></text>
                    <text class="title">意见投诉</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item" @click="showService = true">
                    <text class="iconfont icon-kefufill icon"></text>
                    <text class="title">联系客服</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item" @click="utils.toPage('/pages/member/setting')">
                    <text class="iconfont icon-shezhixitongshezhigongnengshezhishuxing icon"></text>
                    <text class="title">设置</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
            </view>
            <view class="common-form-widget-group">
                <view class="widget-item">
                    <text class="iconfont icon-gongren icon"></text>
                    <text class="title">我是师傅</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item" @click="utils.toPage('/pages/service/other/project')">
                    <text class="iconfont icon-cailiaogongcheng icon"></text>
                    <text class="title">工程安装</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
                <view class="widget-item" @click="utils.toPage('/pages/service/other/business')">
                    <text class="iconfont icon-qiye icon"></text>
                    <text class="title">企业安装合作</text>
                    <text class="iconfont icon-jinru more"></text>
                </view>
            </view>
        </view>
        <widget-service :showService="showService" @close="showService = false" />
        <widget-modal v-show="updateInfoModal" title="基础信息" @close="updateInfoModal = false" :showClose="false">
            <view class="userinfo-box">
                <!-- #ifdef MP-WEIXIN -->
                <button open-type="chooseAvatar" class="avatar" @chooseavatar="uploadAvatar">
                    <image
                        v-if="!updateInfo.avatar"
                        class="image"
                        :src="require('@/static/temp/member/1.png')"
                        mode="aspectFill"
                    />
                    <image v-else class="image" :src="updateInfo.avatar" mode="aspectFill" />
                </button>
                <!-- #endif -->
                <!-- #ifdef H5 -->
                <button class="avatar" @click="uploadAvatar">
                    <image
                        v-if="!updateInfo.avatar"
                        class="image"
                        :src="require('@/static/temp/member/1.png')"
                        mode="aspectFill"
                    />
                    <image v-else class="image" :src="updateInfo.avatar" mode="aspectFill" />
                </button>
                <!-- #endif -->
                <view class="nickname">
                    <input
                        class="input"
                        v-model="updateInfo.nickname"
                        type="nickname"
                        placeholder="请输入昵称"
                        placeholder-class="input-placeholder"
                        @blur="setNickname"
                    />
                </view>
                <view class="save-btn" @click="submitUserInfo"> 保存 </view>
            </view>
        </widget-modal>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import WidgetService from "@/components/widgets/service";
import WidgetModal from "@/components/widgets/modal";
import { mapGetters, mapState } from "vuex";
export default {
    name: "member",
    data() {
        return {
            utils: this.$utils,
            showService: false,
            updateInfoModal: false,
            updateInfo: {
                avatar: "",
                nickname: "",
            },
        };
    },
    components: {
        AppLayout,
        WidgetService,
        WidgetModal,
    },
    computed: {
        ...mapState({
            userInfo: (state) => state.user.info,
        }),
        ...mapGetters({
            isLogin: "user/isLogin",
        }),
    },
    onLoad() {},
    async onShow() {
        await this.$store.dispatch("user/info");
        if (this.isLogin) {
            if (!this.userInfo.nickname || !this.userInfo.avatar) {
                this.updateInfoModal = true;
            }
            this.updateInfo = {
                avatar: this.userInfo.avatar,
                nickname: this.userInfo.nickname,
            };
        }
    },
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        /**
         * 头像
         */
        uploadAvatar(e) {
            // #ifdef MP-WEIXIN
            this.$models.system.upload(e.detail.avatarUrl).then((response) => {
                this.updateInfo.avatar = response.img;
            });
            // #endif
            // #ifdef H5
            this.$utils.chooseImage(1).then((tempFiles) => {
                tempFiles.forEach((item) => {
                    this.$models.system.upload(item.path).then((response) => {
                        this.updateInfo.avatar = response.img;
                    });
                });
            });
            // #endif
        },
        /**
         * 昵称
         */
        setNickname(e) {
            this.updateInfo.nickname = e.detail.value;
        },
        /**
         * 保存信息
         */
        submitUserInfo() {
            this.$models.user
                .save({
                    avatar: this.updateInfo.avatar,
                    user_nickname: this.updateInfo.nickname,
                })
                .then((msg) => {
                    this.$store.dispatch("user/info", true);
                    this.updateInfoModal = false;
                    this.$utils.toast(msg);
                });
        },
    },
};
</script>

<style lang="less" scoped>
.member-header {
    width: 100%;
    height: 286rpx;
    background-color: #8c9bec;
    padding: 74rpx 40rpx 0 40rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    .headimg {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        overflow: hidden;
        .img-src {
            width: 100%;
            height: 100%;
        }
    }
    .member-desc {
        width: 560rpx;
        height: 110rpx;
        box-sizing: border-box;
        padding-left: 40rpx;
        .nickname {
            font-size: 30rpx;
            font-weight: bold;
            color: #ffffff;
            letter-spacing: 1rpx;
            line-height: 30rp;
        }
    }
    .mobile {
        width: 100%;
        margin-top: 20rpx;
        .text {
            font-size: 36rpx;
            font-weight: bold;
            line-height: 36rpx;
            letter-spacing: 1rpx;
            color: #ffffff;
        }
    }
}
.menu-container {
    position: relative;
    top: -72rpx;
    width: 670rpx;
    margin: 0 auto;
}
.common-form-widget-group {
    margin-bottom: 30rpx;
    padding: 24rpx 0;
    background-color: #ffffff;
    .widget-item {
        margin-top: 0;
        padding: 30rpx 40rpx;
        line-height: 35rpx;
        .title {
            padding: 30rpx 90rpx;
        }
        .icon,
        .more {
            top: 28rpx;
        }
        .icon {
            font-size: 28rpx;
        }
        .icon.icon-dingwei {
            font-size: 35rpx;
        }
        .icon.icon-cailiaogongcheng {
            font-size: 28rpx;
        }
        .icon.icon-qiye {
            font-size: 28rpx;
        }
        .icon.icon-tousu {
            font-size: 35rpx;
        }
        .icon.icon-kefufill {
            font-size: 35rpx;
        }
        .icon.icon-shezhixitongshezhigongnengshezhishuxing {
            font-size: 35rpx;
        }
        .icon.icon-gongren {
            font-size: 35rpx;
        }
    }
}
.userinfo-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .avatar {
        width: 200rpx;
        height: 200rpx;
        overflow: hidden;
        border-radius: 50%;
        border: 2rpx solid #eeeeee;
        .image {
            width: 100%;
            height: 100%;
        }
    }
    button.avatar {
        padding: 0;
        background-color: unset;
    }
    button.avatar::after {
        border: 0;
    }
    .nickname {
        width: 300rpx;
        margin: 20rpx 0;
        .input {
            border: 2rpx solid #e0e0e0;
            font-size: 28rpx;
            padding: 10rpx 20rpx;
        }
    }

    .save-btn {
        width: 300rpx;
        height: 68rpx;
        line-height: 68rpx;
        text-align: center;
        font-size: 32rpx;
        color: #ffffff;
        background-color: #7286f1;
        margin-top: 15rpx;
    }
}
</style>