<template>
  <div class="releaseEvaluate">
    <div class="box top" v-if="baseId">
      <div class="pic">
        <img :src="baseInfo.coverList[0].cover_url ? baseInfo.coverList[0].cover_url : require('@/assets/home/defCoure.jpg')" alt="" style="width:100%;height:100%">
      </div>
      <div class="basefont">
        <div class="titlefont">{{baseInfo.baseName}}</div>
        <div class="tcfont">{{baseInfo.address}}</div>
        <div class="tcfont">{{baseInfo.phone}}</div>
      </div>
    </div>
    <div class="box top" v-else>
      <div class="pic">
        <img :src="courseInfo.coverUrl ? courseInfo.coverUrl : require('@/assets/home/defCoure.jpg')" alt="" style="width:100%;height:100%">
      </div>
      <div class="basefont">
        <div class="titlefont">{{courseInfo.baseName}}</div>
        <div class="tcfont">套餐名称：{{courseInfo.courseName}}</div>
        <div class="tcfont" v-if="courseInfo.orderCount">数量*{{courseInfo.orderCount}}</div>
      </div>
    </div>
    <div class="box">
      <div class="boxdf" v-if="!baseId">
        <div class="title">课程评分</div>
        <div class="fr">
          <van-rate v-model="evaluationData.courseScore" void-icon="star" void-color="#eee" color="#FFCC00" :size="16" readonly />
          <span class="rate">{{evaluationData.courseScore}}.0</span>
        </div>
      </div>
      <div class="boxdf">
        <div class="title">基地评分</div>
        <div class="fr">
          <van-rate v-model="evaluationData.baseScore" void-icon="star" void-color="#eee" color="#FFCC00" :size="16" readonly />
          <span class="rate">{{evaluationData.baseScore}}.0</span>
        </div>
      </div>
      <p class="evaluation"><span>评价：</span>{{evaluationData.evaluation}}</p>
      <div class="evaluation_img_box">
        <img class="evaluation_img" v-for="(imgItem,index) in evaluationData.imgList" :key="index" :src="imgItem.imgUrl" alt="" @click="previewImg(imgItem.imgUrl)">
      </div>
            <p class="evaluation_time">评价于 {{evaluationData.intime}}</p>
    </div>
  </div>
</template>

<script>
import { imgCut } from 'vue-imgcut'
export default {
  data () {
    return {
      baseId: '',//有基地id时为基地评价
      baseInfo:'',
      evaluationId: '',
      evaluationData: '',
      starsBaseNum: 0,
      starsCourseNum: 0,
      userInfo: '',
      courseInfo: '',
      content: '',
      imgsrc: [],
      fileList: [
        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        { url: 'https://cloud-image', isImage: true },
      ],
    }
  },
  components: {
    imgCut
  },
  mounted () {
    this.evaluationId = this.$route.query.evaluationId
    let baseId = this.$route.query.baseId
    // 当前为基地评价
    if (baseId) {
      this.baseId = baseId
      this.GetStudyBaseDetail()
    }
    this.getEvaluationDetail()

    var courseInfo = window.localStorage.getItem('courseInfo');
    if (courseInfo) {
      this.courseInfo = JSON.parse(courseInfo);
    }
  },
  methods: {
    getEvaluationDetail () {
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })
      this.yxAxios.get(`${this.yanxueUrl}/api/StudiesWap/EvaluationDetail/ById?id=${this.evaluationId}`).then((res) => {
        this.$toast.clear()
        console.log('评价：', res.data)
        if (res.data.status == 1) {
          let evaluationData = res.data.data
          evaluationData.intime = this.Moment(new Date(evaluationData.intime)).format('YYYY-MM-DD')
          this.evaluationData = evaluationData
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
    // 获取基地信息
    GetStudyBaseDetail () {
      this.$toast.loading({
        message: '请求中...',
      });
      this.yxAxios.get(`${this.yanxueUrl}/api/StudiesWap/GetStudyBaseDetail?userId=0&cs=绍兴市&id=${this.baseId}`).then((res) => {
        console.log(res.data)
        if (res.data.data) {
          this.$toast.clear();
          this.baseInfo = res.data.data;
        } else {
          this.$toast.fail(res.data.message)
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.releaseEvaluate {
  padding: 20px;
  box-sizing: border-box;
  background: #f6f7fa;
  box-sizing: border-box;
  min-height: 100vh;
  .box {
    width: 702px;
    background: #fff;
    border-radius: 16px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
    margin-bottom: 16px;
  }
  .top {
    display: flex;

    .pic {
      width: 124px;
      height: 124px;
      flex-shrink: 0;
    }
    .basefont {
      padding: 0 20px;
      box-sizing: border-box;
      .titlefont {
        color: #333333;
        font-size: 28px;
        margin-bottom: 18px;
      }
      .tcfont {
        color: #535353;
        font-size: 24px;
      }
    }
    .priceRight {
      width: 110px;
      font-size: 28px;
      color: #f64c37;
      line-height: 200px;
    }
  }
  .cont {
    .van-cell {
      background: #f5f6fa;
    }
    input {
      border: none;
      width: 100%;
      height: 38px;
      line-height: 38px;
      font-size: 1.4rem;
    }
    p {
      font-size: 1.2rem;
      text-align: right;
      color: #909090;
      span {
        color: #09ce6c;
      }
    }
  }
  .imgs {
    background: #f5f6fa;
    padding: 20px;
    // 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: 3px;
    // 	z-index: 1000;
    // }
    img {
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: 142px;
      height: 142px;
      border-radius: 5px;
      margin-right: 10px;
      margin-top: 10px;
    }
    .selectImg {
      display: inline-block;
      vertical-align: top;
      width: 142px;
      height: 142px;
      text-align: center;
      line-height: 50px;
      border-radius: 5px;
      border: 1px solid rgb(8, 23, 88);
      font-size: 2rem;
      color: #eee;
      margin-top: 10px;
    }
  }
  .boxdf {
    padding: 10px 0;
    font-size: 5vw;
    display: flex;
    .title {
      font-size: 28px;
      margin-right: 10px;
    }
    .rate {
      color: #ffcc00;
      font-size: 30px;
      margin-left: 10px;
    }
  }
  .evaluation {
    font-size: 30px;
    span {
      font-weight: bold;
    }
  }
  .evaluation_img_box {
    margin-top: 22px;
    .evaluation_img {
      width: 212px;
      height: 212px;
      margin-right: 9px;
      margin-bottom: 9px;
      &:nth-of-type(3n) {
        margin-right: 0;
      }
    }
  }
  .evaluation_time {
    margin-top: 18px;
    text-align: right;
    color: #999999;
    font-size: 28px;
  }
}
</style>