<template>
    <view :style="warpCss">
        <view class="px-[30rpx] pt-[30rpx] box-border pb-[30rpx]" :class="{ '!pb-[120rpx]': diyComponent.isShowAccount }">
            <!-- #ifdef MP-WEIXIN -->
            <view :style="navbarInnerStyle"></view>
            <!-- #endif -->
            <view v-if="info" class="flex items-center">
                <!-- 唤起获取微信 -->
                <u-avatar :src="img('https://index.xiaoluwebsite.xyz/assets/logo2-BEt-XeZG.png')" :size="'110rpx'"
                    leftIcon="none" :default-url="img('https://v6.site.niucloud.com/static/resource/images/default_headimg.png')"
                    @click="clickAvatar" />
                <view class="ml-[20rpx] flex-1">
                    <view class="text-[#ffffff] flex items-baseline flex-wrap"
                        :style="{ color: diyComponent.textColor }">
                        <view class="text-[32rpx] truncate max-w-[320rpx] font-500 leading-[38rpx]">{{ info.companyName
                            }}</view>

                    </view>
                    <view class="text-[#666] text-[24rpx] font-400 leading-[28rpx] mt-[14rpx]"
                        :style="{ color: diyComponent.uidTextColor }">手机号:18571599334</view>
                </view>
                <text @click="redirect({ url: '/app/pages/setting/index' })"
                    class="nc-iconfont nc-icon-shezhiV6xx1 text-[38rpx] ml-[10rpx]"
                    :style="{ color: diyComponent.textColor }"></text>
            </view>
            <view v-else class="flex items-center">
                <u-avatar :src="img('static/resource/images/default_headimg.png')" :size="'100rpx'" @click="toLogin" />
                <view class="ml-[20rpx] flex-1" @click="toLogin">
                    <view class="text-[32rpx] font-500 leading-[38rpx]" :style="{ color: diyComponent.textColor }">
                        登录/注册</view>
                </view>
                <view @click="redirect({ url: '/app/pages/setting/index' })">
                    <text class="nc-iconfont nc-icon-shezhiV6xx1 text-[38rpx] ml-[10rpx]"
                        :style="{ color: diyComponent.textColor }"></text>
                </view>
            </view>
            <view class="flex mt-[40rpx] items-center" v-if="diyComponent.isShowAccount">
                <view class="text-center w-[33.333%] flex-shrink-0">
                    <view class="text-[36rpx] mb-[20rpx] font-500 price-font">
                        <view :style="{ color: diyComponent.textColor }">0</view>
                    </view>
                    <view class="text-[22rpx] font-400">
                        <view :style="{ color: diyComponent.accountTextColor }">剩余额度</view>
                    </view>
                </view>
                <view class="text-center w-[33.333%] flex-shrink-0">
                    <view class="text-[36rpx] mb-[20rpx] font-500 price-font">
                        <view :style="{ color: diyComponent.textColor }">0</view>
                    </view>
                    <view class="text-[22rpx] font-400">
                        <view :style="{ color: diyComponent.accountTextColor }">部门额度</view>
                    </view>
                </view>
                <view class="text-center w-[33.333%] flex-shrink-0">
                    <view class="text-[36rpx] mb-[20rpx] font-500 price-font">
                        <view :style="{ color: diyComponent.textColor }">0</view>
                    </view>
                    <view class="text-[22rpx] font-400">
                        <view :style="{ color: diyComponent.accountTextColor }">优惠券</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import useMemberStore from '@/stores/member'
import { useLogin } from '@/hooks/useLogin'
import { getMyCouponCount } from '@/addon/shop/api/coupon'
import { img, isWeixinBrowser, redirect, urlDeconstruction, moneyFormat } from '@/utils/common'
import { wechatSync } from '@/app/api/system'
import useDiyStore from '@/app/stores/diy'
import useSystemStore from "@/stores/system";

const props = defineProps(['component', 'index', 'global']);
const systemStore = useSystemStore()
const diyStore = useDiyStore();

const diyComponent = computed(() => {
    if (diyStore.mode == 'decorate') {
        return diyStore.value[props.index];
    } else {
        return props.component;
    }
})

const warpCss = computed(() => {
    let style = '';
    if (diyComponent.value.componentStartBgColor) {
        if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
        else style += 'background-color:' + diyComponent.value.componentStartBgColor + ';';
    }
    if (diyComponent.value.bgUrl) {
        style += 'background-image:url(' + img(diyComponent.value.bgUrl) + ');';
        style += 'background-size: 100%;';
        style += 'background-repeat: no-repeat;';
    }
    if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
    if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';

    return style;
})

const memberStore = useMemberStore()

// #ifdef H5
const { query } = urlDeconstruction(location.href)
if (query.code && isWeixinBrowser()) {
    setTimeout(() => {
        wechatSync({ code: query.code }).then(res => {
            memberStore.getMemberInfo()
        })
    }, 1500)
}
// #endif

const info = computed(() => {
    // 装修模式
    if (diyStore.mode == 'decorate') {
        return {
            companyName: '公司名称'
        }
    } else {
        getMyCouponCountFn()
        console.log('info', memberStore.info)
        const data = memberStore ? memberStore.info : null
        return data;
    }
})



const toLogin = () => {
    redirect({ url: '/app/pages/auth/login', param: { type: 'username' } })

}

const infoFillRef: any = ref(false)
const clickAvatar = () => {
    // #ifdef MP-WEIXIN
    infoFillRef.value.show = true
    // #endif

    // #ifdef H5
    if (isWeixinBrowser()) {
        useLogin().getAuthCode({ scopes: 'snsapi_userinfo' })
    } else {
        redirect({ url: '/app/pages/member/personal' })
    }
    // #endif
}

const couponCount = ref(0)
const getMyCouponCountFn = async () => {
    // try {
    //     const res = await getMyCouponCount({ status: 1 })
    //     couponCount.value = res.data
    // } catch (e) {
    //     couponCount.value = 0
    // }

}

// 导航栏内部盒子的样式
const navbarInnerStyle = computed(() => {
    let style = '';
    // 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
    // #ifdef MP
    if (props.global.topStatusBar.isShow == false) {
        style += 'height:' + systemStore.menuButtonInfo.height + 'px;';
        style += 'padding-top:' + systemStore.menuButtonInfo.top + 'px;';
    }
    // #endif
    return style;
})
</script>

<style lang="scss" scoped></style>
