<template>
  <scroll-view
    :scroll-y="true"
    @scroll="scrollHandler"
    @scrolltoupper="scrollTopHandler"
    style="height: 100vh"
  >
    <view class="orderdetail" :style="[contentStyle]">
      <view
        class="headStatus"
        :style="[
          headStyle,
          {
            zIndex: scrollTop < 10 ? 'unset' : 2,
            opacity: scrollTop < 10 ? '100' : scrollTop,
          },
        ]"
      >
        <view class="arrow" @click="redirectPrev">
          <u-icon name="arrow-left" size="48" color="#FFF"></u-icon>
        </view>
        <view class="title" v-if="scrollTop > 50">订单详情</view>
      </view>
      <view class="status" :style="[headStyle]">
        <view class="status-title">{{ orders.OrderStatusName }}</view>
        <view
          class="sub-title"
          v-if="
            orders.OrderStatus == 1 ||
            orders.OrderStatus == 2 ||
            orders.OrderStatus == 3 ||
            orders.OrderStatus == 4
          "
        >
        </view>
      </view>
      <view class="block address">
        <view class="icon">
          <u-icon name="location-o" color="#111" size="40"></u-icon>
        </view>
        <view class="content">
          <view class="concat">
            <text style="font-weight: 700; margin-right: 20px">{{
              orders.OrderInfo.Consignee
            }}</text>
            <text>{{ orders.OrderInfo.Mobile }}</text>
          </view>
          <view class="address"
            >{{ orders.OrderInfo.DistrictAddress
            }}{{ orders.OrderInfo.ShoppingAddress }}</view
          >
        </view>
      </view>
      <view class="block goods">
        <view class="item" v-for="(x, i) in orders.DetailList" :key="i">
          <view style="display: flex">
            <image
              :src="x.CoverImagePath"
              class="img"
              @click="redirectGoods(x.GoodsId)"
              mode="aspectFill"
            />
            <view class="good-info">
              <view class="good-name" @click="redirectGoods(x.GoodsId)">{{
                x.GoodsName
              }}</view>
              <view class="good-attr">
                <text>数量:{{ x.Number }}</text>
                <text
                  v-for="(y, yi) in x.SpecificationList"
                  :key="yi"
                  style="margin-right: 5px"
                >
                  {{ y }}
                </text>
              </view>
              <view
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  margin-top: 2px;
                "
                @click.native.stop="goUrl(x.FreeShippingUrl)"
                v-if="
                  x.FreeShippingRemarks != null && x.FreeShippingRemarks != ''
                "
              >
                <view
                  style="
                    color: #ff4048;
                    background: #fdf6ec;
                    padding: 0 5px;
                    display: inline-block;
                  "
                >
                  <Text style="font-size: 20rpx; margin-right: 5rpx">
                    {{ x.FreeShippingRemarks }}
                  </Text>
                </view>
              </view>
              <view class="good-price">￥{{ x.Final_Price }}</view>
            </view>
          </view>
          <template v-for="(e, ei) in expressInfo">
            <view
              :key="ei"
              class="order-info-item peisong"
              v-for="(ec, eci) in e.GoodsList"
              v-if="ec.Id == x.Id"
            >
              <template>
                <view
                  class="field"
                  :key="eci"
                  v-if="e.Type == '2' && ec.Id == x.Id"
                >
                  <view class="label">配送方式</view>
                  <view class="content">{{ e.Remark }}</view>
                </view>
                <view
                  class="field"
                  :key="eci"
                  @click="
                    goExpressHandler(
                      e.ExpressName,
                      e.ExpressNumber,
                      e.ExpressId
                    )
                  "
                  v-if="e.Type == '1' && ec.Id == x.Id"
                >
                  <view class="label">配送方式</view>
                  <view class="content"
                    >{{ e.ExpressName }} {{ e.ExpressNumber }}</view
                  >
                  <view style="margin-left: 10px">
                    <u-icon name="arrow" size="32" color="#000"></u-icon>
                  </view>
                </view>
              </template>
            </view>
          </template>
        </view>
      </view>
      <view class="block">
        <view class="order-info-item">
          <view class="field">
            <view class="label">订单编号：</view>
            <view class="content">{{ orders.OrderInfo.OrderNo }}</view>
            <view style="margin-left: 20px">
              <u-button
                size="mini"
                shape="circle"
                @click="paste(orders.OrderNo)"
                >复制</u-button
              >
            </view>
          </view>
          <view class="field">
            <view class="label">下单时间：</view>
            <view class="content">{{ orders.CreateDate }}</view>
          </view>
          <view class="field">
            <view class="label">备注：</view>
            <view class="content">{{ orders.Remark }}</view>
          </view>
        </view>
        <view class="order-info-item">
          <view class="field">
            <view class="label">支付方式：</view>
            <view class="content">{{ orders.OrderInfo.PaymentWayName }}</view>
          </view>
        </view>
      </view>
      <view class="block">
        <view class="order-info-item">
          <view class="field">
            <view class="label">商品总额</view>
            <view class="content right">￥{{ orders.PreferPrice }}</view>
          </view>
          <view class="field">
            <view class="label">运费</view>
            <view class="content right">+￥{{ orders.FreightMoney }}</view>
          </view>
          <view class="field">
            <view class="label">优惠</view>
            <view class="content right">-￥{{ orders.CouponMoney }}</view>
          </view>
          <view class="field">
            <view class="label">储蓄卡抵扣</view>
            <view class="content right">-￥{{ orders.DepositMoney }}</view>
          </view>
          <view class="field" v-if="orders.DeductionCommission > 0">
            <view class="label">佣金抵扣</view>
            <view class="content right"
              >-￥{{ orders.DeductionCommission }}</view
            >
          </view>
          <view
            style="width: 100%; height: 1px; background: #f5f5f5; margin: 5px 0"
          ></view>
          <view class="field">
            <view class="label">&nbsp;</view>
            <view class="content right">
              <text style="margin-right: 10px">实付款：</text>
              <text
                style="font-size: 11px; font-weight: 700"
                :style="{ color: mc }"
                >￥</text
              >
              <text style="font-size: 17px" :style="{ color: mc }">{{
                String(orders.Income).split(".")[0]
              }}</text>
              <text style="font-size: 12px" :style="{ color: mc }"
                >.{{ String(orders.Income).split(".")[1] || "00" }}</text
              >
            </view>
          </view>
        </view>
      </view>
      <view class="btn-box">
        <view class="item">
          <u-button
            shape="circle"
            size="medium"
            v-if="orders.OrderStatus === 1"
            @click="Offpayment"
            :custom-style="themCustomStyle"
            >线下付款</u-button
          >
        </view>
        <view class="item">
          <u-button
            shape="circle"
            size="medium"
            v-if="orders.OrderStatus === 2"
            @click="
              jumpPage(`/pages/MallMange/sendGoods?OrderId=${orders.OrderId}`)
            "
            :custom-style="themCustomStyle"
            >发货</u-button
          >
        </view>
        <view class="item">
          <u-button
            shape="circle"
            size="medium"
            v-if="orders.OrderStatus === 2"
            @click="
              jumpPage(
                `/pages/MallMange/sendGoods?OrderId=${orders.OrderId}&modify=true`
              )
            "
            :custom-style="themCustomStyle"
            >修改快递单号</u-button
          >
        </view>
        <view class="item">
          <u-button
            shape="circle"
            size="medium"
            v-if="orders.OrderStatus === 2 || orders.OrderStatus === 1"
            @click="OrderCancel"
            :custom-style="themCustomStyle"
            >强制取消</u-button
          >
        </view>
        <view class="item">
          <u-button
            shape="circle"
            size="medium"
            v-if="orders.OrderStatus === 3"
            @click="ConfirmReceipt"
            :custom-style="themCustomStyle"
            >确认收货</u-button
          >
        </view>
        <view class="item">
          <u-button
            shape="circle"
            size="medium"
            v-if="orders.OrderStatus === 3"
            @click="
              jumpPage(
                `/pages/MallMange/modifyAddress?OrderId=${orders.OrderId}`
              )
            "
            :custom-style="themCustomStyle"
            >修改地址</u-button
          >
        </view>
        <!-- <view
          class="item"
          v-if="orders.OrderStatus == '3' && orders.PresentFXGrade != 1"
        >
          <u-button
            shape="circle"
            size="medium"
            :custom-style="customStyle"
            @click="openAfterHandler"
            >申请售后</u-button
          >
        </view> -->
      </view>
    </view>

    <u-toast ref="uToast" />
  </scroll-view>
