<script setup lang="ts">
import { orderState, orderStateActions, pageUrl } from '@/utils/constants'
import { putOrderCancelByIdApi } from '@/api/order'
import { nextTick, ref } from 'vue'
import { usePopupStore } from '@/stores'

const props = defineProps<{
  status: number
  id: number
  type?: string
  className?: string
}>()

// 弹出层组件
const popup = ref<UniHelper.UniPopupInstance>()
// 取消原因
const reason = ref('')
const customReason = ref('')

const reasonList = ref(['商品无货', '不想要了', '商品信息填错了', '地址信息填写错误', '商品降价'])

const onChangeReason = (item: any) => {
  customReason.value = ''
  reason.value = item
}

// 展示取消订单弹窗
const onOpenPopup = () => {
  nextTick(() => {
    popup.value?.open?.()
  })
}

const onClosePopup = () => {
  nextTick(() => {
    popup.value?.close?.()
  })
}

const emit = defineEmits(['cancel'])

//取消订单
const onCancelOrder = async () => {
  if (!reason.value) {
    uni.showToast({
      title: '请选择取消原因',
      icon: 'none',
    })
    return
  }

  const res = await putOrderCancelByIdApi({
    id: props.id,
    cancel_reason: reason.value,
  })
  if (res) {
    if (props.status == orderState.toPay) {
      uni.showToast({
        title: '取消成功',
        icon: 'success',
        mask: true,
      })
    } else {
      uni.showToast({
        title: '申请取消成功,请耐心等待商家审核',
        icon: 'none',
        mask: true,
      })
    }
  }

  popup.value?.close?.()

  setTimeout(() => {
    // 触发cancel事件
    emit('cancel', { orderId: props.id, reason: reason.value })
  }, 1000)
}
</script>

<template>
  <view v-if="orderStateActions.cancelable.includes(props.status)">
    <view :class="props.className" @tap="onOpenPopup"> 取消订单 </view>

    <!-- 取消订单弹窗 -->
    <view @touchmove.prevent.stop>
      <uni-popup
        ref="popup"
        type="bottom"
        background-color="#fff"
        :is-mask-click="false"
        @change="usePopupStore().onChangePopupProps"
      >
        <view class="popup-root">
          <view class="title">取消订单</view>
          <view class="description">
            <view class="tips">请选择取消订单的原因：</view>
            <view class="cell" v-for="item in reasonList" :key="item" @tap="onChangeReason(item)">
              <text class="text">{{ item }}</text>
              <text class="icon" :class="{ checked: item === reason }"></text>
            </view>
            <view class="cell">
              <text class="text">其它原因</text>
              <view :style="{ width: '75%' }">
                <input
                  type="text"
                  v-model="customReason"
                  placeholder="请输入取消原因"
                  @tap="reason = ''"
                  @change="reason = customReason"
                />
              </view>
            </view>
          </view>
          <view class="footer">
            <view class="button" @tap="onClosePopup">取消</view>
            <view class="button primary" @tap="onCancelOrder">确认</view>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<style lang="scss">
.popup-root {
  padding: 30rpx 30rpx 0;
  border-radius: 10rpx 10rpx 0 0;
  overflow: hidden;

  .title {
    font-size: 30rpx;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .description {
    font-size: 28rpx;
    padding: 0 20rpx;

    .tips {
      color: #444;
      margin-bottom: 12rpx;
    }

    .cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15rpx 0;
      color: #666;
    }

    .icon::before {
      content: '\e6cd';
      font-family: 'iconfont' !important;
      font-size: 38rpx;
      color: #999;
    }

    .icon.checked::before {
      content: '\e6cc';
      font-size: 38rpx;
      color: #ff5f3c;
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 0 40rpx;
    font-size: 28rpx;
    color: #444;
  }
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 150rpx;
  height: 60rpx;
  margin-left: 15rpx;
  font-size: 26rpx;
  border-radius: 72rpx;
  border: 1rpx solid #ccc;
  color: #444;
}

.primary {
  color: #fff;
  background-color: #ff5f3c;
  border: none;
}

.secondary {
  order: 2;
  color: #ff5f3c;
  border-color: #ff5f3c;
}
</style>
