<template>
  <view class="item">
    <view class="flex-between orderNum" @click="goOrderDetail(data)">
      <text>订单号：{{ data.ReOrderNo }}</text>
      <text style="color: #446dfc">{{ data.ReOrderStatusName }}</text>
    </view>
    <view class="flex-between remarks" v-if="data.ReRemark">
      备注：{{ data.ReRemark }}
    </view>
    <view class="consigneeInfo">
      <text style="margin-right: 40rpx">{{ data.OrderModel.Consignee }}</text>
      <text style="margin-right: 20rpx">{{ data.OrderModel.Mobile }}</text>
      <view
        class="flex-between"
        style="color: #446dfc"
        @click="call(data.Mobile)"
      >
        <u-icon name="phone-circle-o" style="margin-right: 10rpx"></u-icon>
        联系收货人
      </view>
    </view>
    <view class="flex-between goodsInfo">
      <view class="goodsImg">
        <image
          :src="data.OrderDetailModel.CoverImagePath"
          mode="aspectFill"
          class="img"
        />
        <text v-if="data.Type == 1" class="reType">退货退款</text>
        <text v-if="data.Type == 2" class="reType">换货</text>
      </view>
      <view class="goodsBox">
        <view class="goodsName">{{ data.OrderDetailModel.GoodsName }}</view>
        <view class="weight"
          >规格：{{
            getSpecificationsStr(data.OrderDetailModel.SpecificationList)
          }}</view
        >
        <view class="flex-between">
          <text style="color: #808080">x{{ data.ReNumber }}</text>
          <text>￥{{ data.Income }}</text>
        </view>
      </view>
    </view>
    <view class="priceBox">
      <text>实付金额</text>
      <text style="color: #111; margin: 0 4rpx; fond-size: 26rpx"
        >￥{{ data.Income.toFixed(2) }}</text
      >
    </view>
    <view class="priceBox">
      <text>申请退款</text>
      <text style="color: #111; margin: 0 4rpx; fond-size: 26rpx"
        >￥{{ data.Refund.toFixed(2) }}</text
      >
    </view>
    <view class="priceBox">
      <text>实际退款</text>
      <text style="color: #111; margin: 0 4rpx; fond-size: 26rpx"
        >￥{{
          data.RefundActual != null ? data.RefundActual.toFixed(2) : 0.0
        }}</text
      >
    </view>

    <view class="btnBox">
      <button class="btn" v-if="data.ReOrderStatus == 1" @click="disagree">
        拒绝
      </button>
      <button class="btn" v-if="data.ReOrderStatus == 1" @click="agree">
        同意
      </button>
      <button
        class="btn"
        v-if="data.Type == 2 && data.ReOrderStatus == 3"
        @click="
          jumpPage(`/pages/MallMange/sendGoodsSaleAfter?ReOrderId=${data.ReOrderId}`)
        "
      >
        发货
      </button>
      <button
        class="btn"
        v-if="data.Type == 1 && data.ReOrderStatus == 3"
        @click="shouHuo"
      >
        收货
      </button>
      <button
        class="btn"
        v-if="data.Type == 1 && data.ReOrderStatus == 4"
        @click="dkOpenDig"
      >
        打款
      </button>
    </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>
  </view>
