<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('news.pageTitle') }}</span>
            </div>
            <el-row :gutter="15" v-if="!loading" >
                <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="news-item-wrap">
                        <div class="news-item" >
                            <div class="news-img" :style="{'background-image': `url(${item.img_url})`}" ></div>
                            <div class="news-info">
                                <div class="news-title">{{ item.title }}</div>
                                <div class="news-time">{{ item.release_time }}</div>
                                <div class="news-desc">{{ item.summarize }}</div>
                                <router-link :to="'/news/newsDetail/' + item.id" v-slot="{ navigate }" >
                                    <el-button class="news-btn" type="primary" @click="navigate" >{{ t('news.read') }}</el-button>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <data-loading v-if="loading" />
            <pagination v-show="total > 0" :total="total" :autoScroll="false"
                v-model:page="queryParams.curr_page"
                v-model:limit="queryParams.page_size"
                layout="total, prev, pager, next"
                @pagination="getList" />
        </div>
    </div>
</template>

<script setup name="News">
import BannerBar from "@/components/BannerBar"
import useAppStore from '@/store/modules/app'
import { queryBannerList } from '@/api/common'
import { queryNewsList } from '@/api/news'
import { serverLang } from '@/utils/i18n'
import { useLocale } from 'element-plus'
import { ref } from "vue"
import DataLoading from '@/components/DataLoading'

const { t } = useLocale()
const appStore = useAppStore()
const router = useRouter()

const showBanner = ref(appStore.showBanner == '1')
const bannerList = ref([])

const loading = ref(false);
const dataList = ref([])
const total = ref(0)
const data = reactive({
  queryParams: {
    curr_page: 1,
    page_size: 12,
    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
        }
    })
}

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

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

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;
    }
  }
}

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

.news-item {
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    // box-shadow: var(--el-box-shadow-light);

    .news-img {
        width: 100%;
        height: 55.7851%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
    }

    .news-info {
        width: 100%;
        height: 180px;
        padding: 14px 18px;
        position: relative;

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

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

        .news-desc {
            color: #666666;
            font-size: 14px;
            font-weight: 400;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            line-clamp: 2;/*省略几行写几*/
            -webkit-line-clamp: 2;/*省略几行写几*/
            -webkit-box-orient: vertical;
        }

        .news-btn {
            position: absolute;
            bottom: 14px;
            left: 18px;
        }
    }
}
</style>