<template>
  <div class="home-container">
    <head-bar :isBack="false">
      <template #title>
        <div style="width: 100%">
          <div class="rightSearch">
            <div class="searchImg" @click="search(groupA, typeCheck)">
              <img src="../../assets/images/home/search.png" alt="" />
            </div>
            <el-input
              v-model="courseName"
              auto-complete="off"
              placeholder="请输入项目名称..."
              @input="search(groupA, typeCheck)"
            ></el-input>
          </div>
        </div>
      </template>
    </head-bar>
    <div class="home-box">
      <type-filter @getAll="search" :zoneClass.sync="zoneClass"> </type-filter>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="rheight">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="vheight">
          <van-empty description="暂无问卷" v-if="!zoneClass.length" />
          <course-item
            v-for="(c, cIndex) in zoneClass"
            :key="cIndex"
            class="courseItem"
            :c="c"
            @getCourse="onRefresh1"
          ></course-item>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { selectTesttCourseCenter } from '@/api/testStudent'
import { selectTesttCourseCenter1 } from '@/api/testStudent'
import headBar from '@/components/headBar.vue'
import { mapGetters } from 'vuex'
import typeFilter from './components/typeFilter.vue'
import courseItem from './components/courseItem.vue'
export default {
  name: 'Test',
  components: {
    headBar,
    typeFilter,
    courseItem
  },
  data() {
    return {
      courseName: '',
      zoneClass: [],
      page: 1,
      groupA: 0,
      typeCheck: '',
      isLoading: false,
      loading: false,
      finished: true
    }
  },
  computed: {
    ...mapGetters(['userinfo'])
  },
  methods: {
    search(g, t) {
      this.page = 1
      this.groupA = g
      this.typeCheck = t
      this.getCourse(true, false)
    },
    onRefresh() {
      this.page = 1
      this.finished = false
      this.getCourse(true, false)
    },
    onRefresh1() {
      this.page = 1
      this.getCourse(true, true)
    },
    onLoad() {
      this.page++
      this.getCourse()
    },
    async getCourse(isRefresh, isOpen) {
      var typeE = []
      const params = {
        type: this.groupA,
        uid: this.userinfo.userid,
        oid: this.userinfo.organizeid,
        org: this.userinfo.org,
        typea: '',
        typeb: '',
        typec: '',
        typed: '',
        typef: this.typeCheck,
        typeE: typeE.join(','),
        cu: '',
        cn: this.courseName,
        page: this.page,
        pageSize: 10
      }
      const res = await selectTesttCourseCenter1(params)
      if (isRefresh) {
        this.isLoading = false
        // 下拉刷新
        res[0].forEach(el => {
          el.array = []
          el.isOpen = ''
          if (isOpen) {
            el.isOpen = isOpen
          } else {
            el.isOpen = false
          }
          let count = 0
          res[1].forEach(el2 => {
            if (el.courseId == el2.courseid) {
              // console.log(el2.name)
              // el2.name = ''
              count++
              el2.name = el2.name?el2.name:el.title + '测评试卷' + count
              el2.name = el.title + '测评试卷' + count
              el.array.push(el2)
            }
          })
          el.array.sort(function (a, b) {
            return new Date(b.createTime) - new Date(a.createTime)
          })
        })
        this.zoneClass = res[0]
      } else {
        this.loading = false
        // 上拉加载
        res[0].forEach(el => {
          el.array = []
          el.isOpen = ''
          if (isOpen) {
            el.isOpen = isOpen
          } else {
            el.isOpen = false
          }
          let count = 0
          res[1].forEach(el2 => {
            if (el.courseId == el2.courseid) {
              // console.log(el2.name)
              // el2.name = ''
              count++
              el2.name =  el2.name? el2.name:el.title + '测评试卷' + count
              el.array.push(el2)
            }
          })
          el.array.sort(function (a, b) {
            return new Date(b.createTime) - new Date(a.createTime)
          })
        })

        this.zoneClass = [...this.zoneClass, ...res[0]]
      }
      this.$emit('update:list', this.zoneClass)
      if (res[0].length === 0) {
        // 证明没有下一页数据了
        this.finished = true
      } else {
        this.finished = false
      }
    }
  },
  mounted() {
    this.getCourse()
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  height: 100%;
  overflow: hidden;
  .home-box {
    height: calc(100% - 55px);
    margin-top: 55px;
    overflow: hidden;
    background: #f0f2f5;
  }
  .rheight {
    height: calc(100% - 40px);
    overflow: auto;
    background: #e8ebf2;

    /deep/.van-pull-refresh__track {
      height: 100%;
    }
  }
  .vheight {
    padding: 10px 0;
    // height: 100%;
    // overflow: auto;
  }
  .courseItem {
    background: #fff;
    width: 90%;
    margin: 0 auto 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px 1px #dcdfe6;
    padding: 10px;
  }
}

/deep/.rightSearch {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 30px;
  position: relative;

  .searchImg {
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 9;
    top: 5px;
    left: 5px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .el-input__inner {
    width: 100%;
    height: 30px;
    text-indent: 15px;
    line-height: 30px;
  }
}
</style>
