<template>
  <div class="container">
    <Header :title="$route.query.planType == `1` ? `文件列表` : `课程列表`" />

      <div class="main">
        <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    >
        <ul>
          <van-swipe-cell v-for="(item, index) in list" :key="index">
            <li
              @click="seeItem(item)"
              :class="[item.dangerStatus === 10 ? 'itemLi' : 'itemLi1']"
            >
              <div class="itemTop">
                <h4>{{ item.dangerName }}</h4>
              </div>
              <div class="cont">
                <img
                  class="img"
                  v-if="item.coverPhoto"
                  :src="baseUrl + item.coverPhoto"
                  alt=""
                />
                <div class="none_box img" v-else>暂无封面</div>
                <div class="text">
                  <p>
                    标题：<span>{{ item.courseTitle }}</span>
                  </p>
                  <p>
                    作者：<span>{{ item.categoriesAuthor ? item.categoriesAuthor:'-'}}</span>
                  </p>
                  <p>
                    主讲老师：<span>{{ item.categoriesLecturer? item.categoriesLecturer:'-' }}</span>
                  </p>
                </div>
              </div>
            </li>
          </van-swipe-cell>
        </ul>  </van-pull-refresh>
      </div>

  </div>
</template>

<script>
import { Notify } from 'vant'

import { mapState } from 'vuex'
import { queryCourseByTrainingPlanId } from '@/api/trainList/index.js'
export default {
  name: 'TrainList',

  data () {
    return {
      isLoading: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      list: []
    }
  },
  computed: {
    ...mapState('baseUrl', ['baseUrl'])
  },
  mounted () {
    this.initList()
  },

  methods: {
    async initList () {
      const { data: res } = await queryCourseByTrainingPlanId({
        trainingPlanId: this.$route.query.id || ''
      })
      if (res.code !== 200) return Notify({ type: 'danger', message: res.msg })
      this.list = res.data
    },
    onRefresh () {
      this.initList()
      this.isLoading = false
    },
    seeItem (item) {
      this.$router.push({ path: '/courseDetails', query: { item } })
    }
  }
}
</script>

<style lang="less" scoped>
ul {
  width: 100%;
  height: auto;
  .itemLi1 {
    width: 100%;
    min-height: 110px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px 1px #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 8px;
    .itemTop {
      display: flex;
      justify-content: space-between;
      span {
        font-size: 14px;
        padding: 3px 5px;
        border-radius: 2px;
        color: #fff;
      }
    }

  }
  .cont {
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: flex-start;
      .img {
        width: 80px;
        height: 80px;
        border: 1px solid #d0d0d0;
        color: gray;
        border-radius: 3px;
      }
      .none_box {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #d0d0d0;
        color: gray;
      }
      .text {
        width: calc(100% - 80px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        font-size: 14px;
        color: #969799;
        text-align: left;
        word-wrap: break-word;
        span {
          color: #000;
        }
      }
    }
  .itemLi {
    width: 100%;
    min-height: 120px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px 1px #ccc;
    border-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-bottom: 15px;
    padding: 8px;
    .itemTop {
      display: flex;
      justify-content: space-between;
      span {
        font-size: 14px;
        padding: 3px 5px;
        border-radius: 2px;
        color: #fff;
      }
    }
  }
}
</style>
