<template>
  <div class="evaluateDetail">
    <div class="nav">
      <van-nav-bar title="搜索课程" left-arrow :fixed="true" @click-left="onClickLeft">
        <template #right>
          <div class="searchBtn" @click="searchBox = true">
            <van-icon name="apps-o" />
            <span>重新筛选</span>
          </div>
        </template>
      </van-nav-bar>
    </div>
    <h3 class="searchCont">共搜索到{{ listCount }}个课程</h3>
    <dl class="condition">
      <dd v-for="(n, i) in condition" :key="'100' + i">{{ n }}</dd>
    </dl>
    <ul class="list">
      <li v-for="(n, i) in list" :key="i" @click="goCourseDetail(n.id)">
        <div class="top">
          <span class="title">{{ n.baseName }}</span>
          <span class="lookNum">{{ n.read_count }}人已浏览</span>
          <img :src="n.coverUrl ? n.coverUrl : require('@/assets/defCoure.jpg')" alt="" />
        </div>
        <div class="bottom">
          <h3>{{ n.course_info }}</h3>
          <!-- <p>“深刻了解江南水乡”</p> -->
        </div>
      </li>
    </ul>
    <van-empty
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="暂无课程"
      v-if="list.length == 0"
    />
    <van-popup v-model="searchBox" position="right">
      <div class="searchBox">
        <h3>筛选搜索</h3>
        <p>年龄段</p>
        <ul class="grades">
          <li><span :class="grade.indexOf('一年级') > -1 ? 'active' : ''" @click="selectGrade('一年级', 0)">一年级</span></li>
          <li><span :class="grade.indexOf('二年级') > -1 ? 'active' : ''" @click="selectGrade('二年级', 0)">二年级</span></li>
          <li><span :class="grade.indexOf('三年级') > -1 ? 'active' : ''" @click="selectGrade('三年级', 0)">三年级</span></li>
          <li><span :class="grade.indexOf('四年级') > -1 ? 'active' : ''" @click="selectGrade('四年级', 0)">四年级</span></li>
          <li><span :class="grade.indexOf('五年级') > -1 ? 'active' : ''" @click="selectGrade('五年级', 0)">五年级</span></li>
          <li><span :class="grade.indexOf('六年级') > -1 ? 'active' : ''" @click="selectGrade('六年级', 0)">六年级</span></li>
          <li><span :class="grade.indexOf('初一') > -1 ? 'active' : ''" @click="selectGrade('初一', 0)">初一</span></li>
          <li><span :class="grade.indexOf('初二') > -1 ? 'active' : ''" @click="selectGrade('初二', 0)">初二</span></li>
          <li><span :class="grade.indexOf('初三') > -1 ? 'active' : ''" @click="selectGrade('初三', 0)">初三</span></li>
          <li><span :class="grade.indexOf('高一') > -1 ? 'active' : ''" @click="selectGrade('高一', 0)">高一</span></li>
          <li><span :class="grade.indexOf('高二') > -1 ? 'active' : ''" @click="selectGrade('高二', 0)">高二</span></li>
          <li><span :class="grade.indexOf('高三') > -1 ? 'active' : ''" @click="selectGrade('高三', 0)">高三</span></li>
        </ul>
        <p>课程分类</p>
        <ul class="grades">
          <li v-for="(n, i) in CourseTypeList" :key="i + '100'">
            <span :class="subject.indexOf(n.id) > -1 ? 'active' : ''" @click="selectGrade(n.id, 1, n.courseType)">{{ n.courseType }}</span>
          </li>
        </ul>
        <p>地点</p>
        <ul class="grades">
          <li><span :class="area.indexOf('杭州市') > -1 ? 'active' : ''" @click="selectGrade('杭州市', 2)">杭州</span></li>
          <li><span :class="area.indexOf('宁波市') > -1 ? 'active' : ''" @click="selectGrade('宁波市', 2)">宁波</span></li>
          <li><span :class="area.indexOf('温州市') > -1 ? 'active' : ''" @click="selectGrade('温州市', 2)">温州</span></li>
          <li><span :class="area.indexOf('绍兴市') > -1 ? 'active' : ''" @click="selectGrade('绍兴市', 2)">绍兴</span></li>
          <li><span :class="area.indexOf('湖州市') > -1 ? 'active' : ''" @click="selectGrade('湖州市', 2)">湖州</span></li>
          <li><span :class="area.indexOf('嘉兴市') > -1 ? 'active' : ''" @click="selectGrade('嘉兴市', 2)">嘉兴</span></li>
          <li><span :class="area.indexOf('金华市') > -1 ? 'active' : ''" @click="selectGrade('金华市', 2)">金华</span></li>
          <li><span :class="area.indexOf('衢州市') > -1 ? 'active' : ''" @click="selectGrade('衢州市', 2)">衢州</span></li>
          <li><span :class="area.indexOf('台州市') > -1 ? 'active' : ''" @click="selectGrade('台州市', 2)">台州</span></li>
          <li><span :class="area.indexOf('丽水市') > -1 ? 'active' : ''" @click="selectGrade('丽水市', 2)">丽水</span></li>
          <li><span :class="area.indexOf('舟山市') > -1 ? 'active' : ''" @click="selectGrade('舟山市', 2)">舟山</span></li>
        </ul>
        <div class="btns">
          <span @click="btnClick()">重置</span>
          <span @click="btnClick(1)">确定</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: '',
      listCount: 0,
      userInfo: '',
      searchBox: true,
      grade: [],
      subject: [],
      area: [],
      condition: [],
      CourseTypeList: [],
      CourseTypeText: [],
    }
  },
  created() {
    var userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
    var id = this.$route.query.id
    this.GetCourseTypeList()
  },
  mounted() {
    var box = document.getElementsByClassName('searchBox')
    box[0].style.height = window.innerHeight + 'px'
    console.log(window.innerHeight + 'px')
  },
  methods: {
    goCourseDetail(id) {
      this.$router.push({ path: '/CourseDetail', query: { id: id } })
    },
    onClickLeft() {
      history.back()
    },
    selectGrade(text, type, name) {
      var that = this
      var arr = ''
      if (type == 0) {
        arr = this.grade
      } else if (type == 1) {
        arr = this.subject
      } else if (type == 2) {
        arr = this.area
      }
      if (arr.indexOf(text) == -1) {
        arr.push(text)
      } else {
        arr.forEach(function (n, i) {
          if (n == text) {
            arr.splice(i, 1)
          }
        })
      }
      if (name) {
        if (this.CourseTypeText.indexOf(name) == -1) {
          this.CourseTypeText.push(name)
        } else {
          this.CourseTypeText.forEach(function (n, i) {
            if (n == name) {
              that.CourseTypeText.splice(i, 1)
            }
          })
        }
      }
    },
    btnClick(t) {
      if (t) {
        this.GetCourseList(1)
        this.searchBox = false
        this.condition = this.grade.concat(this.CourseTypeText).concat(this.area)
      } else {
        this.grade = []
        this.subject = []
        this.area = []
      }
    },
    GetCourseTypeList() {
      var that = this
      this.http
        .GetCourseTypeList({
          page: 1,
          pageSize: 999,
        })
        .then(function (res) {
          if (res.status == 1) {
            that.CourseTypeList = res.data.list
          }
        })
    },
    GetCourseList(page) {
      var that = this
      this.$toast.loading({
        message: '请求中...',
      })
      this.http
        .GetCourseList({
          pageIndex: page,
          pageSize: 99999,
          courseType: this.subject.join(','),
          area: this.area.join(','),
          suitableAges: this.grade.join(','),
        })
        .then(function (res) {
          that.$toast.clear()
          if (res.status == 1) {
            that.listCount = res.data.count
            that.list = res.data.items
          }
        })
    },
  },
}
</script>

