<template>
    <app-layout v-model="safePt" btnType="unset" headerBackgroundColor="unset" :showHeader="false">
        <view class="member-container">
            <view class="immerse-image">
                <image class="image" :src="backgroundImage" mode="aspectFill" />
            </view>
            <view class="immerse-main" :style="{ paddingTop: safePt + utils.rpx2px(20) + 'px' }">
                <view class="head">
                    <block v-if="isLogin">
                        <view class="headimg">
                            <image class="image" :src="userInfo.worker.avatar" mode="aspectFill" />
                        </view>
                        <view class="detail">
                            <view class="name">
                                <text>{{ userInfo.worker.name }}</text>
                                <text class="type" :style="{ color: typeTextColor }">{{ typeText }}</text>
                            </view>
                            <view class="line id">ID：{{ userInfo.worker.id }}</view>
                            <view class="line">注册时间：{{ userInfo.createTime }}</view>
                        </view>
                        <view class="accept-switch">
                            <widget-switch
                                v-model="acceptState"
                                :color="['#ffffff', '#ffffff']"
                                :size="54"
                                :open="acceptState"
                                @input="setServiceState"
                            />
                            <text class="current-state">{{ acceptState ? "正在" : "暂停" }}接单</text>
                        </view>
                    </block>
                    <block v-else>
                        <view class="login-tips" @click="utils.toPage('/pages/auth/auth')">
                            <view class="title"> 立即登录 </view>
                            <view class="desc">需要登录后操作</view>
                        </view>
                    </block>
                </view>
                <view v-if="isLogin" class="order-desc">
                    <view class="service-data">
                        <view class="section-text">
                            <text>服务：</text>
                            <text class="num">{{ serviceData.times }}</text>
                            <text>次</text>
                        </view>
                        <view class="section-text">
                            <text>好评率：</text>
                            <text class="num">{{ serviceData.favorableRate }}</text>
                            <text>%</text>
                        </view>
                        <view class="section-text">
                            <text>评分：</text>
                            <text class="num">{{ serviceData.grade }}</text>
                        </view>
                    </view>
                    <view class="balance-box">
                        <view class="balance-section">
                            <text class="title">可提现余额（元）</text>
                            <text class="num">{{ utils.formatNumber(serviceData.disposableBalance, 2) }}</text>
                        </view>
                        <view class="balance-section">
                            <text class="title">反馈期余额（元）</text>
                            <text class="num">{{ utils.formatNumber(serviceData.FreezeBalance, 2) }}</text>
                        </view>
                    </view>
                </view>
                <view class="common-form-widget-group">
                    <view class="widget-item" @click="toPage('/pages/member/cash/withdraw')">
                        <text class="title limit-line clamp-1">我要提现</text>
                        <text class="iconfont icon-jinru"></text>
                    </view>
                    <view class="widget-item" @click="toPage('/pages/detail/detail?type=care')">
                        <text class="title limit-line clamp-1">服务无忧保</text>
                        <text class="iconfont icon-jinru"></text>
                    </view>
                    <view class="widget-item" @click="toPage('/pages/member/cash/withdraw-log')">
                        <text class="title limit-line clamp-1">提现记录</text>
                        <text class="iconfont icon-jinru"></text>
                    </view>
                    <view class="widget-item">
                        <text class="title limit-line clamp-1">明细</text>
                        <text class="iconfont icon-jinru"></text>
                    </view>
                </view>
                <view class="common-form-widget-group">
                    <view class="widget-item" @click="toPage('/pages/member/service-info')">
                        <text class="title limit-line clamp-1">设置服务信息</text>
                        <text class="iconfont icon-jinru"></text>
                    </view>
                    <view class="widget-item" @click="toPage('/pages/member/appraise')">
                        <text class="title limit-line clamp-1">我的评价</text>
                        <text class="iconfont icon-jinru"></text>
                    </view>
                    <view class="widget-item" @click="showService = true">
                        <text class="title limit-line clamp-1">在线客服</text>
                        <text class="iconfont icon-jinru"></text>
                    </view>
                    <view class="widget-item" @click="toPage('/pages/member/setting')">
                        <text class="title limit-line clamp-1">设置</text>
                        <text class="iconfont icon-jinru"></text>
                    </view>
                </view>
            </view>
        </view>
        <widget-modal v-show="showCarefreeModal" title="服务无忧保" @close="showCarefreeModal = false">
            <view class="modal-content-box">
                <rich-text :nodes="carefreeContent"></rich-text>
            </view>
        </widget-modal>
        <widget-service :showService="showService" @close="showService = false" />
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import WidgetSwitch from "@/components/widgets/switch";
import WidgetModal from "@/components/widgets/modal";
import WidgetService from "@/components/widgets/service";
import { mapGetters, mapState } from "vuex";
export default {
    name: "member",
    data() {
        return {
            utils: this.$utils,
            models: this.$models,
            timer: null,
            safePt: 0,
            backgroundImage: require("@/static/temp/1.png"),
            acceptState: false,
            typeText: "",
            typeTextColor: "",
            showService: false,
            showCarefreeModal: false,
            carefreeContent: "",
            serviceData: {
                times: 0,
                favorableRate: "0",
                grade: "0",
                disposableBalance: 0,
                FreezeBalance: 0,
            },
        };
    },
    components: {
        AppLayout,
        WidgetSwitch,
        WidgetModal,
        WidgetService,
    },
    computed: {
        ...mapGetters({
            isLogin: "user/isLogin",
            acceptOrder: "user/acceptOrder",
        }),
        ...mapState({
            userInfo: (state) => state.user.info,
            finishInfo: (state) => state.user.finishInfo,
        }),
    },
    onLoad() {},
    async onShow() {
        await this.$store.dispatch("user/info");
        if (this.isLogin) {
            if (!this.finishInfo) {
                this.$utils.toPage("/pages/member/service-info");
            }
            this.$models.user.serviceData().then((data) => {
                this.serviceData = data;
            });
            let [typeText, typeTextColor] = this.$models.worker.worketTypeText(this.userInfo.worker.type);
            this.typeText = typeText;
            this.typeTextColor = typeTextColor;
            this.acceptState = this.acceptOrder;
        }
    },
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        toPage(url) {
            if (!this.isLogin) {
                return this.$store.commit("user/showLoginModal", true);
            }
            this.$utils.toPage(url);
        },
        setServiceState() {
            this.$models.user.setServiceState().then(async () => {
                await this.$store.dispatch("user/info", true);
                this.acceptState = this.acceptOrder;
            });
        },
    },
};
</script>

