<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 pt-8 pb-1 px-8">
      <check-row
        v-model="form_query.tjzn_id"
        label="年级"
        :items="gradeData"
        @click="initData"
      ></check-row>
      <check-row
        v-model="form_query.tjzx_id"
        label="学科"
        :items="subjectData"
        @click="initData"
      ></check-row>
      <check-row
        v-model="form_query.tmk_zq"
        label="周期"
        :items="zqData"
        @click="initData"
      ></check-row>
    </div>
    <div class="flex justify-between mt-15px z-10">
      <div class="shadow-default bg-white rounded-10px w-874px h-770px">
        <div class="py-13px px-18px w-full">
          <div class="search-box">
            <input
              type="text"
              placeholder="搜索关键字"
              v-model="form_query.keyword"
            />
            <button type="button" class="search-btn" @click="initData"></button>
          </div>
          <div>
            <div
              class="w-full h-618px relative"
              v-loading="loading"
              v-if="listData.length > 0"
            >
              <ul class="mt-24px course-list">
                <li
                  v-for="(item, i) in listData"
                  :key="i"
                  @click="toDetail(item)"
                >
                  <div class="course-img relative">
                    <img :src="item.tmk_img" alt="" />
                    <div class="course-fire-tag" v-if="item.hot == '1'"></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.tmk_lll ? item.tmk_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.tmk_dzl ? item.tmk_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"
                    >
                      <!-- 第{{
                        dealFigureToChinese(
                          (form_query.page - 1) * form_query.limit + (i + 1)
                        )
                      }}章： -->
                      {{ item.tmk_kcm }}
                    </div>
                  </div>
                  <div class="flex justify-between p-15px text-13px bordertop">
                    <span class="text-dark-400"
                      >责任老师：{{ item.tmk_zrjs_xm }}</span
                    >
                    <span
                      class="ml-10px flex-1 text-hex-999999 text-right text-overflow"
                      >{{ item.tmk_ssjg_name }}</span
                    >
                  </div>
                </li>
              </ul>
              <div class="flex justify-center my-10">
                <el-pagination
                  v-model:current-page="form_query.page"
                  v-model:page-size="form_query.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 size="100"></Nodata>
          </div>
        </div>
      </div>
      <!-- 课程安排 -->
      <div class="w-315px">
        <div
          class="w-full h-612px py-34px px-22px shadow-default bg-white rounded-10px"
        >
          <div class="flex justify-between items-center mb-28px">
            <h3 class="text-18px font-500">课程安排</h3>
          </div>
          <div v-if="kcapData.length > 0">
              <ul v-loading="loading" >
            <li
              class="text-14px flex items-center h-32px w-full border_b justify-between"
            >
              <p class="text-gray w-1/5">周期</p>
              <p class="text-gray w-1/3">时间</p>
              <p class="text-gray w-1/4">主讲人</p>
              <p class="text-gray w-1/4">名称</p>
            </li>
            <li
              v-for="(l, i) in kcapData"
              :key="i"
              class="text-14px flex items-center h-70px w-full border_b justify-between"
            >
              <p class="text-black w-1/5">{{ l.tmk_zq }}</p>
              <p class="text-black w-1/3">{{ l.plan_date }}</p>
              <p class="text-black w-1/4">{{ l.tmk_zrjs_xm }}</p>
              <p class="text-black w-1/4">{{ l.tmk_kcm }}</p>
            </li>
          </ul>
         
          <el-pagination
            v-model:current-page="form_query1.page"
            v-model:page-size="form_query1.limit"
            :pager-count="4"
            class="flex justify-center my-6"
            layout="prev, pager, next"
            :total="total1"
          />
          </div>
         <Nodata v-else size="100"></Nodata>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import title from "~/assets/home/icon-4.png";
import Nodata from "@/pages/xsd/component/noData.vue";
import { tjkc_list, grade_list, subject_list } from "./api";
import { useRouter } from "vue-router";
// import func from "vue-temp/vue-editor-bridge";
const router = useRouter();
let form_query = $ref({
  page: 1,
  limit: 6,
  keyword: "",
  tmk_sftjmszx: "3",
  tjzx_id: "",
  tjzn_id: "",
  tmk_zq: "",
});
let total = $ref(10);
let form_query1 = $ref({
  page: 1,
  limit: 6,
  tmk_sftjmszx: "3",
  kc_plan: "1",
});
let total1 = $ref(0);
let subjectData = $ref([]);
let gradeData = $ref([]);
let zqData = $ref([
  {
    n: "全部",
    v: null,
  },
  {
    v: "1",
    n: "春",
  },
  {
    v: "2",
    n: "夏",
  },
  {
    v: "3",
    n: "秋",
  },
  {
    v: "4",
    n: "冬",
  },
]);
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,
      }))
    );
  }
});

// 初始化
let loading = $ref(false);
let listData = $ref([]);
let kcapData = $ref([]);
function initData() {
  loading = true;
  let data = {
    ...form_query,
  };
  tjkc_list(data).then((res) => {
    if (res.code == "1") {
      loading = false;
      listData = res.data.page_data;
      total = res.data.total_rows * 1;
    }
  });
}
initData();
function getKcapData() {
  let data1 = {
    ...form_query1,
  };
  tjkc_list(data1).then((res) => {
    if (res.code == "1") {
      loading = false;
      kcapData = res.data.page_data;
      total1 = res.data.total_rows * 1;
    }
  });
}
getKcapData();
function toDetail(item) {
  router.push({
    name: "home_tjkc_chapter",
    params: {
      tmk_id: item.tmk_id,
    },
  });
}
</script>
<style lang="scss" scoped>
$color: #1259a1;
::v-deep .el-pagination.is-background .el-pager li.is-active {
  background: $color;
}
::v-deep .el-pager li:hover {
  color: $color;
}
.course-fire-tag {
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 27px;
  background: url("/images/icon-fire.png") center no-repeat;
  background-size: 26px 27px;
}
.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;
  }
}

.bordertop {
  border-top: 1px solid #eeeeee;
}
.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: 15px;
    margin-bottom: 20px;
    cursor: pointer;
    &:nth-child(3n) {
      margin-right: 0;
    }
    .course-img {
      width: 100%;
      height: 157px;
      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;
        }
      }
    }
  }
}
.border_b {
  border-bottom: 1px dashed #e4e6e8;
}
.text-gray {
  font-size: 14px;
  text-align: left;
  color: #9d9ab9;
}
.text-black {
  font-size: 14px;
  text-align: left;
  color: #050026;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
::v-deep .el-pagination button {
  background: transparent;
}
</style>