<template>
    <div class="main bg-white-grey rounded-10px mt-4 p-8" style="font-size: 18px">
        <el-select v-model="td_kclx" @change="typeChange">
            <el-option value="" label="全部类别"></el-option>
            <el-option v-for="t in typeList" :key="t.v" :label="t.n" :value="t.v"></el-option>
        </el-select>
        <div class="mt-25px search-box">
            <input type="text" placeholder="搜索关键字" v-model="keyword">
            <button type="button" class="search-btn" @click="initData"></button>
        </div>
        <ul v-if="listData.length > 0" class="mt-25px course-list">
            <li v-for="(item, i) in listData" :key="i" @click="toDetail(item)">
                <div class="course-img relative">
                    <img :src="getFullUrl(getImg(item.dzdx_info.img))" alt="">
                    <div class="info-bottom pl-7px items-center">
                        <span class="icon-view"></span>
                        <span class="ml-5px text-14px text-white">{{ item.dzdx_info.lll }}</span>
                        <span class="ml-15px icon-thumb"></span>
                        <span class="ml-5px text-14px text-white">{{ item.dzdx_info.dzl }}</span>
                    </div>
                </div>
                <div class="pt-10px pb-20px px-15px border-bottom-1">
                    <div class="text-16px text-dark-400 h-40px leading-20px overflow-hidden">{{
                        item.dzdx_info.name }}
                    </div>
                    <el-divider style="margin: 0;"></el-divider>
                    <div class="mt-2px flex justify-between items-center text-14px leading-30px">
                        <span class="text-dark-500 font-medium">责任老师：{{ item.dzdx_info.teacher_name }}</span>
                        <div class="w-102px text-gray-500 text-sm">
                            <p class="truncate">{{ item.dzdx_info.school_name }}</p>
                        </div>
                    </div>
                </div>

            </li>
        </ul>
        <nodata v-else></nodata>
        <div class="mt-20px flex justify-center">
            <el-pagination v-model:current-page="page" v-model:page-size="limit" layout="total, prev, pager, next"
                :total="total" :background="true" @current-change="handleSelectionChange"></el-pagination>
        </div>
    </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import nodata from '@/pages/xsd/component/noData.vue'
import { dz_list } from "../api";
import { user } from '@/store/index'
const router = useRouter();
const route = useRoute();
let td_kclx = $ref('')
let keyword = $ref('');
let typeList = $ref([
    {
        v: '1',
        n: '名师在线'
    },
    {
        v: '2',
        n: '家庭教育'
    }
])
let listData = $ref([])
let limit = $ref(8);
let total = $ref(0);
let page = $ref(1);
let form_query = $ref({
    limit: 8,
    page: 1,
})
let table = $ref({});
function handleSelectionChange(val) {
    form_query.page = val;
}
watch(
    form_query,
    (newValue, oldValue) => {
        initData();
    },
    { immediate: true }
)

function initData() {
    let data = {
        ...form_query,
        // td_user_name: user.value.user_name,
        td_kclx,
        keyword,
    }
    dz_list(data).then(res => {
        if (res.code == '1') {
            const { page_data, total_rows, page_now, table_structure } = res.data;
            total = Number(total_rows);
            page = Number(page_now);
            listData = page_data;
            typeList = table_structure.field.td_kclx.option;
        }
    })
}
function getImg(img) {
    if (img) {
        return img.split('|')[0];
    }
}
function typeChange() {
    if (form_query.page != '1') form_query.page = 1;
    else initData();
}
// initData();

function toDetail(item) {
    if (item.td_kclx_option_k == '1') {
        router.push({ name: 'home_mszx_detail', params: { tmk_id: item.dzdx_info.tmk_id, tmz_id: item.td_dz_id } })
    } else if (item.td_kclx_option_k == '2') {
        router.push({ name: 'home_tskc_detail', params: { ttk_id: item.dzdx_info.ttk_id, ttz_id: item.td_dz_id } });
    } else if (item.td_kclx_option_k == '3') {
        switch (item.td_dz_content) {
            case '1':
                ElMessage.error("直播还未开始，请耐心等待！");
                break;
            case '2':
                router.push({ name: 'home_zbkc_isLive', params: { tz_id: item.dzdx_info.tz_id, tzk_id: item.td_dz_id } });
                break
            case '3':
                router.push({ name: 'home_zbkc_detail', params: { tz_id: item.dzdx_info.tz_id, tzk_id: item.td_dz_id } });
                break
        }
        
    } else if (item.td_kclx_option_k == '4') {
        router.push({ name: 'home_zyfd_detail', params: { ttk_id: item.dzdx_info.ttk_id, tz_id: item.td_dz_id } });
    } else if (item.td_kclx_option_k == '5') {
        router.push({ name: 'home_jtjy_detail', params: { tjk_id: item.dzdx_info.tjk_id, tjz_id: item.td_dz_id } });
    }
}
</script>
<style lang="scss" scoped>
$color: #1259a1;

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

.bg_blue {
    background: $color;
}

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

.color-grey {
    color: #999;
}

.border-bottom-1 {
    border-bottom: 1px solid #eee;
}

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

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

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

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

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

        .course-img {
            width: 100%;
            height: 151px;
            border-radius: 10px 10px 0 0;
            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, .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;
                }
            }
        }
    }
}
</style>