<style lang="less" scoped>
.immerse-main {
    padding: 0 20rpx 20rpx;
}
.member-container {
    width: 100%;
}
.login-tips {
    width: 100%;
    text-align: center;
    color: #ffffff;
    margin-bottom: 50rpx;
    .title {
        font-size: 40rpx;
        font-weight: bold;
    }
    .desc {
        margin-top: 20rpx;
        font-size: 32rpx;
    }
}
.head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .headimg {
        .image {
            width: 132rpx;
            height: 132rpx;
            border-radius: 50%;
        }
    }
    .detail {
        width: 380rpx;
        color: #ffffff;
        letter-spacing: 2rpx;
        .name {
            font-size: 36rpx;
            line-height: 36rpx;
            font-weight: bold;
        }
        .type {
            display: inline-block;
            font-size: 28rpx;
            line-height: 28rpx;
            margin-left: 30rpx;
        }
        .line {
            font-size: 28rpx;
            line-height: 28rpx;
        }
        .line.id {
            margin: 12rpx 0 12rpx 0;
        }
    }
    .accept-switch {
        text-align: center;
        .current-state {
            font-size: 24rpx;
            font-weight: bold;
            color: #ffffff;
            line-height: 24rpx;
        }
    }
}
.order-desc {
    width: 100%;
    margin-top: 90rpx;
    background-color: #ffffff;
    .service-data {
        text-align: center;
        padding: 40rpx 0;
        box-sizing: border-box;
        border-bottom: 3rpx solid #efefef;
        .section-text {
            display: inline-block;
            margin: 0 22rpx;
            font-size: 24rpx;
            font-weight: bold;
            color: #333333;
        }
        .num {
            font-size: 36rpx;
            color: #8b9aeb;
        }
    }
    .balance-box {
        width: 100%;
        box-sizing: border-box;
        padding: 30rpx 0;
        display: flex;
        justify-content: space-between;
        .balance-section {
            width: 50%;
            text-align: center;
            color: #333333;
        }
        .title {
            font-size: 24rpx;
            line-height: 24rpx;
        }
        .num {
            display: block;
            font-size: 36rpx;
            line-height: 36rpx;
            margin-top: 30rpx;
        }
    }
}
.common-form-widget-group {
    padding: 14rpx 22rpx;
    background-color: #ffffff;
    margin-top: 22rpx;
    .title {
        display: flex;
        align-items: center;
    }
    .title::before {
        display: inline-block;
        content: "";
        width: 12rpx;
        height: 27rpx;
        background: #8b9aeb;
        margin-right: 14rpx;
    }
}
.modal-content-box {
    max-height: 400rpx;
    overflow-y: scroll;
}
</style>