<template>
  <view class="comment-root">
    <view class="title">投诉骑手原因</view>

    <!-- 评论内容 -->
    <view class="fail-root">
      <text
        class="item"
        :class="{ failActive: i == failActive }"
        v-for="(item, i) in serveInfo.complaintReasons"
        :key="i"
        @tap="chooseBadComment(item, i)"
        >{{ item }}</text
      >
    </view>

    <!-- 投诉骑手列表 -->
    <view class="deliveryList"  v-if="!riderType">
      <view class="title">选择投诉的骑手</view>
      <text
        :class="{ deliveryActive: i == deliveryActive }"
        class="item"
        v-for="(item, i) in deliveryList"
        :key="i"
        @tap="deliveryHandler(item, i)"
      >
        {{ serveInfo.vendorName[item.waybillVendorID] }}-
        {{ item.courierName || '骑手' }}-
        {{ serveInfo.waybillStatus[item.status] }}
      </text>
    </view>

    <!-- 按钮 -->
    <view class="btn-root">
      <text class="submit" @tap="handelSubmit">确认投诉</text>
    </view>
  </view>
</template>

<script lang="ts" setup >
import { onLoad } from '@dcloudio/uni-app'
import order from '@/api/https/order'
import toast from '@/utils/toast'
import { computed, ref } from 'vue'
import configCms from '@/utils/configCms'

let vendorOrderID = ''
let riderType = ref('')
const orderData =ref()

const failActive = ref<number | string>(1) // 差评选择
const deliveryActive = ref<number | string>(-1) // 投诉骑手选择
let vendorWaybillID = '' // 将要投诉骑手的运单ID
/*************************************************
 * 接收数据
 */
onLoad(async (options: any) => {
  vendorOrderID = options.vendorOrderID
  if(!(options.type && options.type==='current')) await getComplaintList(vendorOrderID)
  else {
    // console.log(options, 'opions', JSON.parse(options.orderData))
    orderData.value = JSON.parse(options.orderData)
    riderType.value = options.type || ''
    vendorWaybillID= options.vendorWaybillID
  }
})

/*************************************************
 *骑手差评数据
 */
const serveInfo = computed(() => {
  let configCmsNew:AnyObject = configCms.serveInfo
  return configCmsNew
})

const deliveryList = ref<Array<AnyObject>>([])
/*************************************************
 * 获取订单差评骑手列表
 */
async function getComplaintList(vendorOrderID: string) {
  const res = await order.complaint_rider_list({ vendorOrderID })
  if (res.code == 0 && res.data != null) {
    deliveryList.value = res.data
  } else {
    uni.jxAlert({
      title: '提示',
      content: '官方配送不支持投诉，只能投诉三方配送',
      success: () => {
        uni.navigateBack()
      },
    })
  }
}

// 差评选择
function chooseBadComment(item: string, i: number | string) {
  failActive.value = i
}
// 投诉骑手选择
function deliveryHandler(item: AnyObject, i: number | string) {
  deliveryActive.value = i
  vendorWaybillID = item.vendorWaybillID
}

/*************************************************
 * 提交评价
 */
async function handelSubmit() {
  if (deliveryActive.value == -1 && !riderType.value) return toast('请选择要投诉的骑手')
  let data:any = {}
  if(riderType.value){
    data = {
      vendorOrderID:orderData.value.vendorOrderID,
      vendorID:orderData.value.vendorID,
      waybillVendorID: orderData.value.waybillVendorID,
      complaintID: +failActive.value,
      waybillID:orderData.value.vendorWaybillID
    }
  }else{
    data = {
      vendorOrderID: vendorOrderID,
      waybillVendorID: vendorWaybillID,
      complaintID: +failActive.value,
    }
  }
  let res = await order.complaint_rider(data)
  if (res.code == 0) {
    uni.jxAlert({
      title: '投诉成功',
      content: '老板消消气，投诉成功啦！',
      success: () => {
        uni.navigateBack()
      },
    })
  } else {
    uni.jxAlert({
      title: '投诉失败',
      content: res.desc,
      success: () => {
        uni.navigateBack()
      },
    })
  }
}
</script>

<style lang="scss" scoped>
.comment-root {
  text-align: center;
  box-sizing: border-box;
  background-color: #fff;
  padding: 20rpx 40rpx;
  border-radius: 10rpx;

  .title {
    text-align: center;
    margin-bottom: 20rpx;
    color: rgb(95, 95, 95);
  }

  .btn-root {
    display: flex;
    .submit {
      width: 100%;
      padding: 20rpx 0;
      text-align: center;
      background-color: $jx-primary;
      color: #fff;
      border-radius: 15rpx;
    }
  }

  .fail-root {
    margin: 20rpx 0;
    .item {
      display: inline-block;
      padding: 7rpx 15rpx;
      margin-right: 20rpx;
      border: 1rpx solid rgb(124, 124, 124);
      color: rgb(124, 124, 124);
      border-radius: 100rpx;
      font-size: 28rpx;
      margin-bottom: 30rpx;
    }

    .failActive {
      background-color: $jx-primary;
      color: #fff;
      border: 1rpx solid $jx-primary;
    }
  }
}

.deliveryList {
  padding: 15rpx 0;
  border-top: 1rpx solid rgb(220, 220, 220);

  .title {
    text-align: center;
    color: $jx-warring;
  }

  .item {
    display: inline-block;
    padding: 7rpx 15rpx;
    margin-right: 20rpx;
    border: 1rpx solid rgb(124, 124, 124);
    color: rgb(124, 124, 124);
    border-radius: 100rpx;
    font-size: 28rpx;
    margin-bottom: 30rpx;
  }

  .deliveryActive {
    background-color: $jx-warring;
    color: #fff;
    border: 1rpx solid $jx-warring;
  }
}
</style>