<!--
 * @Author: PoJun
 * @Date: 2023-09-28 10:38:11
 * @LastEditors: PoJun
 * @LastEditTime: 2024-01-04 17:40:09
 * @Message: 个人中心
-->
<template>
    <view class="mine">
        <uv-navbar :border="false" :bgColor="getNavStyle" :placeholder="true">
            <view slot="left"></view>
            <view slot="center" class="mine-bar" :style="[getTitleStyle]">
                <uv-avatar :src="getImageUrl" class="uv-avatar" size="34"></uv-avatar>
                <view v-if="vuex_userInfo" class="mine-bar-name">
                    {{ vuex_userInfo.otherName ? vuex_userInfo.otherName : "昵称未设置" }}
                </view>
                <view v-else class="mine-bar-name">未登录</view>
            </view>
        </uv-navbar>

        <view class="mine-head">
            <view class="mine-head-inner">
                <view class="mine-head-avatar">
                    <uv-avatar :src="getImageUrl" size="76"></uv-avatar>
                </view>
                <view v-if="vuex_userInfo" class="mine-head-name">
                    {{ vuex_userInfo.otherName ? vuex_userInfo.otherName : "昵称未设置" }}
                </view>
                <view v-else class="mine-head-name">未登录</view>
            </view>
        </view>
        <view class="mine-cont">
            <template v-if="vuex_userInfo">
                <cols-container :list="managementTabs" :col="2" @click="tabClick"></cols-container>
            </template>

            <view class="mine-cont-circular">
                <uv-button
                    v-if="!vuex_userInfo"
                    type="info"
                    text="登录"
                    @click="toLogin"
                    :hairline="false"
                    plain
                    throttleTime="100"
                    :customStyle="{ border: 0 }"
                ></uv-button>
            </view>

            <view class="mine-cont-circular" v-if="vuex_userInfo" :key="'' + new Date()">
                <uv-cell-group :border="false">
                    <uv-cell
                        title="个人设置"
                        :isLink="true"
                        arrow-direction="right"
                        url="/subpkg/setting/my-info"
                        :border="false"
                        :cellStyle="{ padding: '15px' }"
                    ></uv-cell>
                    <uv-cell
                        v-if="vuex_userInfo.attr.BusinessRole || [1, 2].includes(vuex_userInfo.attr.auditState)"
                        title="角色认证"
                        :border="false"
                        :cellStyle="{ padding: '15px' }"
                        :value="vuex_userInfo.attr.auditState == 1 ? '审核中' : '已认证'"
                    ></uv-cell>
                    <uv-cell
                        v-else-if="[0, 3].includes(vuex_userInfo.attr.auditState)"
                        title="角色认证"
                        :isLink="true"
                        arrow-direction="right"
                        url="/subpkg/setting/authentication"
                        :border="false"
                        :cellStyle="{ padding: '15px' }"
                    ></uv-cell>
                    <uv-cell
                        v-if="vuex_userInfo.attr.BusinessRole == 'supplier'"
                        title="我的供应商信息"
                        :isLink="true"
                        arrow-direction="right"
                        url="/subpkg/home/supplier-detail"
                        :border="false"
                        :cellStyle="{ padding: '15px' }"
                    ></uv-cell>
                </uv-cell-group>
            </view>

            <view class="mine-cont-circular">
                <uv-cell-group :border="false">
                    <uv-cell
                        title="清除缓存"
                        :isLink="true"
                        arrow-direction="right"
                        :border="false"
                        :cellStyle="{ padding: '15px' }"
                        @click="clearCache"
                    ></uv-cell>
                    <uv-cell
                        title="版本查看"
                        :isLink="true"
                        arrow-direction="right"
                        url="/subpkg/setting/version"
                        :border="false"
                        :cellStyle="{ padding: '15px' }"
                    ></uv-cell>
                </uv-cell-group>
            </view>

            <view class="mine-cont-circular">
                <uv-cell-group :border="false">
                    <uv-cell
                        title="服务协议"
                        :isLink="true"
                        arrow-direction="right"
                        url="/subpkg/agreement/index?type=service"
                        :border="false"
                        :cellStyle="{ padding: '15px' }"
                    ></uv-cell>
                    <uv-cell
                        title="隐私协议"
                        :isLink="true"
                        arrow-direction="right"
                        url="/subpkg/agreement/index?type=privacy"
                        :border="false"
                        :cellStyle="{ padding: '15px' }"
                    ></uv-cell>
                </uv-cell-group>
            </view>

            <view class="mine-cont-circular" v-if="vuex_userInfo">
                <uv-cell-group :border="false">
                    <uv-cell
                        title="修改密码"
                        :isLink="true"
                        arrow-direction="right"
                        url="/subpkg/setting/update-psd"
                        :border="false"
                        :cellStyle="{ padding: '15px' }"
                    ></uv-cell>
                    <uv-cell
                        title="账号注销"
                        :isLink="true"
                        arrow-direction="right"
                        url="/subpkg/setting/cancel-account"
                        :border="false"
                        :cellStyle="{ padding: '15px' }"
                    ></uv-cell>
                </uv-cell-group>
            </view>

            <view class="mine-cont-circular">
                <uv-button
                    v-if="vuex_userInfo"
                    type="info"
                    text="退出"
                    @click="showActionSheet"
                    :hairline="false"
                    plain
                    throttleTime="100"
                    :customStyle="{ border: 0 }"
                ></uv-button>
            </view>
        </view>
    </view>
