<template>
  <div class="evaluate">
    <div class="card">
      <div class="title"><span class="red">*</span><span>心愿评价</span></div>
      <u-rate active-color="#F8B425" v-model="form.evaluationScore" inactive-color="#b2b2b2" size="70" gutter="70"></u-rate>
    </div>

    <div class="card">
      <div class="title"><span class="red">*</span><span>评价详情</span></div>
      <div class="textarea">
        <u-input v-model="form.evaluationDetail" type="textarea" height="200" :clearable="false" placeholder="请简要描述…" 
        placeholder-style="font-size: 16px" maxlength="500" />
        <div class="tips">{{ form.evaluationDetail.length }}/500</div>
      </div>
    </div>

    <div class="card">
      <div class="title"><span style="width: 8px;"></span><span>图片上传</span><span class="nine">(最多9张)</span></div>
      <AiUploader v-model="form.files" :limit="9"></AiUploader>
    </div>

    <div class="btn-wrapper">
      <div class="btn" hover-class="text-hover" @click="submit">提交</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "evaluate",
  appName: "心愿评价",
  data() {
    return {
      images: [],
      form: {
        eventId: '',
        evaluationScore: '',
        evaluationDetail: '',
        files: [],
      }
    }
  },
  methods: {
    submit() {
      if(!this.form.evaluationScore) {
        return this.$toast('请选择心愿评价')
      }
      if(!this.form.evaluationDetail) {
        return this.$toast('请输入评价详情')
      }
      this.$instance.post(`/app/appclapeventinfopingchang/addEvaluation`,{
        ...this.form
      }).then(res => {
        if(res?.code == 0) {
          this.$u.toast("评价成功")
          uni.redirectTo({url: './AppPhotoReport'})
        }
      })
    }
  },
  onLoad(o) {
    this.form.eventId = o.id
    uni.setNavigationBarTitle({title: "心愿评价"})
  }
}
</script>

<style lang="scss" scoped>
.evaluate {
  padding-bottom: 120px;
  box-sizing: border-box;
  .card {
    padding: 32px;
    box-sizing: border-box;
    background: #FFF;
    margin-bottom: 24px;
  }

  .title {
    font-size: 34px;
    // color: #666666;
    font-weight: 500;
    margin-bottom: 24px;
    .red {
      color: #FF4466;
    }
  }
  .textarea {
    padding: 0 15px;
    box-sizing: border-box;
  }
  .tips {
    text-align: right;
    color: #666666;
  }
  .nine {
    font-size: 30px;
    color: #666666;
  }
}
</style>