<template>
  <view class="comment-cell" @tap="moveToOrderDetail">
    <!-- 订单号 创建时间 -->
    <view class="order-id pd20">
      <view class="id">
        订单号:{{ comment.vendor_order_id ?  comment.vendor_order_id : comment.order_flag !== '3' ? comment.order_id : comment.vendorOrderID2}}
        <jx-icon
          icon="fuzhi"
          :size="40"
          color="#777777"
          @tap.stop="
            copyOrderNum(
              comment.order_flag !== '3'
                ? comment.order_id
                : comment.vendorOrderID2
            )
          "
        ></jx-icon>
      </view>
      <view class="time">{{ createTime }}</view>
    </view>
    <!-- 商家评分 -->
    <view class="score pd20">
      <text class="vendor-icon" :class="'icon-' + comment.order_flag"></text>
      <view class="text">商家评分</view>
      <!-- 差评 -->
      <view class="rank" v-if="comment.status === 0">
        <text
          v-for="num in 5"
          :key="num"
          class="star"
          :class="{ star2: num <= comment.score4 }"
        ></text>
      </view>
      <!-- 正常 -->
      <view class="rank" v-else>
        <text
          v-for="num in 5"
          :key="num"
          class="star"
          user-select
          :class="{ star2: num <= +comment.updatedScore }"
        ></text>
      </view>
    </view>
    <!-- 评论 -->
    <view class="comment-text">
      <!-- 图片 -->
      <view v-if="comment.msg && JSON.parse(comment.msg).comment_pictures" style="display: flex;overflow-x:auto;margin-bottom: 20rpx;">
        <img
          v-for="(item,index) in (JSON.parse(comment.msg).comment_pictures).split(',')"
          :key="index"
          :src="item.includes('https') ? item : item.replace('http','https')"
          style="width: 240rpx;height:240rpx; flex: 0 0 auto;margin-right: 20rpx;"
          @tap.stop="previewImg((JSON.parse(comment.msg).comment_pictures).split(','),index)"
          >
      </view>

      <text v-if="comment.status === 0">{{
        comment.score4Content ? comment.score4Content : '暂无评价'
      }}</text>
      <text v-else user-select>{{
        comment.updatedScoreContent ? comment.updatedScoreContent : '暂无评价'
      }}</text>
    </view>
    <!-- tag -->
    <view class="tag" v-show="venderTags.length > 0">
      <text
        class="span"
        v-for="(item, index) in venderTags"
        :key="index"
        v-show="comment.status === 0"
        >{{ item }}</text
      >
      <text
        v-for="(item, index) in updatedVenderTags"
        :key="index"
        v-show="comment.status === 1"
        >{{ item }}</text
      >
    </view>
    <!-- 差评才有的功能 -->
    <view v-if="type === 0 && comment.order_flag !== '1'">
      <view class="rest-time">改好评{{ lastTime }}</view>
      <!-- 联系客户 -->
      <view class="contact">
        <view class="tel" v-if="lastTime !== '已超时'">
          {{ comment.userPhone }}
          <jx-icon
            icon="fuzhi"
            :size="40"
            color="#4eb331"
            @tap.stop="copyTel(comment.userPhone)"
          ></jx-icon>
        </view>
        <view class="btn" v-if="lastTime !== '已超时'">联系客户</view>
        <view class="tel" v-else>超时电话已失效</view>
      </view>
    </view>
    <!-- 差评才有的功能 -->
  </view>
</template>
  
<script lang="ts" setup>
import toast from '@/utils/toast'
import { timeFormatHMS } from '@/utils/tools'
import { computed } from 'vue'
import useOrderInfo from '@/composables/useOrderInfo'
import useGlobalFunc from '@/composables/useGlobalFunc'
const {
  previewImage, // 预览图片
} = useGlobalFunc()

/**
 * props传值
 */