</template>

<script>
import payCom from "@/components/pay/pay";
import goodlist from "@/components/goods/list";
export default {
  components: {
    goodlist,
    payCom,
  },
  data() {
    return {
      mc: "",
      secondary: "",
      headStyle: {},
      contentStyle: {},
      orders: {},
      loading: true,
      id: 0,
      customStyle: {
        marginLeft: "20px",
        padding: "0 30rpx",
      },
      scrollTop: 0,
      prevPage: "",
      themCustomStyle: {
        marginLeft: "20px",
        padding: "0 30rpx",
        color: "#FFF",
      },
      expressInfo: [],
      showAfter: false,
    };
  },
  onLoad(option) {
    if (option.id) {
      this.id = option.id;
      this.getData();
    }

    this.mc = this.$uiConfig.mainColor;
    this.secondary = this.$uiConfig.secondary;
    this.headStyle.background = `linear-gradient(to right, ${this.mc},80%, ${this.secondary})`;
    let nav = uni.getMenuButtonBoundingClientRect();
    this.headStyle.paddingTop = nav.top + "px";
    this.contentStyle.paddingTop = nav.top + 44 + "px";
    let p = getCurrentPages();
    if (p.length > 1) {
      this.prevPage = p[p.length - 2].route;
    }
    this.themCustomStyle.background = this.mc;
  },

  methods: {
    paste(value) {
      uni.setClipboardData({
        data: value,
      });
    },
    scrollHandler(e) {
      this.scrollTop = e.detail.scrollTop;
    },
    scrollTopHandler() {
      this.scrollTop = 0;
    },
    redirectPrev() {
      if (this.prevPage != "") {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    jumpPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
    getData() {
      this.requestAdmin(
        "/api/order/GetGoodsOrderInfo",
        {
          OrderId: this.id,
        },
        (res) => {
          this.orders = res.data;
          this.expressInfo = res.data.OrderInfo.OrderExpressList;
          console.log(790, this.orders);
        }
      );
    },
    goExpressHandler(express, no, id) {
      uni.navigateTo({
        url:
          "/pages/order/express?express=" +
          express +
          "&no=" +
          no +
          "&address=" +
          this.orders?.OrderInfo?.DistrictAddress +
          this.orders?.OrderInfo?.ShoppingAddress +
          "&id=" +
          id,
      });
    },
    // 强制取消
    OrderCancel() {
      let that = this;
      let text = "";
      if (this.orders.OrderStatus == 1) {
        text = "确认取消?";
      } else if (this.orders.OrderStatus == 2) {
        text = "确认取消?客人付款金额将原路退回。";
      }
      uni.showModal({
        title: "提示",
        content: text,
        success: function (res) {
          if (res.confirm) {
            that.requestAdmin(
              "/api/order/SetOrderForcedToCancel",
              { OrderId: that.orders.OrderId },
              (res) => {
                if (res.resultCode == 1) {
                  uni.showToast({
                    title: "操作成功",
                    icon: "success",
                    duration: 2000,
                  });
                  that.getData();
                }
              }
            );
          }
        },
      });
    },
    //确认收货
    ConfirmReceipt() {
      let msg = {
        OrderId: this.orders.OrderId,
        Type: 5,
      };
      let that = this;
      uni.showModal({
        title: "提示",
        content: "是否确认收货?",
        success: function (res) {
          if (res.confirm) {
            that.requestAdmin("/api/order/SetOrderOperation", msg, (res) => {
              if (res.resultCode == 1) {
                uni.showToast({
                  title: "操作成功",
                  icon: "success",
                  duration: 2000,
                });
                that.getData();
              }
            });
          }
        },
      });
    },
    //线下付款
    Offpayment() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确认转为线下付款，转后无法恢复!",
        success: function (res) {
          if (res.confirm) {
            that.requestAdmin(
              "/api/order/SetOrderOfflinePayment",
              { OrderId: that.orders.OrderId },
              (_res) => {
                if (_res.resultCode === 1) {
                  uni.showToast({
                    title: "操作成功",
                    icon: "success",
                    duration: 2000,
                  });
                  that.getData();
                }
              },
              null
            );
          }
        },
      });
    },
  },
};
</script>

