<template>
  <div>
    <div class="bg-in">
      <div>
        <!-- <span class="font">仓库: {{ orderOutboundInfo.warehouse_name }}</span>
        <span style="margin-left: 50px" class="font">
          出库日期:&nbsp;
          <el-date-picker style="width: 200px" v-model="orderOutboundInfo.out_time" value-format="timestamp"
                          type="datetime" :clearable="false" :editable="false" :disabled="$route.name === 'orderOutboundDetail'" />
        </span>
        <span style="margin-left: 50px" class="font" v-if="id">提货人:&nbsp;
          {{ orderOutboundInfo.warehouse_consignee_name ? orderOutboundInfo.warehouse_consignee_name : '无' }}
        </span>
        <span style="margin-left: 50px" class="font" v-if="!id">提货人:&nbsp;
          <el-select v-model="orderOutboundInfo.warehouse_consignee_id">
            <el-option v-for="item in adminList" :key="item.id" :label="item.real_name" :value="item.id" />
          </el-select>
        </span> -->
        <el-form
          :model="warehouseOutForms"
          ref="warehouseOutForms"
          label-width="120px"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="出库单号:" prop="name">
                <el-select v-model="warehouseOutForms.sn">
                  <!-- <el-option  /> -->
                </el-select>
                <!-- {{ warehouseOutForms.sn }} -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单编号:" prop="sn">
                <el-select v-model="warehouseOutForms.order_sn_list">
                  <!-- <el-option  /> -->
                </el-select>
                <!-- <span v-if="warehouseOutForms.order_sn_list">{{ formatFilter(warehouseOutForms.order_sn_list) }}</span> -->
              </el-form-item></el-col
            >
            <el-col :span="12">
              <el-form-item label="配送方式:" prop="category_id">
                <el-select>
                  <!-- <el-option  /> -->
                </el-select>
                <!-- <el-radio v-model="warehouseOutForms.delivery_type" :label="'express'" :disabled="true">物流配送</el-radio>
            <el-radio v-model="warehouseOutForms.delivery_type" :label="'self_pick'" :disabled="true">自提</el-radio> -->
              </el-form-item></el-col
            >
            <el-col :span="12">
              <el-form-item label="配送仓库:" prop="freight_price">
                <el-select>
                  <!-- <el-option  /> -->
                </el-select>
              </el-form-item></el-col
            >
            <el-col :span="12">
              <el-form-item label="物流公司:" prop="logistics_company_id">
                <el-select v-model="warehouseOutForms.logistics_company_id">
                  <!-- <el-option  /> -->
                </el-select>
              </el-form-item></el-col
            >
            <el-col :span="12">
              <el-form-item label="配送地址" prop="address">
                <el-input
                  v-model="warehouseOutForms.address"
                  :minlength="1"
                  :maxlength="20"
                  clearable
                  placeholder="请输入提货人"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <el-row  :gutter="20">
              <el-col :span="8" :offset="6">
              <el-form-item label="物流单号:" prop="tracking_number">
                <el-input
                  v-model="tracking_number"
                  :minlength="1"
                  :maxlength="20"
                  clearable
                  placeholder="请输入物流单号"
                ></el-input>
                <el-button>自动获取单号</el-button>
                </el-form-item
            ></el-col>
          </el-row>

        </el-form>
        <!-- <div style="display: flex;">
         <span>物流单号:</span> <el-input v-model="tracking_number"  :minlength="1" :maxlength="20" clearable
            placeholder="请输入物流单号"></el-input>
        </div> -->
      </div>

      <el-divider></el-divider>
      <!-- <div class="order-item" v-for="order in orderOutboundInfo.order_list">
        <div><span class="font">订单编号:</span>{{ order.order_sn }}</div>

        <div v-for="orderItem in order.order_item_list">
          <div class="flex">
            <div>商品名称: {{ orderItem.product_name }}</div>
            <div>商品编号: {{ orderItem.product_sn }}</div>
            <div>规格型号: {{ orderItem.product_specification }}</div>
            <div>购买数量: {{ orderItem.num }}</div>
            <div>
              <el-button
                class="button"
                size="mini"
                type="primary"
                @click="handleSelectWarehouseEntryBatch(orderItem)"
                :disabled="$route.name === 'orderOutboundDetail'"
                >选择库存</el-button
              >
            </div>
          </div>

          <el-table
            :data="orderItem.batch_list"
            border
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column label="入库单号">
              <template slot-scope="scope">
                {{ scope.row.warehouse_entry_sn }}
              </template>
            </el-table-column>
            <el-table-column label="批次号">
              <template slot-scope="scope">
                {{ scope.row.batch_sn }}
              </template>
            </el-table-column>
            <el-table-column label="库存数量">
              <template slot-scope="scope">
                {{ scope.row.remain_num }}
              </template>
            </el-table-column>
            <el-table-column label="出库数量">
              <template slot-scope="scope">
                <el-input
                  :maxlength="22"
                  v-model="scope.row.out_num"
                  :disabled="$route.name === 'orderOutboundDetail'"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-card v-if="orderOutboundInfo.status === 'SHIP'">
        <el-row :gutter="0">
          <el-col :span="4">配送方式</el-col>
          <el-col :span="8">{{
            orderOutboundInfo.delivery_type === "express" ? "物流配送" : "自提"
          }}</el-col>
          <el-col :span="4">物流费用</el-col>
          <el-col :span="8">{{ orderOutboundInfo.freight_price }}</el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="4">提货人</el-col>
          <el-col :span="8">{{ orderOutboundInfo.consignee }}</el-col>
          <span v-if="orderOutboundInfo.delivery_type !== 'express'">
            <el-col :span="4">自提点</el-col>
            <el-col :span="8">{{ orderOutboundInfo.store_name }}</el-col>
          </span>
          <span v-else>
            <el-col :span="4">物流公司</el-col>
            <el-col :span="8">{{
              orderOutboundInfo.logistics_company_name
            }}</el-col>
          </span>
        </el-row>
        <el-row
          :gutter="0"
          v-if="orderOutboundInfo.delivery_type === 'express'"
        >
          <el-col :span="4">物流单号</el-col>
          <el-col :span="8">{{ orderOutboundInfo.tracking_number }}</el-col>
        </el-row>
      </el-card> -->
      <el-form
        :model="warehouseOutForms"
        ref="warehouseOutForms"
        label-width="120px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="出库单号:" prop="name">
              <el-select v-model="warehouseOutForms.sn">
                <!-- <el-option  /> -->
              </el-select>
              <!-- {{ warehouseOutForms.sn }} -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单编号:" prop="sn">
              <el-select v-model="warehouseOutForms.order_sn_list">
                <!-- <el-option  /> -->
              </el-select>
              <!-- <span v-if="warehouseOutForms.order_sn_list">{{ formatFilter(warehouseOutForms.order_sn_list) }}</span> -->
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="配送方式:" prop="category_id">
              <el-select>
                <!-- <el-option  /> -->
              </el-select>
              <!-- <el-radio v-model="warehouseOutForms.delivery_type" :label="'express'" :disabled="true">物流配送</el-radio>
            <el-radio v-model="warehouseOutForms.delivery_type" :label="'self_pick'" :disabled="true">自提</el-radio> -->
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="配送仓库:" prop="freight_price">
              <el-select>
                <!-- <el-option  /> -->
              </el-select>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item label="物流公司:" prop="logistics_company_id">
              <el-select v-model="warehouseOutForms.logistics_company_id">
                <!-- <el-option  /> -->
              </el-select>
            </el-form-item></el-col
          >
          <el-col :span="8" >
            <el-form-item label="配送地址" prop="address">
              <el-input
                v-model="warehouseOutForms.address"
                :minlength="1"
                :maxlength="20"
                clearable
                placeholder="请输入提货人"
              ></el-input>
              </el-form-item
          ></el-col>
        </el-row>
          <el-row  :gutter="20">
              <el-col :span="8" :offset="6">
              <el-form-item label="物流单号:" prop="tracking_number">
                <el-input
                  v-model="tracking_number"
                  :minlength="1"
                  :maxlength="20"
                  clearable
                  placeholder="请输入物流单号"
                ></el-input>
                <el-button>自动获取单号</el-button>
                </el-form-item
            ></el-col>
          </el-row>
      </el-form>
      <div class="footer">
        <el-button
          type="primary"

          v-if="$route.name === 'orderOutboundDetail'"
          >
          <!-- @click="roBack()" -->
          获取全部单号
        </el-button>
        <el-button
          type="primary"
          @click="saveErpWarehouseOut"
          v-if="$route.name === 'orderOutboundDetail'"
          >发货
        </el-button>
        <el-button
          type="primary"
          @click="roBack2()"
          v-if="$route.name === 'orderOutboundDetail'"
          >返回
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import * as API_BasicSetting from "@/api/basicSetting";
import * as API_order from "@/api/order";
import * as API_Setting from "@/api/setting";
import * as API_Auth from "@/api/auth";
import { Foundation } from "~/ui-utils";
import { mapGetters } from "vuex";

