<template>
  <!-- 课程资源资源 -->
  <div class="kczyContent-zy" v-loading="loading">
    <el-card>
      <div class="flex justify-between pr-30px">
        <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>
        <div class="to-back" @click="goBack">返回</div>
      </div>
    </el-card>
    <el-card class="bgCard">
      <div class="bgDetail">
        <div style="font-size: 28px; font-weight: 600">
          {{ detailInfo.zzc_name }}
        </div>
        <div class="flex" style="font-size: 16px; margin: 20px 0 30px">
          <div>
            <span>责任教师：</span>
            <span>{{ detailInfo.zzc_jsxx }}</span>
          </div>
        </div>
        <div style="font-size: 14px; line-height: 20px">
          简介：
          <p>{{ detailInfo.zzc_jj }}</p>
        </div>
      </div>

      <div class="zyContent">
        <div class="leftCon">
          <el-button @click="handleCreate">添加</el-button>
          <div class="line"></div>
          <div class="contentDiv">
            <div class="nav">
              <div class="search-list">
                <div class="label">分类</div>
                <div class="valueDiv">
                  <div
                    class="item pointer"
                    :class="activeType == item.v ? 'active' : ''"
                    @click="initType(item)"
                    v-for="item in typeData"
                    :key="item.v"
                  >
                    {{ item.n }}
                  </div>
                </div>
              </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">
                  <el-card
                    class="resultCard pointer mask"
                    @click="lookDetail(item)"
                  >
                    <div class="collect">
                      <div class="icon-item" style="margin-right: 18px">
                        <img src="/images/home/icon-prove.png" alt="" />
                        <span>{{ item.zz_like_num }}</span>
                      </div>
                      <div class="icon-item">
                        <img src="/images/home/icon-favor.png" alt="" />
                        <span>{{ item.zz_fav_num }}</span>
                      </div>
                    </div>
                    <div>
                      <video
                        v-if="item.zz_video"
                        class="mask"
                        style="height: 157px; width: 100%"
                      ></video>
                    </div>
                    <div class="kc-back">
                      <img
                        :src="getFullUrl(item.zz_img)"
                        style="height: 157px; width: 100%"
                        alt=""
                      />
                    </div>

                    <div style="padding: 8px 8px 0">
                      <div style="font-size: 16px">
                        {{ item.zz_name }}
                      </div>
                      <div class="operate">
                        <el-rate
                          size="large"
                          disabled
                          v-model="item.zz_star_num"
                          allow-half
                        />
                        <div>
                          <el-icon
                            class="pointer"
                            @click.stop="handleEdit(item.zz_id)"
                          >
                            <EditPen />
                          </el-icon>
                          <el-icon
                            class="pointer"
                            @click.stop="handleDelete(item.zz_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="currentPage1"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { zxxx_kc_detail, files_list, zxxx_delete, zxxx_list } 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: 10,
      currentPage1: 1,
      total: 0,
      typeData: [],
      activeType: "",
    };
  },
  components: { Delete, EditPen, ElMessageBox },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    initDetailData() {
      zxxx_kc_detail({ zzc_id: this.parentId }).then((res) => {
        if (res.code == 1) {
          this.detailInfo = res.data.one_info;
        }
      });
    },
    handleCurrentChange(val) {
      this.currentPage1 = val;
      this.initData();
    },
    initData() {
      this.loading = true;
      let data = {
        zzc_id: this.parentId,
        page: this.currentPage1,
        limit: this.pageSize,
        zz_type: this.activeType,
      };

      zxxx_list(data).then((res) => {
        if (res.code == 1) {
          if (this.typeData.length == 0) {
            this.typeData = [
              {
                v: "",
                n: "全部",
              },
            ];
            this.typeData = this.typeData.concat(
              res.data.table_structure.field.zz_type.option
            );
          }

          this.resultData = res.data.page_data;

          this.total = Number(res.data.total_rows);
          this.loading = false;
        }
      });
    },

    initType(value) {
      this.activeType = value.v;
      this.initData();
    },
    handleCreate() {
      this.$router.push({
        name: "course-zxxx-zycreate",
        query: { parentId: this.parentId },
      });
      this.setStorage1();
    },
    handleEdit(id) {
      this.$router.push({
        name: "course-zxxx-zycreate",
        query: { parentId: this.parentId, id: id },
      });
      this.setStorage1();
    },
    handleDelete(zz_id) {
      ElMessageBox.confirm("是否确定删除当前课程？", "提示", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          zxxx_delete({ zz_id }).then((res) => {
            if (res.code == 1) {
              this.$message.success("删除成功！");
              this.initData();
            }
          });
        })
        .catch(() => {});
    },
    lookDetail(item) {
      console.log(item, 333);
      if (item.zz_video != "") {
        this.$router.push({
          name: "zhjy_zhjyzxxx_zxxxsp",
          params: { id: item.zz_id },
        });
        this.setStorage1();
      } else {
        this.$router.push({
          name: "zhjy_zhjyzxxx_zxxxxq",
          params: { id: item.zz_id },
        });
        this.setStorage1();
      }
    },
    setStorage1() {
      sessionStorage.setItem("zz_type", this.activeType);
      sessionStorage.setItem("page1", this.currentPage1);
    },
    removeStorage() {
      this.activeType = sessionStorage.getItem("zz_type") || "";
      this.currentPage1 = Number(sessionStorage.getItem("page1")) || "1";
      sessionStorage.removeItem("zz_type");
      sessionStorage.removeItem("page1");
    },
  },
  created() {
    this.parentId = this.$route.params.id;
    this.initDetailData();
    this.removeStorage();
    this.initData();
  },
};
</script>

<style lang="scss" scoped>
.kc-back {
  width: 100%;
  display: block;
  overflow: hidden;
  cursor: pointer;
  img {
    width: 100%;
  }
}
.mask {
  z-index: 4;
  width: 100%;
  display: block;
  position: absolute;

  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4) url("@/assets/img/zhjy/start.png") no-repeat
    center;
  cursor: pointer;
}
.to-back {
  width: 100px;
  height: 40px;
  background: rgba(0, 163, 255, 0.8);
  border-radius: 6px;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: 40px;
}
.line {
  height: 1px;
  background: #eaeaea;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-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;
    cursor: pointer;
    .item + .item {
      margin-left: 20px;
    }
    .item {
      padding: 3px 5px;
      &.active {
        color: #00a3ff;
        border-radius: 6px;
        background: rgba($color: #00a3ff, $alpha: 0.1);
      }
    }
  }
}
::v-deep .el-col-5 {
  max-width: 20%;
}
.kczyContent-zy::v-deep {
  .bgCard {
    .el-card__body {
      padding-bottom: 0;
    }
  }
  .el-card {
    margin-bottom: 15px;
    background: #fff;
    position: relative;
    &.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>