<template>
  <div class="startPacking">
    <el-card>
          <el-row class="table-title">
            <div><dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="shipmentObj.transportType" />：{{importCityName(shipmentObj.startWarehouseId)}}》{{importCityName(shipmentObj.destWarehouseId)}}【{{getShipChannelName(shipmentObj.channelRespVO.channelId)}}】</div>
            <div>
              <template>
                <el-input style="width: 270px;" v-model="qrCode" :placeholder="$t('请输入二维码/条码编号/合包箱号标签')" clearable></el-input>
                <el-button type="primary" @click="handlerBatchCreate('single')">{{$t('确定')}}</el-button>
                <el-button type="primary" @click="handlerClick('batchInput',$t('批量输入'))">{{$t('批量输入')}}</el-button>
                <el-button type="primary" @click="handlerClick('correction',$t('出仓纠错'))">{{$t('出仓纠错')}}</el-button>
                <el-button type="primary" @click="handlerClick('correctionOrder',$t('批量出仓纠错'))">{{$t('批量出仓纠错')}}</el-button>
              </template>
            </div>
          </el-row>
      

          <!-- 表格 -->
          <el-row class="table-content">
            <el-table :data="tableData.sectionOrderList" border max-height="500px">
              <el-table-column :label="$t('序号')" align="center" width="50" prop="tidanNum" />
              <el-table-column :label="$t('订单号')" align="center" prop="orderNo">
                <template slot-scope="scope">
                  <router-link :to="{path: '/order/detail',query: {orderId: scope.row.orderId}}" class="link-type">
                      <span>{{ scope.row.orderNo }}</span>
                    </router-link>

                </template>
              </el-table-column>
              <el-table-column :label="$t('货物信息')" align="center" prop="goodsList">
                <template slot-scope="scope">
                  <section class="table-goodList">
                    <div v-for="(item, index) in scope.row.goodsList" :key="index" class="goodList-div">
                      <p>{{$t('品名')}}：{{$l(item,'prodTitle')}}</p>
                      <p>{{$t('品牌')}}：【<template v-if="item.brandName">{{item.brandName}}</template>
                        <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="item.feeType" />{{ $t('】') }}</p>
                      <p>{{$t('其他')}}：{{getTotlContent(item)}}</p>
                    </div>
                  </section>
                </template>
              </el-table-column>
              <el-table-column :label="$t('报关方式')" align="center" prop="customsType">
                <template slot-scope="scope">
                  <div :class="scope.row.customsType !== 1 ? 'custom_type_red' : ''">
                    <dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="scope.row.customsType" />
                  </div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('计划箱数')" align="center" prop="num">
                <template slot-scope="scope">
                  <div>
                    <a href="javascript:void(0);" class="order-href" @click="orderClick(scope.row)">{{getTotlContent(scope.row,['num'])}}</a>
                  </div>
                  <div style="color:blue;fontWeight:bold;">
                    {{ scope.row.isExternalWarehouse === 1 ? '(' + $t('外部仓') + ')' : ''}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('出仓箱数')" align="center" prop="installNum">
                <template slot-scope="scope">
                  <div>
                    <a href="javascript:void(0);" class="order-href" @click="orderClick(scope.row)">{{ scope.row.installNum }}{{$t('箱')}}</a>
                  </div>
                  <div style="color:blue;fontWeight:bold;">
                    {{ scope.row.isExternalWarehouse === 1 ? '(' + $t('外部仓') + ')' : ''}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column :label="$t('体积')" align="center" prop="volume">
                <template slot-scope="scope">
                  {{getTotlContent(scope.row,['volume'])}}
                </template>
              </el-table-column>
              <el-table-column :label="$t('重量')" align="center" prop="weight">
                <template slot-scope="scope">
                  {{getTotlContent(scope.row,['weight'])}}
                </template>
              </el-table-column>
              <el-table-column :label="$t('合包箱号')" align="center" prop="pkgNum">
                <template slot-scope="scope">
                 {{scope.row.pkgNum}}
                </template>
              </el-table-column>
            </el-table>
          </el-row>
    </el-card>

    <!-- 统计 -->
    <el-row>
      <el-col :span="6" class="totle-info">
        <div class="count-info">
          <p>{{$t('总计')}}：{{getSumData}}</p>
        </div>
        <!-- <div>
          <p>{{$t('容量')}}：</p>
          <p>{{calcCapacity}}</p>
        </div>
        <div>{{$t('已装')}} {{getInstallNumCount}} {{$t('箱')}}</div> -->
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-button type="primary" @click="submitCheckout">{{$t('确认出仓')}}</el-button>
      <el-button @click="closeReload">{{$t('取消')}}</el-button>
    </el-row>


    <!-- 对话框 -->
    <el-dialog custom-class="shipping-dialog" :title="dialogConfig.title" :visible.sync="dialogConfig.dialogVisible" :fullscreen="dialogConfig.fullscreen" :width="dialogConfig.width" :modal-append-to-body=false append-to-body>
      <!-- 已装未装订单 -->
      <template v-if="dialogConfig.type === 'orderTable'">
        <el-table :data="orderList" height="500px" border>
          <el-table-column :label="$t('已出仓')" align="center" prop="loadTag" />
          <el-table-column :label="$t('未出仓')" align="center" prop="unloadTag" />
        </el-table>
      </template>
      <!-- 出仓纠错 -->
      <template v-if="dialogConfig.type === 'correction' && dialogConfig.dialogVisible">
        <el-form ref="correctionForm" :rules="rules" :model="correctionObj" label-position="top">
          <el-form-item :label="$t('出仓纠错（二维码/条形码编号）')" prop="qrCode">
            <el-input v-model="correctionObj.qrCode" :placeholder="$t('请输入二维码/条形码编号/合包箱号标签')" clearable />
          </el-form-item>
        </el-form>
        <el-row class="operate-button">
          <el-button type="primary" @click="onSubmit('correctionForm')">{{$t('提交')}}</el-button>
          <el-button @click="closeDialog2">{{$t('取消')}}</el-button>
        </el-row>
      </template>
      <!-- 批量出仓纠错（订单号） -->
      <template v-if="dialogConfig.type === 'correctionOrder' && dialogConfig.dialogVisible">
        <el-form ref="orderForm" :rules="rules" :model="orderObj" label-position="top">
          <el-form-item :label="$t('出仓纠错') +'（' + $t('订单号') + '）'" prop="orderNo">
            <el-input type="textarea" :rows="3" v-model="orderObj.orderNo" :placeholder="$t('请输入，多个以逗号分隔')" clearable />
          </el-form-item>
        </el-form>
        <el-row class="operate-button">
          <el-button type="primary" @click="onSubmit('orderForm')">{{$t('提交')}}</el-button>
          <el-button @click="closeDialog2">{{$t('取消')}}</el-button>
        </el-row>
      </template>
      <!-- 出仓批量输入 -->
      <template v-if="dialogConfig.type === 'batchInput' && dialogConfig.dialogVisible">
        <el-form ref="batchForm" :rules="rules" :model="batchObj">
          <el-form-item label="" prop="qrCode" class="two-element">
            <el-input v-model="batchObj.qrCode" :placeholder="$t('请输入订单号')" clearable />
            <el-button style="marginLeft:10px;" type="primary" @click="queryOrderInfo">{{$t('确定')}}</el-button>
          </el-form-item>

          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('订单号')">
                {{boxOrderInfo.orderNo}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('箱数')">
                <el-input-number v-if="boxOrderInfo.isExternalWarehouse === 1" v-model="batchObj.boxNum" :min="0" :max="boxOrderInfo.num" />
                <template v-else>
                  {{boxOrderInfo.num}}
                </template>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('方数')">
                {{getTotlContent(boxOrderInfo, ['volume'])}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('重量')">
                {{getTotlContent(boxOrderInfo, ['weight'])}}
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <el-row class="operate-button">
          <el-button type="primary" :disabled="boxOrderInfo.orderId ? false : true" @click="batchLoad">{{$t('提交')}}</el-button>
          <el-button @click="closeDialog2">{{$t('取消')}}</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { getCabinetPage } from "@/api/ecw/cabinet";
import { getbox } from "@/api/ecw/box";
import { confirmAirCheckout } from "@/api/ecw/boxAir";
import {
  loadSecGoodsList,
  orderTagList,
  singleCreate,
  batchCreate,
  singleDelete,
  batchDelete,
  remove,
  getOrderDetailByBoxNo,
  externalLoad,
} from "@/api/ecw/boxSea";
import {
  getTotlContent,
  serviceMsg,
  getCapacity,
  sumStatistics,
} from "../../utils";
import Decimal from "decimal.js";
import { getChannelList } from "@/api/ecw/channel";

/**
 * 开始出仓
 */
export default {
  name: "startPacking",
  inheritAttrs: false,
  props: {
    shipmentObj: Object,
  },
  data() {
    return {
      // 表格数据
      listData: [],
      // 表格数据
      tableData: {},
      // 弹窗配置
      dialogConfig: {
        title: "",
        dialogVisible: false,
        width: "30%",
        type: "",
        fullscreen: false,
      },
      // 已装/未装
      orderList: [],
      // 柜型
      cabinetList: [],
      // 二维码/条码编号
      qrCode: "",
      // 批量输入
      batchObj: {
        boxNum: 0,
      },
      // 批量纠错（订单号）
      orderObj: {},
      // 纠错
      correctionObj: {},
      // 修改柜信息
      modifyCabinetObj: {},
      // 修改柜信息校验
      rules: {
        startWarehouseId: [
          { required: true, message: this.$t("必填"), trigger: "change" },
        ],
        cabinetId: [
          { required: true, message: this.$t("必填"), trigger: "change" },
        ],
        qrCode: [
          { required: true, message: this.$t("必填"), trigger: "change" },
        ],
        orderNo: [
          { required: true, message: this.$t("必填"), trigger: "change" },
        ],
      },
      // 当前行
      currRow: {},
      selectedUsers: [],
      // 订单信息
      boxOrderInfo: {},
      newshipmentObj: {},
      channelList: []
    };
  },
  created() {
    this.getLoadSecGoodsList();
    // 柜型
    getCabinetPage(null).then((response) => {
      this.cabinetList = response.data.list;
    });
    // 查询渠道
    getChannelList().then((res) => (this.channelList = res.data));
    // this.getBoxInfo()
  },
  methods: {
    getTotlContent,
    getBoxInfo() {
      getbox(this.shipmentObj.id).then((res) => {
        const { data } = res;
        this.newshipmentObj = data ?? {};
      });
    },
    /* 获取城市 */
    importCityName(id) {
      var arr = this.$attrs.warehouseList.filter((item) => item.id == id);
      return arr.length > 0 ? this.$l(arr[0], "title") : this.$t("无");
    },
    /* 出仓部分列表 */
    getLoadSecGoodsList() {
      loadSecGoodsList({ shipmentId: this.shipmentObj.id }).then((res) => {
        const { data = [] } = res;
        this.listData = data.map((item, index) => {
          return {
            ...item,
            title: this.$t("第{index}部分", { index: 1 + index }),
          };
        });
        if (this.listData.length) {
          this.tableData = this.listData[0];
        }
      });
    },
    /** 点击事件统一入口 */
    handlerClick(type, title) {
      this.shwoDialog({ type, title });
    },
    /** 表格订单号点击 */
    orderClick(row) {
      orderTagList({ orderId: row.orderId }).then((res) => {
        const { data = {} } = res;
        this.orderList = [];
        // 取最长的list
        let dataLength = data.loadList.length;
        if (data.unLoadList.length > dataLength) {
          dataLength = data.unLoadList.length;
        }

        // 组装数据，用一个table组件渲染
        for (let index = 0; index < dataLength; index++) {
          this.orderList.push({
            loadTag: data.loadList[index],
            unloadTag: data.unLoadList[index],
          });
        }
      });
      this.shwoDialog({
        type: "orderTable",
        title: row.selfNo,
      });
    },
    /** 弹窗事件 */
    shwoDialog(config) {
      this.$set(this.dialogConfig, "title", config.title);
      this.$set(this.dialogConfig, "type", config.type);
      switch (config.type) {
        case "orderTable":
          this.$set(this.dialogConfig, "fullscreen", false);
          break;
        case "supplementOrder":
          this.$set(this.dialogConfig, "fullscreen", true);
          break;
        case "batchInput":
          this.$set(this.dialogConfig, "fullscreen", false);
          this.batchObj = { boxNum: 0 };
          this.boxOrderInfo = {};
          break;
        case "correction":
          this.$set(this.dialogConfig, "fullscreen", false);
          this.correctionObj = {};
          break;
        case "correctionOrder":
          this.$set(this.dialogConfig, "fullscreen", false);
          this.orderObj = {};
          break;
        case "modifyCabinet":
          this.$set(this.dialogConfig, "fullscreen", false);
          this.modifyCabinetObj = {};
          this.$set(this.modifyCabinetObj,'cabinetId',this.shipmentObj.cabinetId)
          this.$set(this.modifyCabinetObj,'cubNo',this.shipmentObj.cubNo)
          break;
      }
      this.$set(this.dialogConfig, "dialogVisible", true);
    },
    /** 关闭弹窗 */
    closeDialog2() {
      this.$set(this.dialogConfig, "dialogVisible", false);
    },
    /** 修改提交 */
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName === "batchForm") {
            this.handlerBatchCreate("batch");
          }
          if (formName === "correctionForm") {
            this.handlerBatchDelete(
              {
                orderNumCode: this.correctionObj.qrCode,
              },
              "single"
            );
          }
          if (formName === "orderForm") {
            this.handlerBatchDelete(
              { orderNo: this.orderObj.orderNo },
              "batch"
            );
          }
          if (formName === "modifyForm") {
            this.modifyBoxUpdate();
          }
        }
      });
    },
    /* 部分点击 */
    partClick(item) {
      this.tableData = item;
    },
    /* 出仓 */
    handlerBatchCreate(type) {
      let params = {
        shipmentId: this.shipmentObj.id,
        secId: this.tableData.id,
      };
      if (type === "single") {
        if (!this.qrCode) {
          this.$message.error(this.$t("请输入二维码/条码编号"));
          return;
        }
        params.orderNumCode = this.qrCode;
        singleCreate(params).then((res) => {
          serviceMsg(res, this).then(() => {
            this.qrCode = "";
            this.getLoadSecGoodsList();
          });
        });
      } else {
        params.orderNo = this.batchObj.qrCode;
        batchCreate(params).then((res) => {
          serviceMsg(res, this).then(() => {
            this.closeDialog2();
            this.getLoadSecGoodsList();
          });
        });
      }
    },
    /* 删除已出仓 */
    handlerBatchDelete(params, type) {
      params = {
        shipmentId: this.shipmentObj.id,
        secId: this.tableData.id,
        ...params,
      };

      if (type === "single") {
        singleDelete(params).then((res) => {
          serviceMsg(res, this).then(() => {
            this.closeDialog2();
            this.getLoadSecGoodsList();
          });
        });
      } else {
        batchDelete(params).then((res) => {
          serviceMsg(res, this).then(() => {
            this.closeDialog2();
            this.getLoadSecGoodsList();
          });
        });
      }
    },
    /* 移出 */
    moveOut(row) {
      let params = {
        shipmentId: this.shipmentObj.id,
        secId: this.tableData.id,
        orderId: row.orderId,
      };
      remove(params).then((res) => {
        serviceMsg(res, this).then(() => {
          this.getLoadSecGoodsList();
        });
      }).catch((res) => {
        if (res.code === 666) {
              this.$confirm("<div style='max-height:500px;overflow:auto'>"+res.msg+this.$t('是否需要一起移出?')+"</div>", this.$t("提示"), {
                dangerouslyUseHTMLString: true,
                distinguishCancelAndClose: true,
                confirmButtonText: '确定移出',
                cancelButtonText: '仅移出当前订单'
              })
                .then((_) => {
                  remove({ ...params, deleteType: 2 }).then((res) => {
                    serviceMsg(res, this).then(() => {
                      this.getLoadSecGoodsList();
                    });
                  });
                })
                .catch(action => {
                  if(action =='cancel'){
                    remove({ ...params, deleteType: 1 }).then((res) => {
                      serviceMsg(res, this).then(() => {
                        this.getLoadSecGoodsList();
                      });
                    });
                  }
                });
            }
      });
    },
    queryOrderInfo() {
      this.$refs["batchForm"].validate((valid) => {
        if (valid) {
          getOrderDetailByBoxNo({
            orderNumCode: this.batchObj.qrCode,
            shipmentId: this.shipmentObj.id,
          }).then((res) => {
            const { data } = res;
            this.boxOrderInfo = data;
            this.batchObj.boxNum = Number(data.num);
          });
        }
      });
    },
    batchLoad() {
      if (!this.boxOrderInfo.orderId) {
        this.$message.error(this.$t("请输入订单号"));
        return;
      }
      if (this.batchObj.boxNum === 0) {
        this.$message.error(this.$t("箱数不能为0"));
        return;
      }

      let params = {
        boxNum: this.boxOrderInfo.num,
        orderId: this.boxOrderInfo.orderId,
        orderNo: this.boxOrderInfo.orderNo,
        shipmentId: this.shipmentObj.id,
      };
      if (this.boxOrderInfo.isExternalWarehouse === 1) {
        params.boxNum = this.batchObj.boxNum;
      }

      externalLoad(params).then((res) => {
        serviceMsg(res, this).then(() => {
          this.closeDialog2();
          this.boxOrderInfo = {};
          this.getLoadSecGoodsList();
        });
      });
    },
    submitCheckout(){
      confirmAirCheckout({shipmentId: this.shipmentObj.id}).then((res) => {
          serviceMsg(res, this).then(() => {
            this.closeReload()
          });
        });
    },
    closeReload(){
      this.$emit('closeDialog1')
      this.$emit('reload')
    }
  },
  computed: {
    /* 容量 */
    calcCapacity() {
      const { cabinetRespVO } = this.shipmentObj;
      return getCapacity(cabinetRespVO);
    },
    /* 总计 */
    getSumData() {
      return sumStatistics(this.listData);
    },
    /* 已装总数 */
    getInstallNumCount() {
      let count = 0;
      if (Array.isArray(this.listData)) {
        this.listData.forEach((item) => {
          const { sectionOrderList = [] } = item;
          sectionOrderList.forEach((item) => {
            count = Decimal.add(count, item.installNum).toNumber();
          });
        });
      }
      return count;
    },
    /* 渠道 */
    getShipChannelName() {
      return (shippingChannelId) => {
        for (const channelItem of this.channelList) {
          if (channelItem.channelId == shippingChannelId) {
            return this.$l(channelItem, "name");
          }
        }
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.startPacking {
  display: flex;
  flex-direction: column;
  p {
    margin: 0;
  }
  .table-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  > div:first-child {
    flex: 1;
    font-size: 16px;
  }
  > div:last-child {
    display: flex;
    > .el-input {
      margin-right: 10px;
    }
  }
}
.table-content {
  .table-goodList {
    .goodList-div {
      border-bottom: 1px solid #e6ebf5;
      > p {
        text-align: left;
      }
      > p:last-child {
        > span {
          margin-right: 5px;
        }
      }
    }
    > div:last-child {
      border-bottom: none;
    }
  }

  .el-table {
    color: red;
  }
}
  
  .totle-info {
    font-size: 20px;
    margin-top: 15px;
    > div {
      display: flex;
      margin-bottom: 5px;
    }
    .count-info {
      > p > span {
        margin-right: 5px;
      }
    }
  }

  .process-area {
    margin-top: 15px;
    padding-bottom: 30px;
    .process {
      display: flex;
      flex-direction: column;
      > :first-child {
        color: #606266;
        font-weight: bolder;
        font-size: 16px;
      }
    }
  }
}
</style>