<template>
  <div
    class="main bg-white-grey rounded-10px mt-4 py-8 px-8"
    style="font-size: 18px"
  >
    <div>
      <el-tabs
        v-loading="loading"
        v-model="activeName"
        class="demo-tabs text-center"
        @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
        filterable
      >
        <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
        filterable
      >
        <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.tjzx_dy"
        class="shadow-default ml-40px"
        placeholder="全部单元"
        size="large"
        clearable
        filterable
      >
        <el-option value="">全部单元</el-option>
        <el-option v-for="d in dy_list" :key="d.v" :label="d.n" :value="d.v" />
      </el-select>
      <!-- 册别 -->
      <el-select
        v-if="activeName == 'first'"
        v-model="form_query.tjzx_cb"
        class="shadow-default ml-40px"
        placeholder="全部册别"
        size="large"
        clearable
        filterable
      >
        <el-option value="">全部册别</el-option>
        <el-option v-for="b in cb_list" :key="b.v" :label="b.n" :value="b.v" />
      </el-select>

      <!-- 周期 -->
      <el-select
        v-if="activeName == 'second'"
        v-model="form_query.tmk_zq"
        class="shadow-default ml-40px"
        placeholder="全部周期"
        size="large"
        clearable
        filterable
      >
        <el-option value="">全部周期</el-option>
        <el-option
          v-for="item in zqList"
          :key="item.v"
          :label="item.n"
          :value="item.v"
        />
      </el-select>
      <!-- 全部名师资源 -->
      <el-select
        v-if="activeName == 'second'"
        v-model="form_query.tmk_sftjmszx"
        class="shadow-default ml-40px"
        placeholder="全部名师资源"
        size="large"
        clearable
        filterable
      >
        <el-option value="">全部名师资源</el-option>
        <el-option
          v-for="item in mszyList"
          :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>
    <!-- 列表 -->
    <div>
      <div v-if="activeName == 'first'">
        <div v-if="listData.length > 0">
          <ul>
            <li
              v-for="(l, i) in listData"
              :key="i"
              class="flex text-14px p-18.5px border_dotted"
            >
              <div class="text w-50px">{{ l.tjzx_name }}</div>
              <div class="text w-80px">{{ l.tjzn_name }}</div>
              <div class="text w-60px">{{ l.tjzx_cb_option_n }}</div>
              <div class="text w-100px">{{ l.tjzx_dy_option_n }}</div>
              <div class="text w-180px">{{ l.tz_kcbt }}</div>
              <div class="text w-180px">责任教师：{{ l.tz_zjrxm }}</div>
              <div class="text w-150px">{{ l.tz_ssdw_mc }}</div>
              <div class="text w-260px">
                开启时间：{{ l.ex.create_dateline }}
              </div>
              <div class="detail ml-100px" @click="toDetail(l)">查看</div>
            </li>
          </ul>
          <div class="mt-20px flex justify-center">
            <el-pagination
              v-model:current-page="form_query.page"
              v-model:page-size="form_query.limit"
              layout="total, prev, pager, next"
              :total="total"
              :background="true"
              @current-change="initData(apiName)"
              :hide-on-single-page="false"
            ></el-pagination>
          </div>
        </div>
        <nodata v-else></nodata>
      </div>
      <div v-if="activeName == 'second'">
        <div v-if="listData.length > 0">
          <ul>
            <li
              v-for="(l, i) in listData"
              :key="i"
              class="flex text-14px p-18.5px border_dotted"
            >
              <div class="text w-80px">{{ l.tjzx_name }}</div>
              <div class="text w-130px">{{ l.tjzn_name }}</div>
              <div class="text w-80px">{{ l.tmk_zq }}</div>
              <div class="text w-180px">{{ l.tmk_kcm }}</div>
              <div class="text w-200px">责任教师：{{ l.tmk_zrjs_xm }}</div>
              <div
                class="text w-100px text-hex-1259a1"
                v-if="
                  (l.tmk_sftjmszx_option_k == 1 &&
                    l.tmk_show_mszx_option_k != 1) ||
                  l.tmk_sftjmszx_option_k == 0
                "
              >
                --
              </div>
              <div
                class="text w-100px text-hex-1259a1"
                v-if="
                  l.tmk_sftjmszx_option_k == 2 ||
                  (l.tmk_sftjmszx_option_k == 1 &&
                    l.tmk_show_mszx_option_k == 1)
                "
              >
                名师在线
              </div>
              <div
                class="text w-100px text-hex-1259a1"
                v-if="l.tmk_sftjmszx_option_k == 3"
              >
                推荐课程
              </div>

              <div class="detail ml-150px" @click="toDetail(l)">查看</div>
            </li>
          </ul>
          <div class="mt-20px flex justify-center">
            <el-pagination
              v-model:current-page="form_query.page"
              v-model:page-size="form_query.limit"
              layout="total, prev, pager, next"
              :total="total"
              :background="true"
              @current-change="initData(apiName)"
              :hide-on-single-page="false"
            ></el-pagination>
          </div>
        </div>
        <nodata v-else></nodata>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import { useRouter, useRoute } from "vue-router";
