<template>
  <div
    class="main bg-white-grey rounded-10px mt-4 py-8 px-8"
    style="font-size: 18px"
  >
    <div>
      <el-tabs
        v-model="activeName"
        class="demo-tabs text-center"
        @tab-click="handleClick"
        @tab-change="handleChange"
      >
        <el-tab-pane label="推荐课程" name="first"></el-tab-pane>
        <el-tab-pane label="家庭教育" name="second"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="flex">
      <el-select
        v-model="form_query.tjzx_id"
        class="shadow-default"
        placeholder="全部学科"
        size="large"
        clearable
      >
        <el-option value="">全部学科</el-option>
        <el-option
          v-for="item in subjectList"
          :key="item.tjzx_id"
          :label="item.tjzx_xkmc"
          :value="item.tjzx_id"
        />
      </el-select>
      <el-select
        v-model="form_query.tjzn_id"
        class="shadow-default ml-40px"
        placeholder="全部年级"
        size="large"
        clearable
      >
        <el-option value="">全部年级</el-option>
        <el-option
          v-for="item in gradeList"
          :key="item.tjzn_id"
          :label="item.tjzn_njmc"
          :value="item.tjzn_id"
        />
      </el-select>
      <el-select
        v-if="activeName == 'first'"
        v-model="form_query.tmk_zq"
        class="shadow-default ml-40px"
        placeholder="周期"
        size="large"
        clearable
      >
        <el-option value="">全部周期</el-option>
        <el-option
          v-for="item in zqList"
          :key="item.v"
          :label="item.n"
          :value="item.v"
        />
      </el-select>
    </div>
    <div class="flex justify-between items-center">
      <div class="search-box mt-5">
        <input type="text" placeholder="搜索关键字" v-model="keyword" />
        <button type="button" class="search-btn" @click="searchData"></button>
      </div>
      <div>
        <button
          v-if="!show"
          type="button"
          class="bg_blue text-white text-sm py-2 px-4 rounded-md"
          @click="toDetail"
        >
          报名详情
        </button>
        <button
          v-else
          type="button"
          class="bg_blue text-white text-sm py-2 px-4 rounded-md"
          @click="toBack"
        >
          返回
        </button>
      </div>
    </div>
    <!-- 列表 -->
    <div v-if="!show">
      <div v-if="activeName == 'first'">
        <ul
          v-loading="loading"
          v-if="listData.length > 0"
          class="mt-25px course-list"
        >
          <li v-for="item in listData" @click="toChapter(item)">
            <div class="course-img relative">
              <img :src="getFullUrl(item.tmk_img)" alt="" />
            </div>
            <div class="flex-1">
              <div class="p-10px border-bottom-1">
                <div
                  class="text-16px text-dark-400 h-44px leading-22px overflow-hidden"
                >
                  {{ item.tmk_kcm }}
                </div>
                <div class="mt-10px flex justify-between text-sm">
                  <h4 class="color-grey text-gray-500 text-xs">
                    {{ item.tjzn_name }} | {{ item.tmk_zq }} |
                    {{ item.tjzx_name }}
                  </h4>
                </div>

                <h5 class="mt-15px text-14px text-blue-500">
                  {{ item.bm_num }}人报名
                </h5>
              </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.tmk_zrjs_xm }}</span
                >
                <div class="w-102px text-gray-500 text-sm">
                  <p class="truncate">{{ item.tmk_ssjg_name }}</p>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <nodata v-else></nodata>
      </div>
      <div v-if="activeName == 'second'">
        <ul
          v-loading="loading"
          v-if="listData.length > 0"
          class="mt-25px course-list"
        >
          <li v-for="item in listData" @click="toChapter(item)">
            <div class="course-img relative">
              <img :src="getFullUrl(item.tjk_img)" alt="" />
            </div>
            <div class="flex-1">
              <div class="p-10px border-bottom-1">
                <div
                  class="text-16px text-dark-400 h-44px leading-22px overflow-hidden"
                >
                  {{ item.tjk_mc }}
                </div>
                <div class="mt-10px flex justify-between text-sm">
                  <h4 class="color-grey text-gray-500 text-xs">
                    {{ item.tjzn_name }} | {{ item.tjzx_name }}
                  </h4>
                </div>
                <h5 class="mt-15px text-14px text-blue-500">
                  {{ item.bm_num }}人报名
                </h5>
              </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.tjk_zrjsmc }}</span
                >
                <div class="w-102px text-gray-500 text-sm">
                  <p class="truncate">{{ item.tjk_zrjgmc }}</p>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <nodata v-else></nodata>
      </div>
      <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"
        ></el-pagination>
      </div>
    </div>

    <!-- 报名详情 -->
    <div v-if="show" v-loading="detail_loading">
      <ul v-if="detailList.length > 0" class="mt-25px chapter-list">
        <li v-for="(item, i) in detailList" :key="i">
          <div class="course-img relative">
            <img :src="getFullUrl(item.kc_info.bm_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.kc_info.bm_name }}
            </div>
            <div class="flex justify-end">
              <button
                @click="cancelApply(item)"
                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.kc_info.teacher_name }}</span
              >
              <div class="w-102px text-gray-500 text-sm">
                <p class="truncate">{{ item.kc_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="bm_page"
          v-model:page-size="bm_limit"
          layout="total, prev, pager, next"
          :total="bm_total"
          :background="true"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import { useRouter, useRoute } from "vue-router";
import {
  grade_list,
  subject_list,
  tjkc_list,
  jtjy_list,
  bm_list,
  bm_cancel,
} from "../api";
import { user } from "@/store/index";
import { getFullUrl } from "@/utils/helper";
import { ElMessage } from "element-plus";
import nodata from "@/pages/xsd/component/noData.vue";
const router = useRouter();
const route = useRoute();
const activeName = $ref("first");
let loading = $ref(false);
let show = $ref(false);
let keyword = $ref("");
let limit = $ref(8);
let total = $ref(0);
let cur_page = $ref(1);
let form_query = $ref({
  tjzn_id: "",
  tjzx_id: "",
  tmk_zq: "",
  limit: 6,
  page: 1,
});
let subjectList = $ref([]);
let gradeList = $ref([]);
let zqList = $ref([
  {
    v: "1",
    n: "春季",
  },
  {
    v: "2",
    n: "暑期",
  },
  {
    v: "3",
    n: "秋季",
  },
  {
    v: "4",
    n: "寒假",
  },
]);
let listData = $ref([]);
let apiName = "";
let tbm_lclx = "";
let detail_loading = $ref(false);
const handleClick = (tab, event) => {
  apiName = tab.paneName === "first" ? tjkc_list : jtjy_list;
  tbm_lclx = tab.paneName === "first" ? "1" : "2";
  initData(apiName);
  getDetailList();
};
const handleChange = (tab) => {
    apiName = tab == 'first' ? tjkc_list : jtjy_list;
    for (const key in form_query) {
        if (key != 'limit') form_query[key] = '';
    }
    form_query.page == 1;
    if (!show) initData(apiName);
}
if (route.query.type === undefined) {
  initData(tjkc_list);
} else if (route.query.type == "jtjy") {
  activeName = "second";
  // handleChange("second")
} else {
  activeName = "first";
  // handleChange("first")
}
watch(
  form_query,
  (newValue, oldValue) => {
    apiName = activeName === "first" ? tjkc_list : jtjy_list;
    tbm_lclx = activeName === "first" ? "1" : "2";
    initData(apiName);
    getDetailList();
  },
  { immediate: true }
);
// #region 年级学科
function getGradeList() {
  let data = {
    page: "1",
    limit: "999",
  };
  grade_list(data).then((res) => {
    if (res.code === "1") {
      gradeList = res.data.page_data;
    }
  });
}
function getSubjectList() {
  let data = {
    page: "1",
    limit: "999",
  };
  subject_list(data).then((res) => {
    if (res.code === "1") {
      subjectList = res.data.page_data;
    }
  });
}
// #endregion

function initData(name) {
  loading = true;
  let data = {
    ...form_query,
    M5jxrcL:'',
    // creade_user_id: user.value.user_id,
  };
  if (name === tjkc_list) {
    Object.assign(data, {
      tmk_sftjmszx: "3",
      tmk_kcm: keyword,
    });
  } else {
    Object.assign(data, {
      tjk_mc: keyword,
    });
  }
  name(data).then((res) => {
    if (res.code == "1") {
      loading = false;
      const { page_data, total_rows, page_now } = res.data;
      listData = page_data;
      total = Number(total_rows);
      cur_page = Number(page_now);
    } else {
      loading = false;
      ElMessage.error(res.msg);
    }
  });
}
function searchData() {
  apiName = activeName === "first" ? tjkc_list : jtjy_list;
  initData(apiName);
}
function toChapter(item) {
  if (activeName == "first") {
    router.push({
      name: "xsd_personal_wdbm_tjkc_chapter",
      params: { tmk_id: item.tmk_id },
    });
  } else {
    router.push({
      name: "xsd_personal_wdbm_jtjy_chapter",
      params: { tjk_id: item.tjk_id },
    });
  }
}

let detailList = $ref([]);
function toDetail() {
  show = true;
  getDetailList();
}
// 返回列表
function toBack() {
  show = false;
}
let bm_page = $ref(1);
let bm_limit = $ref(6);
let bm_total = $ref();
// 报名详情
function getDetailList() {
  detail_loading = true;
  let data = {
    tbm_lclx,
    page: bm_page,
    limit: bm_limit,
    tbm_user_id: user.value.user_id,
    M5jxrcL:'',
  };
  bm_list(data).then((res) => {
    if (res.code == "1") {
      const { page_data, page_now, total_rows } = res.data;
      detail_loading = false;
      detailList = page_data;
      bm_total = Number(total_rows);
      bm_page = Number(page_now);
      page_data.forEach((item) => {
        item.kc_info = JSON.parse(item.tbm_bm_json);
      });
    }
  });
}
// 取消报名
function cancelApply(item) {
  let data = {
    tbm_id: item.tbm_id,
  };
  ElMessageBox.confirm("确定取消该课程报名? ", "取消报名", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      bm_cancel(data).then((res) => {
        if (res.code == "1") {
          ElMessage.success(res.msg);
          getDetailList();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
}

getGradeList();
getSubjectList();
</script>
  
<style lang="scss" scoped>
$color: #1259a1;

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

.bg_blue {
  background: $color;
}

::v-deep .el-tabs__nav {
  float: unset;
}

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

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

::v-deep .el-select {
  .el-input__wrapper {
    border-radius: 10px;
  }
}

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

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

  li {
    min-width: 0;
    width: 49%;
    height: 151px;
    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;
        }
      }
    }
  }
}

.chapter-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, 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 .el-tabs__item.is-active,
::v-deep .el-tabs__item:hover {
  color: $color;
}
::v-deep .el-tabs__active-bar {
  background: $color;
}
</style>