<template>
  <!-- 课程资源资源 -->
  <div class="kczyContent-zy" v-loading="loading">
    <el-card>
      <div style="padding: 0 75px;">
        <span class="title">课程资源</span>
        <span class="subTitle">作业 - 创建 - <span class="pointer" @click="goBack">课程</span> - <span style="color: #000;">资源</span></span>
      </div>
    </el-card>
    <el-card class="bgCard">
      <div class="bgDetail">
        <div style="font-size: 28px;font-weight: 600;">{{detailInfo.kk_name}}</div>
        <div class="flex" style="font-size: 16px;margin: 20px 0 30px;">
          <div>
            <span>责任教师：</span>
            <span>{{detailInfo.kk_zrjs}}</span>
          </div>
          <div style="margin-left: 80px;">
            <span>机构名称：</span>
            <span>{{detailInfo.kk_jgmc}}</span>
          </div>
        </div>
        <div style="font-size: 14px;line-height: 20px;">
          简介：
          <p>{{detailInfo.kc_jj}}</p>
        </div>
      </div>

      <div class="searchDiv">
        <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 class="zyContent">
        <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">
              <el-card class="resultCard pointer" @click="lookDetail(item.kf_id)">
                <div class="collect">
                  <div class="icon-item" style="margin-right: 18px;">
                    <img src="/images/home/icon-prove.png" alt="">
                    <span>{{item.kf_like_num}}</span>
                  </div>
                  <div class="icon-item">
                    <img src="/images/home/icon-favor.png" alt="">
                    <span>{{item.kf_fav_num}}</span>
                  </div>
                </div>
                <img style="height: 157px;width: 100%;" :src="getFullUrl(item.kf_img)" alt="" />
                <div style="padding: 8px 8px 0;">
                  <div style="font-size: 16px;">{{item.kf_name}}</div>
                  <div class="operate">
                    <el-rate size="large" disabled v-model="item.kf_star_num" allow-half />
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { kc_detail, files_list } from "../../MyCourse/api";
export default {
  data() {
    return {
      loading: false,
      workType: "",
      parentId: "",
      searchKey: "",
      detailInfo: {},
      resultData: [],
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    initDetailData() {
      kc_detail({ kk_id: this.parentId }).then((res) => {
        if (res.code == 1) {
          this.detailInfo = res.data.one_info;
        }
      });
    },
    initData() {
      this.loading = true;
      let data = {
        keyword: this.searchKey,
        kk_id: this.parentId,
        yzk_id: 1,
      }
      files_list(data).then((res) => {
        if (res.code == 1) {
          this.resultData = res.data.page_data;

          this.loading = false;
        }
      });
    },
    lookDetail(id) {
      this.$router.push({ name: "personal_homework_wlzb_worklist", params: { workType: this.workType, id }, query: { kkID: this.parentId } });
    }
  },
  created() {
    this.workType = this.$route.params.workType;
    this.parentId = this.$route.params.id;
    this.initDetailData();
    this.initData();
  }
}
</script>

<style lang="scss" scoped>
.kczyContent-zy::v-deep {
  .bgCard {
    .el-card__body {
      padding-bottom: 0;
    }
  }
  .el-card {
    margin-bottom: 15px;
    background: #fff;
    &.resultCard {
      .el-card__body {
        padding: 0;
      }
    }
  }
  .pointer {
    cursor: pointer;
  }
  .title {
    font-size: 18px;
    color: #050026;
  }
  .subTitle {
    font-size: 14px;
    color: #949494;
    margin-left: 45px;
  }
  .flex {
    display: flex;
  }
  .bgDetail {
    background: url("/kczy/chapterBG.png") no-repeat top left;
    background-size: 100%;
    color: #fff;
    padding: 50px 60px;
    border-radius: 12px;
  }
  .searchDiv {
    display: flex;
    justify-content: flex-end;
    margin: 30px 0;
    .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;
        }
      }
    }
  }
  .zyContent {
    // display: flex;
    // margin-top: 40px;
    .resultDiv {
      width: 100%;
      .el-col-5 {
        flex: 0 0 20%;
      }
      .resultCard {
        position: relative;
        border-radius: 12px;
        .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;
        }
      }
    }
  }
}
</style>