<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 class="shadow-default bg-white-grey pt-10px rounded-10px">
        <div class="search-box">
          <input
            type="text"
            placeholder="搜索关键字"
            v-model="form_query.keyword"
          />
          <button type="button" class="search-btn" @click="initData"></button>
        </div>
        <div v-loading="loading" v-if="listData.length > 0">
          <ul class="mt-25px 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 class="mt-10px flex justify-end">
                  <h4 class="text-14px text-hex-1259A1">
                    {{ item.bm_num ? item.bm_num : 0 }}人报名
                  </h4>
                </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>
        <div class="py-80px" v-else>
          <nodata></nodata>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { dealFigureToChinese } from "@/utils/common-util";
import title from "~/assets/home/icon-3.png";
import nodata from "@/pages/xsd/component/noData.vue";
import { mszx_list, grade_list, subject_list } from "./api";
import { useRouter } from "vue-router";
const router = useRouter();
let form_query = $ref({
  page: 1,
  limit: 8,
  keyword: "",
  tmk_sftjmszx: "2",
  tjzx_id: "",
  tjzn_id: "",
  tmk_zq: "",
});
let total = $ref(10);
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([]);
function initData() {
  loading = true;
  let data = {
    ...form_query,
  };
  mszx_list(data).then((res) => {
    if (res.code == "1") {
      loading = false;
      listData = res.data.page_data;
      total = res.data.total_rows * 1;
    }
  });
}
initData();
function toDetail(item) {
  router.push({
    name: "home_mszx_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: 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;
        }
      }
    }
  }
}
</style>