<template>
  <view class="details-xiangqing">
    <view class="details-xiangqing-top">
      <view
        class="details-xiangqing-top-let"
        v-if="detail.user && detail.user.avatar"
      >
        <!-- TODO:头像 -->
        <image :src="detail.user.avatar" mode="widthFix"></image>
      </view>
      <view class="details-xiangqing-top-in">
        {{ detail.user && detail.user.nickname }}
      </view>
      <view class="details-xiangqing-top-rigt">
        <!-- <uni-icons type="right" size="26" color="#999999" class="arrow_right_log"></uni-icons> -->
      </view>
    </view>
    <view class="details-xiangqing-niri">
      <view
        class="order-list-yi-in-neibu"
        v-for="(items, index) in detail.customProductInfo"
        :key="index"
      >
        <view class="order-list-yi-in-neibu-left">
          <view class="order-list-yi-in-neibu-left-img" v-if="items.cart_info">
            <image
              v-if="items.cart_info.product.image"
              :src="items.cart_info.product.image"
              mode="widthFix"
            ></image>
          </view>
          <view class="order-list-yi-in-neibu-left-url">
            <view
              class="order-list-yi-in-neibu-left-url-top"
              v-if="items.cart_info"
            >
              {{ items.cart_info.product.store_name }}
            </view>
          </view>
        </view>
        <view class="order-list-yi-in-neibu-right">
          <view class="order-list-yi-in-neibu-right-im">
            ¥{{ items.cart_info.productAttr.price || "0.00" }}
          </view>
          <view class="order-list-yi-in-neibu-right-in">
            共 {{ items.product_num || 0 }} 件
          </view>
        </view>
      </view>

      <view v-if="detail.status == '0'" class="btn-lixt">
        <view class="btn-cls" @click="sendGoods"> 立即发货 </view>
      </view>
      <view class="details-xiangqing-shujussss">
        <view class="details-xiangqing-shujussss-yis">
          <view class=""> 商品总额 </view>
          <view class=""> +¥{{ detail.total_price || "0.00" }} </view>
        </view>
        <view class="details-xiangqing-shujussss-yis">
          <view class=""> 优惠金额 </view>
          <view class=""> -¥{{ detail.coupon_price || "0.00" }} </view>
        </view>
        <view class="details-xiangqing-shujussss-yis">
          <view class=""> 订单编号 </view>
          <view class="" @click="handleCopy(detail.order_sn)">
            {{ detail.order_sn }} | 复制
          </view>
        </view>
        <view class="details-xiangqing-shujussss-yis">
          <view class=""> 下单时间 </view>
          <view class="">
            {{ detail.create_time }}
          </view>
        </view>
        <view class="details-xiangqing-shujussss-yis">
          <view class=""> 支付方式 </view>
          <view class="">
            {{ formatData(detail, "pay_type") }}
          </view>
        </view>
      </view>
    </view>
    <uni-popup
      ref="popup"
      type="center"
      :animation="true"
      :is-mask-click="false"
    >
      <view class="popup_data">
        <view class="popup_data__headers">
          <view class="popup_data__headers--title"></view>
          <uni-icons
            type="closeempty"
            class="custom_icons"
            size="30"
            @click="handleClose"
          ></uni-icons>
        </view>
        <view class="popup_data__content">
          <fillLogisticsInfoVue
            class="custom_class"
            :ruleOptions="ruleOptions"
            @changeHandle="changeHandle"
          />
        </view>
        <button type="primary" class="send-goods" @click="handleOpen">发货</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
