<template>
  <view class="order-send-out-goods">
    <headersVue @headerJump="topgi" :header-title="headerTitle"></headersVue>
    <view class="order-send-out-goods__content">
      <shipmentGoodsCardVue :title="shipmentGoodsTitle" :items="detailData" />
      <orderDetailSendCardVue class="custom_class" :items="detailData" />
      <fillLogisticsInfoVue
        class="custom_class"
        v-if="goodsCustomType === 'sendGoods'"
        :ruleOptions="ruleOptions"
        @changeHandle="changeHandle"
      />
      <reInputItemVue
        v-if="goodsCustomType === 'pickup'"
        class="inputInfo"
      ></reInputItemVue>
      <!-- 	  <reInputItemVue
	    v-if="goodsCustomType === 'pickup'"
	    class="inputInfo"
	  ></reInputItemVue> -->
      <popupSelectItemVue
        v-if="goodsCustomType === 'deliverGoods' || detailData.delivery_type===2"
        class="inputInfo"
        defaultLabel="请选择送货人员"
        name="送货人员信息"
        title="送货人员信息"
        :selectData="selectData"
        @click-tabs="clickTabs"
      >
        <view class="upop" slot="right" @click="selectUserInfo">
          <view class="title xcv">{{ detailData.delivery_name }}{{detailData.delivery_id}}</view>
          <image src="/static/images/new_ui/arrow-right.png" mode=""></image>
        </view>
      </popupSelectItemVue>
      <!-- delivery_type===2 配送信息
      送货人姓名：{{ orderDatalist.delivery_name }}
      送货人电话：{{ orderDatalist.delivery_id }}

       -->
      <!-- //收货码 -->
      <!-- <deliverFillInfoCardVue class="inputInfo" /> -->
      <!-- 送货信息有误 -->
      <!-- <deliverCardItemVue class="inputInfo" /> -->
      <!-- <deliverCardItemVue
        class="inputInfo"
        :isBottomMessage="true"
        leftTitle="物流信息有误？"
        rightTitle="更改物流信息"
      /> -->
      <!-- // 变更送货人信息 -->
      <!-- <changeDeliveryPersonInfoVue style="margin-top: 20rpx" /> -->
      <!-- 变更物流信息  -->
      <!-- <changeLogisticsInformation style="margin-top: 20rpx" /> -->
      <view
        class="btn-box"
        v-if="['sendGoods', 'pickup', 'deliverGoods'].includes(goodsCustomType)"
      >
        <button
          type="primary"
          class="send-goods"
          v-if="goodsCustomType === 'sendGoods'"
          @click="handleOpen"
        >
          发货
        </button>
        <button
          type="primary"
          class="send-goods"
          v-else-if="goodsCustomType === 'pickup'"
          @click="
            copyHandle('请选择送货人员请选择送货人员请选择送货人员121212copy')
          "
        >
          自提
        </button>
        <button v-else type="primary" class="send-goods">提交</button>
      </view>
    </view>
    <ItemsInsidePackageVue ref="refsPackage" />
  </view>
</template>