</template>
<script>
export default {
  props: {
    data: Object,
    orderType: Number,
  },
  data() {
    return {
      handleModal: false,
      //收货地址
      regionMsg: {
        pageIndex: 1,
        pageSize: 20,
        Name: "",
      },
      regionlist: [],
      regiontotal: 1,
      SetOrderMsg: {
        ReOrderId: 0,
        Type: 0,
        DeliveryId: "",
      },
      //打款
      dkMsg: {
        Refund: 0,
      },
      dkModal: false,
    };
  },
  methods: {
    jumpPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
     goOrderDetail(item) {
      uni.navigateTo({
        url: "/pages/MallMange/afterOrderDetail?id=" + item.ReOrderId,
      });
    },
    //打电话
    call(num) {
      uni.makePhoneCall({
        phoneNumber: num,
      });
    },
    getSpecificationsStr(arr = []) {
      let str = arr
        .map((e) => {
          return e;
        })
        .toString();
      return str;
    },
    //售后订单审核-同意
    agree() {
      let that = this;
      this.SetOrderMsg.Type = 1;
      this.SetOrderMsg.ReOrderId = this.data.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() {
      if (this.SetOrderMsg.DeliveryId == "") {
        uni.showToast({
          icon: "none",
          title: "请选择退货地址",
        });
        return;
      }
      this.requestAdmin(
        "/api/order/SetOrderAfterSaleAudit",
        this.SetOrderMsg,
        (res) => {
          uni.showToast({
            title: "操作成功",
          });
          this.$emit("update");
        },
        null
      );
    },
    // 售后订单审核-拒绝
    disagree() {
      this.SetOrderMsg.ReOrderId = this.data.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.$emit("update");
              },
              null
            );
          }
        },
      });
    },
    // 卖家收货
    shouHuo() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确认收货?",
        success: function (res) {
          if (res.confirm) {
            that.requestAdmin(
              "/api/order/SetOrderReceivingForReturnsAndRefunds",
              { ReOrderId: that.data.ReOrderId },
              (res) => {
                uni.showToast({
                  title: "操作成功",
                });
                that.$emit("update");
              },
              null
            );
          }
        },
      });
    },
    // 打款
    dkOpenDig() {
      this.dkMsg = {
        Refund: this.data.Refund,
        ReOrderId: this.data.ReOrderId,
      };
      this.dkModal = true;
    },
    // 确认打款
    SaleForRefunds() {
      this.requestAdmin(
        "/api/order/SetOrderAfterSaleForRefunds",
        this.dkMsg,
        (res) => {
          uni.showToast({
            title: "操作成功",
          });
          this.$emit("update");
        },
        null
      );
    },
  },
  created() {
  },
};
</script>
<style lang="scss" scoped>
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item {
  width: 700rpx;
  //   height: 480rpx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 40rpx 20rpx 40rpx 20rpx;
  border-radius: 10rpx;
  margin: auto;
  .orderNum {
    font-size: 24rpx;
    color: #111;
    margin-bottom: 20rpx;
  }
  .remarks {
    font-size: 24rpx;
    color: #111;
    margin-bottom: 20rpx;
  }
  .consigneeInfo {
    width: 100%;
    height: 70rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    background-color: #f7f7f7;
    font-size: 24rpx;
    border-radius: 6rpx;
    margin-bottom: 20rpx;
  }
  .goodsInfo {
    margin-bottom: 30rpx;
  }
  .goodsImg {
    width: 160rpx;
    height: 160rpx;
    border-radius: 6rpx;
    overflow: hidden;
    box-shadow: 0rpx 0rpx 10rpx 0px rgba(36, 36, 36, 0.2);
    margin-right: 20rpx;
    position: relative;
    .img {
      width: 100%;
      height: 100%;
      border-radius: 6rpx;
    }
    .reType {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 160rpx;
      height: 40rpx;
      background-color: #446dfc;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 22rpx;
    }
  }
  .goodsBox {
    width: 480rpx;
    height: 160rpx;
    font-size: 24rpx;
    color: #333;
    .goodsName {
      line-height: 30rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
    .weight {
      line-height: 70rpx;
      color: #808080;
    }
  }
  .priceBox {
    text-align: right;
    color: #808080;
    font-size: 24rpx;
    margin-bottom: 30rpx;
  }
  .btnBox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .btn {
      height: 50rpx;
      border-radius: 25rpx;
      border: 2rpx solid #f7f7f7;
      margin: 0 0 0 10rpx;
      padding: 0 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 22rpx;
      color: #111;
    }
  }
}
.input {
  width: 80%;
  height: 80rpx;
  border-radius: 10rpx;
  background-color: #f7f7f7;
  padding: 0 30rpx;
  font-size: 24rpx;
  margin: 20rpx auto;
}
.textarea {
  width: 80%;
  // height: 80rpx;
  border-radius: 10rpx;
  background-color: #f7f7f7;
  padding: 30rpx;
  font-size: 24rpx;
  margin: 20rpx auto;
}
.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>