<template>
  <div class="evaluateDetail">
    <div class="nav">
      <van-nav-bar title="评价" left-arrow :fixed="true" @click-left="onClickLeft" />
    </div>
    <ul class="list">
      <li v-for="(n, i) in list" :key="n.id">
        <div class="info">
          <img :src="n.faceUrl ? n.faceUrl : require('../assets/boy.png')" alt="" />
          <div class="name">
            <h3>{{ n.name }}</h3>
            <p>{{ n.intime.substring(0, 10) }}</p>
          </div>
        </div>
        <div class="cont">{{ n.evaluation }}</div>
        <div class="imgs">
          <img @click="previewImg(i, j)" v-for="(k, j) in n.imgList" :key="k.id" :src="k.imgUrl" alt="" />
        </div>
        <div class="star oh" v-show="n.userType == 1">
          <div class="fl">我对课程的评分</div>
          <div class="fr">
            <van-rate v-model="n.courseScore" readonly void-icon="star" void-color="#eee" />
            <span>{{ n.courseScore }}.0</span>
          </div>
        </div>
        <div class="star oh" v-show="n.userType == 1">
          <div class="fl">我对基地的评分</div>
          <div class="fr">
            <van-rate v-model="n.baseScore" readonly void-icon="star" void-color="#eee" />
            <span>{{ n.baseScore }}.0</span>
          </div>
        </div>
      </li>
    </ul>
    <van-image-preview v-model="show" :startPosition="imgIndex" :closeable="true" :images="images"></van-image-preview>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: '',
      userInfo: '',
      show: false,
      images: [],
      imgIndex: 0,
    }
  },
  created() {
    var userInfo = sessionStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
    var id = this.$route.query.id
    this.GetEvaluationList(id)
  },
  methods: {
    GetEvaluationList(id) {
      var that = this
      this.http
        .GetEvaluationList({
          courseId: id,
          userId: this.userInfo ? this.userInfo.centerNo : 0,
        })
        .then(function (res) {
          if (res.status == 1) {
            that.list = res.data
          }
        })
    },
    onClickLeft() {
      history.back()
    },
    previewImg(i, j) {
      var that = this
      this.images = []
      this.list[i].imgList.forEach(function (z, x) {
        that.images.push(z.imgUrl)
      })
      this.imgIndex = j
      this.show = true
    },
  },
}
</script>

<style lang="stylus" scoped>
.list{
	padding 20px
	box-sizing border-box
	margin-top 50px
	li{
		margin-bottom 20px
		.info{
			img {
				width 50px
				height 50px
				border-radius 50px
				display inline-block
				vertical-align middle
			}
			div.name{
				display inline-block
				vertical-align middle
				h3{
					margin 0
					font-size 1.4rem
				}
				p{
					margin 0
					color #ccc
					font-size 1.2rem
				}
			}
		}
		.cont{
			margin-top 10px
			font-size 1.4rem
		}
		.imgs{
			margin-top 10px
			img{
				display inline-block
				width 60px
				height 60px
				margin-right 10px
				border-radius 5px
			}
		}
		.star{
			margin-top 10px
			.fl{
				font-size 1.2rem
			}
		}
	}
}
</style>
