<template>
  <div class="course-list-wrapper">
    <ul class="course-header">
      <li class="title">
        <span class="main">全部课程</span>
        <span v-show="courseLimitCount != -1" class="sub"
          >单个项目最多只能选择{{ courseLimitCount }}个课程</span
        >
      </li>
      <li class="order">
        <div class="num" @click="toggleOrder">
          <span>学习人数</span>
          <span v-show="kind == 0">
            <img
              v-show="!isRise"
              src="../../../assets/custom/icon/icon-rise.png"
              alt
            />
            <img
              v-show="isRise"
              src="../../../assets/custom/icon/icon-drop.png"
              alt
            />
          </span>
          <span v-show="kind == 1">
            <img
              v-show="!isRiseOrg"
              src="../../../assets/custom/icon/icon-rise.png"
              alt
            />
            <img
              v-show="isRiseOrg"
              src="../../../assets/custom/icon/icon-drop.png"
              alt
            />
          </span>
        </div>
        <div class="cart-wrapper">
          <div class="cart" @click="toggleCart">
            <span>已选课程</span>
            <img src="../../../assets/custom/icon/icon-cart.png" alt />
            <div class="count">
              <span>{{ cartList.length }}</span>
            </div>
          </div>
          <div v-show="isShowCart" class="curt-position">
            <ShoppingCart @close="toggleCart"></ShoppingCart>
          </div>
        </div>
      </li>
    </ul>
    <div
      v-if="courseList && courseList.list && courseList.list.length"
      class="list-wrapper"
    >
      <ul class="list">
        <li
          v-show="kind == 1"
          class="course create-btn"
          @click="showOrgCourse(0)"
        >
          <img src="../../../assets/image/phrase3/plus-icon.png" />
          <span>创建机构课程</span>
        </li>
        <li
          class="course"
          :class="{
            'course-checked': item.checked,
            cursor: kind == 0 || item.checkStatus == 2,
          }"
          v-for="(item, index) in courseList.list"
          :key="index"
          @click="toggleChecked(item)"
        >
          <div class="img">
            <img :src="item.courseImageUrl" alt />
            <span class="level">{{ item.typeStr }}</span>
          </div>
          <div class="detail">
            <span class="title">{{ $filters.shortName(item.courseName) }}</span>
            <div class="chapter">
              <span>{{ $filters.shortName(item.docName, 5) }}</span>
              <span class="section-num"
                >{{ item.chapterSum }}章{{ item.lectureNum }}节
                {{ item.totalTime }}分</span
              >
              <span v-if="item.testCount" class="exam-num"
                >{{ item.testCount }}场考试</span
              >
            </div>
            <div v-if="item.checkStatus == 2 || kind == 0" class="cost">
              <span class="no">免费</span>
              <span class="num">{{ item.joinNum }}人已学</span>
            </div>
            <div v-else class="cost audit">
              <span class="no">{{
                item.checkStatus == 0 ? '审核中' : '审核失败'
              }}</span>
              <div
                v-show="item.checkStatus == 1"
                class="edit"
                @click="showOrgCourse(item.courseId)"
              >
                <span>查看详情</span>
                <img src="../../../assets/image/phrase3/arrow-right.png" />
              </div>
            </div>
          </div>
          <img
            v-show="item.checked"
            class="course-selected"
            src="../../../assets/custom/icon/icon-selected.png"
          />
        </li>
      </ul>
    </div>
    <div v-else class="no-list">
      <img src="../../../assets/custom/icon/img-no-content.png" alt />
      <span class="tips">没有找到相关结果，请重新查询</span>
      <el-button
        v-show="kind == 1"
        type="primary"
        :icon="ElIconPlus"
        @click="showOrgCourse(0)"
        >创建机构课程</el-button
      >
    </div>
    <div class="page-wrapper">
      <div v-show="kind == 0" class="page">
        <el-pagination
          background
          :current-page="searchParam.pageNo"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="searchParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="courseList.totalRows"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
      <div v-show="kind == 1" class="page">
        <el-pagination
          background
          :current-page="searchParamOrg.pageNo"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="searchParamOrg.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="courseList.totalRows"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 弹框提示 -->
    <dialog-componet :dialogObj="dialogObj"></dialog-componet>
  </div>
