<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" v-if="orders.ReOrderStatus === 1"
          >待审核</view
        >
        <view class="status-title" v-if="orders.ReOrderStatus === 2"
          >待买家处理</view
        >
        <view class="status-title" v-if="orders.ReOrderStatus === 3"
          >待卖家处理</view
        >
        <view class="status-title" v-if="orders.ReOrderStatus === 6"
          >已完成</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">
          <view style="display: flex">
            <image
              :src="orders.OrderInfo.CoverImagePath"
              class="img"
              @click="redirectGoods(x.GoodsId)"
              mode="aspectFill"
            />
            <view class="good-info">
              <view class="good-name" @click="redirectGoods(x.GoodsId)">{{
                orders.OrderInfo.GoodsName
              }}</view>
              <view class="good-attr">
                <text>数量:{{ orders.OrderInfo.Number }}</text>
                <text>
                  {{ orders.OrderInfo.SpecificationList.join(",") }}
                </text>
              </view>
              <view
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  margin-top: 2px;
                "
                @click.native.stop="goUrl(orders.OrderInfo.FreeShippingUrl)"
                v-if="
                  orders.OrderInfo.FreeShippingRemarks != null &&
                  orders.OrderInfo.FreeShippingRemarks != ''
                "
              >
                <view
                  style="
                    color: #ff4048;
                    background: #fdf6ec;
                    padding: 0 5px;
                    display: inline-block;
                  "
                >
                  <Text style="font-size: 20rpx; margin-right: 5rpx">
                    {{ orders.OrderInfo.FreeShippingRemarks }}
                  </Text>
                </view>
              </view>
              <view class="good-price"
                >￥{{ orders.OrderInfo.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.ReOrderNo }}</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.Income }}</view>
          </view>
          <view class="field">
            <view class="label">申请退款</view>
            <view class="content right">￥{{ orders.Refund }}</view>
          </view>
          <view class="field">
            <view class="label">实际退款</view>
            <view class="content right">￥{{ orders.RefundActual }}</view>
          </view>
          <view
            style="width: 100%; height: 1px; background: #f5f5f5; margin: 5px 0"
          ></view>
        </view>
      </view>
      <view class="btn-box">
        <view class="item">
          <u-button
            shape="circle"
            size="medium"
            v-if="orders.ReOrderStatus === 1"
            @click="agree"
            :custom-style="themCustomStyle"
            >同意</u-button
          >
        </view>
        <view class="item">
          <u-button
            shape="circle"
            size="medium"
            v-if="orders.ReOrderStatus === 1"
            @click="disagree"
            :custom-style="themCustomStyle"
            >拒绝</u-button
          >
        </view>
        <view class="item">
          <u-button
            shape="circle"
            size="medium"
            v-if="orders.ReOrderStatus === 3 && orders.Type == 2"
            @click="
              jumpPage(
                `/pages/MallMange/sendGoodsSaleAfter?ReOrderId=${data.ReOrderId}`
              )
            "
            :custom-style="themCustomStyle"
            >发货</u-button
          >
        </view>
        <view class="item">
          <u-button
            shape="circle"
            size="medium"
            v-if="orders.ReOrderStatus === 3 && orders.Type == 1"
            @click="shouHuo"
            :custom-style="themCustomStyle"
            >收货</u-button
          >
        </view>
        <view class="item">
          <u-button
            shape="circle"
            size="medium"
            v-if="orders.ReOrderStatus === 4 && orders.Type == 1"
            @click="dkOpenDig"
            :custom-style="themCustomStyle"
            >打款</u-button
          >
        </view>
      </view>
    </view>
    <!-- 待处理 -->
    <u-modal
      v-model="handleModal"
      :show-cancel-button="true"
      @confirm="regionsubmitForm"
      contentSlot
      title="选择退货地址"
    >
      <view class="radioBox">
        <u-radio-group v-model="SetOrderMsg.DeliveryId">
          <u-radio
            shape="circle"
            v-for="(item, index) in regionlist"
            :key="index"
            :name="item.ID"
          >
            <view class="radioItem">
              <view>{{ item.Name }}-{{ item.Mobile }}</view>
              <view>{{ item.Address }}</view>
            </view>
          </u-radio>
        </u-radio-group>
      </view>
    </u-modal>
    <!-- 打款 -->
    <u-modal
      v-model="dkModal"
      :show-cancel-button="true"
      @confirm="SaleForRefunds"
      contentSlot
      title="确认已收到货"
    >
      <view class="dkBox">
        退款金额￥
        <input type="number" class="dkInput" v-model="dkMsg.Refund" />
        元将直接返还给用户！
      </view>
    </u-modal>
    <u-toast ref="uToast" />
  </scroll-view>
