<template>
    <div>
        <div class="w-full flex items-center w-full relative min-h-134px">
            <img :src="title" alt="" class="w-full">
            <div class="absolute title">
                直播课程
            </div>
        </div>
        <div class="main bg-white-grey rounded-10px mt-4 py-8 px-8 relative">
            <check-row v-model="queryForm.tjzn_id" label="年级" :items="gradeData" @click="initData"></check-row>
            <check-row v-model="queryForm.tjzx_id" label="学科" :items="subjectData" @click="initData"></check-row>
            <check-row v-model="queryForm.tjzx_cb" label="册别" :items="cbList" @click="initData"></check-row>
            <check-row v-model="queryForm.tjzx_dy" label="单元" :items="unitList" @click="initData"></check-row>
            <div class="mt-25px search-box">
                <input type="text" placeholder="搜索关键字" v-model="queryForm.keyword">
                <button type="button" class="search-btn" @click="initData"></button>
            </div>
            <ul v-loading="loading" v-if="listData.length > 0" class="my-25px course-list">
                <li @click="routerLink(item)" v-for="(item, i) in listData" :key="i">
                    <div class="course-img relative">
                        <img :src="getFullUrl(item.tz_img)" alt="">
                        <div class="info-bottom pl-7px items-center">
                            <span class="icon-view"></span>
                            <span class="ml-5px text-14px text-white">{{ item.tjzx_lll }}</span>
                        </div>
                    </div>
                    <div class="flex-1">
                        <div class="p-10px border-bottom-1">
                            <p class="text-16px text-dark-400 overflow-hidden font-medium">{{ item.tz_kcbt }}</p>
                            <p class="mt-10px mb-40px color-grey text-gray-500 text-xs">{{ item.tjzx_name }} | {{ item.tjzn_name }} | {{ item.tjzx_cb }} | {{ item.tjzx_dy }}</p>
                            <p class="color-grey text-gray-500 text-xs">开启时间: {{ item.tjzx_zbkqsj }}</p>
                        </div>
                        <el-divider style="margin: 0;"></el-divider>
                        <div class="mt-2px flex justify-between items-center px-10px text-14px leading-30px">
                            <span class="text-dark-500 font-medium">责任老师：{{ item.tz_zjrxm }}</span>
                            <div class="w-102px text-gray-500 text-sm">
                                <p class="truncate">{{ item.tz_ssdw_mc }}</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <nodata v-else class="my-25px "></nodata>
            <div class="flex justify-center items-end absolute bottom-10px left-0 right-0">
                <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>
    </div>
</template>
<script setup>
import title from '~/assets/home/icon-zb.png'
import nodata from '@/pages/xsd/component/noData.vue'
import { zbkc_list, option_list, subject_list, grade_list } from './api'
import { useRouter } from 'vue-router'
const router = useRouter();
let queryForm = $ref({
    page: '1',
    limit: 6,
    tjzx_id: null,
    tjzn_id: null,
    keyword: '',
    tjzx_cb: null,
    tjzx_dy: null,
})
//#region 年级学科册别单元
let subjectData = $ref([]);
let gradeData = $ref([]);
let unitList = $ref([]);
let cbList = $ref([]);
grade_list({ limit: 9999, page: 1 }).then((res) => {
    if (res.code == "1") {
        gradeData = [{ n: "全部", v: null }].concat(
            res.data.page_data.map(({ tjzn_id, tjzn_njmc }) => ({
                v: tjzn_id,
                n: tjzn_njmc,
            }))
        );
    }
});
subject_list({ limit: 9999, page: 1 }).then((res) => {
  if (res.code == "1") {
    subjectData = [{ n: "全部", v: null }].concat(
      res.data.page_data.map(({ tjzx_id, tjzx_xkmc }) => ({
        v: tjzx_id,
        n: tjzx_xkmc,
      }))
    );
  }
});
// 单元
request({
    url: '/common/sjzd/option',
    data: {
        cs_code: 'TXWXDY'
    }
}).then(res => {
    if (res.code == '1') {
        unitList = [{ n: "全部", v: null }].concat(res.data.option)
    }
})
// 册别
request({
    url: '/common/sjzd/option',
    data: {
        cs_code: 'TXWXCB'
    }
}).then(res => {
    if (res.code == '1') {
        cbList = [{ n: "全部", v: null }].concat(res.data.option)
    }
})
//#endregion

// 初始化
let loading = $ref(false);
let total = $ref(0);
let listData = $ref([]);
function initData() {
    loading = true;
    let data = {
        ...queryForm
    }
    zbkc_list(data).then(res => {
        if (res.code == '1') {
            const { page_data, page_now, total_rows, total_page } = res.data;
            listData = page_data;
            total = total_rows * 1;
            queryForm.page = page_now;
            loading = false;
        }
    })
}
initData();
function routerLink(item) {
    router.push({
        name: 'home_zbkc_chapter',
        params: {
            tz_id: item.tz_id
        }
    })
}
</script>
<style lang="scss" scoped>
$color: #1259A1;

.title {
    font-size: 30px;
    font-weight: 400;
    text-align: left;
    color: #ffffff;
    padding-left: 100px;
    line-height: 30px;
    letter-spacing: 0.23px;
    text-shadow: 0px 2px 3px 0px rgba(0, 14, 51, 0.31);
}

.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: 553px;
        height: 157px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
        margin-right: 19px;
        margin-bottom: 15px;
        cursor: pointer;
        display: flex;

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

        .course-img {
            min-width: 0;
            width: 268px;
            height: 151px;
            border-radius: 10px 0 0 10px;
            overflow: hidden;

            img {
                width: 100%;
            }

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

::v-deep .check {
    line-height: 35px;
}

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