<template>
  <div class="startPacking">
    <el-card>
      <el-row class="content-area">

        <!-- 左侧 -->
        <el-col :span="6"
                class="left-area">
          <el-row v-for="item in listData"
                  :key="item.id"
                  class="title-info"
                  :class="item.id === tableData.id ? 'selected' : ''">
            <div @click="partClick(item)">
              <p>{{item.title}}</p>
            </div>
            <div>
              <template v-if="item.secStatistics">
                {{getTotlContent(item.secStatistics)}}
              </template>
            </div>
          </el-row>
        </el-col>

        <!-- 右侧 -->
        <el-col :span="18"
                class="right-area">

          <!-- 操作 -->
          <el-row class="table-title">
            <div>当前装柜：{{tableData.title}}</div>
            <div>
              <template v-if="!isUnderReview">
                <el-input v-model="qrCode"
                          placeholder="请输入二维码/条码编号"
                          clearable></el-input>
                <el-button type="primary"
                           @click="handlerBatchCreate('single')">确定</el-button>
                <el-button type="primary"
                           @click="handlerClick('batchInput','批量输入')">批量输入</el-button>
                <el-button type="primary"
                           @click="handlerClick('correction','装柜纠错')">装柜纠错</el-button>
                <el-button type="primary"
                           @click="handlerClick('correctionOrder','批量装柜纠错')">批量装柜纠错</el-button>
              </template>
            </div>
          </el-row>

          <!-- 表格 -->
          <el-row class="table-content">
            <el-table :data="tableData.sectionOrderList"
                      border>
              <el-table-column label="序号"
                               type="index"
                               align="center"
                               width="50" />
              <el-table-column label="订单号"
                               align="center"
                               prop="orderNo">
                <template slot-scope="scope">
                  <a href="javascript:void(0);"
                     class="order-href"
                     @click="orderClick(scope.row)">{{ scope.row.orderNo }}</a>
                </template>
              </el-table-column>
              <el-table-column label="货物信息"
                               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>品名：{{item.prodTitleZh}}</p>
                      <p>品牌：【
                        <dict-tag :type="DICT_TYPE.PRODUCT_RECORD_ATTRIBUTE"
                                  :value="item.productRecord" />
                        】
                      </p>
                      <p>其他：{{getTotlContent(item)}}</p>
                    </div>
                  </section>
                </template>
              </el-table-column>
              <el-table-column label="计划箱数"
                               align="center"
                               prop="num">
                <template slot-scope="scope">
                  {{getTotlContent(scope.row,['num'])}}
                </template>
              </el-table-column>
              <el-table-column label="实装箱数"
                               align="center"
                               prop="installNum">
                <template slot-scope="scope">
                  {{ scope.row.installNum }}箱
                </template>
              </el-table-column>
              <el-table-column label="体积"
                               align="center"
                               prop="volume">
                <template slot-scope="scope">
                  {{getTotlContent(scope.row,['volume'])}}
                </template>
              </el-table-column>
              <el-table-column label="重量"
                               align="center"
                               prop="weight">
                <template slot-scope="scope">
                  {{getTotlContent(scope.row,['weight'])}}
                </template>
              </el-table-column>
              <el-table-column label="操作"
                               align="center"
                               class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button type="text"
                             size="small"
                             @click="moveOut(scope.row)"
                             v-if="!isUnderReview && scope.row.installNum === 0">移出</el-button>
                  <!-- <el-button type="text" size="small" v-if="isShowSplitOrder(scope.row)" @click="handlerSplitOrder(scope.row, 'splitOrder','拆单')">拆单</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </el-row>

        </el-col>
      </el-row>
    </el-card>

    <!-- 统计 -->
    <el-row>
      <el-col :span="6"
              class="totle-info">
        <div class="count-info">
          <p>总计：{{getSumData}}</p>
        </div>
        <div>
          <p>容量：</p>
          <p>{{calcCapacity}}</p>
        </div>
        <div>已装 无返回 箱</div>
      </el-col>
    </el-row>

    <!-- 操作 -->
    <el-row class="button-area">
      <el-button type="primary"
                 @click="handlerClick('supplementOrder','补单')"
                 v-if="!isUnderReview">补单</el-button>
      <el-button type="primary"
                 v-if="!isUnderReview"
                 @click="applyCloseCabinet">申请封柜</el-button>
      <el-button type="primary"
                 @click="handlerClick('modifyCabinet','修改柜信息')"
                 v-if="!isUnderReview">修改柜信息</el-button>
      <el-button type="primary"
                 v-if="isUnderReview">封柜审核中</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="已装"
                           align="center"
                           prop="loadTag" />
          <el-table-column label="未装"
                           align="center"
                           prop="unloadTag" />
        </el-table>
      </template>
      <!-- 补单 -->
      <supplementOrder v-if="dialogConfig.type === 'supplementOrder' && dialogConfig.dialogVisible"
                       v-bind="$attrs"
                       :shipmentObj="shipmentObj"
                       @supplementFinish="supplementFinish" />
      <!-- 修改柜信息 -->
      <template v-if="dialogConfig.type === 'modifyCabinet' && dialogConfig.dialogVisible">
        <el-form ref="modifyForm"
                 :rules="rules"
                 :model="modifyCabinetObj"
                 label-width="80px">
          <el-form-item label="起运仓库"
                        prop="startWarehouseId">
            <el-select v-model="modifyCabinetObj.startWarehouseId"
                       placeholder="请选择仓库"
                       filterable>
              <el-option v-for="warehouse in $attrs.warehouseList"
                         :key="warehouse.id"
                         :label="warehouse.titleZh"
                         :value="warehouse.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="预计时间">{{preinstallDate}}</el-form-item>
          <el-form-item label="选择柜型"
                        prop="cabinetId">
            <el-select v-model="modifyCabinetObj.cabinetId"
                       placeholder="请选择柜型">
              <el-option v-for="item in cabinetList"
                         :label="item.name"
                         :value="item.id"
                         :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="柜号">
            <el-input v-model="modifyCabinetObj.cubNo"
                      placeholder="请输入柜号"
                      clearable />
          </el-form-item>
        </el-form>
        <el-row class="operate-button">
          <el-button type="primary"
                     @click="onSubmit('modifyForm')">下一步</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-row>
      </template>
      <!-- 装柜纠错 -->
      <template v-if="dialogConfig.type === 'correction' && dialogConfig.dialogVisible">
        <el-form ref="correctionForm"
                 :rules="rules"
                 :model="correctionObj"
                 label-position="top">
          <el-form-item label="装柜纠错（二维码/条形码编号）"
                        prop="qrCode">
            <el-input v-model="correctionObj.qrCode"
                      placeholder="请输入二维码/条形码编号"
                      clearable />
          </el-form-item>
        </el-form>
        <el-row class="operate-button">
          <el-button type="primary"
                     @click="onSubmit('correctionForm')">提交</el-button>
          <el-button @click="closeDialog">取消</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="装柜纠错（订单号）"
                        prop="orderNo">
            <el-input type="textarea"
                      :rows="3"
                      v-model="orderObj.orderNo"
                      placeholder="请输入，多个以逗号分隔"
                      clearable />
          </el-form-item>
        </el-form>
        <el-row class="operate-button">
          <el-button type="primary"
                     @click="onSubmit('orderForm')">提交</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-row>
      </template>
      <!-- 装柜批量输入 -->
      <template v-if="dialogConfig.type === 'batchInput' && dialogConfig.dialogVisible">
        <el-form ref="batchForm"
                 :rules="rules"
                 :model="batchObj"
                 label-position="top">
          <el-form-item label=""
                        prop="qrCode">
            <el-input type="textarea"
                      :rows="3"
                      v-model="batchObj.qrCode"
                      placeholder="请输入，多个以逗号分隔"
                      clearable />
          </el-form-item>
        </el-form>
        <el-row class="operate-button">
          <el-button type="primary"
                     @click="onSubmit('batchForm')">提交</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </el-row>
      </template>
      <!-- 拆单 -->
      <splitOrder v-if="dialogConfig.type === 'splitOrder' && dialogConfig.dialogVisible"
                  :currRow="currRow"
                  @closeDialog="closeDialog" />
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
import supplementOrder from "./supplementOrder.vue";
import { getCabinetPage } from "@/api/ecw/cabinet";
import {
  loadSecGoodsList,
  orderTagList,
  singleCreate,
  batchCreate,
  singleDelete,
  batchDelete,
  remove,
  boxUpdate,
  approvalCreate,
} from "@/api/ecw/boxSea";
import {
  getTotlContent,
  serviceMsg,
  getCapacity,
  sumStatistics,
} from "../../utils";
import splitOrder from "./splitOrder.vue";