</template>

<script>
import { Plus as ElIconPlus } from '@element-plus/icons'
import { $on, $off, $once, $emit } from '../../../../utils/gogocodeTransfer'
import ShoppingCart from '@/components/education/custom/shopping-cart'
import dialog from '@/components/education/custom/dialog'
import { mapGetters, mapActions } from 'vuex'
export default {
  data() {
    return {
      isRise: true,
      isRiseOrg: true,
      isShowCart: false,
      dialogObj: {
        title: '课程数量已达上限',
        visible: false,
        message: '单个项目最多只能选择3个课程',
        tip: '',
        hideMsg: '我知道了',
      },
      ElIconPlus,
    }
  },
  computed: {
    ...mapGetters([
      'cartList',
      'courseList',
      'searchParam',
      'searchParamOrg',
      'courseLimitCount',
      'kind',
    ]),
  },
  components: {
    ShoppingCart,
    dialogComponet: dialog,
  },
  methods: {
    ...mapActions(['setCartList', 'setSearchParam', 'setSearchParamOrg']),

    toggleOrder() {
      if (this.kind == 0) {
        this.isRise = !this.isRise
        let dir = this.isRise ? 1 : 2
        this.searchParam.dir = dir
        this.setSearchParam(this.searchParam)
      } else {
        this.isRiseOrg = !this.isRiseOrg
        let dir = this.isRiseOrg ? 1 : 2
        this.searchParamOrg.dir = dir
        this.setSearchParamOrg(this.searchParamOrg)
      }
    },
    toggleCart() {
      this.isShowCart = !this.isShowCart
    },

    // 选择当前分页个数
    handleSizeChange(val) {
      if (this.kind == 0) {
        this.searchParam.pageSize = val
        this.setSearchParam(this.searchParam)
      } else {
        this.searchParamOrg.pageSize = val
        this.setSearchParamOrg(this.searchParamOrg)
      }
    },

    // 选择当前分页
    handleCurrentChange(val) {
      console.log()
      if (this.kind == 0) {
        this.searchParam.pageNo = val
        this.setSearchParam(this.searchParam)
      } else {
        this.searchParamOrg.pageNo = val
        this.setSearchParamOrg(this.searchParamOrg)
      }
    },

    // 选择课程（并要处理过滤，删除等）
    toggleChecked(item) {
      if (item.checkStatus != 2 && this.kind == 1) return
      item.checked = !item.checked
      if (item.checked) {
        if (
          this.courseLimitCount != -1 &&
          this.cartList.length >= this.courseLimitCount
        ) {
          item.checked = !item.checked
          this.dialogObj.message =
            '单个项目最多只能选择' + this.courseLimitCount + '个课程'
          this.dialogObj.visible = true
          return
        }
        this.cartList.unshift(item) // 倒序
      } else {
        let delItemIndex = this.cartList.findIndex((course) => {
          return course.courseId == item.courseId
        })
        this.cartList.splice(delItemIndex, 1)
      }
      this.setCartList(this.cartList)
      this.$forceUpdate()
    },

    // 通知父组件，打开创建资源（课程）弹框
    showOrgCourse(courseId) {
      $emit(this, 'showOrgCourse', courseId ? courseId : 0)
    },
  },
  emits: ['showOrgCourse'],
}
</script>

