<template>
    <div class="hotUpdate">
        <!-- <div class="hotUpdate" style="background-color: #ebedf0;"> -->
        <s-header name="热更新" :noback="true"></s-header>

        <div class="headCon l-flex-between o-plr-20 o-pt-26 o-pb-12 kBordBott">
            <div class="l-flex-RC">
                <!-- <img class="ruleIcon o-mr-10" src="@/assets/advertManage/ruleIcon.png" alt="" /> -->
                <div class="ruleIcon"></div>
                <div class="c-text-color c-text-b c-text-15">
                    共
                    <span class="c-text-20" style="color: #df5e4c">{{ patchTotal }}</span>
                    条记录
                </div>
            </div>
            <div class="l-flex-RC">
                <div @click="toAdd" class="c-text-c">
                    <div>
                        <van-icon size="18" name="add-o" />
                    </div>
                    <div class="c-text-color c-text-12">
                        添加
                    </div>
                </div>
            </div>
        </div>

        <!-- 补丁信息列表 -->
        <div class="contentCon">
            <van-pull-refresh disabled v-model="refreshing" @refresh="onRefresh">
                <van-list v-model="loading" :finished="finished" :finished-text="$t('common.noMoreTxt')" @load="onLoad"
                    :offset="20" :immediate-check="false">
                    <div v-for="item in tableData" :key="item.id"
                        class="o-plr-20 o-pt-24 o-pb-12 l-flex-between kBordBott content">
                        <div>
                            <div class="l-flex-RC">
                                <span class="c-color c-text-12">原版本号：</span>
                                <span class="c-text-color c-text-12">{{ item.originalVersion }}</span>
                            </div>
                            <div class="l-flex-RC">
                                <span class="c-color c-text-12">目标补丁版本：</span>
                                <span class="c-text-color c-text-12">{{ item.patchVersion }}</span>
                            </div>
                            <div class="l-flex-RC">
                                <span class="c-color c-text-12">更新范围：</span>
                                <span class="c-text-color c-text-12">{{ getTargetAreasText(item) }}</span>
                            </div>
                            <div class="l-flex-RC">
                                <span class="c-color c-text-12">创建时间：</span>
                                <span class="c-text-color c-text-12">{{
                                    Format_time(item.createTime)
                                }}</span>
                            </div>
                            <div class="l-flex-RC">
                                <span class="c-color c-text-12">更新比例：</span>
                                <span class="c-text-color c-text-12">{{ item.haveUpdateNum }}/{{ item.shouldUpdateNum
                                }}</span>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>

    </div>
</template>

<script>
import sHeader from "@/components/SimpleHeader";
import { ref, onMounted, toRefs, reactive } from "vue";
import { styleUrl } from "../../common/js/utils";
import { useRouter } from "vue-router";
import {
    getPatchPage
} from "@/service/hotUpdate";
import { Format_time } from "@/common/js/utils";
import { computed } from "vue";

export default {
    components: { sHeader },
    setup() {

        // const { t } = useI18n();
        onMounted(() => {
            // 加载样式
            styleUrl('hotUpdate');
            onRefresh();
        });

        // 多少条规则
        const patchTotal = ref(0);
        // 分页
        const pageNo = ref(1);
        const pageSize = ref(20);
        let ruleData = reactive({
            tableData: [],
        });
        // 上拉刷新
        const loading = ref(true);
        const finished = ref(false);
        // 下拉刷新
        const onRefresh = (idx) => {
            ruleData.tableData = [];
            // 解决请求两次问题
            if (!idx) {
                finished.value = false;
            }
            loading.value = true;
            // 初始化分页
            pageNo.value = 1;
            pageSize.value = 20;
            getList();
        };

        // 上拉加载
        const onLoad = () => {
            pageNo.value++;
            getList();

        };
        // 下拉刷新
        const refreshing = ref(false);
        const getList = () => {
            let param = {
                current: pageNo.value,
                size: pageSize.value,
            };
            getPatchPage(param).then((res) => {
                const { data } = res.data;
                refreshing.value = false;
                ruleData.tableData.push(...data.records);
                // 加载状态结束
                loading.value = false;
                // 总共
                patchTotal.value = data.total;
                if (ruleData.tableData.length >= data.total) {
                    finished.value = true;
                }
            });
        };

        // 获取目标范围
        const getTargetAreasText = computed(() => {
            const targetAreas = {
                '0': '部分设备',
                '1': '国内设备',
                '2': '海外设备',
                '3': '全部设备',
            };
            return (item) => targetAreas[item.targetAreas] || '';
        });

        const router = useRouter();

        // 点击添加按钮
        const toAdd = () => {
            router.push("/apkHotUpdateAdd");
        };

        return {
            patchTotal,
            toAdd,
            onRefresh,
            onLoad,
            getList,
            loading,
            finished,
            ...toRefs(ruleData),
            refreshing,
            getTargetAreasText,
            Format_time,
        };
    }
};
</script>

<style  lang="less" scoped></style>
