<template>
  <view class="common-page">
    <view class="header-box" :style="{
				paddingBottom: '30rpx',
		  }" id="headerBox" ref="headerBox">
      <view class="navbar-box display-flex-content-center" :style="{
					height: `${topData.height}px`,
					paddingTop: `${topData.top}px`,
					paddingBottom: '40rpx',
					color: '#666666',
					fontSize: '34rpx',
					fontWeight: 'bold'
				}">
        <view @click="toBack" style="position: absolute;left:-3rpx">
          <u-icon size="20" name="arrow-left" color="#666666"></u-icon>
        </view>
        <text></text>
      </view>
      <view class="success-con  fs16">
        <view class="display-flex-content-center">
          <u-icon size="50rpx" name="checkmark-circle-fill" color="#E2B98E"></u-icon>
          <text class="fw700 ml5 success-title-text">已付款</text>
        </view>
      </view>
    </view>
    <view class="content-box ">
      <!-- 地址选择区域，点击可触发地址选择 -->
      <view class="common-card-box">
        <view class="address-box">
          <!-- 已选择地址时显示具体地址信息 -->
          <view class="address-view">
            <view style="display: flex; align-items: center;">
              <van-image
                  height="36rpx"
                  src="/static/hd-if-b.png"
                  width="36rpx"
              />
              <view style="margin-top: 0; margin-left: 34rpx ;font-family: PingFang SC-Medium;">
                <view class="t1" space="ensp">
                  {{ truckData.address_name }}&nbsp;&nbsp;&nbsp;{{ truckData.address_phone }}
                </view>
                <br/>
                <view class="t2" space="emsp">
                  {{ `${truckData.address_province}${truckData.address_city}${truckData.address_area}${truckData.address_content}` }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 已选商品 -->
      <view class="common-card-box">
        <view class="goods-list display-flex-center" v-for="(item, index) in goodsList" :key="index">
          <image
              style="width: 144rpx; height: 144rpx; border-radius: 10rpx;flex-shrink: 0;"
              :src="item.goods_cover" mode="aspectFill">
          </image>
          <view style="width: 100%" class="ml15">
            <view class="display-flex-between goods-name fs14 fw600">
              <text>{{ item.goods_name }}</text>
            </view>
            <view class="display-flex-between goods-number">
              <text class="gray-tag">{{ item.goods_spec }}</text>
            </view>
            <view class="display-flex-between goods-number">
              <text>￥
                <text class="fs18">{{ item.price_selling }}</text>
              </text>
              <text class="fs14">×{{ item.stock_sales }}</text>
            </view>
          </view>
        </view>
        <view class="goods-total">
          <u-line></u-line>
         <view class="display-flex-end mt15">
           <text class="fs12 color-333 flex-shrink"> 共{{ data.number_goods }}件商品&nbsp;&nbsp;&nbsp;总计:&nbsp;￥
             <text class="fs18">{{ data.amount_total }}</text>
           </text>
         </view>
        </view>
      </view>
      <!-- 运费信息 -->
      <view class="common-card ">
        <view class="display-flex-between mb15">
          <text class="color-333 flex-shrink">运费：</text>
          <text class="fw600 text-overflow-single">￥{{ data.amount_express }}</text>
        </view>
        <view class="display-flex-between mb15">
          <text class="color-333 flex-shrink">优惠券：</text>
          <text class="fw600 text-overflow-single">￥{{ data.coupon_price }}</text>
        </view>
        <view class="display-flex-between mb15">
          <text class="color-333 flex-shrink">使用积分：</text>
          <text class="fw600 text-overflow-single">{{ data.integral_price }}</text>
        </view>
        <view class="display-flex-between mb15">
          <text class="color-333 flex-shrink">{{ [1, 2].includes(data.status) ? '需付款' : '实付' }}：</text>
          <text class="fw600 text-overflow-single ">￥
            <text class="fw600 fs18">{{ data.amount_real }}</text>
          </text>
        </view>
        <view class="display-flex-between" v-if="!([1, 2].includes(data.status))">
          <text class="color-333 flex-shrink">支付方式：</text>
          <text class="fw600 text-overflow-single">微信</text>
        </view>
      </view>
      <!-- 售后信息 -->
      <view class="common-card" v-if="isRefund">
        <view class="display-flex-between mb15">
          <text class="color-333 flex-shrink">退款原因：</text>
          <text class="fw600 text-overflow-single">{{ refundData.refund_reason }}</text>
        </view>
        <view class="display-flex-between mb15">
          <text class="color-333 flex-shrink">退款金额：</text>
          <text class="fw600 text-overflow-single color-red">￥{{ refundData.refund_price }}</text>
        </view>
        <view class="display-flex-between">
          <text class="color-333 flex-shrink">申请说明：</text>
          <text class="fw600 text-overflow-single">{{ refundData.refund_explain }}</text>
        </view>
      </view>
      <view class="common-card" v-if="isRefund">
        <view class="display-flex-between mb15">
          <text class="color-333 flex-shrink">上传凭证</text>
        </view>
        <u-album :urls="refundData.refund_img"></u-album>
      </view>
      <view class="common-card color-333" v-if="isRefund">
        <view class="mb15">
          提交时间：{{ data.created_at }}
        </view>
        <view>处理时间：{{ data.refunded_at || '--' }}</view>
      </view>
      <template v-if="!isRefund">
        <!-- 留言 -->
        <view class="common-card">
          <view class="color-333 mb10">备注</view>
          <view class="fs13">{{ data.order_remark }}</view>
        </view>
        <!-- 下单信息 -->
        <view class="common-card color-333">
          <view class="mb15 display-flex-between">
            <view >
              订单编号：
            </view>
            <view>{{ data.order_no }}</view>
          </view>
          <view class="display-flex-between" >
            <view >
              下单时间：
            </view>
            <view>{{ data.created_at }}</view>
          </view>
        </view>
      </template>
    </view>
    <view class="bottom-box display-flex-end"
          v-if="[1,2,3,4].includes(data.status) || (isRefund && [1,2].includes(data.refund_status)) || [6, 9].includes(data.status) && !isRefund">
      <text class="btn-gray-border" @click="cancelOrder"
            v-if="[1, 2, 3].includes(data.status) && !isRefund">取消订单
      </text>
      <text class="common-btn ml10" @click="toPay" v-if="[1, 2].includes(data.status)">立即付款</text>
      <text class="common-btn ml10" @click="confirm" v-if="[4].includes(data.status)">确认收货</text>
      <text class="common-btn ml10" v-if="[6, 9].includes(data.status) && !isRefund"
            @click.stop="toAfterSales">取消订单
      </text>
      <template v-if="isRefund">
        <text class="common-btn ml10" @click="cancelAfter" v-if="[1,2].includes(data.refund_status)">取消申请</text>
        <!-- <text class="common-btn ml10" @click="editAfter" v-if="[1,2].includes(data.refund_status)">修改申请</text> -->
        <!-- 	<text class="common-btn ml10" @click="toDetail"
          v-if="[4].includes(data.refund_status)">查看详情</text> -->
      </template>
      <!-- <text class="common-btn ml10" v-if="[5].includes(data.status)">查看详情</text> -->
    </view>
    <!-- 取消订单原因 -->
    <AfterReson v-model="showReson" @confirm="cancelConfirm"></AfterReson>
    <!-- 确认框 -->
    <u-modal :show="confirmShow" :showCancelButton="true" @cancel="confirmShow = false"
             :content='confirmData.content' @confirm="confirmHandler"></u-modal>
  </view>
</template>

<script>
import AfterReson from '@/components/AfterReson.vue'

export default {
  components: {AfterReson},
  data() {
    return {
      data: {status: 1},
      mAddress: {},
      bgImg: '',
      usePoints: [],
      value1: '',
      goodsList: [],
      truckData: {},
      topData: {
        top: 0,
        height: 0
      },
      orderNo: '',
      pageOptions: {},
      showReson: false,
      refundData: {refund_img: []},
      confirmShow: false,
      confirmData: {
        title: '',
        content: ''
      },
      confirmType: ''
    }
  },
  computed: {
    isRefund() {
      return this.data.refund_status != 0
    },
    statusDisplay() {
      let result = {}
      if (this.isRefund) {
        return {
          title: this.data.refund_status_name,
          tips: this.data.refund_status_name,
        }
      }
      switch (this.data.status) {
        case 1:
        case 2:
          result = {
            title: '等待买家付款',
            tips: '逾期未付款,订单将自动取消',
            icon: 'order-icon1.png'
          }
          break;
        case 3:
          result = {
            title: '等待卖家发货',
            tips: '预计支付成功后48小时内发货',
            icon: 'order-icon2.png'
          }
          break;
        case 4:
          result = {
            title: '卖家已发货',
            tips: this.data.status_name,
            icon: 'order-icon3.png'
          }
          break;
        case 6:
        case 9:
          result = {
            title: '买家已确认收货',
            tips: `确认时间：${this.data.receive_at}`,
            icon: 'order-icon3.png'
          }
          break;
      }
      return result
    }
  },
  onLoad(options) {
    this.pageOptions = options
    this.orderNo = options.orderNo
    let configs = uni.getStorageSync('configs') || {}
    this.bgImg = configs.shop_bgimg
    this.getDetail()
  },
  onShow() {
    const topData = uni.getMenuButtonBoundingClientRect()
    this.topData.top = topData.top
    this.topData.height = topData.height
  },
  methods: {
    confirmHandler() {
      // 确认弹框
      if (this.confirmType == 'cancelOrder') {
        // 取消订单
        this.$api.cancelOrder({order_no: this.data.order_no}).then(res => {
          this.confirmShow = false
          this.getDetail()
        }).catch(() => {
          this.confirmShow = false
        })
      } else if (this.confirmType == 'confirm') {
        this.$api.confirmOrder({order_no: this.data.order_no}).then(res => {
          this.confirmShow = false
          this.getDetail()
        }).catch(() => {
          this.confirmShow = false
        })
      } else if (this.confirmType == 'cancelAfter') {
        this.$api.cancelAfterSales({order_no: this.data.order_no}).then(res => {
          this.confirmShow = false
          this.getDetail()
        }).catch(() => {
          this.confirmShow = false
        })
      }
    },
    toAfterSales() {
      uni.navigateTo({
        url: `/subPages/afterSales/afterSales?orderNo=${this.data.order_no}`
      })
    },
    toPay() {
      // 立即付款
      this.$toWechatPay(this.data.order_no)
    },
    cancelOrder() {
      if (this.data.status == 3) {
        uni.navigateTo({
          url: `/subPages/cancelOrder/cancelOrder?orderNo=${this.data.order_no}`
        })
      } else {
        this.showReson = true
      }
    },
    cancelAfter() {
      this.confirmShow = true
      this.confirmType = 'cancelAfter'
      this.confirmData = {
        title: '取消申请',
        content: '确认取消申请吗?'
      }
    },
    cancelConfirm(data) {
      console.log(7999, data)
      this.confirmShow = true
      this.confirmType = 'cancelOrder'
      this.confirmData = {
        title: '取消订单',
        content: '确认取消订单吗?'
      }
    },
    confirm() {
      this.confirmShow = true
      this.confirmType = 'confirm'
      this.confirmData = {
        title: '确认收货',
        content: '确认收货码?'
      }
    },
    getDetail() {
      this.$api.orderDetail({order_no: this.orderNo}).then(res => {
        this.data = res.data
        this.goodsList = res.data.items || []
        this.truckData = res.data.truck
        this.refundData = res.data.refund || {}
        if (this.refundData.refund_img) {
          this.refundData.refund_img = JSON.parse(this.refundData.refund_img)
        }
        this.refundData.refund_img = this.refundData.refund_img || []

      })
    },
    toBack() {
      uni.navigateBack({
        delta: 1 // 返回上一级页面
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.common-page {
  height: 100vh;
  overflow-y: auto;
  // padding: 20rpx;
  color: #2C2C2C;
  padding-bottom: 188rpx;
  box-sizing: border-box;
}

.common-card-box {
  width: 710rpx;
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  margin: 0 auto 20rpx auto;
  display: flex;
  flex-direction: column;

  .address-box {
    // width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 30rpx 30rpx;


    .address-view {
      flex: 1;
      display: flex;
      flex-direction: column;

      .t1 {
        font-size: 28rpx;
        margin-top: 10rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #333333;
      }

      .t2 {
        font-size: 28rpx;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 600;
        color: #333333;
        margin-top: 20rpx;
      }
    }
  }
}

.album {
  @include flex;
  align-items: flex-start;

  &__avatar {
    background-color: $u-bg-color;
    padding: 5px;
    border-radius: 3px;
  }

  &__content {
    margin-left: 10px;
    flex: 1;
  }
}

.success-con {
  padding: 0 50rpx 0 40rpx;
}

.content-box {
  padding: 20rpx;
}

.navbar-box {
  position: relative;
}

.good-card {
  padding: 38rpx 22rpx;
  color: #7A7A7A;

  ::v-deep {
    .u-textarea {
      background: #F6F6F6;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      border: none;
      padding: 18rpx;

      .u-textarea__count {
        background-color: transparent !important;
      }
    }
  }
}

.goods-list {
  padding: 30rpx;
  width: calc(100% - 60rpx);;

  .goods {
    &-name {
      width: 100%;

    }

    &-number {
      margin-top: 12rpx;
      width: 100%;
      font-size: 24rpx;
    }
  }
}

.goods-total {
  justify-content: flex-end;
  margin: 0rpx 30rpx 30rpx;
}
</style>