<script>
import shipmentGoodsCardVue from "./components/shipmentGoodsCard.vue";
import orderDetailSendCardVue from "./components/orderDetailSendCard.vue";
import fillLogisticsInfoVue from "./components/fillLogisticsInfo.vue";
import headersVue from "../components/headers/headers.vue";
import reInputItemVue from "./components/reInputItem/reInputItem.vue";
import popupSelectItemVue from "./components/popupSelectItem/popupSelectItem.vue";
import { copy, toQueryString } from "@/utils/index.js";
import deliverFillInfoCardVue from "./components/changeDetailInfo/pendingReceiptGoodsModules/deliverFillInfoCard.vue";
import deliverCardItemVue from "./components/changeDetailInfo/pendingReceiptGoodsModules/deliverCardItem.vue";
import changeDeliveryPersonInfoVue from "./components/changeDetailInfo/changeDeliveryPersonInfo.vue";
import changeLogisticsInformation from "./components/changeDetailInfo/changeLogisticsInformation.vue";
import ItemsInsidePackageVue from "./components/changeDetailInfo/ItemsInsidePackage.vue";
import {
  orderDetailApi,
  orderDeliveryApi,
  orderDeliveryRuleApi,
  getOrderListProduct
} from "@/commit/order.js";
export default {
  components: {
    shipmentGoodsCardVue,
    orderDetailSendCardVue,
    fillLogisticsInfoVue,
    headersVue,
    reInputItemVue,
    popupSelectItemVue,
    //收货码
    deliverFillInfoCardVue,
    //修改物流信息 、、、、、送货信息
    deliverCardItemVue,
    // 变更送货人信息
    changeDeliveryPersonInfoVue,
    // 变更物流信息
    changeLogisticsInformation,
    //商品详情弹窗
    ItemsInsidePackageVue,
  },
  data() {
    return {
      selectData: [
        { value: 0, text: "张伟" },
        { value: 1, text: "王芳" },
        { value: 2, text: "李强" },
        { value: 3, text: "刘洋" },
        { value: 4, text: "陈静" },
        { value: 5, text: "杨勇" },
        { value: 6, text: "黄丽" },
        { value: 7, text: "周杰" },
        { value: 8, text: "徐敏" },
        { value: 9, text: "吴涛" },
        { value: 10, text: "孙莉" },
        { value: 11, text: "马强" },
        { value: 12, text: "胡月" },
        { value: 13, text: "林浩" },
        { value: 14, text: "何婷" },
      ],
      indexs: "",
      status: "",
      order_id: "", //订单ID
      headerTitle: "发货",
      shipmentGoodsTitle: "发货商品",
      goodsCustomType: "sendGoods",
      headerTitleMap: {
        deliverGoods: "送货",
        sendGoods: "发货",
        pickup: "自提",
      },
      shipmentGoodsTitleMap: {
        deliverGoods: "发货商品",
        sendGoods: "发货商品",
        pickup: "自提商品",
      },
      deliveryMan: "请选择送货人员",
      detailData: {},
      listFromData: [],
      ruleOptions:[],
      orderDeliveryParam:{},//物流
    };
  },
  async onLoad(e) {
    this.order_id = e.order_id;
    this.indexs = e.indexs;
    this.status = e.status;
    this.goodsCustomType = e.goodsCustomType;
    this.headerTitle = this.headerTitleMap[this.goodsCustomType];
    this.shipmentGoodsTitle = this.shipmentGoodsTitleMap[this.goodsCustomType];

    await this.getOrderDetailsInfo();
       if (this.goodsCustomType === "sendGoods") {
      //获取发货规则信息
      await this.getOrderDeliveryRule()
    }
  },
  methods: {
    async getOrderListSigleData(order_sn) {
       try {
         const res = await getOrderListProduct(order_sn)
         if (res.data.status == 200) {
           let detailDa = res.data.data.list[0] && res.data.data.list[0].orderProduct || [];
           this.detailData = { ...this.detailData, orderProduct: detailDa };
         }
       } catch (error) {
        
       }
    },
    async getOrderDetailsInfo() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      try {
        const res = await orderDetailApi(this.order_id);
        if (res.data.status == 200) {
          let detailDa = res.data.data || {};
          this.detailData = { ...detailDa };
          this.getOrderListSigleData(this.detailData.order_sn);
          // console.log("订单详情", this.detailData);
        }
      } catch (error) {
      } finally {
        uni.hideLoading();
      }
    },
    // 获取发货规则
    async getOrderDeliveryRule() {
      try {
        const res = await orderDeliveryRuleApi(this.order_id);
        if (res.data.status == 200) {
          let data = res.data.data.rule;
           data.forEach(item=>{
            let ruleData = item.control[0]&&item.control[0].rule[0] && item.control[0].rule[0].options || []
           this.ruleOptions = ruleData
          });
          // console.log("发货规则", this.ruleOptions);
        }
      } catch (error) {
      } finally {
      }
    },
    //填写物流信息
    changeHandle(val){
      // console.log("changeHandle",val)
      this.orderDeliveryParam = val
    },
   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.order_id, this.orderDeliveryParam);
          if(res.data.status == 200){
             uni.showToast({
              title: "发货成功",
              icon: "none",
            });
            setTimeout(() => {
              _this.topgi()
            },1000)
          }
      } catch (error) {
        
      }finally{
        uni.hideLoading();
        uni.hideToast();
      }
    },
    copyHandle(val) {
      copy(val);
    },
    topgi() {
      const url = toQueryString({
        status: this.status,
        index: this.indexs,
        // goodsCustomType:this.goodsCustomType
      });
      uni.redirectTo({
        url: `./order?${url}`,
      });
    },
    selectUserInfo() {
      console.log("选择用户信息");
      return;
      const urlParams = {
        status: this.status,
        index: this.indexs,
        goodsCustomType: this.goodsCustomType,
        order_id: this.order_id,
      };
      const url = toQueryString(urlParams);
      console.log(url);
      uni.redirectTo({
        url: `./deliveryman?${url}`,
      });
    },
    clickTabs({ selected, item, index }) {
      console.log("clickTabs", selected, item, index);
    },
  },
};
</script>
<style>
page {
  background-color: #f7f8fc;
  /* height: 100%; */
}
</style>
<style scoped lang="scss">
.order-send-out-goods {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  &__content {
    width: 100%;
    margin: 130rpx 0 180rpx;
    overflow: auto;
    .btn-box {
      width: 100%;
      position: fixed;
      background: #ffffff;
      height: 125rpx;
      bottom: 0rpx;
      padding-top: 15rpx;
      .send-goods {
        height: 78rpx;
        margin: 0 32rpx;
        font-weight: 400;
        font-size: 30rpx;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .custom_class {
    margin-top: 26rpx;
  }
}

.inputInfo {
  margin-top: 26rpx;
  padding: 0 26rpx;
}
.title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #999999;
}
.upop {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  image {
    width: 30rpx;
    height: 30rpx;
    margin-left: 5rpx;
  }
  .image-box {
    width: 40rpx;
    height: 38rpx;
  }
}
.xcv {
  flex: 1;
}
</style>