<style lang="stylus" scoped>
.evaluateDetail{
	background-color #FBFBFB
	position fixed
	left 0
	top 0
	right 0
	bottom 0
	overflow auto
}
.searchBtn{
	color #6BCFAD
	font-size 1.4rem
	i{
		color #6BCFAD
		display inline-block
		vertical-align middle
	}
	span{
		display inline-block
		vertical-align middle
	}
}
.searchCont{
	margin-top 100px
	font-size 1.2rem
	padding-left 40px
}
.condition{
	padding 0 40px
	box-sizing border-box
	dd{
		display inline-block
		padding 10px 30px
		border-radius 100px
		background #B6F3D8
		color #02924C
		margin 0 20px 10px 0
	}
}
.searchBox{
	width 600px
	height 100%
	overflow auto
	padding-bottom 200px
	box-sizing: border-box;
	h3{
		padding-left 40px
		font-size 1.6rem
	}
	p{
		padding-left 40px
		font-size 1.4rem
	}
	.grades{
		padding 0 20px
		box-sizing border-box
		overflow hidden
		li{
			padding 20px
			float left
			width 33.33%
			box-sizing border-box
			span{
				display inline-block
				width 100%
				padding 20px 0
				text-align center
				font-size 1.4rem
				border-radius 6px
				position relative
				background-color #EEEEEE
			}
			span.active{
				background-color #92EFC9
				color #0d6e44
			}
			span.active::after{
				content 'x'
				position absolute
				color white
				right 6px
				bottom 0
				font-size 1.2rem
				z-index 100
			}
			span.active::before{
				content 'x'
				position absolute
				color white
				right 0
				bottom 0
				z-index 50
				width 0
				height 0
				border-bottom 40px solid #1CD988
				border-left 40px solid transparent
			}
		}
	}
	.btns{
		position absolute
		bottom 0
		left 0
		right 0
		background-color white
		text-align center
		padding 40px 0
		box-shadow 0 -6px 10px #EEEEEE
		span{
			display inline-block
			padding 20px 60px
			background-color #A6A6A6
			border-radius 100px 0 0 100px
			color white
			font-size 1.6rem
		}
		span:last-child{
			background linear-gradient(138deg, #29E576 0%, #14CFB0 100%)
			border-radius 0 100px 100px 0
		}
	}
}
.list{
	overflow hidden
	padding 0 40px
	box-sizing border-box
	li{
		float left
		width 50%
		box-sizing border-box
		margin-bottom 20px
		margin-top 20px
		min-height 480px
		.top{
			position relative
			img{
				width 100%
				height 336px
				border-radius 20px 20px 0 0
				object-fit cover
			}
			span{
				position absolute
				background-color rgba(0,0,0,0.5)
				color white
				left 20px
				padding 6px 10px
			}
			span.lookNum{
				bottom 20px
				border-radius 100px
			}
			span.title{
				top 20px
			}
		}
		.bottom{
			background-color white
			border-radius 0 0 10px 10px
			min-height 130px
			padding 0 20px
			box-sizing border-box
			h3{
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin 0
				font-size 1.6rem
			}
			p{
				color #0EDBA1
				font-size 1.2rem
				margin 0
				padding 10px 0
			}
		}
	}
	li:nth-child(2n){
		padding-left 20px
	}
	li:nth-child(2n+1){
		padding-right 20px
	}
}
</style>