<template>
    <div class="app-container home">
        <div class="page-content">
            <div ref="filterRef" style="width: 100%;padding: 14px 50px 0 0;position: relative;">
                <div class="title-bar" @click="back">
                    <svg-icon icon-class="back" style="width: 30px;height: 30px;margin-right: 20px;color: #000;" />
                    <span style="font-size: 32px;font-weight: 700;">{{ t('activity.shop') }}</span>
                </div>
                <div style="position: absolute;right: 0;top: 14px;display: flex;align-items: center;">
                    <div style="color: rgba(29, 192, 228, 1);font-size: 34px;font-weight: 700;line-height: 50px;">{{ point }}</div>
                    <div style="font-size: 18px;font-weight: 400;margin-left: 2px;">{{ t('activity.point') }}</div>
                    <router-link to="/shop/myOrder" v-slot="{ navigate }" >
                        <el-button class="shop-btn-large shop-dark" type="primary" @click="navigate" >{{ t('activity.myOrder') }}</el-button>
                    </router-link>
                </div>
            </div>
            <div class="goods-info" v-if="info">
                <div class="goods-img" style="margin: auto 0;">
                    <el-carousel height="339px" arrow="never">
                        <el-carousel-item v-for="(item, index) in info.imgs.split(',')" :key="index" >
                            <el-image class="goods-img" :src="item" />
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="goods-desc">
                    <div class="goods-name">{{ info.goods_name }}</div>
                    <el-descriptions :column="2" >
                        <template #extra>
                            <el-button text style="color: #fff;" type="primary" @click="openAddr" >
                                <svg-icon icon-class="addrMgr" style="width: 18px;height: 18px;margin-right: 10px;" />
                                <span style="font-size: 18px;font-weight: 400;color: #29BBE4;" >{{ t('activity.addrMgr') }}</span>
                            </el-button>
                        </template>
                        <el-descriptions-item :label="t('activity.country')">{{ addr.userCountry }}</el-descriptions-item>
                        <el-descriptions-item :label="t('activity.userCity')">{{ addr.userCity }}</el-descriptions-item>
                        <el-descriptions-item :label="t('activity.phone')">{{ addr.user_phone }}</el-descriptions-item>
                        <el-descriptions-item :label="t('activity.recipients')">{{ addr.user_name }}</el-descriptions-item>
                        <el-descriptions-item :span="2" :label="t('activity.addr')">{{ addr.userAddr }}</el-descriptions-item>
                    </el-descriptions>
                    <div style="display: flex;align-items: flex-end;width: 100%;">
                        <text style="margin-right: 16px;font-size: 30px;font-weight: 700;color: rgba(37, 186, 228, 1);line-height: 30px;">{{ info.integral }}</text>
                        <text style="font-size: 22px;color: rgba(51, 51, 51, 1);font-weight: 400;">{{ t('activity.point') }}</text>
                        <el-button v-if="info.stock_num" style="margin-left: auto;width: 277px;height: 50px;font-size: 20px;font-weight: 700;" class="shop-btn-large shop-dark" type="primary" @click="handleExchange" >{{ t('activity.exchange') }}</el-button>
                    </div>
                </div>
            </div>
            <div v-if="info && info.goods_detail" class="goods-detail" v-html="info.goods_detail"></div>
            <shop-address v-model:show="showAddr" @change="updateAddr" />
            <exchange v-model:show="showExchange" :data="exchangeData" />
        </div>
    </div>
</template>

<script setup name="Goods">
import { useLocale } from 'element-plus'
import { useRoute } from 'vue-router';
import { initShop, queryShopInfo } from '@/api/shop'
import { serverLang } from '@/utils/i18n'
import { ref } from 'vue';
import ShopAddress from './address'
import Exchange from './exchange'

let { proxy } = getCurrentInstance();
const { t } = useLocale()
const route = useRoute();
const id = route.params.id;
const filterRef = ref()

const point = ref(0)
const showAddr = ref(false)
const showExchange = ref(false)
const loading = ref(false);
const info = ref(null)
const addr = ref(null)
const exchangeData = ref(null)
const data = reactive({
  queryParams: {
    id: id,
    qcc_language: serverLang()
  }
});

const { queryParams } = toRefs(data)

function getInfo() {
  loading.value = true;
  queryShopInfo(queryParams.value).then(response => {
    info.value = response.data.info
    response.data.info = null
    addr.value = response.data
    loading.value = false;
  })
}

initShop({
    qcc_language: serverLang()
}).then(resp => {
    point.value = resp.data.integral
})

function back() {
    if (proxy.$route.query.noGoBack) {
        proxy.$router.push({ path: "/" });
    } else {
        proxy.$router.go(-1);
    }
}

function loadPageData() {
    // loadBannerList();
    getInfo();
}

function openAddr() {
    showAddr.value = true
}

function updateAddr(data) {
    addr.value = {
        userCountry: data.country,
        userCity: data.city,
        user_name: data.recipients,
        userAddr: data.delivery_address,
        user_phone: data.phone
    }
}

function handleExchange() {
    if (addr.value) {
        exchangeData.value = {
            userCountry: addr.value.userCountry,
            userCity: addr.value.userCity,
            user_name: addr.value.user_name,
            userAddr: addr.value.userAddr,
            user_phone: addr.value.user_phone,
            id: info.value.id,
            num: 1,
            integral: info.value.integral,
            goods_name: info.value.goods_name
        }
    }
    showExchange.value = true
}

loadPageData();
</script>

<style lang="scss" scoped>
.app-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.page-content {
    position: relative;
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.title-bar {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 6px 0 20px;
    cursor: pointer;
}

.filter-btn, .shop-btn {
    height: 30px;
    font-size: 16px;
    margin-left: 12px;
    margin-bottom: 4px;
}

.shop-btn {
    border: none;
    margin-left: 20px;
    min-width: 110px;
    color: rgba(15, 54, 117, 1);
    background: linear-gradient(90deg, rgba(44, 194, 229, 1) 0%, rgba(177, 226, 240, 1) 100%);
}

.shop-btn:active, .shop-btn-large:active {
    background: linear-gradient(90deg, rgb(35, 159, 187) 0%, rgb(139, 178, 189) 100%);
}

.shop-input {
    --el-fill-color-blank: transparent;
    --el-input-height: 30px;
    --el-input-text-color: #ffffff;
    height: 30px;
    margin: 0 10px;
    border-color: rgba(170, 170, 170, 1);
}

.shop-btn-large {
    margin-left: 10px;
    border: none;
    height: 40px;
    min-width: 188px;
    background: linear-gradient(90deg, rgba(41, 193, 229, 1) 0%, rgba(181, 227, 240, 1) 100%);
}

.shop-dark {
    margin-left: 34px;
    background: linear-gradient(90deg, rgba(16, 55, 118, 1) 0%, rgba(99, 116, 174, 1) 100%);
}

.shop-dark:active {
    background: linear-gradient(90deg, rgb(11, 37, 80) 0%, rgb(76, 89, 133) 100%);
}

.goods-info {
    width: 100%;
    display: flex;

    .goods-img {
        width: 652px;
        height: 339px;
        flex-shrink: 0;
    }

    .goods-desc {
        flex-grow: 1;
        margin-left: 40px;
        display: flex;
        flex-direction: column;
    }

    .goods-name {
        font-size: 34px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 49.23px;
        color: rgba(51, 51, 51, 1);
        margin-bottom: auto;
    }
}

.goods-detail {
    width: 100%;
    margin-top: 20px;
}
</style>