<template>
  <div class="releaseEvaluate">
    <div class="box top">
      <div class="pic">
        <img :src="baseInfo.baseUrl ? baseInfo.baseUrl : require('../../assets/service/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">
      <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==''||starsBaseNum==0?'disabled':''" @click="AddEvaluation ">发布</div>
  </div>
</template>

<script>
import { imgCut } from 'vue-imgcut'
export default {
  data () {
    return {
      baseId: '',
      signId: '',
      baseInfo: '',
      starsBaseNum: 0,
      userInfo: '',
      studentInfo: '',
      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);
    }
    let studentInfo = localStorage.getItem('StudentDetialInfo')
    this.studentInfo = JSON.parse(studentInfo)
    this.baseId = this.$route.query.baseId
    this.signId = this.$route.query.signId
    this.GetStudyBaseDetail()
  },
  methods: {
    AddEvaluation () {
      if (this.content == '') {
        this.$toast('请输入评价内容')
        return;
      }
      if (this.starsBaseNum == 0) {
        this.$toast('请完成基地评分')
        return;
      }
      this.$toast.loading({
        message: '请求中...',
      });
      this.yxAxios.post(`${this.yanxueUrl}/api/StudiesWap/AddEvaluation`,
        {
          baseId: this.baseId,
          signId:this.signId,
          evaluation: this.content,
          userId: this.studentInfo.travelerNum,
          imgList: this.imgsrc,
          baseScore: this.starsBaseNum
        }
      ).then((res) => {
        this.$toast.clear();
        if (res.data.status == 1) {
          this.$toast.success('发布成功');
          setTimeout(() => {
            this.$router.back()
          }, 1000)
        }
      })
      
    },
    // 获取基地信息
    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)
        }
      })
    },
    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>