<template>
  <!-- 评价 -->
  <view>
    <u-navbar :placeholder="true" title="评价" bgColor="transparent" :autoBack="true"></u-navbar>
    <view class="boxs">
      <view class="title">上传图片</view>
      <view class="photoBox">
        <view class="itemPhoto" v-for="(item, index) in photoList" :key="index">
          <image class="photo" :src="item" mode=""></image>
          <view class="delBox flexC" @click="delPhoto(index)">
            <image class="del" src="/static/mineIc/close.png" mode=""></image>
          </view>
        </view>
        <view class="addPhoto flexV" @click="addPhoto">
          <image src="/static/mineIc/addIC.png" mode=""></image>
          还可添加{{ 5 - photoList.length }}张
        </view>
      </view>
      <view class="desc">
        <textarea v-model="desc" placeholder-class="pls" placeholder="请输入" name="" id="" cols="30" rows="10"></textarea>
      </view>
      <view class="startBox flexA">
        <text>综合评分</text>
        <u-rate activeColor="#FEA302" :count="count" v-model="value"></u-rate>
      </view>
    </view>
    <view class="btnBox iosAuto">
      <view class="btn flexC" @click="submit">提交评论</view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getComment } from '@/api/'
const count = ref(5) //最高可选星星数
const value = ref(0) //星星选中数
let photoList = reactive([]) // 显示图片
const imgList = ref([])
let desc = ref('') //评论
const { proxy } = getCurrentInstance() //获取当前实例
// 提交评论
const submit = () => {
  getComments()
}

const evaluateOrderId = ref(0) // 评价订单 id

onLoad(e => {
  evaluateOrderId.value = e.id
})

// 上传图片
const addPhoto = () =>
  proxy.$methods.upload('http://health.shs.broing.cn/api/common/upload', imgUrl => {
    console.log('返回图片', imgUrl)
    imgList.value.push(imgUrl.upImg)
    photoList.push(imgUrl.avatar)
  })
// 删除图片
const delPhoto = index => {
  imgList.value.splice(index, 1)
  photoList.splice(index, 1)
}
// 写评论
const getComments = async () => {
  try {
    let params = {
      id: evaluateOrderId.value,
      image: imgList.value.join(','), //string	是	图片
      content: desc.value //integer	否	内容
    }
    const res = await getComment(params)
    uni.showToast({ title: '感谢您的评论~', icon: 'none' })
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)
    console.log('getComment', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getComment', err)
  }
}
</script>

<style lang="scss">
page {
  background: #f0f2f5ff;
}
.boxs {
  width: 702rpx;
  margin: 34rpx auto;
  border-radius: 16rpx;
  background: #ffffffff;
  padding: 24rpx;
  box-sizing: border-box;

  .title {
    color: #000000ff;
    font-size: 26rpx;
    margin-bottom: 24rpx;
  }

  .photoBox {
    display: flex;
    flex-wrap: wrap;

    .itemPhoto {
      position: relative;
      width: 160rpx;
      height: 160rpx;
      border-radius: 12rpx;
      margin-right: 24rpx;

      .photo {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
      }

      .delBox {
        position: absolute;
        right: 0;
        top: 0;
        width: 24rpx;
        height: 24rpx;
        background: #484b46;
        border-radius: 0 8rpx 0 8rpx;

        .del {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }

    .addPhoto {
      width: 160rpx;
      height: 160rpx;
      border-radius: 12rpx;
      background: #f7f8faff;
      color: #afafafff;
      font-size: 22rpx;

      image {
        width: 34rpx;
        height: 34rpx;
        margin-bottom: 12rpx;
      }
    }
  }

  .desc {
    margin-top: 24rpx;
    padding: 24rpx 20rpx;
    background: #f7f8faff;

    .pls {
      color: #afafafff;
      font-size: 22rpx;
    }

    textarea {
      color: #454545ff;
      font-size: 24rpx;
    }
  }

  .startBox {
    margin-top: 24rpx;

    text {
      color: #000000ff;
      font-size: 26rpx;
      font-weight: 700;
      margin-right: 20rpx;
    }
  }
}

.btnBox {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;

  .btn {
    margin: 0 auto;
    width: 686rpx;
    height: 88rpx;
    border-radius: 12rpx;
    color: #ffffffff;
    font-size: 32rpx;
    font-weight: 700;
    background: linear-gradient(139deg, #fb753cff 0%, #fb3e3cff 100%);
  }
}
</style>