<template>
  <view class="fhpage">
    <view class="title"
      >选择发货商品<text
        style="color：#CCCED5;font-size:26rpx;margin-left:10rpx;"
        >(默认全选)</text
      >
    </view>
    <view class="goodsList">
      <u-checkbox-group>
        <u-checkbox
          shape="circle"
          v-for="(item, index) in orderData.DetailList"
          :value="item.checked"
          :key="index"
          :name="item.Id"
          @change="checkboxChange($event, item, index)"
        >
          <view class="goodsItem">
            <image
              :src="item.CoverImage"
              mode="aspectFill"
              class="image"
            ></image>
            <view class="goodsInfo">
              <view class="GoodsName">{{ item.GoodsName }}</view>
              <view class="weight"
                >规格:{{ item.SpecificationList.join(",") }}</view
              >
              <view class="price">
                <text style="color: #808080">x{{ item.Number }}</text>
                <text>￥{{ item.SmallShopsCostPrice }}</text>
              </view>
            </view>
          </view>
        </u-checkbox>
      </u-checkbox-group>
    </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 class="logisticsItem">
        <view class="itemLabel">快递公司</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">快递单号</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"/>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      fhMsg: {
        Id: 0,
        OrderId: 0,
        Type: 1,
        ExpressId: "",
        PostCode: "",
        ExpressNumber: "",
        Remark: "",
        OrderDetailIdList: [],
      },
      orderData: {},
      showType: 1,
      kdShow: false,
      ExpressList: [],
      ExpressStr: "未选择",
    };
  },
  methods: {
    getData() {
      this.requestAdmin(
        "/api/order/GetGoodsOrderInfo",
        {
          OrderId: this.fhMsg.OrderId,
        },
        (res) => {
          this.fhMsg.OrderDetailIdList = [];
          this.orderData = res.data;
          this.orderData.DetailList.forEach((e) => {
            e.checked = true;
            this.fhMsg.OrderDetailIdList.push(e.Id);
          });
          console.log(this.orderData.DetailList);
        }
      );
    },
    checkboxChange(e, item, index) {
      item.checked = !e.value;
      this.$set(this.orderData.DetailList, index, item);
      this.fhMsg.OrderDetailIdList = [];
      this.orderData.DetailList.map((x) => {
        if (x.checked) {
          this.fhMsg.OrderDetailIdList.push(x.Id);
        }
      });
    },
    radioGroupChange(e) {
      console.log("tag2", this.fhMsg.Type);
    },
    // 快递公司
    getExpressInfo() {
      this.requestAdmin("/api/MallBase/GetExpressInfo", {}, (res) => {
        if (res.resultCode == 1) {
          this.ExpressList = res.data;
          console.log("117", this.ExpressList);
        }
      });
    },
    //选择快递公司
    bindExpress(e) {
      let index = parseInt(e.detail.value);
      this.ExpressStr = this.ExpressList[index].Name;
      this.fhMsg.ExpressId = this.ExpressList[index].Id;
      console.log(133, e);
    },
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: "发货",
    });
    if (options.OrderId) {
      this.fhMsg.OrderId = options?.OrderId;
      this.getData();
    }
    this.getExpressInfo();
  },
};
</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;
    }
    .input2{
       text-align: right;
       padding: 20rpx;
    }
  }
}
</style>