<template>
    <div>
        <div
            class="mt-10px shadow-default bg-white pl-35px pr-30px pr-35px h-60px rounded-10px relative flex items-center justify-between">
            <h3 class="nav-title"> 直播课程 - <span>{{ title }}</span></h3>
            <div class="btnDiv">
                <el-button size="large" class="w-100px" @click="linkBack" >返回
                </el-button>
            </div>
        </div>
        <div class="mt-10px shadow-default bg-white px-38px py-35px rounded-10px">
            <h3 class="text-18px font-medium">课程章节</h3>
            <div class="search-box mt-20px">
                <input type="text" placeholder="搜索关键字" v-model="queryForm.keyword" />
                <button type="button" class="search-btn" @click="initData"></button>
            </div>
            <div>
                <div class="w-full relative" v-loading="loading" v-if="listData.length > 0">
                    <ul class="mt-24px course-list">
                        <li v-for="item in listData" :key="item.tz_id" @click="toDetail(item)">
                            <div class="course-img relative"
                                :style="{ backgroundImage: 'url(' + getFullUrl(item.tzk_img) + ')' }">
                                <div class="course-fire-tag" v-if="item.hot == '1'"></div>
                                <div class="absolute right-0 w-80px text-14px text-white text-center leading-25px rounded_left "
                                    :class="item.status == 1 ? 'bg-hex-C8C8C8 bg-opacity-70' : (item.status == 2 ? 'bg-hex-F30808' : 'bg-hex-000000 bg-opacity-70')">
                                    {{ item.status == 1 ? '暂未开始' : (item.status == 2 ? '正在直播' : '查看回放') }}</div>
                                <div class="info-bottom pl-7px items-center flex justify-between">
                                    <div>
                                        <span class="icon-view inline-block align-middle"></span>
                                        <span class="ml-5px text-14px inline-block text-white align-middle">{{ item.tzk_lll
                                            ?
                                            item.tzk_lll
                                            : 0 }}</span>
                                    </div>
                                    <div class="mr-10px">
                                        <span class="ml-15px icon-thumb inline-block align-middle"></span>
                                        <span class="ml-5px text-14px text-white inline-block align-middle">{{ item.tzk_dzl
                                            ?
                                            item.tzk_dzl
                                            : 0 }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="pt-10px pb-15px px-15px border-bottom-1">
                                <div class="text-16px text-dark-400 h-40px leading-20px overflow-hidden">
                                    {{ item.tzk_ksmc }}
                                </div>
                                <div class="color-grey text-gray-500 text-xs">开启时间: {{ item.tzk_zbkqsj }}</div>
                            </div>
                            <el-divider style="margin: 0;"></el-divider>
                            <div class="flex justify-between px-15px pt-10px text-13px bordertop">
                                <span class="text-dark-400">责任老师：{{ item.tzk_xm }}</span>
                                <p class="ml-10px flex-1 text-hex-999999 text-right truncate">{{ item.tzk_ssdw
                                }}</p>
                            </div>
                        </li>
                    </ul>
                    <div class="flex justify-center mb-5">
                        <el-pagination v-model:current-page="queryForm.page" v-model:page-size="queryForm.limit"
                            layout="total,sizes, prev, pager, next, jumper" :total="total" :background="true"
                            @current-change="initData" :hide-on-single-page="false" />
                    </div>
                </div>
                <Nodata v-else class="py-50"></Nodata>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import Nodata from '../xsd/component/noData.vue'
import { chapter_list } from "./api";
const router = useRouter();
const route = useRoute();
let tz_id = route.params.tz_id
let queryForm = $ref({
    limit: 8,
    page: 1,
    keyword: '',
    tz_id,
})
const linkBack = () => {
    router.back()
};

let loading = $ref(false)
let total = $ref(0);
let listData = $ref([]);
let title = $ref('');
function initData() {
    loading = true;
    let data = {
        ...queryForm
    }
    chapter_list(data).then(res => {
        if (res.code == '1') {
            const { page_data, page_now, total_rows, total_page, kc_name } = res.data;
            listData = page_data;
            title = kc_name;
            total = total_rows * 1;
            queryForm.page = page_now;
            loading = false;
        }
    })
}
initData();

function toDetail(item) {
    if (item.status != 2) {
        router.push({
            name: 'home_zbkc_detail',
            params: {
                tz_id,
                tzk_id: item.tzk_id,
            }
        })
    } else {
        router.push({
            name: 'home_zbkc_isLive',
            params: {
                tz_id,
                tzk_id: item.tzk_id,
            }
        })
    }
}
</script>
<style lang="scss" scoped>
$color: #1259A1;

.shadow-default {
    box-shadow: 0 10px 24px rgba(161, 153, 168, 0.18);
}

.nav-title {
    font-size: 16px;
    color: #949494;

    span {
        font-size: 18px;
        color: #050026;
    }
}

.btnDiv {
    .el-button {
        background: $color;
        border-color: $color;
        color: #fff;
    }
}

.bg-white-grey {
    background: #fcfeff;
}

.search-box {
    width: 300px;
    height: 48px;
    background: #f6f8fa;
    border-radius: 8px;
    padding: 0 10px 0 14px;
    display: flex;
    align-items: center;

    input {
        flex: 1;
        height: 48px;
        border: 0;
        font-size: 16px;
        color: #333;
        outline: none;
        background: #f6f8fa;
    }

    .search-btn {
        width: 26px;
        height: 26px;
        border-radius: 6px;
        background: $color url("/images/icon-search.png") center no-repeat;
        background-size: 13px 13px;
    }
}

.course-list {
    display: flex;
    flex-wrap: wrap;

    li {
        min-width: 0;
        width: 268px;
        height: 278px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
        margin-right: 15px;
        margin-bottom: 20px;
        cursor: pointer;

        &:nth-child(4n) {
            margin-right: 0;
        }

        .course-img {
            width: 100%;
            height: 157px;
            border-radius: 10px 10px 0 0;
            overflow: hidden;
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .info-bottom {
                position: absolute;
                left: 0;
                bottom: 0;
                z-index: 30;
                width: 152px;
                height: 27px;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 0 10px 0 0;
                display: flex;

                .icon-view {
                    width: 24px;
                    height: 16px;
                    background: url("/images/icon/view.png") center no-repeat;
                    background-size: 24px 16px;
                }

                .icon-thumb {
                    width: 17px;
                    height: 16px;
                    background: url("/images/icon/thumb.png") center no-repeat;
                    background-size: 17px 16px;
                }
            }
        }
    }
}

.rounded_left {
    border-radius: 0 10px 0 10px;
}

::v-deep .el-pagination.is-background .el-pager li.is-active {
  background: $color;
}
</style>