<template>
  <view class="item">
    <view class="flex-between orderNum" @click="goOrderDetail(data)">
      <text>订单号：{{ data.OrderNo }}</text>
      <text style="color: #446dfc">{{ data.OrderStatusName }}</text>
    </view>
    <view class="flex-between remarks" v-if="data.Remark">
      商家备注：{{ data.Remark }}
    </view>
    <view class="consigneeInfo">
      <text style="margin-right: 40rpx">{{ data.Consignee }}</text>
      <text style="margin-right: 20rpx">{{ data.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"
      v-for="(item, index) in data.DetailList"
      :key="index"
    >
      <view class="goodsImg">
        <image :src="item.CoverImage" mode="aspectFill" class="img" />
      </view>
      <view class="goodsBox">
        <view class="goodsName">{{ item.GoodsName }}</view>
        <view class="weight"
          >规格：{{ getSpecificationsStr(item.SpecificationList) }}</view
        >
        <view class="flex-between">
          <view style="color: #808080" class="flex-between"
            >x{{ item.Number }}
            <view
              v-if="item.IsApplyForAfterSale && item.IsApplyForAfterSale === 1"
              style="margin-left: 10rpx; color: #446dfc"
              >已退货退款</view
            ></view
          >
          <text>￥{{ item.SmallShopsCostPrice }}</text>
        </view>
      </view>
    </view>
    <view class="priceBox">
      <text>合计</text>
      <text style="color: #111; margin: 0 4rpx; fond-size: 26rpx"
        >￥{{ data.Income.toFixed(2) }}</text
      >
      <text>(含运费￥{{ data.FreightMoney.toFixed(2) }})</text>
    </view>
    <view class="btnBox">
      <button class="btn" @click="showRemark">备注</button>
      <button class="btn" v-if="data.OrderStatus === 1" @click="Offpayment">
        线下付款
      </button>
      <button class="btn" v-if="data.OrderStatus === 6" @click="pending(2)">
        拒绝
      </button>
      <button class="btn" v-if="data.OrderStatus === 6" @click="pending(1)">
        同意
      </button>
      <button
        class="btn"
        v-if="data.OrderStatus === 2"
        @click="jumpPage(`/pages/MallMange/sendGoods?OrderId=${data.OrderId}`)"
      >
        发货
      </button>
      <button class="btn" v-if="data.OrderStatus === 3" @click="ConfirmReceipt">
        确认收货
      </button>
      <button
        class="btn"
        v-if="data.OrderStatus === 3"
        @click="
          jumpPage(
            `/pages/MallMange/sendGoods?OrderId=${data.OrderId}&modify=true`
          )
        "
      >
        修改快递单号
      </button>
      <button
        class="btn"
        v-if="data.OrderStatus === 2 || data.OrderStatus === 1"
        @click="OrderCancel"
      >
        强制取消
      </button>
      <button
        class="btn"
        v-if="data.OrderStatus === 2"
        @click="
          jumpPage(`/pages/MallMange/modifyAddress?OrderId=${data.OrderId}`)
        "
      >
        修改地址
      </button>
    </view>
    <u-modal
      v-model="modal"
      :show-cancel-button="true"
      @confirm="setOrderInfo"
      contentSlot
      title="备注"
    >
      <input
        type="number"
        class="input"
        placeholder="(限15字)"
        :maxlength="15"
        v-model="exitMsg.Remark"
      />
    </u-modal>
    <!-- 待处理 -->
    <u-modal
      v-model="pendModal"
      :show-cancel-button="true"
      @confirm="pendingForm"
      contentSlot
      title="备注"
    >
      <textarea class="textarea" v-model="pendMsg.Remark" />
    </u-modal>
  </view>
</template>
<script>
export default {
  props: {
    data: Object,
    orderType: Number,
  },
  data() {
    return {
      modal: false,
      exitMsg: {
        OrderId: 0,
        Type: 1,
        Remark: "",
      },
      // 待处理
      pendMsg: {
        OrderId: 0,
        Type: 1,
        Remark: 0,
      },
      pendModal: false,
    };
  },
  methods: {
    jumpPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
    goOrderDetail(item) {
      uni.navigateTo({
        url: "/pages/MallMange/orderDetail?id=" + item.OrderId,
      });
    },
    //打电话
    call(num) {
      uni.makePhoneCall({
        phoneNumber: num,
      });
    },
    getSpecificationsStr(arr) {
      let str = arr
        .map((e) => {
          return e;
        })
        .toString();
      return str;
    },
    showRemark(){
       this.modal = true;
    },
    // 修改备注
    setOrderInfo() {
      this.modal = false;
      this.requestAdmin("/api/order/SetOrderOperation", this.exitMsg, (res) => {
        if (res.resultCode === 1) {
          this.$emit("update");
        }
      });
    },
    // 强制取消
    OrderCancel() {
      let that = this;
      let text = "";
      if (this.data.OrderStatus == 1) {
        text = "确认取消?";
      } else if (this.data.OrderStatus == 2) {
        text = "确认取消?客人付款金额将原路退回。";
      }
      uni.showModal({
        title: "提示",
        content: text,
        success: function (res) {
          if (res.confirm) {
            that.requestAdmin(
              "/api/order/SetOrderForcedToCancel",
              { OrderId: that.data.OrderId },
              (res) => {
                if (res.resultCode == 1) {
                  uni.showToast({
                    title: "操作成功",
                    icon: "success",
                    duration: 2000,
                  });
                  that.$emit("update");
                }
              }
            );
          }
        },
      });
    },
    //确认收货
    ConfirmReceipt() {
      let msg = {
        OrderId: this.data.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.$emit("update");
              }
            });
          }
        },
      });
    },
    //待处理-->确认|取消
    pending(type = 1) {
      this.pendModal = true;
      this.pendMsg.OrderId = this.data.OrderId;
      this.pendMsg.Type = type;
      this.pendMsg.Remark = "";
    },
    // 待处理调用接口
    pendingForm() {
      this.requestAdmin(
        "/api/order/SetOrderApplyForCancelAudit",
        this.pendMsg,
        (res) => {
          if (res.resultCode === 1) {
            this.pendModal = false;
            uni.showToast({
              title: "操作成功",
              icon: "success",
              duration: 2000,
            });
            that.$emit("update");
          }
        }
      );
    },
    //线下付款
    Offpayment() {
      let that = this;
      uni.showModal({
        title: "提示",
        content: "确认转为线下付款，转后无法恢复!",
        success: function (res) {
          if (res.confirm) {
            that.requestAdmin(
              "/api/order/SetOrderOfflinePayment",
              { OrderId: that.data.OrderId },
              (_res) => {
                if (_res.resultCode === 1) {
                  console.log(269, _res);
                  uni.showToast({
                    title: "操作成功",
                    icon: "success",
                    duration: 2000,
                  });
                  that.$emit("update");
                }
              },
              null
            );
          }
        },
      });
    },
  },
  created() {
    this.exitMsg.Remark = this.data?.Remark;
    this.exitMsg.OrderId = this.data?.OrderId;
  },
};
</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;
    .img {
      width: 100%;
      height: 100%;
      border-radius: 6rpx;
    }
  }
  .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 {
      //   width: 90rpx;
      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;
}
</style>