<!-- 店铺 客服 收藏 支付 -->
<template>
    <view class="jy-shop-service bfff df aic jcsa ptb20" :style="{ bottom, width }">
        <!-- 店铺 客服 收藏  -->
        <view class="jy-service-item df fdr aic">
            <view @click="fn[item.name]()" class="jy-service-icon df jcc fdc aic mlr10" v-for="(item, index) in list"
                :key="index">
                <image :src="item.icon" mode="widthFix"></image>
                <view class="f24 c999 mt10">{{ item.text }}</view>
            </view>
        </view>

        <!-- 订单弹窗按钮 -->
        <view class="jy-service-btn df fdc jcc aic">
            <!-- 价格 -->
            <view class="jy-price cfff f26">￥ <span class="f32">{{ 9999 }}</span></view>
            <!-- 会员优势 支付-->
            <view class="jy-vip f24" style="color: #FFEBBD;" @click="payOpen">
                <text>会员支持先用后付</text>
                <text>去购买</text>
            </view>
        </view>
        <!-- 立即支付弹窗 -->
        <JyPaypPOpup ref="payPopup"></JyPaypPOpup>
    </view>
</template>
<script setup>
import { ref, inject } from 'vue'
import store from '@/static/store.png';
import heibianStar from '@/static/heibian-star.png';
import customerService from '@/static/customer-service.png';
const { checkLink } = inject('util');
import JyPaypPOpup from '../jy-pay-popup';

import { bottomSafeAreaHeight, screenWidth, screenHeight } from '@/components/public/Mixins.js'
import {
    shoppingCart
} from '@/api/shop'
import { useStore } from 'vuex'
const { userinfo } = useStore().state
const props = defineProps({
    // 商品信息
    commodityInformation: {
        type: Object,
        default: () => ({})
    },
    // 是否显示收藏图标
    isShowFavorites: {
        type: Boolean,
        default: false
    },
    // 是否显示客服图标
    isShowCustomerService: {
        type: Boolean,
        default: false
    },
    // 是否显示店铺图标
})

const width = ref(screenWidth())
const bottom = ref(bottomSafeAreaHeight())
const payPopup = ref(null)
const list = ref([{
    name: 'store',
    icon: store,
    text: '店铺'
}, {
    name: 'customerService',
    icon: customerService,
    text: '客服'
}, {
    name: 'heibianStar',
    icon: heibianStar,
    text: '收藏'
}])
const fn = {
    store() {
        checkLink('pages/shop/store/index')
    },
    customerService() {
        checkLink('pages/news/question-answer/index')
    },
    async heibianStar() {
        try {
            if (!userinfo) {
                return showToastAndRedirect('请先登录', 'none', () => {
                    uni.heibianStar
                    checkLink('pages/login/loginPhone')
                })
            }
            console.log('====================================', props);
            console.log('商品收藏成功', {
                storeId: props.commodityInformation.productId,
                userId: userinfo.userId
            });
            console.log('====================================');
            const res = await shoppingCart.add({
                productId: props.commodityInformation.productId,
                userId: userinfo.userId
            })
            if (res.code === 200) {
                // 提示收藏成功 
                showToastAndRedirect('收藏成功', 'success')
            }
            emit('heibianStar')
        } catch (error) {

        }
    }
}
const payOpen = () => {
    payPopup.value.open()
}
</script>
<style scoped lang="scss">
//固定在底部
.jy-shop-service {
    position: fixed;

    .jy-service-icon {
        image {
            width: 36rpx;
            height: 36rpx;
        }
    }

    .jy-service-btn {
        width: 462rpx;
        height: 76rpx;
        border-radius: 10rpx;
        background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
    }
}

.jy-pay-popup {
    border-radius: 20px 20px 0px 0px;
}
</style>