<template>
  <!-- 课程资源 -->
  <div class="kczyStudentWork" v-loading="loading">
    <div class="searchBtn">
      <div class="search-list">
        <div class="label">年级</div>
        <div class="valueDiv">
          <div class="item pointer" :class="activeGrade==item.grade_id?'active':''" @click="initGrade(item)" v-for="item in gradeData" :key="item.grade_id">{{item.grade_name}}</div>
        </div>
      </div>
      <div class="search-list">
        <div class="label">科目</div>
        <div class="valueDiv">
          <div class="item pointer" :class="activeSubject==item.subject_id?'active':''" @click="initSubject(item)" v-for="item in subjectData" :key="item.subject_id">{{item.subject_name}}</div>
        </div>
      </div>
      <div class="search-list">
        <div class="label">分类</div>
        <div class="valueDiv">
          <div class="item pointer" :class="activeCate==item.kc_id?'active':''" @click="initCate(item)" v-for="item in cateData" :key="item.kc_id">{{item.kc_name}}</div>
        </div>
      </div>
    </div>
    <el-empty v-if="resultData.length==0" image-size="100" description="无数据" style="padding: 10px 0;" />
    <div class="resultDiv">
      <el-row :gutter="20">
        <el-col :span="5" v-for="item in resultData" :key="item.name" @click="lookDetail(item.kk_id)">
          <el-card class="resultCard pointer">
            <div class="collect">
              <div class="icon-item" style="margin-right: 18px;">
                <img src="/images/home/icon-prove.png" alt="">
                <span>{{item.kk_like_num}}</span>
              </div>
              <div class="icon-item">
                <img src="/images/home/icon-favor.png" alt="">
                <span>{{item.kk_fav_num}}</span>
              </div>
            </div>
            <img style="height: 157px;width: 100%;" :src="getFullUrl(item.kk_img)" alt="" />
            <div style="padding: 8px 8px 0;">
              <div style="font-size: 16px;">{{item.kk_name}}</div>
              <div class="operate">
                <el-rate size="large" disabled v-model="item.kk_star_num" allow-half />
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="paginationDiv">
      <el-pagination background layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange" :page-size="pageSize" :currentPage="currentPage"></el-pagination>
    </div>
  </div>
</template>

<script>
import { grade_list, subject_list, cate_list, kc_list } from "../../../MyCourse/api";
import { getFullUrl } from '@/utils/helper';
export default {
  data() {
    return {
      loading: false,
      gradeData: ["幼儿园", "一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "其他"],
      subjectData: ["美术", "音乐", "舞蹈"],
      cateData: [],
      activeGrade: "",
      activeSubject: "",
      activeCate: "",
      wholeData: [],
      resultData: [],
      pageSize: 10,
      currentPage: 1,
      total: 0,
    }
  },
  props: ["workType"],
  methods: {
    //年级
    initGradeData() {
      this.gradeData = [
        {
          grade_id: "",
          grade_name: "全部",
        }
      ];
      grade_list({ limit: 50 }).then((res) => {
        if (res.code == 1) {
          this.gradeData = this.gradeData.concat(res.data.page_data);
        }
      });
    },
    initGrade(value) {
      this.activeGrade = value.grade_id;

      this.initData();
    },
    // 科目
    initSubjectData() {
      this.subjectData = [
        {
          subject_id: "",
          subject_name: "全部",
        }
      ];
      subject_list({ limit: 50 }).then((res) => {
        if (res.code == 1) {
          this.subjectData = this.subjectData.concat(res.data.page_data);
        }
      });
    },
    initSubject(value) {
      this.activeSubject = value.subject_id;

      this.initData();
    },
    // 分类
    initCateData() {
      this.cateData = [
        {
          kc_id: "",
          kc_name: "全部",
        }
      ];
      cate_list({ kc_level: 1 }).then((res) => {
        if (res.code == 1) {
          this.cateData = this.cateData.concat(res.data.page_data);
        }
      });
    },
    initCate(value) {
      this.activeCate = value.kc_id;

      this.initData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initData();
    },
    initData(keyword) {
      let data = {
        keyword: keyword,
        grade_id: this.activeGrade,
        subject_id: this.activeSubject,
        kc_cate_level_1: this.activeCate,
        limit: this.pageSize,
        page: this.currentPage
      };

      this.loading = true;
      kc_list(data).then((res) => {
        if (res.code == 1) {
          this.resultData = res.data.page_data;
          this.total = Number(res.data.total_rows);
          this.loading = false;
        }
      });
    },
    lookDetail(id) {
      this.$router.push({ name: "personal_homework_kczy_worklist", params: { workType: this.workType, id } });
    },
  },
  created() {
    this.initGradeData();
    this.initSubjectData();
    this.initCateData();
    this.initData();
  }
}
</script>

<style lang="scss" scoped>
.kczyStudentWork {
  .pointer {
    cursor: pointer;
  }
  .searchBtn {
    padding-top: 10px;
    .search-list {
      display: flex;
      align-items: baseline;
      font-size: 14px;
      margin: 20px 0;
      .label {
        color: #000;
        margin-right: 25px;
      }
      .valueDiv {
        flex: 1;
        display: flex;
        color: #949494;
        border-bottom: 1px dashed #e4e6e8;
        padding-bottom: 15px;
        font-weight: 400;
        .item + .item {
          margin-left: 20px;
        }
        .item {
          padding: 3px 5px;
          &.active {
            color: #00a3ff;
            border-radius: 6px;
            background: rgba($color: #00a3ff, $alpha: 0.1);
          }
        }
      }
    }
  }
  .resultDiv {
    .el-col-5 {
      flex: 0 0 20%;
    }
    .resultCard::v-deep {
      margin-bottom: 15px;
      border-radius: 12px;
      .el-card__body {
        padding: 0;
      }
    }
    .resultCard {
      position: relative;
      .collect {
        position: absolute;
        right: 0;
        background: rgba($color: #000000, $alpha: 0.59);
        border-radius: 0px 12px 0px 12px;
        color: #fff;
        font-size: 14px;
        display: flex;
        padding: 0 18px;
        line-height: 32px;
        .icon-item {
          display: flex;
          align-items: center;
          img {
            width: 17px;
            margin-right: 5px;
          }
        }
      }
      .operate {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .paginationDiv {
    position: absolute;
    right: 30px;
    bottom: 15px;
    padding: 3px;
  }
}
</style>