<template>
  <div class="releaseEvaluate">
    <div class="btns">
      <span @click="AddEvaluation">发布</span>
    </div>
    <div class="base">
      <img :src="courseInfo.coverUrl" alt="" />
      <p>{{ courseInfo.course_name }}</p>
    </div>
    <div class="cont">
      <div class="item">
        <textarea v-model="content" name="" id="" cols="30" rows="10" placeholder="结束研学之旅后,~"></textarea>
        <p>评论至少15字</p>
      </div>
    </div>
    <div class="imgs">
      <img :src="n.imgUrl" alt="" v-for="(n, i) in imgsrc" :key="i" />
      <div class="selectImg">
        <imgCut @callback="callback" :width="200" :height="200">
          <van-icon name="plus" />
        </imgCut>
      </div>
    </div>
    <div class="box oh">
      <span class="fl">课程评分</span>
      <div class="fr">
        <span><van-rate v-model="starsCourseNum" void-icon="star" void-color="#eee"/></span><span>{{ starsCourseNum }}.0</span>
      </div>
    </div>
    <div class="box oh">
      <span class="fl">基地评分</span>
      <div class="fr">
        <span><van-rate v-model="starsBaseNum" void-icon="star" void-color="#eee"/></span><span>{{ starsBaseNum }}.0</span>
      </div>
    </div>
  </div>
</template>

<script>
import { imgCut } from 'vue-imgcut'
export default {
  data() {
    return {
      starsBaseNum: 1,
      starsCourseNum: 1,
      userInfo: '',
      courseInfo: '',
      content: '',
      imgsrc: [],
    }
  },
  components: {
    imgCut,
  },
  created() {
    var userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
    var courseInfo = localStorage.getItem('YXNowCourse')
    if (courseInfo) {
      this.courseInfo = JSON.parse(courseInfo)
    }
  },
  methods: {
    AddEvaluation() {
      var that = this
      this.$toast.loading({
        message: '请求中...',
      })
      this.http
        .AddEvaluation({
          baseId: this.courseInfo.baseId,
          title: this.title,
          evaluation: this.content,
          courseId: this.courseInfo.id,
          userId: this.userInfo.centerNo,
          imgList: this.imgsrc,
          courseScore: this.starsCourseNum,
          baseScore: this.starsBaseNum,
        })
        .then(function(res) {
          that.$toast.clear()
          if (res.status == 1) {
            that.$toast.success('发送成功')
            setTimeout(function() {
              that.$router.push({ path: '/Foot', query: { tabId: 1 } })
            }, 1000)
          }
        })
    },
    callback(img) {
      this.imgsrc.push({
        imgUrl: img,
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
.releaseEvaluate{
	padding 40px
	box-sizing border-box
	.btns{
		text-align right
		span{
			display inline-block
			padding 6px 10px
			width 100px
			text-align center
			margin-left 10px
			border-radius 100px
			border 2px solid #ccc
			font-size 1.4rem
		}
		span:last-child{
			background-color #19D075
			color white
			border none
		}
	}
	.cont{
		input{
			border none
			width 100%
			height 76px
			line-height 76px
			font-size 1.4rem
		}
		textarea{
			width 100%
			border none
			font-size 1.2rem
		}
		p{
			font-size 1.2rem
			text-align right
			color #909090
			span{
				color #09CE6C
			}
		}
	}
	.imgs{
		padding 40px 0
		img:first-child::after{
			content '封面图片'
			position absolute
			bottom 0
			left 0
			right 0
			background-color rgba(0,0,0,.5)
			color white
			font-size 1.2rem
			padding 6px
			z-index 1000
		}
		img{
			position relative
			display inline-block
			vertical-align top
			width 100px
			height 100px
			border-radius 10px
			margin-right 20px
		}
		.selectImg{
			display inline-block
			vertical-align top
			width 100px
			height 100px
			text-align center
			line-height 100px
			border-radius 10px
			border 2px solid #eee
			font-size 2rem
			color #eee
		}
	}
	.base{
		padding-left 100px
		box-sizing border-box
		position relative
		color #09CE6D
		margin 60px 0
		p{
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			font-size 1.2rem
			-webkit-line-clamp: 1;
			overflow: hidden;
		}

		img{
			width 80px
			height 80px
			border-radius 10px
			position absolute
			left 0
			top -30px
		}

	}
	.box{
		padding 20px 0
		font-size 1.6rem
	}
}
</style>