<template>
    <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">{{ title }} - <span>{{ course_title }}</span></h3>
        <div class="btnDiv">
            <el-button size="large" @click="linkTo('xsd_personal_wdbm')" class="w-100px">返回
            </el-button>
        </div>
    </div>
    <div class="mt-10px shadow-default bg-white-grey pt-25px pl-35px pr-35px pb-35px rounded-10px">
        <h3 class="nav-title"><span>课程章节</span></h3>
        <div class="mt-25px search-box">
            <input type="text" placeholder="搜索关键字" v-model="keyword">
            <button type="button" class="search-btn" @click="filterData"></button>
        </div>
        <ul v-if="msOrjt == 'jtjy' && listData.length > 0" class="mt-25px course-list">
            <li v-for="(item, i) in listData" :key="i">
                <div class="course-img relative">
                    <img :src="getFullUrl(item.tjz_img)" alt="">
                </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">第{{ i + 1 }}章：{{ item.tjz_mc }}
                    </div>
                    <div class="flex justify-end">
                        <button @click="apply(item)" v-if="item.is_bm == '0'"
                            class="bg_blue text-white text-xs py-1 px-4 rounded-md my-1">报名</button>
                        <button @click="cancelApply(item)" v-else class="bg-red-200 text-red-500 text-xs py-1 px-4 rounded-md my-1">取消报名</button>
                    </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.teacher_name }}</span>
                        <div class="w-102px text-gray-500 text-sm">
                            <p class="truncate">{{ item.school_name }}</p>
                        </div>
                    </div>
                </div>

            </li>
        </ul>
        <ul v-if="msOrjt == 'tjkc' && listData.length > 0" class="mt-25px course-list">
            <li v-for="(item, i) in listData" :key="i">
                <div class="course-img relative">
                    <img :src="getFullUrl(item.tmz_img_url)" alt="">
                </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">第{{ i + 1 }}章：{{ item.tmz_zjmc
                    }}
                    </div>
                    <div class="flex justify-end">
                        <button @click="apply(item)" v-if="item.is_bm == '0'"
                            class="bg_blue text-white text-xs py-1 px-4 rounded-md my-1">报名</button>
                        <button @click="cancelApply(item)" v-else class="bg-red-200 text-red-500 text-xs py-1 px-4 rounded-md my-1">取消报名</button>
                    </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.tmz_zrjs_mc }}</span>
                        <div class="w-102px text-gray-500 text-sm">
                            <p class="truncate">{{ item.school_name }}</p>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <nodata v-if="listData.length==0"></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 { useRoute, useRouter } from "vue-router";
import { user } from '@/store/index'
import { tjkc_chapter, jtjy_chapter, bm_add, bm_cancel } from "../api";
import { getFullUrl } from "@/utils/helper";
import nodata from '@/pages/xsd/component/noData.vue'
const router = useRouter();
const route = useRoute();
console.log(route.params);
let msOrjt = $ref('');
msOrjt = route.params.hasOwnProperty('tmk_id') ? 'tjkc' : 'jtjy';
let title = $ref('');

let course_title = $ref('')
let keyword = $ref('')
let limit = $ref(8);
let total = $ref(0);
let page = $ref(1);
let listData = $ref([]);
let form_query = $ref({
    limit: 6,
    page: 1,
})
let tjk_id = $ref('');
const linkTo = (name) => {
    router.push({
        name,
        query: {
           type: msOrjt
        }
    });
};
let apiName;
function filterData() {
    form_query.page = 1;
    getListData(apiName);
}
if (route.params.tjk_id) {
    title = '家庭教育'
    apiName = jtjy_chapter;
    getListData(apiName);
}
if (route.params.tmk_id) {
    title = '名师在线'
    apiName = tjkc_chapter;
    getListData(apiName);
}
function getListData(name) {
    let data = {
        ...form_query,
        M5jxrcL:''
    };
    if (msOrjt == 'tjkc') {
        Object.assign(data, {
            tmk_id: route.params.tmk_id,
            tmz_zjmc: keyword,
        })
    } else {
        Object.assign(data, {
            tjk_id: route.params.tjk_id,
            tjz_mc: keyword,
        })
    }
    // let apiName = msOrjt == 'tjkc' ? tjkc_chapter : jtjy_chapter;
    name(data).then(res => {
        if (res.code === '1') {
            const { page_data, kc_name, total_rows, page_now } = res.data;
            listData = page_data;
            course_title = kc_name;
            total = Number(total_rows);
            page = Number(page_now);
        }
    })
}

let handleSelectionChange = (val) => {
    form_query.page = val;
    getListData(apiName);
};
// 报名
function apply(item) {
    let tbm_bm_json = {
        bm_id: msOrjt === 'tjkc' ? item.tmz_id : item.tjz_id,
        bm_name: msOrjt === 'tjkc' ? item.tmz_zjmc : item.tjz_mc,
        bm_img: msOrjt === 'tjkc' ? item.tmz_img_url : item.tjz_img,
        bm_video: msOrjt === 'tjkc' ? item.tmz_video_url : item.tjz_video_file,
        teacher_name: item.teacher_name,
        school_name: item.school_name,
    }
    let data = {
        txwx_bm: {
            tbm_user_id: user.value.user_id,
            td_bm_id: msOrjt === 'tjkc' ? item.tmz_id : item.tjz_id,
            tbm_lclx: msOrjt === 'tjkc' ? "1" : '2',
            tbm_bm_json: JSON.stringify(tbm_bm_json),
        }
    }
    ElMessageBox.confirm(
        '确定报名此章节?',
        '报名',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    ).then(() => {
        bm_add(data).then(res => {
            if (res.code == '1') {
                ElMessage({
                    type: 'success',
                    message: res.msg,
                })
                getListData(apiName);
            }
        })
    })
}
function cancelApply(item) {
    let data = {
        td_bm_id: msOrjt === 'tjkc' ? item.tmz_id : item.tjz_id,
        tbm_lclx: msOrjt === 'tjkc' ? "1" : '2',
    }
    ElMessageBox.confirm(
        '确定取消报名此章节?',
        '取消报名',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    ).then(() => {
        bm_cancel(data).then(res => {
            if (res.code == '1') {
                ElMessage({
                    type: 'success',
                    message: res.msg,
                })
                getListData(apiName);
            } else {
                ElMessage(res.msg)
            }
        })
    })
}
</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>