{extend name="public/base"/}
{block name="css"}
<style>
    .series-title {font-size: 16px;}
    .series-time {font-size: 12px;color: #999;}

    .lw-list article{border-radius: 5px;width:95%;height:110px;display:flex;align-items:center;background:white;padding:5px 10px;}
    .lw-list article .s-left {height:90px;display:flex;flex-direction:column;width: 100%;margin-left:auto;}
    .lw-list article .s-left.image {width: calc(100% - 120px);}
    .lw-list article .s-left .s-title{font-size: 16px;text-overflow: ellipsis;display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 3;text-align:left;color:#323233;}
    .lw-list article .s-left .s-time{font-size: 12px;color:#999;margin-top:auto;text-align:right;}
    .lw-list article .s-left .s-color3{color:var(--blue);}
    .lw-list article .s-left .s-color2{color:var(--red);}
    .lw-list article .s-right {width:110px;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
>
    <template #title>
        <span class="text-white">首页</span>
    </template>
</van-nav-bar>

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onList"
    >
        <van-collapse v-model="activeNames">
            <van-collapse-item :name="item.id" v-for="item in list">
                <template #title>
                    <div class="series-title">{{item.title}}</div>
                    <div class="series-time">{{item.start_time}} 至 {{item.end_time}}</div>
                </template>
                <div class="lw-list">
                    <article v-for="video in item.video" @click="toVideo(video.id)">
                        <section class="s-right">
                            <van-image
                                    width="110"
                                    height="85"
                                    fit="cover"
                                    :src="video.main_image"
                            ></van-image>
                        </section>
                        <section class="s-left image">
                            <div class="s-title">{{video.title}}</div>
                            <div class="s-time" :class="'s-color'+video.watch_status">{{video.watch_text}}</div>
                        </section>
                    </article>
                    <div class="van-list__finished-text" @click="toSeries(item.id)">更多视频</div>
                </div>
            </van-collapse-item>
        </van-collapse>
    </van-list>
</van-pull-refresh>

{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.activeNames = Vue.ref([]);

        //列表
        base.page = Vue.ref(1);
        base.loading = Vue.ref(false);
        base.finished = Vue.ref(false);
        base.refreshing = Vue.ref(false);
        base.list = Vue.reactive([]);
        base.onList = () => {
            let param = {};
            param.page = base.page.value;
            base.page.value++;

            postJson("soldier/listVideo", param).then( ({data}) => {
                base.loading.value = false;
                if (base.refreshing.value) base.refreshing.value = false;
                if (data.length === 0) {
                    base.finished.value = true;
                } else {
                    base.list.push(...data);
                }
            });

        };
        base.onRefresh = () => {
            base.list = Vue.reactive([]);
            base.page.value = 1;
            base.loading.value = true;
            base.finished.value = false;

            base.onList();
        };

        base.toSeries = (id) => {
            location.href = "{:url('soldier/series')}?id=" + id;
        };
        base.toVideo = (id) => {
            location.href = "{:url('soldier/video')}?id=" + id;
        };


        return base;
    }
</script>
{/block}