</template>

<script>
import payCom from "@/components/pay/pay";
import afterSale from "@/components/userorder/after-sale";
import goodlist from "@/components/goods/list";
export default {
  components: {
    afterSale,
    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,
      regionlist: [],
      regiontotal: 1,
      handleModal: false,
      dkModal: false,
      regionMsg: {
        pageIndex: 1,
        pageSize: 20,
        Name: "",
      },
      SetOrderMsg: {
        ReOrderId: 0,
        Type: 0,
        DeliveryId: "",
      },
      //打款
      dkMsg: {
        Refund: 0,
      },
    };
  },
  onLoad(option) {
    if (option.id) {
      this.id = option.id;
      this.getData();
    }
    if (option.showAfter) {
      this.showAfter = true;
    }
    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,
      });
    },
    closeAfterHandler() {
      this.showAfter = false;
    },
    //----------------------------------------
    getData() {
      this.requestAdmin(
        "/api/order/GetOrderAfterSaleInfo",
        {
          ReOrderId: this.id,
        },
        (res) => {
          this.orders = res.data;
          this.expressInfo = res.data.OrderInfo.OrderExpressList;
          console.log(790, this.orders);
        }
      );
    },
    //售后订单审核-同意
    agree() {
      let that = this;
      this.SetOrderMsg.Type = 1;
      this.SetOrderMsg.ReOrderId = this.orders.ReOrderId;
      uni.showModal({
        title: "提示",
        content: "是否同意?",
        success: function (res) {
          if (res.confirm) {
            that.handleModal = true;
            that.getLogisticsDeliveryPage();
          }
        },
      });
    },
    //退货地址列表
    getLogisticsDeliveryPage() {
      this.requestAdmin(
        "/api/MallBase/GetLogisticsDeliveryPage",
        this.regionMsg,
        (res) => {
          if (res.resultCode == 1) {
            this.regionlist = res.data.pageData;
            this.regiontotal = res.data.count;
          }
        }
      );
    },
    regionsubmitForm() {
      let that = this;
      if (this.SetOrderMsg.DeliveryId == "") {
        uni.showToast({
          icon: "none",
          title: "请选择退货地址",
        });
        return;
      }
      this.requestAdmin(
        "/api/order/SetOrderAfterSaleAudit",
        this.SetOrderMsg,
        (res) => {
          uni.showToast({
            title: "操作成功",
          });
          that.getData();
        },
        null
      );
    },
    // 售后订单审核-拒绝
    disagree() {
      this.SetOrderMsg.ReOrderId = this.orders.ReOrderId;
      this.SetOrderMsg.Type = 2;
      this.SetOrderMsg.DeliveryId = "";
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确认拒绝?",
        success: function (res) {
          if (res.confirm) {
            that.requestAdmin(
              "/api/order/SetOrderAfterSaleAudit",
              that.SetOrderMsg,
              (res) => {
                uni.showToast({
                  title: "操作成功",
                });
                that.getData();
              },
              null
            );
          }
        },
      });
    },
    // 卖家收货
    shouHuo() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确认收货?",
        success: function (res) {
          if (res.confirm) {
            that.requestAdmin(
              "/api/order/SetOrderReceivingForReturnsAndRefunds",
              { ReOrderId: that.orders.ReOrderId },
              (res) => {
                uni.showToast({
                  title: "操作成功",
                });
                that.getData();
              },
              null
            );
          }
        },
      });
    },
    // 打款
    dkOpenDig() {
      this.dkMsg = {
        Refund: this.orders.Refund,
        ReOrderId: this.orders.ReOrderId,
      };
      this.dkModal = true;
    },
    // 确认打款
    SaleForRefunds() {
      let that = this;
      this.requestAdmin(
        "/api/order/SetOrderAfterSaleForRefunds",
        this.dkMsg,
        (res) => {
          uni.showToast({
            title: "操作成功",
          });
          that.getData();
        },
        null
      );
    },
  },
};
</script>

<style lang="scss">
.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;
}
.radioBox {
  box-sizing: border-box;
  padding: 30rpx;
  .radioItem {
    font-size: 24rpx;
    color: #000;
    margin-left: 20rpx;
  }
}
.dkBox {
  box-sizing: border-box;
  padding: 30rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  .dkInput {
    width: 100rpx;
    background-color: #f7f7f7;
    margin: 0 10rpx;
  }
}
</style>