<template>
    <div class="app-container home">
        <div class="page-content">
            <div style="background-color: rgba(0, 0, 0, 0.71);position: absolute;left: 0;right: 0;top: 0;bottom: 0;">
                <div ref="filterRef" style="width: 100%;padding: 14px 50px 0 0;position: relative;">
                    <div class="title-bar" @click="back">
                        <svg-icon icon-class="backLight" style="width: 30px;height: 30px;margin-right: 20px;color: #fff;" />
                        <span style="font-size: 32px;font-weight: 700;">{{ t('activity.shop') }}</span>
                    </div>
                    <div style="position: absolute;right: 50px;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="color: rgba(232, 232, 232, 1);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>
                        <router-link to="/shop/pointRecord" v-slot="{ navigate }" >
                            <el-button class="shop-btn-large" type="primary" @click="navigate" >{{ t('activity.pointRecord') }}</el-button>
                        </router-link>
                    </div>
                    <div style="width: 100%;display: flex;">
                        <div style="flex-grow: 0;flex-shrink: 1;">
                            <el-button v-for="(item,i) in typeList" :key="i" class="filter-btn-all" :class="[{'filter-btn':item.code}, {'filter-btn-active':queryParams.goods_type == item.code}]" :type="queryParams.goods_type == item.code ? 'primary' : ''" @click="handleType(item.code)" >{{ item.text }}</el-button>
                        </div>
                        <div style="flex-shrink: 0;flex-grow: 1;display: flex;justify-content: flex-end;color: #fff;line-height: 30px;">
                            <div>{{ t('activity.pointRange') }}</div>
                            <el-input class="shop-input" v-model="queryParams.integralBegin" style="width: 90px;" />
                            <div style="width: 26px;height: 1px;margin-top: 14px;background-color: rgba(170, 170, 170, 1);"></div>
                            <el-input class="shop-input" v-model="queryParams.integralEnd" style="width: 90px;" />
                            <el-button class="shop-btn" type="primary" @click="handleQuery" >{{ t('form.search') }}</el-button>
                        </div>
                    </div>
                </div>
                <!-- 商品列表 -->
                <div class="goods-list" :style="{'height': height}" >
                    <el-row :gutter="26" >
                        <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" v-for="(item,i) in dataList" :key="i" >
                            <div class="goods-item-wrap" >
                                <router-link :to="'/shop/goods/' + item.id" v-slot="{ navigate }" >
                                    <div class="goods-item" @click="navigate" >
                                        <el-image class="goods-img" :src="item.imgs.split(',')[0]" fit="cover" />
                                        <div class="goods-info">
                                            <div class="goods-title">{{ item.goods_name }}</div>
                                            <div class="goods-price">{{ item.integral }}{{ t('activity.point') }}</div>
                                        </div>
                                    </div>
                                </router-link>
                            </div>
                        </el-col>
                    </el-row>
                    <pagination v-show="total > 0" :total="total" :autoScroll="false" style="margin-top: 0;"
                        v-model:page="queryParams.curr_page"
                        v-model:limit="queryParams.page_size"
                        layout="total, prev, pager, next"
                        @pagination="getList" />
                </div>
            </div>
            
        </div>
    </div>
</template>

<script setup name="Shop">
import { useLocale } from 'element-plus'
import { useRoute } from 'vue-router';
import { initShop, queryShop } from '@/api/shop'
import { serverLang } from '@/utils/i18n'
import { onMounted, ref, watch } from 'vue';

let { proxy } = getCurrentInstance();
const { t } = useLocale()
const route = useRoute();
const filterRef = ref()
const typeList = ref([])
const point = ref(0)
const height = ref('auto')
const loading = ref(false);
const dataList = ref([])
const total = ref(0)
const data = reactive({
  queryParams: {
    curr_page: 1,
    page_size: 12,
    integralBegin: undefined,
    integralEnd: undefined,
    goods_type: '',
    qcc_language: serverLang()
  }
});

const { queryParams } = toRefs(data)

function handleType(type) {
    queryParams.value.goods_type = type
    handleQuery()
}

function getList() {
  loading.value = true;
  queryShop(queryParams.value).then(response => {
    dataList.value = response.data.records;
    total.value = response.data.totalRecords;
    loading.value = false;
  })
}

function handleQuery() {
    queryParams.value.curr_page = 1
    getList()
}

initShop({
    qcc_language: serverLang()
}).then(resp => {
    typeList.value = [ { code:'',text:t('activity.all') }, ...resp.data.typeList]
    point.value = resp.data.integral
    nextTick(() => {
        if(filterRef.value) {
            height.value = `calc(100% - ${filterRef.value.offsetHeight}px)`
        }
    })
})

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

onMounted(() => {
    if(filterRef.value) {
        height.value = `calc(100% - ${filterRef.value.offsetHeight}px)`
    }
})

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

watch(loading, (n, o) => {
    if (n) {
        proxy.loading.show()
    } else {
        proxy.loading.hide()
    }
}, { immediate: true })

loadPageData();
</script>

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

.page-content {
    position: relative;
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-image: url(/src/assets/images/shop-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

.filter-btn-all, .filter-btn, .shop-btn {
    height: 30px;
    font-size: 14px;
    margin-left: 10px;
    margin-bottom: 4px;
}

.filter-btn-all, .filter-btn {
    --el-button-text-color: #0F3675;
    --el-color-primary: #1DC0E4;
    font-weight: 400;
}

.filter-btn-all {
    padding-left: 20px;
    padding-right: 20px;
}

.filter-btn {
    min-width: 144px;
}

.filter-btn-active {
    color: #ffffff;
    font-weight: 700;
}

.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;
    --el-input-border-radius: 100px;
    --el-input-border-color: rgba(255, 255, 255, .3);
    height: 30px;
    margin: 0 10px;
    border-color: rgba(255, 255, 255, .3);
}

.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%);
    color: #0F3675;
}

.shop-dark {
    color: #ffffff;
    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-list {
    width: 100%;
    padding: 20px 24px 25px;
    overflow: auto;
}

.goods-item-wrap {
    position: relative;
    width: 100%;
    padding-top: 87.2%;
    min-height: 225px;
    margin-bottom: 24px;
}

.goods-item {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #29BBE4;
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    padding: 1px;
    cursor: pointer;

    .goods-img {
        margin: 10px 10px 0;
        width: calc(100% - 20px);
        height: calc(((100% / 0.872) - 20px) * 0.56);
        object-fit: cover;
        flex-shrink: 0;
    }

    .goods-info {
        padding: 4px 10px;
    }

    .goods-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #ffffff;
    }

    .goods-price {
        font-size: 18px;
        font-weight: 700;
        color: rgba(29, 192, 228, 1);
    }
}

.goods-item:hover {
    box-shadow: 0px 2px 17px  rgba(41, 187, 228, 1);
    border-width: 2px;
    padding: 0;
    
}

:deep(.el-pagination__total) {
    color: #ffffff;
}
</style>