<template>
    <div class="app-container home">
        <banner-bar v-if="bannerList&&bannerList.length" class="banner-bar" :options="bannerList" @close="closeBanner" :show="showBanner" />
        <div class="page-content">
            <div class="title-bar">
                <span class="title">{{ t('activity.pageTitle') }}</span>
            </div>
            <el-row :gutter="20" v-if="!loading" >
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" v-if="shopItem" style="margin-bottom: 23px;" >
                    <div class="act-item" >
                        <div class="act-img" :style="{'background-image': `url(${shopItem.img_url})`}" ></div>
                        <div class="act-info">
                            <div class="act-title">{{ shopItem.content }}</div>
                            <router-link to="/shop" v-slot="{ navigate }" >
                                <el-button class="act-btn" type="primary" @click="navigate" >{{ t('activity.exchange') }}</el-button>
                            </router-link>
                            <div class="act-doc-link">
                                <el-link v-if="shopItem.doc" style="font-size: 12px;" type="primary" :underline="false" :href="shopItem.doc" target="_blank" >{{ t('activity.doc') }}</el-link>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,i) in dataList" :key="i" style="margin-bottom: 23px;" >
                    <div class="act-item" >
                        <div class="act-img" :style="{'background-image': `url(${item.img_url})`}" ></div>
                        <div class="act-info">
                            <div class="act-title">{{ item.title ? item.title : item.activity_name }}</div>
                            <el-tag v-if="item.activity_if_over == 1" type="info" effect="dark" > {{ t('activity.activityIfOver1') }} </el-tag>
                            <el-tag v-else type="primary" effect="dark" > {{ t('activity.activityIfOver0') }} </el-tag>
                            <div class="act-desc" style="margin-top: 8px;">{{ item.activity_start_time_format + ' - ' + item.activity_end_time_format }}</div>
                            <router-link :to="'/activity/actDetail/' + item.contentType + '/' + item.contentId" v-slot="{ navigate }" v-if="(item.contentType == 1 && item.contentId && item.if_can_participate != 1) || (item.contentType == 2 && item.contentId)" >
                                <el-button class="act-btn" type="primary" @click="navigate" >{{ t('activity.participateIn') }}</el-button>
                            </router-link>
                            <div class="act-doc-link">
                                <el-link v-if="item.activity_accessory" style="font-size: 12px;" type="primary" :underline="false" :href="item.activity_accessory" target="_blank" >{{ t('activity.doc') }}</el-link>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <data-loading v-if="loading" />
        </div>
    </div>
</template>

<script setup name="Activity" >
import BannerBar from "@/components/BannerBar"
import useAppStore from '@/store/modules/app'
import usePermissionStore from '@/store/modules/permission'
import { queryBannerList } from '@/api/common'
import { getActivityByUser, getNewActivityByUser } from '@/api/activity'
import { getShopBrief } from '@/api/shop'
import { serverLang } from '@/utils/i18n'
import { useLocale } from 'element-plus'
import { computed, ref } from "vue"
import DataLoading from '@/components/DataLoading'

const { t } = useLocale()
const appStore = useAppStore()
const permissionStore = usePermissionStore()
const showBanner = ref(appStore.showBanner == '1')
const bannerList = ref([])

const loading = ref(false);
const shopItem = ref(null)

const list1 = ref([])
const list2 = ref([])

const dataList = computed(() => [...list1.value, ...list2.value])

const data = reactive({
  queryParams: {
    qcc_language: serverLang()
  }
});

const { queryParams } = toRefs(data)

function closeBanner() {
    showBanner.value = false
    appStore.setShowBanner('0')
}

function loadBannerList() {
    queryBannerList({
        qcc_language: serverLang(),
        position: 1,
        type: 2
    }).then(resp => {
        if (resp.data) {
            bannerList.value = resp.data
        }
    })
}

async function loadPageData() {
    loadBannerList();
    loading.value = true
    if (permissionStore.powerList.includes('integralShop')) {
        const resp = await getShopBrief(queryParams.value)
        shopItem.value = resp.data
    }
    if (permissionStore.powerList.includes('newActivity')) {
        let resp = await getActivityByUser(queryParams.value)
        list1.value = resp.data
        resp = await getNewActivityByUser(queryParams.value)
        list2.value = resp.data
    }
    loading.value = false
}

loadPageData();
</script>

<style lang="scss" scoped>
.banner-bar {
  margin-bottom: 5px;
}

.page-content {
  width: 100%;
  display: flex;
  flex-direction: column;

  .title-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;

    .title {
      font-size: 34px;
      font-weight: 700;
    }
  }
}

.act-item-wrap {
    width: 100%;
    padding-top: 124%;
    position: relative;
}

.act-item:hover {
    border: 2px solid rgba(37, 192, 229, 1);
    padding: 16px 11px;
}

.act-item {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: 18px 13px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--el-box-shadow-light);

    .act-img {
        width: 100%;
        padding-top: 62.3964%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        flex-shrink: 0;
        flex-grow: 0;
    }

    .act-info {
        width: 100%;
        height: 224px;
        padding: 20px 0 0;
        position: relative;

        .act-title {
            font-size: 24px;
            font-weight: 700;
            color: rgba(51, 51, 51, 1);
            margin-bottom: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            line-clamp: 1;/*省略几行写几*/
            -webkit-line-clamp: 1;/*省略几行写几*/
            -webkit-box-orient: vertical;
        }

        .act-time {
            font-size: 14px;
            font-weight: 400;
            color: rgba(119, 119, 119, 1);
            margin-bottom: 8px;
        }

        .act-desc {
            color: rgba(102, 102, 102, 1);
            font-size: 14px;
            font-weight: 400;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            line-clamp: 5;/*省略几行写几*/
            -webkit-line-clamp: 5;/*省略几行写几*/
            -webkit-box-orient: vertical;
            line-height: 20.27px;
        }

        .act-btn {
            position: absolute;
            bottom: 40px;
            left: 0;
            width: 100%;
            height: 48px;
            font-size: 16px;
        }

        .act-doc-link {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 12px;
            text-align: center;
        }
    }
}

</style>