import {
  grade_list,
  subject_list,
  zbkc_list,
  mszy_list,
  sjzd_list,
} 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 keyword = $ref("");

let total = $ref(0);

let form_query = $ref({
  tjzn_id: "",
  tjzx_id: "",
  tjzx_cb: "",
  tjzx_dy: "",
  tmk_zq: "",
  tmk_sftjmszx: "",
  limit: 6,
  page: 1,
});
let subjectList = $ref([]);
let gradeList = $ref([]);
let dy_list = $ref([]);
let cb_list = $ref([]);
let zqList = $ref([
  {
    v: "1",
    n: "春季",
  },
  {
    v: "2",
    n: "暑期",
  },
  {
    v: "3",
    n: "秋季",
  },
  {
    v: "4",
    n: "寒假",
  },
]);
let mszyList = $ref([
  {
    v: "1",
    n: "名师资源",
  },
  {
    v: "2",
    n: "名师在线",
  },
  {
    v: "3",
    n: "推荐课程",
  },
]);
let listData = $ref([]);
let apiName = "";

// const handleClick = (tab, event) => {
//   apiName = tab.paneName === "first" ? zbkc_list : mszy_list;

//   initData(apiName);
// };
const handleChange = (tab) => {
  apiName = tab == "first" ? zbkc_list : mszy_list;
  keyword = "";
  for (let key in form_query) {
    if (key != "limit") form_query[key] = "";
  }
  form_query.page = 1;

  initData(apiName);
};
if (route.query.type === undefined) {
  initData(zbkc_list);
} else if (route.query.type == "mszy") {
  activeName = "second";
  // handleChange("second");
  // initData(mszy_list);
} else {
  activeName = "first";
  // handleChange("first");
  // initData(zbkc_list);
}
watch(
  form_query,
  (newValue, oldValue) => {
    apiName = activeName === "first" ? zbkc_list : mszy_list;

    initData(apiName);
  },
  { 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;
    }
  });
}

//数据字典
function sjzdData() {
  const data2 = {
    cs_code: "TXWXDY",
  };
  sjzd_list(data2).then((res) => {
    if (res.code == "1") {
      dy_list = res.data.option;
    }
  });
  const data3 = {
    cs_code: "TXWXCB",
  };
  sjzd_list(data3).then((res) => {
    if (res.code == "1") {
      cb_list = res.data.option;
    }
  });
}

// #endregion

async function initData(name) {
  console.log(name, 1111111);
  loading = true;
  let data = {
    ...form_query,
    creade_user_id: user.value.user_id,
  };
  if (name === zbkc_list) {
    Object.assign(data, {
      tz_kcbt: keyword,
    });
  } else {
    Object.assign(data, {
      tmk_kcm: keyword,
    });
  }

  const res = await name(data);
  if (res.code == "1") {
    loading = false;
    listData = res.data.page_data;
    total = res.data.total_rows * 1;
  } else {
    loading = false;
    ElMessage.error(res.msg);
  }
}
// function handleCurrentChange(val) {
//   form_query.page = val;
//   apiName = activeName === "first" ? zbkc_list : mszy_list;
//   initData(apiName);
// }
function searchData() {
  apiName = activeName === "first" ? zbkc_list : mszy_list;
  initData(apiName);
}
function toDetail(item) {
  if (activeName == "first") {
    router.push({
      name: "jsd_personal_zy_zbkc_detail",
      params: { tz_id: item.tz_id },
    });
  } else {
    router.push({
      name: "jsd_personal_zy_mszy_detail",
      params: { tmk_id: item.tmk_id },
    });
  }
}

console.log(route.query.type, activeName, 4444);

sjzdData();
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);
}
.border_dotted {
  border-bottom: 2px dashed rgba(158, 140, 232, 0.43);
}
.detail {
  width: 58px;
  height: 23px;
  border: 1px solid #1259a1;
  border-radius: 12px;
  font-size: 12px;
  font-family: PingFang SC, PingFang SC-Regular;
  text-align: center;
  color: #1259a1;
  line-height: 23px;
}
.text {
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  line-height: 22px;
  padding: 0 5px;
  word-wrap: break-word;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
::v-deep .el-pagination.is-background .el-pager li.is-active {
  background: $color;
}
::v-deep .el-pager li:hover {
  color: $color;
}
::v-deep .el-pager li:hover {
  color: $color;
}
::v-deep .el-tabs__item.is-active,
::v-deep .el-tabs__item:hover {
  color: $color;
}
::v-deep .el-tabs__active-bar {
  background: $color;
}
</style>