<template>
  <view class="Mall4j page-pord-comment container">
    <view class="comm-list">
      <view
        v-for="(item, index) in orderItemInfo"
        :key="index"
        class="comm-item"
      >
        <!-- 商品标题内容 -->
        <view class="item-top">
          <view class="top-pic">
            <!-- <image v-if="item.pic" mode="aspectFit" :src="item.pic" />
            <image v-else mode="aspectFit" src="/static/images/def.png" /> -->
            <img-show
              :src="item.pic"
              img-mode="aspectFit"
            />
          </view>
          <view class="top-tit">
            <view class="name">
              {{ item.spuName }}
            </view>
            <view class="sku">
              {{ item.skuName || '' }}
            </view>
          </view>
        </view>
        <!-- 评价星级 -->
        <view class="item-star">
          <view>评分</view>
          <comm-star
            :value="item.score?item.score:5"
            type="write"
            :index="index"
            @on-star-change="onStarChange"
          />
        </view>
        <!-- 内容填写 -->
        <view class="item-con">
          <textarea
            v-model="item.content"
            style="font-size:28rpx"
            placeholder="把使用心得分享给想买的他们吧"
            maxlength="250"
            :data-index="index"
            @input="onContentInput"
          />
        </view>
        <!-- 添加图片 -->
        <view class="item-pics">
          <!-- 预览缩略图 -->
          <view class="question-images">
            <!-- 上传组件 -->
            <view
              :class="['up', item.images ? 'visible' : '']"
              @tap="onGetUploadImg(index)"
            >
              <imgs-box
                :img-urls="item.images"
                :img-num="9"
                :imgs-id="index"
                @get-image-path="onGetImgPath"
              />
            </view>
            <!-- 添加 -->
            <!-- <view v-if="item.images.length < 9" class="add-pic" @tap="getUploadImg(index)">+</view> -->
          </view>
        </view>
        <!-- 提示 -->
        <view class="img-tip">
          (最多可上传9张图片)
        </view>
        <!--/提示-->
        <!-- 匿名评价 -->
        <view
          class="item-btm statement"
          @tap.stop="onSelectedItem(index)"
        >
          <checkbox
            color="#fff"
            :checked="item.isAnonymous == 1"
            @tap.stop="onSelectedItem(index)"
          >
            <text style="margin-left:10rpx;">
              匿名评价
            </text>
          </checkbox>
        </view>
      </view>
    </view>

    <view
      class="comm-btn"
      @tap="onSubmitComm"
    >
      发表评价
    </view>
  </view>
</template>

<script setup>
import commStar from '../../components/comm-star/index.vue'

const orderItemInfo = ref([]) // 订单列表页参数
let prodIndex = 0

/**
 * 生命周期函数--监听页面加载
 */
onLoad(() => {
  // 从缓存获取要评价的订单项数据
  let _orderItemInfo = uni.getStorageSync('cloudOrderItemInfo')

  for (let i = 0; i < _orderItemInfo.length; i++) {
    _orderItemInfo[i].images = []
    _orderItemInfo[i].content = ''
    _orderItemInfo[i].score = 5
    _orderItemInfo[i].isAnonymous = 1
    _orderItemInfo[i].evaluate = 0
  }
  _orderItemInfo.forEach(item => {
    if (item.giveawayList) {
      _orderItemInfo = _orderItemInfo.concat(item.giveawayList)
    }
  })

  orderItemInfo.value = _orderItemInfo
})

/**
 * 生命周期函数--监听页面显示
 */
onShow(() => {
  // 头部导航标题
  uni.setNavigationBarTitle({
    title: '发表评价'
  })
})

/**
 * 用户点击右上角分享(勿删)
 */
onShareAppMessage(() => {})

/**
 * 发表评论
 */
const onSubmitComm = util.debounce(function () {
  const _orderItemInfo = orderItemInfo.value
  let allFill = true
  for (let i = 0; i < _orderItemInfo.length; i++) {
    const cont = _orderItemInfo[i].content.trim()

    if (cont === '') {
      uni.showToast({
        title: '评价不能为空',
        icon: 'none'
      })
      allFill = false
      break
    }
  }

  if (allFill) {
    const data = []
    for (let j = 0; j < _orderItemInfo.length; j++) {
      let pics = ''
      if (_orderItemInfo[j].images.length) {
        _orderItemInfo[j].images.forEach((item) => {
          pics += item.path + ','
        })
      }

      if (pics !== '') {
        pics = pics.substring(0, pics.length - 1)
      }
      data.push({
        content: _orderItemInfo[j].content,
        score: _orderItemInfo[j].score,
        evaluate: _orderItemInfo[j].evaluate,
        isAnonymous: _orderItemInfo[j].isAnonymous,
        orderItemId: _orderItemInfo[j].orderItemId,
        prodId: _orderItemInfo[j].prodId,
        pics
      })
    }
    const params = {
      url: '/tmerclub_product/spu_comm/comments',
      method: 'POST',
      data
    }
    http.request(params).then(() => {
      uni.showModal({
        title: '',
        content: '评价成功，感谢购买！',
        showCancel: false,
        success: () => {
          setTimeout(() => {
            uni.navigateBack(1)
          }, 1000)
        }
      })
    })
  }
}, 1000)

/**
 * 上传图片
 */
const onGetUploadImg = (index) => {
  prodIndex = index
}

/**
 * 获取上传图片组件返回的图片路径
 * @param {String} urls 图片组件返回路径数组
 */
const onGetImgPath = (urls, imgsId) => {
  if (prodIndex === imgsId) {
    orderItemInfo.value[prodIndex].images = urls
  }
}

const onContentInput = (e) => {
  const index = e.target.dataset.index
  const _orderItemInfo = orderItemInfo.value
  _orderItemInfo[index].content = e.detail.value
  orderItemInfo.value = _orderItemInfo
}

/**
 * 匿名评价
 * 每一项的选择事件
 */
const onSelectedItem = (index) => {
  const _orderItemInfo = orderItemInfo.value // 获取评论项
  let isAnonymous = _orderItemInfo[index].isAnonymous // 获取当前评价的选中状态
  if (isAnonymous === 1) {
    isAnonymous = 0
  } else {
    isAnonymous = 1
  }

  _orderItemInfo[index].isAnonymous = isAnonymous // 改变状态

  orderItemInfo.value = _orderItemInfo
}
const onStarChange = (e) => {
  const index = e.idx
  const val = e.val
  let evaluate = 0
  const _orderItemInfo = orderItemInfo.value

  if (val < 3) {
    evaluate = 2
  } else if (val === 3) {
    evaluate = 1
  }

  _orderItemInfo[index].score = val
  _orderItemInfo[index].evaluate = evaluate
  orderItemInfo.value = _orderItemInfo
}

</script>
<style lang="scss" scoped>
@use "./pord-comment.scss";
</style>
