<template>
  <!-- 课程资源 -->
  <div class="kczyContent" v-loading="loading">
    <el-card>
      <div style="padding: 0 75px;">
        <span class="title">课程资源</span>
        <span class="subTitle">我的课程 - 我创建的 - <span style="color: #000;">课程资源</span></span>
      </div>
    </el-card>

    <el-card style="padding-bottom: 50px;">
      <div class="searchDiv">
        <div class="menuDiv"></div>
        <div style="display: flex;align-items: center;">
          <el-button type="primary" @click="handleCreate">创建</el-button>
          <div class="searchValue">
            <input type="text" placeholder="搜索关键字" v-model="searchKey">
            <div class="searchBtn" @click="initData">
              <img src="/kczy/searchIcon.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="contentDiv">
        <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>
                      <el-icon @click.stop="handleEdit(item.kk_id)">
                        <EditPen />
                      </el-icon>
                      <el-icon @click.stop="handleDelete(item.kk_id)" style="margin-left: 20px;">
                        <Delete />
                      </el-icon>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </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>
    </el-card>
  </div>
</template>

<script>
import { Delete, EditPen } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus'
import { grade_list, subject_list, cate_list, kc_list, kc_delete } from "./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,
    }
  },
  components: { Delete, EditPen, ElMessageBox },
  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() {
      let data = {
        keyword: this.searchKey,
        grade_id: this.activeGrade,
        subject_id: this.activeSubject,
        kc_cate_level_1: this.activeCate,
        page: this.currentPage,
        limit: this.pageSize
      };

      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: "course-kczy-zy", params: { id: id } });
    },
    handleCreate() {
      this.$router.push({ name: "course-kczy-create" });
    },
    handleEdit(id) {
      this.$router.push({ name: "course-kczy-create", query: { id: id } });
    },
    handleDelete(kk_id) {
      ElMessageBox.confirm('是否确定删除当前课程？', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        kc_delete({ kk_id }).then(res => {
          if (res.code == 1) {
            this.$message.success("删除成功！");
            this.initData();
          }
        })
      }).catch(() => {

      })
    }
  },
  created() {
    this.initGradeData();
    this.initSubjectData();
    this.initCateData();
    this.initData();
  },
  mounted() {
    const _this = this;
    document.onkeydown = function (e) {
      e = window.event || e;
      if (_this.$route.name == "course-kczy" && (e.code === 'Enter' || e.code === 'enter')) {
        // 登录事件
        _this.initData();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.kczyContent {
  .el-card {
    margin-bottom: 15px;
    background: #fff;
  }
  .pointer {
    cursor: pointer;
  }
  .title {
    font-size: 18px;
    color: #050026;
  }
  .subTitle {
    font-size: 14px;
    color: #949494;
    margin-left: 45px;
  }
  .searchDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 80px;
    .el-button {
      width: 100px;
      height: 40px;
      margin-right: 40px;
    }
    .searchValue {
      width: 350px;
      height: 50px;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      input {
        width: 100%;
        height: 100%;
        outline: 0;
        box-sizing: border-box;
        padding-left: 10px;
        background: #f6f8fa;
      }
      .searchBtn {
        width: 26px;
        height: 26px;
        background: #00a3ff;
        border-radius: 6px;
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        img {
          display: block;
          text-align: center;
          margin: 6px auto 0;
        }
      }
    }
  }
  .line {
    height: 1px;
    background: #eaeaea;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-top: 10px;
  }
  .contentDiv {
    .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 {
      .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>

<style lang="scss" scoped>
.kczyContent::v-deep {
  .contentDiv {
    .resultDiv {
      .el-col-5 {
        flex: 0 0 20%;
      }
      .resultCard {
        .el-card__body {
          padding: 0;
        }
      }
    }
  }
}
</style>