<template>
  <view class="fhpage">
    <view class="title"
      >选择发货商品<text
        style="color：#CCCED5;font-size:26rpx;margin-left:10rpx;"
        >(默认全选)</text
      >
    </view>
    <view class="goodsList">
      <view class="goodsItem">
        <image
          :src="orderData.CoverImagePath"
          mode="aspectFill"
          class="image"
        ></image>
        <view class="goodsInfo">
          <view class="GoodsName">{{ orderData.GoodsName }}</view>
          <view class="weight"
            >规格:{{ orderData.SpecificationList.join(",") }}</view
          >
          <view class="price">
            <text style="color: #808080">x{{ orderData.Number }}</text>
            <text>￥{{ orderData.Final_Price }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="title"> 物流信息 </view>
    <view class="logisticsInfo">
      <view class="logisticsItem">
        <view class="itemLabel">物流快递</view>
        <view class="itemCon">
          <u-radio-group
            v-model="fhMsg.Type"
            :size="28"
            @change="radioGroupChange"
          >
            <u-radio shape="circle" :name="1"> 快递</u-radio>
            <u-radio shape="circle" :name="2"> 其他方式</u-radio>
          </u-radio-group>
        </view>
      </view>
      <view v-if="fhMsg.Type === 1">
        <view class="logisticsItem">
          <view class="itemLabel"
            ><text style="color: #f56c6c; margin-right: 4rpx">*</text
            >快递公司</view
          >
          <view class="itemCon">
            <picker :range="ExpressList" range-key="Name" @change="bindExpress">
              <view style="display: flex"
                >{{ ExpressStr }}
                <u-icon name="arrow" style="margin-left: 10rpx"></u-icon>
              </view>
            </picker>
          </view>
        </view>
        <view class="logisticsItem">
          <view class="itemLabel">收件人邮编</view>
          <input
            type="text"
            v-model="fhMsg.PostCode"
            class="input"
            placeholder="请输入邮编"
          />
        </view>
        <view class="logisticsItem">
          <view class="itemLabel"
            ><text style="color: #f56c6c; margin-right: 4rpx">*</text>
            快递单号</view
          >
          <input
            type="text"
            v-model="fhMsg.ExpressNumber"
            class="input"
            placeholder="请输入单号"
          />
        </view>
        <view
          class="logisticsItem"
          style="min-height: 80rpx; height: auto; border: none"
        >
          <view class="itemLabel">商家留言</view>
          <textarea
            type="text"
            auto-height
            v-model="fhMsg.Remark"
            class="input2"
            placeholder="请输入留言"
          />
        </view>
      </view>
      <view v-if="fhMsg.Type === 2">
        <view
          class="logisticsItem"
          style="min-height: 80rpx; height: auto; border: none"
        >
          <view class="itemLabel">物流内容</view>
          <textarea
            type="text"
            auto-height
            v-model="fhMsg.Remark"
            class="input2"
            placeholder="请输入物流内容"
          />
        </view>
      </view>
      <view class="comfirm" @click="comfirm"> 确认发货 </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      title: "发货",
      fhMsg: {
        AfterSaleOrderId: "",
        Type: 1,
        ExpressId: "",
        PostCode: "",
        ExpressNumber: "",
        Remark: "",
      },
      orderData: {
        SpecificationList: [],
      },
      showType: 1,
      kdShow: false,
      ExpressList: [],
      ExpressStr: "未选择",
      disabledGroup: false,
    };
  },
  methods: {
    getData(id) {
      this.requestAdmin(
        "/api/order/GetOrderAfterSaleInfo",
        {
          ReOrderId: id,
        },
        (res) => {
          this.orderData = res.data.OrderInfo;
        }
      );
    },
    // 快递公司
    getExpressInfo() {
      this.requestAdmin("/api/MallBase/GetExpressInfo", {}, (res) => {
        if (res.resultCode == 1) {
          this.ExpressList = res.data;
        }
      });
    },
    //选择快递公司
    bindExpress(e) {
      let index = parseInt(e.detail.value);
      this.ExpressStr = this.ExpressList[index].Name;
      this.fhMsg.ExpressId = this.ExpressList[index].ID;
    },
    comfirm() {
      console.log(133, this.fhMsg);
      if (this.fhMsg.Type == 1) {
        if (!this.fhMsg.ExpressId) {
          uni.showToast({
            title: "请选择快递公司",
            icon: "none",
          });
          return;
        }
        if (!this.fhMsg.ExpressNumber) {
          uni.showToast({
            title: "请输入快递单号",
            icon: "none",
          });
          return;
        }
      }
      if (this.fhMsg.Type == 2) {
        this.fhMsg.ExpressId = "";
        this.fhMsg.PostCode = "";
        this.fhMsg.ExpressNumber = "";
      }
      let pages = getCurrentPages(); // 当前页面
      let beforePage = pages[pages.length - 2]; // 前一个页面
      uni.showNavigationBarLoading();
      this.requestAdmin(
        "/api/order/SetOrderAfterSaleSendGoods",
        this.fhMsg,
        (res) => {
          if (res.resultCode === 1) {
            uni.showToast({
              title: "操作成功",
              icon: "success",
            });
            setTimeout(() => {
              uni.navigateBack({
                success: function () {
                  beforePage.onLoad(); // 执行前一个页面的created方法
                },
              });
            }, 1000);
            uni.hideNavigationBarLoading();
          }
        },
        null
      );
    },
  },
  onLoad(options) {
    if (options.ReOrderId) {
      this.getData(options.ReOrderId);
      this.fhMsg.AfterSaleOrderId=parseInt(options.ReOrderId)
    }
    this.getExpressInfo();
    uni.setNavigationBarTitle({
      title: this.title,
    });
  },
};
</script>
<style lang="scss" scoped>
.fhpage {
  min-height: 100vh;
  background-color: #f7f7f7;
}

.title {
  height: 80rpx;
  display: flex;
  align-items: center;
  color: #111;
  font-size: 30rpx;
  box-sizing: border-box;
  padding: 0 25rpx;
}
.goodsList {
  box-sizing: border-box;
  padding: 0 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  .goodsItem {
    // height: 220rpx;
    border-radius: 10rpx;
    padding: 0 25rpx;
    margin: 20rpx 0;
    display: flex;
    align-items: center;
    .image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 6rpx;
      // box-shadow: 0rpx 0rpx 10rpx 0px rgba(36, 36, 36, 0.2);
      margin-right: 20rpx;
    }
    .goodsInfo {
      width: 450rpx;
      height: 160rpx;
      font-size: 24rpx;
      color: #333;
      .GoodsName {
        height: 66rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
      .weight {
        height: 50rpx;
        line-height: 50rpx;
        color: #808080;
      }
      .price {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
.logisticsInfo {
  width: 700rpx;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 0 20rpx;
  .logisticsItem {
    height: 80rpx;
    border-bottom: 2rpx solid #ccced5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24rpx;
    .itemLabel {
      width: 200rpx;
      font-size: 24rpx;
    }
    .input {
      text-align: right;
      padding: 0 20rpx;
    }
    .input2 {
      text-align: right;
      padding: 20rpx;
    }
  }
}
.comfirm {
  width: 600rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin: 20rpx auto;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 26rpx;
  background-color: #446dfc;
}
</style>