<template>
  <view>
    <u-navbar bgColor="transparent" :placeholder="true" @leftClick="leftClickHandler"></u-navbar>
    <view class="mainBox">
      <!-- 收货地址 -->
      <!-- <view @click="checkAddress"> -->
      <shopAddres :isOrder="true" :adress="orderList"></shopAddres>
      <!-- </view> -->
      <view class="shopBox">
        <orderShops :shop="orderList"></orderShops>
        <view class="line"></view>
        <view class="mode flexJ">
          <view class="left">配送方式</view>
          <view class="right">快递配送</view>
        </view>
      </view>
      <view class="moneyBox flexJ" style="margin-bottom: 20rpx" v-if="orderList.goodstatus_text !== 3">
        <view>实付款</view>
        <view class="money">￥{{ orderList.total_price }}</view>
      </view>
      <template v-if="orderList.goodstatus_text === 3">
        <view class="moneyBox flexJ" style="margin-bottom: 20rpx">
          <view>运费</view>
          <view class="money">￥{{ orderList.express_price }}</view>
        </view>
        <view class="moneyBox flexJ" style="margin-bottom: 20rpx">
          <view>实付</view>
          <view class="money">
            <text style="color: #000">{{ orderList.score }}积分</text>
            +￥{{ orderList.express_price }}
          </view>
        </view>
      </template>
      <view class="moneyBox flexJ" v-for="(item, index) in placeOrder" :key="item.id">
        <view class="items">
          {{ item.name }}
          <text>{{ item.text.length ? item.text : `暂无${item.name}` }}</text>
        </view>
        <view v-if="index == 0" @click="copy" class="copy">复制</view>
      </view>
      <view style="height: 200rpx"></view>
    </view>
    <!-- 按钮 // 0=全部,1=待付款,2=待发货,3=待收货,4=待评价,11=已取消,21=售后-->
    <view class="btnBox iosAuto">
      <view v-if="btnType == 3" class="service flexC">
        <button open-type="contact">联系客服</button>
      </view>
      <view v-if="btnType <= 2" class="gay flexC" @click="btns(0)">{{ btnType == 1 ? '取消付款' : btnType == 2 ? '申请退款' : '联系客服' }}</view>
      <view v-if="btnType == 1 || btnType == 3" class="red flexC" @click="btns(1)">{{ btnType == 1 ? '立即支付' : '确认收货' }}</view>
    </view>
    <!-- 选择支付方式 -->
    <payMode
      @canclePop="modeShow = false"
      :balance="balance"
      :orderId="orderId"
      :isOrderPay="true"
      :totalPrice="orderList.total_price"
      :modeShow="modeShow"
    ></payMode>

    <!-- 提示弹窗 -->
    <tipPops @pointsBtns="pointsBtns" :integral="integral" :tipType="tipType" :tipShow="tipShow"></tipPops>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import shopAddres from '@/componets/address.vue'
import orderShops from '@/componets/orderShop.vue'
import tipPops from '@/componets/tipPop.vue'
import PayMode from '@/componets/checkPayMode.vue'
import { getOrderdetail, getCancleOrder, getRefund, getReceipt, getyue } from '@/api/'
onLoad(e => {
  console.log(e.id)
  orderId.value = e.id
  getOrderdetails(e.id)
})
let tipShow = ref(false) //是否取消订单弹窗
let orderList = ref({}) //订单
let modeShow = ref(false) //选择支付方式
let orderId = ref('') //订单id
let btnType = ref(1) //按钮状态
let integral = ref(0) //积分
let tipType = ref(1) //1取消支付 2取消订单
let balance = ref(0) //余额
let placeOrder = ref([
  { id: 1, name: '订单编号', text: '' },
  { id: 2, name: '支付方式', text: '' },
  { id: 3, name: '下单时间', text: '' },
  { id: 4, name: '快递编号', text: '' }
])

onShow(() => {
  getyues()
})

const getyues = async () => {
  try {
    const res = await getyue()
    balance.value = res.money
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getyue', err)
  }
}

const leftClickHandler = () => {
  // const pages = getCurrentPages()
  // const page = pages[pages.length - 2]
  // console.log(page, '上一个页面')
  uni.navigateBack({ delta: 1 })
}

