<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="zyContent">
        <div class="leftCon">
          <el-button @click="handleCreate">添加</el-button>
          <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="8" v-for="item in resultData" :key="item.name">
                  <el-card class="resultCard pointer" @click="lookDetail(item)">
                    <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>
                          <el-icon class="pointer" @click.stop="handleEdit(item.kf_id)">
                            <EditPen />
                          </el-icon>
                          <el-icon class="pointer" @click.stop="handleDelete(item.kf_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> -->
        </div>
        <div class="rightCon" v-if="detailInfo && detailInfo.file_preview">
          <div style="font-size: 16px;font-weight: 600;color: #171721;">课程安排</div>
          <div class="kcapContent">
            <iframe class="iframe" :src="detailInfo.file_preview" width="100%" frameborder="0" scrolling="auto"></iframe>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { kc_detail, files_list, files_delete } from "./api";
import { Delete, EditPen } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus'
export default {
  data() {
    return {
      loading: false,
      parentId: "",
      detailInfo: {},
      resultData: [],
      pageSize: 12,
      currentPage: 1,
      total: 0,
    }
  },
  components: { Delete, EditPen, ElMessageBox },
  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;
        }
      });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initData();
    },
    initData() {
      this.loading = true;
      let data = {
        kk_id: this.parentId,
        // page: this.currentPage,
        // limit: this.pageSize
      }
      files_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(item) {
      let marklable = item.kf_path.substr(item.kf_path.lastIndexOf(".") + 1);
      let kfId = item.kf_id;
      this.$router.push({ path: '/resourceMovReview', query: { kfId: kfId, kkID: this.parentId } });
    },
    handleCreate() {
      this.$router.push({ name: "course-kczy-zycreate", query: { parentId: this.parentId } });
    },
    handleEdit(id) {
      this.$router.push({ name: "course-kczy-zycreate", query: { parentId: this.parentId, id: id } });
    },
    handleDelete(kf_id) {
      ElMessageBox.confirm('是否确定删除当前课程？', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        files_delete({ kf_id }).then(res => {
          if (res.code == 1) {
            this.$message.success("删除成功！");
            this.initData();
          }
        })
      }).catch(() => {

      })
    }
  },
  created() {
    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;
  }
  .zyContent {
    display: flex;
    margin-top: 40px;
    .leftCon {
      flex: 1;
      padding-bottom: 50px;
      position: relative;
      .el-button {
        width: 100px;
        height: 40px;
        border: 1px solid #00a3ff;
        color: #00a3ff;
        margin-bottom: 30px;
      }
      .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: 0;
        bottom: 15px;
        padding: 3px;
      }
    }
    .rightCon {
      margin-left: 50px;
      width: 500px;
      border-radius: 12px 12px 0px 0;
      box-shadow: 2px 10px 24px 0px rgba(161, 153, 168, 0.18);
      padding: 30px 20px;
      margin-top: -20px;
      .kcapContent {
        margin-top: 30px;
        // border: 1px solid;
        height: 500px;
        iframe {
          height: 100%;
        }
      }
    }
  }
}
</style>