<style>
.orderdetail {
  overflow: hidden;
  background: #f3f4f6;
  padding-bottom: 50px;
}

.orderdetail .headStatus {
  overflow: hidden;
  position: relative;
  width: 140vw;
  padding-right: 40vw;
  padding-bottom: 10px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
}

.orderdetail .headStatus .arrow {
  height: 24px;
  margin: 5px 10px;
  width: 24px;
}

.orderdetail .headStatus .title {
  font-size: 18px;
  color: #fff;
  flex: 1;
  width: 1px;
  margin-left: 10px;
  line-height: 34px;
}

.orderdetail .status {
  padding-bottom: 25px;
  position: relative;
  width: 140vw;
  padding-right: 40vw;
  padding-top: 0 !important;
}

.orderdetail .status .status-title {
  text-align: center;
  font-size: 22px;
  color: #fff;
  margin-top: -18px;
}

.orderdetail .status .sub-title {
  font-size: 14px;
  color: #fff;
  text-align: center;
  margin-top: 10px;
  font-weight: 300;
}

.orderdetail .block {
  background: #fff;
  border-radius: 10px;
  margin-top: -10px;
  padding: 20px;
  padding-bottom: 0;
  position: relative;
  margin-bottom: 20px;
}

.orderdetail .address {
  display: flex;
  margin-bottom: 20px;
}

