<template>
    <view class="site-detail">
        <!-- 店铺图片 -->
        <image @click="shopImgClick(siteItem)" :src="baseImageUrl + siteItem.imgUrl" class="shop-image" :class="siteItem.isFiveGoatStores?'shop-imageBig':''"></image>
        <view class="shop-introduce">
            <view class="shop-introduce-title">
                <text>{{ siteItem.name }}</text>
                <text class="navi-text" @click="handleNavigate">
                    <text v-if="siteItem.distance">{{ siteItem.distance }}KM</text>
                    [ {{ $t("home.navigate") }} ]
                </text>
            </view>
            <view class="shop-region">
                <view class="left-wrap">
                    <view class="text-wrap">
                        <uv-icon name="landmark" custom-prefix="custom-icon" size="12" color="#616e78"></uv-icon>
                        <text class="text">{{ siteItem.city }}</text>
                    </view>
                    <view class="text-wrap">
                        <uv-icon name="bus" custom-prefix="custom-icon" size="12" color="#616e78"></uv-icon>
                        <text class="text">
                            {{ siteItem.district }}
                            <text style="color: red;font-weight: bold;"
                                @click="handleWayfinding(2)"
                                v-if="siteItem.isStopCarGuide">
                                [ P ]
                            </text>
                        </text>
                    </view>
                </view>
                <text class="navi-text" @click="handleWayfinding(1)">[ {{ $t("home.wayfinding") }} ]</text>
            </view>
            <view class="shop-address">
                <textEllipsis style="width: 100%;" :address="siteItem.address"></textEllipsis>
            </view>
            <button @click="handleBook(siteItem.id)" class="shop-booknow">
                <!-- #ifdef MP-WEIXIN || H5 || APP-PLUS -->
                {{ $t("home.book") }}
                <!-- #endif -->
                <!-- #ifdef MP-XHS -->
                {{ $t("home.quote") }}
                <!-- #endif -->
            </button>
            <view @click="handleSite" v-if="siteItem.isFiveGoatStores" class="shop-booknow isFiveGoatStoresBtn">
               {{ state.isShow ?$t("common.Collapse"):$t("common.Expand") }} 五羊门店 {{ $t("common.OtherStores") }} <view class="isFiveGoatStoresBtn-icon" :class="state.isShow?'rotate':''"><uv-icon  name="arrow-down-fill" color="black" size="16"></uv-icon></view> 
            </view>
        </view>
    </view>
    <view class="site-detail isFiveGoatStoresSiteDetail" v-if="state.isShow" v-for="item in siteItem.siteList" :key="item.id">
        <image @click="shopImgClick(item)" :src="baseImageUrl + item.imgUrl" class="shop-image"></image>
        <view class="shop-introduce">
             <view class="shop-introduce-title">
                <text>{{ item.name }}</text>
            </view>
            <button @click="handleBook(item.id)" class="shop-booknow">
                   <!-- #ifdef MP-WEIXIN || H5 || APP-PLUS -->
                   {{ $t("home.book") }}
                   <!-- #endif -->
                   <!-- #ifdef MP-XHS -->
                   {{ $t("home.quote") }}
                   <!-- #endif -->
               </button>
        </view>
    </view>
     <view v-if="state.isShow" class="closeList" @click="handleSite">
             {{ $t("common.Collapse") }} 五羊店 <uv-icon name="arrow-up-fill" color="black" size="20"></uv-icon>
    </view>
</template>

<script setup>
import { baseImageUrl, isH5, isXiaohongshu, AppId,envVersion } from "@/config/index.js";
import { h5GoWx, jumpToSc } from "@/utils/common.js";
import { useMainStore } from "@/store/index.js";
import { ref } from "vue";
const { storeState } = useMainStore();

import { useI18n } from 'vue-i18n';
const { t } = useI18n();

import textEllipsis from "@/components/textEllipsis.vue";

const props = defineProps({
    siteItem: {
        type: Object,
        default: () => { },
    },
});
const state = ref({
        isShow:false,   
})
const emit = defineEmits(["showCode"]);
const handleSite = (e)=>{
    state.value.isShow = !state.value.isShow
}
// 点击路线跳转
const handleNavigate = () => {
    uni.openLocation({
        latitude: Number(props.siteItem.latitude),
        longitude: Number(props.siteItem.longitude),
        name: props.siteItem.name,
        address: props.siteItem.address,
    });
};

// 路径指引
const handleWayfinding = (type) => {
    uni.navigateTo({
        url: `/pages/book/navigate?id=${props.siteItem.id}&type=${type}`,
    });
};