interface CommentListType {
  createdAt: string
  createTime?: string
  vendor_order_id?:string
  id: number
  order_flag: string
  order_id: string
  score4: number
  score4Content: string
  status: number
  updatedScore: string
  updatedScoreContent: string
  updatedVenderTags: string
  userPhone: string
  venderTags: string
  vendorOrderID2: string
  maxModifyTime: string,
  msg:string
}
interface PropsType {
  comment: CommentListType
  type: number
}
const props = defineProps<PropsType>()

/**
 * emit
 */
const emit = defineEmits<{
  // 提示信息
  (e: 'TapMsg'): void
}>()

/**
 * 点击订单内容
 */
const { orderDetail } = useOrderInfo()
function moveToOrderDetail() {
  if (props.comment.order_flag === '1') {
    if(props.comment.vendor_order_id) orderDetail(props.comment.vendor_order_id, props.comment.order_flag)
    else emit('TapMsg')
  } else {
    // 否则跳转订单详情
    orderDetail(props.comment.order_id, props.comment.order_flag)
  }
}

/**
 * 预览图片
 */
function previewImg(skuNameArr:Array<string>,index:number) {
  let arr = skuNameArr.map(item => item.includes('https') ? item : item.replace('http','https') )
  previewImage(arr,index)
}

/**
 * 复制订单号
 */
function copyOrderNum(orderNum: string) {
  uni.setClipboardData({
    data: orderNum,
    success() {
      toast('复制订单号成功', 1)
    },
  })
}

/**
 * 复制手机号
 */
function copyTel(tel: string) {
  uni.setClipboardData({
    data: tel,
    success() {
      toast('复制手机号成功', 1)
    },
  })
}

/**
 * 计算属性
 */
// 评价时间
// const createdAt = computed(() => {
//   console.log('评价时间，，，99**',props.comment)
//   return timeFormatHMS(props.comment.createdAt)
// })

const createTime = computed(() => {
  return timeFormatHMS(props.comment.createTime)
})

const venderTags = computed(() => {
  if (props.comment.venderTags) {
    if (props.comment.venderTags == '') return []
    return JSON.parse(props.comment.venderTags)
  } else {
    return []
  }
})
// 标签
const updatedVenderTags = computed(() => {
  if (props.comment.venderTags) {
    if (props.comment.updatedVenderTags == '') return []
    return JSON.parse(props.comment.updatedVenderTags)
  } else {
    return []
  }
})
// 差评时间
const lastTime = computed(() => {
  let timestamp = new Date(props.comment.createdAt).getTime()
  // 创建时间 + 72小时 - 当前时间 > 0
  let time =
    timestamp + +props.comment.maxModifyTime * 1000 * 60 * 60 - +new Date()
  if (props.comment.order_flag === '3') {
    // 饿百3小时过期
    time = timestamp + 3 * 60 * 60 * 1000 - +new Date()
  }
  if (time > 0) {
    return `仅剩: ${getTimeLeft(time, 'days', '分钟', '已超时')}`
  }
  return '已超时'
})
// 超时时间
function getTimeLeft(time: number, type = 'minutes', end = '', timeOut = '-1') {
  let totalTime = positive(time)
  let days: number = 0
  let hours: number = 0
  let minutes: number = 0
  if (type === 'days') {
    days = +(totalTime / (1000 * 60 * 60 * 24))
    totalTime = totalTime % (1000 * 60 * 60 * 24)
    type = 'hours'
  }
  if (type === 'hours') {
    hours = totalTime / (1000 * 60 * 60)
    totalTime = totalTime % (1000 * 60 * 60)
  }
  minutes = totalTime / (1000 * 60)

  // 超时
  if (time < 0) {
    return `${timeOut}`
  }

  if (days === 0 && hours === 0) {
    return `${minutes}${end}`
  } else if (days === 0) {
    return `${hours}小时${minutes}${end}`
  } else if (days === 0) {
    return `${days}天${minutes}${end}`
  } else {
    return `${days}天${hours}小时${minutes}${end}`
  }
}
// 取正数
function positive($num: number) {
  if ($num < 0) {
    return -$num
  }
  return $num
}
</script>
  
<style lang="scss" scoped>
@import './commentList.scss';
</style>