.orderdetail .address .icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.orderdetail .address .content {
  flex: 1;
}

.orderdetail .address .content .concat {
  font-size: 14px;
  color: #000;
}

.orderdetail .address .content .address {
  font-size: 13px;
  margin-top: 10px;
  color: gray;
}

.orderdetail .goods {
}

.orderdetail .goods .item {
  margin-bottom: 20px;
}

.orderdetail .goods .item:last-child {
  margin-bottom: 0;
}

.orderdetail .goods .item .img {
  width: 80px;
  height: 80px;
  border-radius: 2px;
}

.orderdetail .goods .item .good-info {
  margin-left: 15px;
  flex: 1;
  flex-direction: column;
  width: 1px;
  display: flex;
}

.orderdetail .goods .item .good-info .good-name {
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 24px;
}

.orderdetail .goods .item .good-info .good-attr {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: gray;
  display: flex;
  flex-direction: column;
}

.orderdetail .goods .item .good-info .good-price {
  font-size: 16px;
  height: 20px;
}

.orderdetail .order-info-item {
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.orderdetail .order-info-item:last-child {
  border-bottom: none;
}

.orderdetail .order-info-item .field {
  margin-bottom: 10px;
  display: flex;
}

.orderdetail .order-info-item.peisong {
  border: none;
  background: #f1f1f1;
  border-radius: 5px;
  padding: 10px;
  margin: 15px 0 5px 0;
  overflow: hidden;
}

.orderdetail .order-info-item .field:last-child {
  margin-bottom: 0;
}

.orderdetail .order-info-item .field .label {
  width: 80px;
  margin-right: 20px;
  color: gray;
}

.orderdetail .order-info-item .field .content {
  flex: 1;
  width: 1px;
  color: #000;
}

.orderdetail .order-info-item .field .content.right {
  text-align: right;
}

.orderdetail .btn-box {
  display: flex;
  flex-direction: row-reverse;
  height: 45px;
  padding: 5px 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-top: 1px solid #f5f5f5;
  background: #fff;
}

.orderdetail .customer {
  padding-top: 20rpx;
  margin-top: 20rpx;
  border-top: 2rpx solid #f5f5f5;
  border-bottom: 2rpx solid #f5f5f5;
}

.orderdetail .customer button {
  width: 100%;
  display: inline-block;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

.orderdetail .customer button::after {
  border: none;
  outline: none;
}
</style>