// 复制订单号
const copy = () => {
  uni.setClipboardData({
    data: orderList.value.express_no,
    success: () => {
      uni.showToast({ title: '复制成功', icon: 'none' })
    }
  })
}
// 立即支付 type==0灰色按钮 否者橙色按钮
// 0=全部,1=待付款,2=待发货,3=待收货,4=待评价,11=已取消,21=售后 getCancleOrders()
const btns = type => {
  if (type == 0) {
    tipType.value = btnType.value == 1 ? 1 : 2
    tipShow.value = true
    // btnType.value == 1 ? tipShow.value = true  : getRefunds()
  } else {
    btnType.value == 1 ? (modeShow.value = true) : getReceipts()
    // btnType.value == 3 ? getReceipts() :''
  }
}
//提示弹窗按钮点击
const pointsBtns = type => {
  console.log(type)
  tipShow.value = false
  if (type == 1) {
    tipType.value == 1 ? getCancleOrders() : getRefunds()
  }
}
const { proxy } = getCurrentInstance() //获取当前实例
// 订单详情
const getOrderdetails = async id => {
  try {
    const res = await getOrderdetail(id)
    orderList.value = res
    btnType.value = res.order_status
    placeOrder.value[0].text = res.order_no
    placeOrder.value[1].text = res.zhifu == 1 ? '微信' : '余额'
    placeOrder.value[2].text = res.createtime
    placeOrder.value[3].text = res.express_no
    console.log('getOrderdetail', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getOrderdetail', err)
  }
}
// 取消订单
const getCancleOrders = async () => {
  try {
    const res = await getCancleOrder(orderId.value)
    proxy.$methods.showTN('订单已取消~')
    console.log('getCancleOrder', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getCancleOrder', err)
  }
}
// 退款
const getRefunds = async () => {
  try {
    const res = await getRefund(orderId.value)
    proxy.$methods.showTN('已申请,等待客服审核')
    console.log('getRefund', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getRefund', err)
  }
}
// 确认收货
const getReceipts = async () => {
  try {
    const res = await getReceipt(orderId.value)
    proxy.$methods.showTN('已收货,期待下次下单~')
    console.log('getReceipt', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getReceipt', err)
  }
}

let adress = ref({}) //收货地址

// 选择地址
const checkAddress = () => {
  uni.navigateTo({
    url: `/pages/mine/myAddress?isCheck=${1}`,
    events: {
      steBack: data => {
        orderList.value = data
        console.log('地址', data)
      }
    }
  })
}
</script>

<style lang="scss">
page {
  background: #f7f8faff;
}

.mainBox {
  width: 100%;
  padding: 20rpx 24rpx;
  box-sizing: border-box;

  .shopBox {
    width: 100%;
    padding: 24rpx 20rpx 32rpx;
    box-sizing: border-box;
    border-radius: 24rpx;
    background: #ffffffff;
    margin-bottom: 20rpx;

    .line {
      margin: 40rpx auto 32rpx;
      width: 100%;
      height: 1rpx;
      background: #eeeff0ff;
    }

    .mode {
      .left {
        color: #000000e6;
        font-size: 26rpx;
      }
      .right {
        color: #000000e6;
        font-size: 26rpx;
        font-weight: 700;
      }
    }
  }

  .moneyBox {
    width: 100%;
    padding: 32rpx 20rpx;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 24rpx;
    background: #ffffffff;

    :nth-child(1) {
      color: #000000e6;
      font-size: 26rpx;
    }

    .money {
      color: #fc4338ff;
      font-size: 28rpx;
      font-weight: 700;
    }

    .items {
      color: #323233ff;
      font-size: 26rpx;

      text {
        margin-left: 40rpx;
        color: #323233ff;
        font-size: 26rpx;
        font-weight: 700;
      }
    }

    .copy {
      color: #969799ff;
      font-size: 26rpx;
    }
  }
}

.btnBox {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 112rpx;
  padding-top: 16rpx;
  background: #fff;
  display: flex;
  justify-content: flex-end;

  .service {
    position: relative;
    margin-right: 24rpx;
    width: 248rpx;
    height: 80rpx;
    border-radius: 80rpx;
    border: 1rpx solid #dcdee0ff;

    button {
      position: absolute;
      width: 100%;
      height: 100%;
      background: transparent;
      padding: 0;
      color: #646566ff;
      font-size: 30rpx;

      &::after {
        border: none;
      }
    }
  }

  .gay {
    margin-right: 24rpx;
    width: 248rpx;
    height: 80rpx;
    border-radius: 80rpx;
    color: #646566ff;
    font-size: 30rpx;
    border: 1rpx solid #dcdee0ff;
  }

  .red {
    margin-right: 24rpx;
    width: 248rpx;
    height: 80rpx;
    border-radius: 80rpx;
    color: #ffffffff;
    font-size: 30rpx;
    font-weight: 700;
    background: linear-gradient(-88deg, #fe6434ff 0%, #ff2f2fff 100%);
  }
}
</style>