export default {
  name: "orderOutbound",
  data() {
    return {
      deptList: [],
      orderIds: "",
      orderOutboundInfo: {
        warehouse_consignee_id: "",
      },
      id: "",
      adminList: [],
      warehouseOutForms: {},
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(newVal) {
        if (this.$route.name === "orderOutboundDetail") {
          this.id = this.$route.params.id;
          this.GET_WarehouseOutDetail();
        } else {
          this.orderIds = this.$route.params.orderIds;
          this.GET_WarehouseOutPreview();
        }
      },
    },
  },
  computed: {
    ...mapGetters(["user"]),
  },
  mounted() {
    this.GET_AdministratorList();
  },
  methods: {
    /** 获取人员列表 */
    GET_AdministratorList() {
      API_Auth.getAdministratorList({
        page_no: 1,
        page_size: 9999,
        user_state: 0,
      }).then((response) => {
        this.adminList = response.data;
      });
    },
    saveErpWarehouseOut() {
      API_order.addErpWarehouseOut({
        order_list: this.orderOutboundInfo.order_list,
        warehouse_consignee_id: this.orderOutboundInfo.warehouse_consignee_id,
        out_time: this.orderOutboundInfo.out_time / 1000,
      }).then((response) => {
        this.$message.success("出库成功！");
        const { callback } = this.$route.params;
        if (typeof callback === "function") callback();
        this.$store.dispatch("delCurrentViews", {
          view: this.$route,
          $router: this.$router,
        });
        this.$router.push({ name: "order" });
      });
    },
    // 选择批次
    async handleSelectWarehouseEntryBatch(items) {
      const goodsData = await this.$EnwarehouseEntryBatch({
        goodsApi: "admin/erp/warehouseEntryBatch",
        selectedIds: items.batch_list
          ? items.batch_list.map((item) => item.id)
          : [],
        purchasePlanApiParams: {
          warehouse_id: this.orderOutboundInfo.warehouse_id,
          product_id: items.product_id,
        },
        showWarehouseSearch: false,
      });
      items.batch_list = goodsData.purchasePlans.map((item) => {
        item.batch_id = item.id;
        item.batch_sn = item.sn;
        return item;
      });
    },
    roBack2() {
      const { callback } = this.$route.params;
      if (typeof callback === "function") callback();
      this.$store.dispatch("delCurrentViews", {
        view: this.$route,
        $router: this.$router,
      });
      this.$router.push({ name: "warehouseOut" });
    },
    roBack() {
      const { callback } = this.$route.params;
      if (typeof callback === "function") callback();
      this.$store.dispatch("delCurrentViews", {
        view: this.$route,
        $router: this.$router,
      });
      this.$router.push({ name: "order" });
    },
    /** 调拨单商品明细API*/
    GET_WarehouseOutDetail() {
      API_order.getWarehouseOutInfo(this.id).then((response) => {
        this.orderOutboundInfo = response;
        this.orderOutboundInfo.out_time = response.out_time * 1000;
      });
    },
    /** 出库前预览 */
    GET_WarehouseOutPreview() {
      API_order.getWarehouseOutPreview({ order_id_list: this.orderIds }).then(
        (response) => {
          this.dept_id = response.dept_id;
          this.orderOutboundInfo = response;
          this.orderOutboundInfo.out_time = new Date().getTime();
          this.$set(
            this.orderOutboundInfo,
            "warehouse_consignee_id",
            this.user.uid
          );
        }
      );
    },
  },
};
</script>
<style type="text/scss" lang="scss" scoped>
/deep/.el-card {
  margin-top: 30px;
}

.el-row {
  // border-bottom: 1px solid #ebeef5;
  position: relative;
}

.el-col {
  padding: 10px;
  position: relative;

  &:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    // width: 1px;
    height: 100%;
    background-color: #ebeef5;
  }
}

/deep/ .el-card__body {
  margin: 10px;
  padding: 0;
  border: 1px solid #ebeef5;
  border-bottom: 0;
  font-size: 12px;
}

.bg-in {
  background-color: #fff;
  margin: 10px;
  padding: 55px;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  div {
    flex: 1;
    color: #909399;
    font-size: 15px;
  }
}

.font {
  color: #606266;
  padding: 0 12px 0 0;
}

.order-item {
  margin-top: 30px;
}

.footer {
  width: 100%;
  padding: 10px;
  bottom: 0px;
  text-align: center;
  z-index: 999;
  margin-top: 30px;
}
/deep/ .el-form-item__content{
  display: flex;
}
</style>

