<template>
  <div class="releaseEvaluate">
    <div class="box top">
      <div class="pic">
        <img :src="courseInfo.coverUrl ? courseInfo.coverUrl : require('../../assets/service/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">数量*{{courseInfo.orderCount}}</div>
      </div>
    </div>
    <div class="box">
      <div class="boxdf">
        <div class="title">课程评分</div>
        <div class="fr">
          <van-rate v-model="starsCourseNum" void-icon="star" void-color="#eee" color="#FFCC00" :size="16" />
          <span class="rate">{{starsCourseNum}}.0</span>
        </div>
      </div>
      <div class="boxdf">
        <div class="title">基地评分</div>
        <div class="fr">
          <van-rate v-model="starsBaseNum" void-icon="star" void-color="#eee" color="#FFCC00" :size="16" />
          <span class="rate">{{starsBaseNum}}.0</span>
        </div>
      </div>
      <div class="cont">
        <div class="item">
          <van-field v-model="content" type="textarea" label="" placeholder="关于活动、课程、研学的感想或评论" />
        </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="750" :height="750">
            <van-icon name="cross" />
          </imgCut>
        </div>
        <!-- <van-uploader v-model="fileList" multiple /> -->
      </div>
    </div>
    <div class="btns" :class="content==''||starsCourseNum==0||starsBaseNum==0?'disabled':''" @click="AddEvaluation ">发布</div>
  </div>
</template>

<script>
import { imgCut } from 'vue-imgcut'
export default {
  data () {
    return {
      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 () {
    var userInfo = localStorage.getItem('userInfo');
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo);
    }
    var courseInfo = localStorage.getItem('courseInfo');
    if (courseInfo) {
      this.courseInfo = JSON.parse(courseInfo);
    }
  },
  methods: {
    AddEvaluation () {
      if (this.content == '') {
        this.$toast('请输入评价内容')
        return;
      }
      if (this.starsCourseNum == 0) {
        this.$toast('请完成课程评分')
        return;
      }
      if (this.starsBaseNum == 0) {
        this.$toast('请完成基地评分')
        return;
      }
      this.$toast.loading({
        message: '请求中...',
      });
      this.mgop({
        api: 'mgop.sz.hswsy.AddEvaluation', // 必须
        host: 'https://mapi.zjzwfw.gov.cn/',
        dataType: 'JSON',
        type: 'POST',
        appKey: 'fuxgnukl+2001895516+edccpx', // 必须
        headers: {
          //   'isTestUrl': '1'
        },
        data: {
          "baseId": this.courseInfo.baseId,
          "title": this.courseInfo.courseName,
          "evaluation": this.content,
          "courseId": this.courseInfo.courseId,
          "orderId": this.courseInfo.id,
          "userId": this.userInfo.centerNo,
          "imgList": this.imgsrc,
          "courseScore": this.starsCourseNum,
          "baseScore": this.starsBaseNum
        },
        onSuccess: res => {
          this.$toast.clear();
          if (res.data.status == 1) {
            this.$toast.success('发布成功');
            setTimeout(() => {
              // this.$router.push({ name: 'ServiceOrderXST' })
              this.$router.back()
            }, 1000)
          }
        },
        onFail: err => {
          console.log('err', err)
        }
      });
    },
    callback (img) {
      this.imgsrc.push({
        imgUrl: img
      });
    }
  }
}
</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;
    }
  }
  .btns {
    width: 702px;
    height: 92px;
    line-height: 92px;
    border-radius: 16px;
    margin: 0 auto;
    margin-top: 20px;
    background: #4092ff;
    color: #fff;
    font-size: 30px;
    text-align: center;
    box-shadow: 0 0 30px #7ab1f8;
    &.disabled {
      opacity: 0.4;
    }
  }
  .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;
    }
  }
}
</style>