const shopImgClick = (item) => {
    // 管理员展示门禁二维码操作
    if (storeState.userInfo?.userType == 2 || storeState.userInfo?.userType == 3) {
        // if (props.siteItem.accesscontrol == null || props.siteItem.accesscontrol == '') {
        //     uni.showToast({
        //         title: t('site.noAccessId'),
        //         icon: 'none'
        //     });
        // } else {
        //     // 开门权限只能是用户管理的门店
        //     if (storeState.userInfo?.siteList?.includes('*') || storeState.userInfo?.siteList?.includes(props.siteItem.id)) {
        //         emit("showCode", props.siteItem);
        //     } else {
        //         uni.showToast({
        //             title: t('site.noPermission'),
        //             icon: 'none'
        //         });
        //     }
        // }
         // 开门权限只能是用户管理的门店
         if (storeState.userInfo?.siteList?.includes('*') || storeState.userInfo?.siteList?.includes(item.id)) {
                emit("showCode", item);
            } else {
                uni.showToast({
                    title: t('site.noPermission'),
                    icon: 'none'
                });
            }
        return;
    }
    if (item.vrUrl) {
        uni.navigateTo({
            url: "/pages/webview/web?url=" + encodeURIComponent(item.vrUrl),
        });
    } else {
        handleBook(item.id);
    }
};

const handleBook = (id) => {
    // 如果是H5 
    if (isH5 && !isXiaohongshu) {
        h5GoWx()
        return;
    }
    // 根据ID跳到时昌
    let targetItem = jumpToSc.find((item) => item.id == id);
    if (targetItem) {
        uni.navigateToMiniProgram({
            appId: "wx3002eda9d707a977",
            path: `/pages/site/index?id=${targetItem.targetId}`,
        });
        return;
    }
    //如果是迷你仓订仓 正式 就跳转金刚迷你仓
    if(AppId=="wxb20921dfdd0b94f4" && envVersion === 'release'){
        uni.navigateToMiniProgram({
            appId: "wx3c4ab696101d77d1",
            path: `/pages/site/index?id=${id}`,
        });
        return;
    }
   
    uni.navigateTo({
        url: `/pages/site/index?id=${id}&name=${props.siteItem.name}`,
    });
};
</script>

<style lang="scss">
.site-detail {
    width: 750rpx;
    min-height: 258rpx;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.14);
    background-color: #fff;
    margin-top: 4rpx;
    padding: 24rpx 0;
    display: flex;
    align-items: center;
   
    &>.shop-image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx;
        margin: 0 30rpx;
    }
     &>.shop-imageBig{
        height: 250rpx;
    }

    &>.shop-introduce {
        width: 460rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        
        &>.shop-introduce-title {
            width: 100%;
            height: 54rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            &>text {
                font-weight: bold;
                font-size: 32rpx;
                line-height: 36rpx;
            }

            &>.shop-introduce-hot {
                padding: 6rpx 12rpx;
                border-radius: 4rpx;
                margin-left: 10rpx;
                background-color: #ff0000;
                text-align: center;
                font-size: 16rpx;
                font-weight: bold;
                letter-spacing: 1px;
                color: #ffffff;
            }

            .navi-text {
                color: #616e78;
                opacity: 0.8;
                font-size: var(--f22);
                margin-left: auto;
            }
        }

       

        &>.shop-region {
            width: 100%;
            flex-wrap: wrap;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: var(--f21);
            margin: 10rpx 0;

            .left-wrap {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                flex: 1;

                .text-wrap {
                    display: flex;

                    .text {
                        margin: 0 8rpx;
                        color: #616e78;
                        font-size: var(--f22);
                        font-weight: bold;
                        line-height: 1.4;
                    }
                }
            }

            .navi-text {
                font-size: var(--f22);
                font-weight: bold;
                color: red;
            }
        }

        &>.shop-address {
            width: 100%;
            flex-wrap: wrap;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: var(--f21);
        }

        &>.shop-booknow {
            width: 100%;
            height: 60rpx;
            line-height: 60rpx;
            background-color: var(--main-color);
            color: var(--text-color);
            font-size: 26rpx;
            font-weight: 700;
        }
        &>.isFiveGoatStoresBtn{
            display: flex;
            justify-content: center;
            background-color: var(--left-linear2);
            margin-top: 20rpx;
            text-align: center;
            border-radius: 8rpx;
            .isFiveGoatStoresBtn-icon{
                display: flex;
                align-items: center;
            }
            .rotate{
               transform: rotate(180deg);
            }
            
        }
    }
}

.isFiveGoatStoresSiteDetail{
    min-height: 150rpx;
    margin: 10rpx 0;
    // align-items: flex-start;
     .shop-image {
        width: 200rpx;
        height: 160rpx;
        object-fit: contain;
    }
    .shop-introduce-title{
            text {
                margin-bottom: 40rpx;
                }
            }
}
.closeList{
    display: flex;
    justify-content: center;
    padding: 10rpx 0;
}
</style>