/**
 * 开始装柜
 */
export default {
  name: "startPacking",
  inheritAttrs: false,
  components: {
    supplementOrder,
    splitOrder,
  },
  props: {
    shipmentObj: Object,
  },
  data() {
    return {
      // 表格数据
      listData: [],
      // 表格数据
      tableData: {},
      // 统计数据
      sumData: {
        count: { num: 0, volume: 0, weight: 0 },
      },
      // 弹窗配置
      dialogConfig: {
        title: "",
        dialogVisible: false,
        width: "30%",
        type: "",
        fullscreen: false,
      },
      // 已装/未装
      orderList: [],
      // 柜型
      cabinetList: [],
      // 二维码/条码编号
      qrCode: "",
      // 批量输入
      batchObj: {},
      // 批量纠错（订单号）
      orderObj: {},
      // 纠错
      correctionObj: {},
      // 修改柜信息
      modifyCabinetObj: {},
      // 修改柜信息校验
      rules: {
        startWarehouseId: [
          { required: true, message: "必填", trigger: "change" },
        ],
        cabinetId: [{ required: true, message: "必填", trigger: "change" }],
        qrCode: [{ required: true, message: "必填", trigger: "change" }],
        orderNo: [{ required: true, message: "必填", trigger: "change" }],
      },
      // 当前行
      currRow: {},
    };
  },
  created() {
    this.getLoadSecGoodsList();
    // 柜型
    getCabinetPage(null).then((response) => {
      this.cabinetList = response.data.list;
    });
  },
  methods: {
    getTotlContent,
    /* 装柜部分列表 */
    getLoadSecGoodsList() {
      loadSecGoodsList({ shipmentId: this.shipmentObj.id }).then((res) => {
        const { data = [] } = res;
        this.listData = data.map((item, index) => {
          return {
            ...item,
            title: `第${++index}部分`,
          };
        });
        if (this.listData.length) {
          this.tableData = this.listData[0];
        }
      });
    },
    /** 点击事件统一入口 */
    handlerClick(type, title) {
      this.shwoDialog({ type, title });
    },
    /* 拆单 */
    handlerSplitOrder(row, type, title) {
      this.currRow = row;
      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 = {};
          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 = {};
          break;
        case "splitOrder":
          this.$set(this.dialogConfig, "fullscreen", true);
          break;
      }
      this.$set(this.dialogConfig, "dialogVisible", true);
    },
    /** 关闭弹窗 */
    closeDialog() {
      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("请输入二维码/条码编号");
          return;
        }
        params.orderNumCode = this.qrCode;
        singleCreate(params).then((res) => {
          serviceMsg(res, this).then(() => {
            this.getLoadSecGoodsList();
          });
        });
      } else {
        params.orderNo = this.batchObj.qrCode;
        batchCreate(params).then((res) => {
          serviceMsg(res, this).then(() => {
            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.getLoadSecGoodsList();
          });
        });
      } else {
        batchDelete(params).then((res) => {
          serviceMsg(res, this).then(() => {
            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();
        });
      });
    },
    /* 修改柜信息 */
    modifyBoxUpdate() {
      let params = {
        shipmentId: this.shipmentObj.id,
        ...this.modifyCabinetObj,
      };
      boxUpdate(params).then((res) => {
        serviceMsg(res, this);
        this.closeDialog();
      });
    },
    /* 补单完成 */
    supplementFinish() {
      this.closeDialog();
      this.getLoadSecGoodsList();
    },
    /* 申请封柜 */
    applyCloseCabinet() {
      approvalCreate({
        shipmentId: this.shipmentObj.id,
        approvalStatus: 0,
        approvalType: 2, // 封柜
      }).then((res) => {
        serviceMsg(res, this);
      });
    },
    /* 是否显示拆单 */
    isShowSplitOrder(row) {
      if (row.num > row.installNum) {
        return true;
      }
      return false;
    },
  },
  watch: {
    listData(val) {
      const count = sumStatistics(val);
      this.$set(this.sumData, "count", count);
    },
  },
  computed: {
    /* 是否审核中 */
    isUnderReview() {
      const { currNode } = this.$attrs;
      return this.shipmentObj[currNode.keyName] === 44 ? true : false;
    },
    /* 预计时间 */
    preinstallDate() {
      if (this.shipmentObj.yzDate) {
        return dayjs(this.shipmentObj.yzDate).format("YYYY-MM-DD HH:mm:ss");
      }
      return null;
    },
    /* 容量 */
    calcCapacity() {
      const { cabinetRespVO } = this.shipmentObj;
      return getCapacity(cabinetRespVO);
    },
    /* 总计 */
    getSumData() {
      return sumStatistics(this.listData);
    },
  },
};
</script>

<style lang="scss" scoped>
.startPacking {
  display: flex;
  flex-direction: column;
  p {
    margin: 0;
  }
  .content-area {
    display: flex;
    .left-area {
      border-right: 3px solid #e6ebf5;
      padding-right: 10px;
      .title-info {
        height: 80px;

        &.selected {
          > div:first-child {
            background-color: #4f9cdd;
            color: #fff;
          }
        }

        > div:first-child {
          font-size: 16px;
          background-color: #f2f2f2;
          line-height: 30px;
          text-align: center;
          cursor: pointer;
        }
        > :last-child {
          display: flex;
          > p {
            margin-right: 10px;
            color: #4f9cdd;
          }
        }
      }
    }
    .right-area {
      padding-left: 10px;
      .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;
      }
    }
  }
  .button-area {
    text-align: center;
  }
}
</style>