</template>

<script>
import { logoutApp } from "@/utils/utils.js";
import colsContainer from "@/components/cols-container/index";
export default {
    components: {
        colsContainer,
    },
    data() {
        return {
            scrollTop: 0,
            managementTabs: [
                { title: "待处理", icon: "todo", color: "#f9ae3d", route: "/subpkg/flow/index?index=0", mark: 0 },
                { title: "已处理", icon: "done", color: "#4076F4", route: "/subpkg/flow/index?index=1" },
            ],
        };
    },
    onLoad() {},
    onShow() {
        this.$store.dispatch("UPDATEAFFAIRINFO");
    },
    methods: {
        tabClick({ route }) {
            if (route) {
                uni.$uv.route(route);
            }
        },
        toLogin() {
            uni.$uv.route("/pages/login/index");
        },
        showActionSheet() {
            uni.showActionSheet({
                itemList: ["退出登录", "关闭应用"],
                success: res => {
                    if (res.tapIndex == 0) {
                        logoutApp(this);
                    } else if (res.tapIndex == 1) {
                        // #ifdef APP-PLUS
                        if (uni.$uv.os() === "ios") {
                            // plus.runtime.launchApplication({ action: "QUIT" });
                            plus.ios.import("UIApplication").sharedApplication().performSelector("exit");
                        } else {
                            plus.runtime.quit();
                        }
                        // #endif
                    }
                },
                fail: res => {
                    console.log(res.errMsg);
                },
            });
        },
        clearCache() {
            uni.showModal({
                title: "清除缓存",
                content: "此操作不会影响当前用户登录状态",
                success: res => {
                    if (res.confirm) {
                        uni.showLoading({ mask: true });
                        uni.$uv.sleep(2000).then(() => {
                            uni.hideLoading();
                            uni.$uv.toast("缓存清理成功");
                        });
                    }
                },
            });
        },
    },
    computed: {
        // 1. 滚动头部渐变出背景色
        // 2. 信息标签渐变透明
        getNavStyle() {
            if (this.scrollTop >= 50) {
                return "rgba(255,255,255,1)";
            } else {
                return `rgba(255,255,255,${this.scrollTop / 100})`;
            }
        },
        getTitleStyle() {
            let style = {};
            if (this.scrollTop >= 50) {
                style.opacity = 1;
                style.transform = "translateY(0)";
            } else {
                style.opacity = 0;
                style.transform = "translateY(-100%)";
            }
            style.transition = "all 0.3s";
            return style;
        },
        getImageUrl() {
            if (this.vuex_userInfo?.imageLogo) {
                return process.env.VUE_APP_BASE_API + `/files/${this.vuex_userInfo?.imageLogo}/show_image`;
            } else {
                return "img";
            }
        },
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    async onPullDownRefresh() {
        if (this.vuex_userInfo) {
            await this.$store.dispatch("UPDATELOGININFO");
            uni.$uv.sleep(300).then(() => {
                uni.stopPullDownRefresh();
            });
        } else {
            uni.stopPullDownRefresh();
        }
    },
    watch: {
        vuex_affairNum: {
            immediate: true,
            handler: function (val) {
                this.managementTabs[0].mark = val;
            },
        },
    },
};
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-grey;
}
.mine {
    &-bar {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
        flex: 1;
        &-name {
            margin-left: 5px;
            font-size: 14px;
        }
    }
    &-head {
        padding: 0 25rpx;
        position: relative;
        /* 用px, 在动态计算样式的时候方便 */
        margin-top: 50px;

        &-inner {
            height: 100px;
            border-radius: 16rpx;
            background-color: $uni-bg-color;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        &-avatar {
            position: absolute;
            top: -35px;
            left: 0;
            right: 0;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        &-name {
            text-align: center;
            margin-top: 40rpx;
            font-size: 18px;
        }
    }

    &-cont {
        margin: 25rpx 25rpx 0;
        &-circular {
            background-color: #fff;
            border-radius: 14rpx;
            overflow: hidden;
            margin-bottom: 20rpx;
        }
    }
}
</style>