<style lang="less" scoped>
.course-list-wrapper {
  padding: 0 30px;
  min-width: 1136px;
  .course-header {
    // position: relative;
    // top: 0;
    // left: 0;
    display: flex;
    flex-direction: row;
    height: 78px;
    // line-height: 78px;
    align-items: center;
    // margin-right: 100px;
    justify-content: space-between;
    .title {
      .main {
        margin-right: 6px;
        font-size: 18px;
        font-weight: 600;
        color: #000;
      }
      .sub {
        font-size: 14px;
        font-weight: 400;
        color: #676869;
      }
    }
    .order {
      // margin-right: 40px;
      padding-right: 12px;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 14px;
      color: #333333;
      img {
        position: relative;
        top: 2px;
        width: 14px;
        height: 14px;
      }
      .num {
        cursor: pointer;
        margin-right: 30px;
      }
      .cart-wrapper {
        position: relative;
        .cart {
          cursor: pointer;
          position: relative;
          .count {
            position: absolute;
            height: 20px;
            top: -8px;
            right: -12px;
            display: inline-block;
            span {
              display: inline-block;
              min-width: 18px;
              text-align: center;
              font-size: 12px;
              padding: 2px;
              background: red;
              border-radius: 10px;
              color: #fff;
            }
          }
        }
        .curt-position {
          background: #fff;
          position: absolute;
          top: 30px;
          right: 0px;
          z-index: 100;
        }
      }
    }
  }
  .list-wrapper {
    // height: 500px;
    overflow: auto;
    .list {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
      overflow-y: auto;
      .course {
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        display: flex;
        flex-direction: row;
        height: 120px;
        width: 527px;
        padding: 15px;
        margin-bottom: 10px;
        margin-right: 10px;
        border-radius: 4px;
        border: 1px solid rgba(228, 231, 237, 1);
        user-select: none;
        // cursor: pointer;
        &.cursor {
          cursor: pointer;
        }
        &.course-checked {
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 2px solid #449284;
            border-radius: 4px;
          }
        }
        .img {
          position: relative;
          top: 0;
          left: 0;
          width: 160px;
          height: 90px;
          margin-right: 15px;
          img {
            width: 160px;
            height: 90px;
            border-radius: 4px;
          }
          .level {
            position: absolute;
            top: 0;
            left: 0;
            width: 44px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            color: #fff;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px 0px 4px 0px;
          }
        }
        .detail {
          position: relative;
          display: flex;
          flex-direction: column;
          flex: 1;
          .title {
            position: relative;
            top: -3px;
            left: 0;
            font-size: 16px;
            font-weight: 600;
            color: #373839;
          }
          .chapter {
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            .section-num::before,
            .exam-num::before {
              content: '';
              position: relative;
              top: 2.5px;
              left: 0;
              display: inline-block;
              height: 14px;
              line-height: 14px;
              margin: 0 10px;
              width: 1px;
              background: #999999;
            }
          }
          .cost {
            position: absolute;
            left: 0;
            bottom: -5px;
            .no {
              font-size: 18px;
              font-weight: 600;
              margin-right: 4px;
              color: #d82b2b;
            }
            .num {
              font-size: 14px;
              font-weight: 400;
              color: #999999;
            }
            &.audit {
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              .edit {
                cursor: pointer;
                span {
                  font-size: 14px;
                  color: #449284;
                }
                img {
                  width: 10px;
                  height: 10px;
                }
              }
            }
          }
        }
        .course-selected {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 44px;
          height: 44px;
        }
        &.create-btn {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background: rgba(248, 249, 250, 1);
          border-radius: 4px;
          border: 1px dashed rgba(228, 231, 237, 1);
          cursor: pointer;
          img {
            width: 16px;
            height: 16px;
          }
          span {
            margin-top: 4px;
            font-size: 12px;
            color: #979899;
          }
        }
      }
    }
  }
  .page-wrapper {
    // width: 1074px;
    text-align: right;
    .page {
      // float: right;
      margin: 20px 0;
    }
  }
  .no-list {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    // padding: 30px 200px;
    width: 100%;
    text-align: center;
    margin-bottom: 100px;
    align-items: center;
    img {
      width: 300px;
      height: 300px;
    }
    .tips {
      position: relative;
      top: -30px;
      left: 10px;
      z-index: 2;
      color: #999999;
    }
  }
}
</style>
