<template>
  <!-- #ifdef H5 -->
  <view class="app-container">
    <view class="order-container card">
      <view class="title">订单信息</view>
      <view class="item1">
        <view class="left">
          <view class="label">订单编号</view>
          <view class="value">{{ detail.id }}</view>
        </view>
        <view class="copy" @tap="copy(detail.id)">复制</view>
      </view>
      <view class="item2">
        <view class="label">服务类型</view>
        <view class="value">{{ ({ 1: "延保", 2: "清洗" })[detail.increType] || "" }}</view>
      </view>
      <view class="item2">
        <view class="label">产品品牌</view>
        <view class="value">{{ detail.brandName }}</view>
      </view>
      <view class="item2">
        <view class="label">产品大类</view>
        <view class="value">{{ detail.mainName }}</view>
      </view>
      <view class="item2">
        <view class="label">服务内容</view>
        <view class="value">{{ detail.increContent }}</view>
      </view>
      <view class="item2">
        <view class="label">使用限值</view>
        <view class="value">{{ detail.limitNum }}</view>
      </view>
      <view class="item2">
        <view class="label">服务金额</view>
        <view class="value">{{ detail.amount }}</view>
      </view>
      <view class="item2">
        <view class="label">下单时间</view>
        <view class="value">{{ detail.createTime }}</view>
      </view>
      <view class="item2">
        <view class="label">销售网点</view>
        <view class="value">{{ detail.websitName }}</view>
      </view>
      <view class="item2">
        <view class="label">支付方式</view>
        <view class="value">{{ ({ 1: "扫码支付", 2: "代客支付" })[detail.payType] || "" }}</view>
      </view>
      <view class="item2">
        <view class="label">分享收益</view>
        <view class="value">{{ detail.workerAmount }}</view>
      </view>
    </view>

    <view class="info-container card">
      <view class="common-title">产品信息</view>
      <view>
        <view class="row">
          <view class="label">内机条码</view>
          <view class="value">{{ detail.insideCode }}</view>
        </view>
        <view class="row">
          <view class="label">发票价格</view>
          <view class="value">{{ detail.invoiceAmount }}</view>
        </view>
        <view class="row">
          <view class="label">原保到期</view>
          <view class="value">{{ detail.insureTime }}</view>
        </view>
        <view class="row">
          <view class="label">服务期限</view>
          <view class="value">{{ detail.serviceEndTime }}</view>
        </view>
      </view>
      <view class="imgs">
        <view class="it">
          <image :src="detail.insideCodeImg" mode="aspectFill"></image>
          <view class="text">内机条码</view>
        </view>
        <view class="it">
          <image :src="detail.machineImg" mode="aspectFill"></image>
          <view class="text">机器铭牌（含出厂日期）</view>
        </view>
        <view class="it">
          <image :src="detail.buyCertImg" mode="aspectFill"></image>
          <view class="text">购机凭证</view>
        </view>
      </view>
    </view>

    <view class="order-container card">
      <view class="title">客户信息</view>
      <view class="item2">
        <view class="value" style="margin-right: 20rpx;">{{ detail.userName }}</view>
        <view class="value">{{ detail.userMobile }}</view>
      </view>
      <view class="item3">
        <view class="value">{{ detail.userAddress }}</view>
      </view>
    </view>


  </view>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageMine/pages/profit/ybdetail`, pam, crossPagePam)"
    @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
// #ifdef H5
export default {
  filters: {
    statusFilter(val) {
      if (!val) { return '' }
      const statusMap = {
        NOPAY: '待付款',
        DFH: '待发货',
        YFH: '已发货',
        OVER: '已完成',
        CLOSE: '已关闭',
        REFUND: '售后中',
      }
      return statusMap[val];
    }
  },

  data() {
    return {
      orderId: null, // 订单id
      orderRefundId: null, // 售后订单id
      isReturnOrder: false, // 是否售后订单
      detail: {}, // 详情数据
    }
  },

  onLoad({ orderId, orderRefundId }) {
    this.orderId = orderId;
    if (orderRefundId != 'undefined') {
      this.isReturnOrder = true;
      this.orderRefundId = orderRefundId;
    }
    this.getOrderDetail();
  },

  methods: {
    getOrderDetail() {
      this.$api.post("/increConfig/detailIncre", {
        id: this.orderId
      }).then(res => {
        this.detail = res.data;
      })
    },

    // 复制
    copy(val) {
      uni.setClipboardData({
        data: val,
        success: () => {
          this.$successToast('复制成功');
        }
      });
    },
  }
}
// #endif
// #ifndef H5
export default {
  data() {
    return {
      pam: {},
    }
  },

  onLoad(pam) {
    this.pam = pam;
  },
}
// #endif
</script>

<style lang="scss">
.app-container {
  background: #F4F2F2;
  box-sizing: border-box;
  padding: 20rpx 20rpx 120rpx;
}

.card {
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.goods-container {
  padding: 0 20rpx;

  .title {
    font-size: 32rpx;
    color: #333333;
    line-height: 32rpx;
    padding-top: 20rpx;
  }

  .total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 78rpx;
    color: #666666;

    text {
      color: #FF3F42;
    }
  }

  .item {
    padding: 20rpx 0;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;

    image {
      width: 180rpx;
      height: 180rpx;
      flex-shrink: 0;
      margin-right: 20rpx;
    }

    .right {
      width: 470rpx;
      height: 180rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top {
        .name {
          font-size: 28rpx;
          color: #333333;
          line-height: 36rpx;
        }

        .des {
          font-size: 28rpx;
          color: #999999;
          margin-top: 10rpx;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price {
          font-size: 28rpx;
          color: #FF3F42;
          line-height: 28rpx;
        }

        .num {
          font-size: 28rpx;
          color: #333333;
          line-height: 28rpx;
        }
      }
    }
  }
}

.order-container {
		padding: 20rpx;
		.title {
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			padding-bottom: 20rpx;
		}
		.item1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60rpx;
			.left {
				display: flex;
				.label {
					flex-shrink: 0;
          margin-right: 20rpx;
          font-size: 28rpx;
          color: $sec-font;
				}
        .value {
          font-size: 28rpx;
        }
			}
			.copy {
				color: #FE781F;
        font-size: 28rpx;
			}
		}
		.item2 {
			display: flex;
			align-items: center;
			height: 60rpx;
			.label {
				flex-shrink: 0;
        margin-right: 20rpx;
        font-size: 28rpx;
        color: $sec-font;
			}
      .value {
        font-size: 28rpx;
      }
			.red {
				color: #FE781F;
        font-size: 28rpx;
			}
		}
		.item3 {
			display: flex;
			min-height: 60rpx;
			margin-top: 10rpx;
			.label {
				flex-shrink: 0;
        margin-right: 20rpx;
        font-size: 28rpx;
        color: $sec-font;
			}
      .value {
        font-size: 28rpx;
      }
		}
	}

.info-container {
  box-sizing: border-box;
  padding: 20rpx;
  .row {
    display: flex;
    margin-top: 20rpx;

    .label {
      font-size: 28rpx;
      color: $sec-font;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .value {
      font-size: 28rpx;
    }

    .ctrl {
      font-size: 28rpx;
      color: $theme-color;
      margin-left: 20rpx;
    }
  }

  .imgs {
    display: flex;
    margin-top: 20rpx;

    .it {
      width: 180rpx;
      margin-right: 30rpx;

      image {
        width: 180rpx;
        height: 180rpx;
      }

      .text {
        font-size: 24rpx;
        text-align: center;
      }
    }
  }
}</style>