//订单详情 卡片详细信息
import { copy } from "@/utils/index.js";
import { orderDeliveryApi, orderDeliveryRuleApi } from "@/commit/order.js";
import { getUserPayType } from "../../../commodity/orderUtil.js";
import fillLogisticsInfoVue from "../../../commodity/components/fillLogisticsInfo.vue";
export default {
  components: {
    fillLogisticsInfoVue,
  },
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
     ruleOptions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      orderDeliveryParam: {},
    };
  },

  methods: {
 
    //填写物流信息
    changeHandle(val) {
      // console.log("changeHandle",val)
      this.orderDeliveryParam = val;
    },
    handleCopy(val) {
      copy(val);
    },
    formatData(val, type = "pay_type") {
      if (type == "pay_type") {
        // console.log(val["pay_type"], "val");
        return getUserPayType(val["paid"], val["pay_type"]);
      } else if (["total_price", "coupon_price", "price"].includes(type)) {
        return val[type] || "0.00";
      } else {
        return val[type] || "";
      }
    },
    async handleOpen() {
      // console.log("changeHandle",this.orderDeliveryParam)
      if (!this.orderDeliveryParam.delivery_id) {
        uni.showToast({
          title: "请填写快递单号",
          icon: "none",
        });
        return;
      }
      if (!this.orderDeliveryParam.delivery_name) {
        uni.showToast({
          title: "请选择物流公司",
          icon: "none",
        });
        return;
      }
      // console.log("changeHandle",this.orderDeliveryParam)
      // this.$refs.refsPackage.open();
      uni.showLoading({
        title: "正在发货中...",
        mask: true,
      });
      const _this = this;
      try {
        const res = await orderDeliveryApi(
          this.detail.order_id,
          this.orderDeliveryParam
        );
        if (res.data.status == 200) {
          uni.showToast({
            title: "发货成功",
            icon: "none",
          });
          _this.$emit("onSendGoodsHandle", this.detail);
          _this. handleClose()
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
        uni.hideToast();
      }
    },
    sendGoods() {
      this.open();
    },
    open(type = "bottom") {
      this.$refs.popup.open(type);
    },
    handleClose() {
      this.close();
    },
    close() {
      this.orderDeliveryParam = {}
      this.$refs.popup.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.btn-lixt {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.btn-cls {
  margin-top: 26rpx;
  width: 142rpx;
  height: 58rpx;
  border-radius: 30rpx;
  border: 1rpx solid #999999;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
  text-align: center;
  line-height: 58rpx;
}
.details-xiangqing {
  // width: 686rpx;
  min-height: 719rpx;
  background: #ffffff;
  border-radius: 16px;
  padding: 0 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .details-xiangqing-top {
    width: 100%;
    // height: 90rpx;
    padding: 32rpx 0 32rpx 0;
    border-bottom: 1rpx solid #e5e5e5;
    display: flex;
    align-items: center;
    color: #333333;

    .details-xiangqing-top-let {
      width: 32rpx;
      height: 32rpx;
      font-size: 11rpx;
      font-weight: 400;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .details-xiangqing-top-in {
      width: 364rpx;
      font-size: 28rpx;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 6rpx;
    }

    .details-xiangqing-top-rigt {
      width: 36rpx;
      height: 36rpx;
      margin-left: 8rpx;
      .arrow_right_log {
      }
    }
  }

  .details-xiangqing-niri {
    // width: 634rpx;
    // height: 548rpx;
    width: 100%;
    margin: 26rpx 0 50rpx 0;
    display: flex;
    flex-direction: column;

    // background-color: orangered;
    .order-list-yi-in-neibu {
      // width: 634rpx;
      height: 158rpx;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      // background-color: aqua;
      margin: 10rpx 0 10rpx 0;

      .order-list-yi-in-neibu-left {
        // width: 474rpx;
        height: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        // gap:20rpx;
        .order-list-yi-in-neibu-left-img {
          width: 158rpx;
          height: 158rpx;
          overflow: hidden;
          flex-shrink: 0;
          image {
            width: 100%;
            height: 100%;
          }
        }

        .order-list-yi-in-neibu-left-url {
          // width: 290rpx;
          display: flex;
          padding: 0 20rpx;

          .order-list-yi-in-neibu-left-url-top {
            width: 100%;
            font-weight: 400;
            color: #333333;
            font-size: 28rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            justify-content: space-between;
          }

          .order-list-yi-in-neibu-left-url-top-bot {
            width: 100%;
            font-size: 24rpx;
            font-weight: 400;
            color: #666666;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .order-list-yi-in-neibu-right {
        height: 73rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        flex-shrink: 0;
        .order-list-yi-in-neibu-right-im {
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;
        }

        .order-list-yi-in-neibu-right-in {
          font-size: 24rpx;
          font-weight: 400;
          color: #666666;
        }
      }
    }

    .details-xiangqing-shujussss {
      // width: 634rpx;
      height: 340rpx;
      margin-top: 50rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .details-xiangqing-shujussss-yis {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
.popup_data {
  padding: 26rpx 30rpx;
  min-height: 700rpx;
  max-height: 750rpx;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(180deg, #e5edff 0%, #ffffff 100%);
  border-radius: 24rpx 24rpx 0 0;
  &__headers {
    // height: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #e5e5e5;
    padding-bottom: 15rpx;
    &--title {
      flex: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      justify-content: space-between;
      padding-right: 60rpx;
      font-size: 32rpx;
      font-weight: 600;
    }
    .custom_icons {
      flex-shrink: 0;
    }
  }
  &__content {
    max-height: 620rpx;
    overflow-y: auto;
  }
}
.send-goods {
  height: 78rpx;
  // margin: 0 32rpx;
  font-weight: 400;
  font-size: 30rpx;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 26rpx;
}
</style>
