<template>
  <div class="courseList">
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :loosing-text="$t('loosing_text')"
      :loading-text="$t('loading_text')"
    >
      <van-list v-model="loading" :finished="finished" @load="getList">
        <div style="padding-bottom: 110px">
          <div class='course_class_box' v-if='classList && classList.length != 0'>
            <div class='course_class_item font12' :class='classIndex == index ? "activeClass" : "inactiveClass"' v-for='(item,index) in classList' :key='index' @click='chooseClass(item,index)'>
              {{item.name}}
            </div>
          </div>
          <div class="text-center" style="padding: 170px 0" v-if="!emptyData">
            <img
              class="emptyDataIcon"
              src="https://image.fulllinkai.com/202108/23/939c529ca16a91e3ee3b22bef2fe92ca.png"
              alt=""
            />
            <div class="color9 font14" style="margin-top: 14px">{{ $t('Temporarily_no_data') }}</div>
          </div>
          <div v-else>
            <div class="moreCourseBox">
              <div
                class="courseBox"
                v-for="(item, index) in list"
                :key="index"
                @click="goToUrlId(`courseDetail`, item.id)"
              >
                <div class="coursePic backCover">
                  <van-image class="" width="100%" height="100%" fit="cover" :src="item.thumb" />
                  <div v-if="item.discount_status == 1" class="preferential colorff font10">
                    {{ $t('preferential') }}
                  </div>
                </div>
                <div class="m_cou_ct">
                  <div class="m_lst_ri">
                    <div class="font16 color3 bold course_title">
                      <div class="group-icon backCover" v-if="item.is_group"></div>
                      <div class="ellipsis_1">{{ item.title }}</div>
                    </div>
                    <div class="font12 color9 ellipsis_1">{{ item.videos_count || 0 }}{{ $t('Class_time') }}</div>
                  </div>
                  <div class="signUpBox f-fbc">
                    <div class="coursePrice bold font18">
                      <span  v-if="item.charge != 0">￥</span>
                      <span >{{ item.charge == 0? $t('free') : item.charge }}</span>
                      <span class="color9 font12 originalPrice" v-if="item.discount_status == 1">{{
                        item.price
                      }}</span>
                    </div>
                    <div class="signUp font14 colorff">{{userAuth.is_vip === 1 && item.vip_free === 1? 'VIP免费' : $t('join_learning') }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottomLine font12 color6 text-center" v-if="noMoreData">
              - {{ $t('I_have_a_line_in_the_sand') }} -
            </div>
            <div style="height: 50px;"></div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { $toastClear, $toastLoading } from '@/config/toast'
import service from '@/utils/request'

export default {
  computed: {},
  components: {},
  props: {
    url: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      list: [],
      classState: 0,
      classIndex: 0,
      class_id: '',
      classList: [],
      page: 1,
      finished: false,
      loading: false,
      refreshing: false,
      emptyData: true,
      noMoreData: false,
      userAuth: {}
    }
  },
  watch: {},
  methods: {
    chooseClass(e, index) {
      this.classIndex = index
      if (e.id) {
        this.class_id = e.id
      } else {
        this.class_id = ''
      }
      this.onRefresh()
    },
    getAllClass() {
      const vm = this
      const url = `s/h5/course/class`
      service.get(url).then(data => {
        if (data) {
          vm.classList = data
          if (vm.classList.length !== 0) {
            vm.classList.unshift({ id: 0, name: '全部', sort: 0 })
          }
          console.log(vm.classList, '/*-/-*-*/-')
        }
      }).catch(error => {
        console.log(error)
      })
    },
    ToText(HTML) {
      var input = HTML
      return input.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi, '').replace(/<[^>]+?>/g, '').replace(/\s+/g, ' ').replace(/ /g, ' ').replace(/>/g, ' ')
    },
    getVipValue() {
      const vm = this
      vm.showQrcode = false
      service.get(`s/h5/user/auth/info`)
        .then(data => {
          console.log(data, 'data----')
          vm.userAuth = data
        })
    },
    getList() {
      const vm = this
      $toastLoading(vm.$i18n.t('loading_text'))
      console.log('two')
      if (!vm.classState) {
        vm.class_id = ''
        vm.getAllClass()
        vm.classState++
      }
      vm.getVipValue()
      service.get(`${vm.url}?page=${vm.page}&class_id=${vm.class_id}`).then(data => {
        const dataV = vm.page === 1 ? [] : vm.list
        if (data.data && data.data.length !== 0) {
          data.data.forEach((item) => {
            if (item.short_description) {
              item.short_description = vm.ToText(item.short_description).slice(0, 32)
            }
          })
        }
        dataV.push(...data.data)
        vm.list = dataV
        vm.refreshing = false
        if (vm.list.length !== 0) {
          vm.emptyData = true
        } else {
          vm.emptyData = false
        }
        if (vm.list.length < 15 || data.data.length < 15) {
          vm.finished = true
          vm.noMoreData = true
          if (vm.list.length === 0) {
            vm.noMoreData = false
          }
          $toastClear()
          return
        } else {
          vm.$nextTick(() => {
            vm.loading = false
            vm.page++
          })
          $toastClear()
        }
        // vm.page++
        // vm.loading = false
        setTimeout(() => {
          $toastClear()
        }, 500)
      })
        .catch(error => {
          console.log(error)
        })
    },
    onRefresh() {
      this.page = 1
      this.finished = false
      this.loading = true
      this.getList()
    },
    goToUrlId(url, id) {
      this.$router.push({
        name: url,
        params: { id: id }
      })
    }
  },
  created() {},
  mounted() {
    const ScrollTop = document.getElementById('app')
    ScrollTop.scrollTop = 0
  }
}
</script>
<style lang="scss" scoped>
.courseList {
  height: calc(100vh - 44px) !important;
}
.van-tab__pane {
  width: 100vw;
  background: #ffffff;
}
.emptyDataIcon {
  width: 135px;
  height: 100px;
  display: block;
  margin: 0 auto;
}
.course_class_box{
  padding: 3px 0 3px 15px;
  overflow-x: scroll;
  white-space: nowrap;
  .course_class_item{
    display: inline-block;
    width: fit-content;
    padding: 3px 12px;
    border-radius: 20px;
    margin-right: 15px;
  }
  .activeClass{
    color: #707FFA;
    background: #F2F3FF;
  }
  .inactiveClass{
    color: #999999;
    background: #f8f8f8;
  }
}
.moreCourseBox {
  margin: 0 15px;
  .courseBox {
    margin: 15px 0;
    background: #ffffff;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
    .coursePic {
      width: 100%;
      height: 194px;
      position: relative;
      .group_icon{
        width: 32px;
        height: 16px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .preferential {
        position: absolute;
        top: 0;
        left: 0;
        background: #ff4a4c;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 5px;
        height: 17px;
        border-radius: 8px 0;
      }
    }
    .m_cou_ct {
      padding: 10px 12px 15px;
      box-sizing: border-box;
      .m_lst_ri {
        width: 100%;
        .course_title{
          width: 100%;
          /*display: flex;*/
          /*align-items: center;*/
          .group-icon{
            float: left;
            margin-top: 2px;
            margin-right: 4px;
            width: 32px;
            height: 16px;
            background-image: url("https://image.fulllinkai.com/202211/15/631d937276380af19ec646cf7563a64a.png");
          }
        }
        div {
          /*width: 100%;*/
          margin-bottom: 5px;
        }
      }
      .signUpBox {
        width: 100%;
        .coursePrice {
          color: #fb9830;
          max-width: 80px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .originalPrice {
            text-decoration: line-through;
            margin-left: 5px;
            position: relative;
            top: -1px;
          }
        }
        .signUp {
          padding: 8px 25px;
          background: linear-gradient(90deg, #8c9bff 0%, #707ffa 100%);
          border-radius: 100px;
        }
      }
    }
    .joinButton,
    .joinCourseV2 {
      position: absolute;
      right: 15px;
      bottom: 20px;
      width: 78px;
      height: 28px;
      border-radius: 15px;
      border: 1px solid #ffc67d;
    }
    .joinCourseV2 {
      border: 1px solid #c2c2c2;
    }
  }
}
.bottomLine {
  padding-top: 20px;
}
</style>
<style lang="scss">
.van-tab__pane {
  width: 100%;
  min-height: 100%;
  background: #ffffff;
}
</style>
