<template>
  <div class="app-container shipping-split-order">
    <el-card>
      <div slot="header" class="card-title">拆单申请-{{orderData.orderNo||''}}</div>
      <div class="btn-header">
        <span class="card-title">原单信息</span>
      </div>
      <el-descriptions :column="4">
        <el-descriptions-item label="唛头">
          {{orderData.marks?orderData.marks:'无'}}
        </el-descriptions-item>
        <el-descriptions-item label="已实装箱数/总箱数">
          <span>{{currRow.installNum||0}}/{{orderData.costVO?orderData.costVO.totalNum:0}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="订单状态">
          {{orderData.status==99?'异常':'正常'}}
        </el-descriptions-item>
        <el-descriptions-item label="送货日期">
          {{orderData.consigneeVO?orderData.consigneeVO.deliveryDate:'无'}}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4">
        <el-descriptions-item label="运输方式">
          <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
        </el-descriptions-item>
        <el-descriptions-item label="始发地">
          {{orderData.logisticsInfoDto?orderData.logisticsInfoDto.startTitleZh:'无'}}
        </el-descriptions-item>
        <el-descriptions-item label="目的地">
          {{orderData.logisticsInfoDto?orderData.logisticsInfoDto.destTitleZh:'无'}}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4">
        <el-descriptions-item label="发货人姓名">
          {{orderData.consignorVO?orderData.consignorVO.name||'无':'无'}}
        </el-descriptions-item>
        <el-descriptions-item label="发货公司">
          {{orderData.consignorVO?orderData.consignorVO.company||'无':'无'}}
        </el-descriptions-item>
        <el-descriptions-item label="发货电话">
          {{orderData.consignorVO?(orderData.consignorVO.phone?(orderData.consignorVO.countryCode+orderData.consignorVO.phone):'无'):'无'}}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="4">
        <el-descriptions-item label="收货人姓名">
          {{orderData.consigneeVO?orderData.consigneeVO.name||'无':'无'}}
        </el-descriptions-item>
        <el-descriptions-item label="收货公司">
          {{orderData.consigneeVO?orderData.consigneeVO.company||'无':'无'}}
        </el-descriptions-item>
        <el-descriptions-item label="收货电话">
          {{orderData.consigneeVO?orderData.consigneeVO.phone?orderData.consigneeVO.countryCode+orderData.consigneeVO.phone :'无':'无'}}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">货物信息</div>
      <el-table id='table' v-loading="loading" border :data="orderData.orderItemVOList" :summary-method="getSummaries" show-summary>
        <el-table-column label="序号" align="center" prop="id" type="index" width="60">
          <template slot-scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="品名" align="center">
          <template slot-scope="scope">
            <el-row>{{scope.row.prodTitleZh}}</el-row>
            <el-row>{{scope.row.prodTitleEn}}</el-row>
          </template>
        </el-table-column>
        <el-table-column label="装柜货物属性" align="center" width="600">
          <template slot-scope="scope">
            <el-row style="text-align:left;">
              <el-row>
                <span>规格：{{scope.row.boxGauge}}</span>
              </el-row>
              <el-row>
                <span>品牌：
                  <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType" />
                </span>
                <span style="margin-left: 10px;">箱数：{{scope.row.warehouseInInfoVO ? scope.row.warehouseInInfoVO.cartonsNum : 0 }}</span>
                <span style="margin-left: 10px;">体积：{{scope.row.warehouseInInfoVO ? scope.row.warehouseInInfoVO.volume : 0 }}m³</span>
                <span style="margin-left: 10px;">重量：{{scope.row.warehouseInInfoVO ? scope.row.warehouseInInfoVO.weight : 0 }}kg</span>
              </el-row>
              <el-row>
                <span>计划装柜：无返回</span>
              </el-row>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="最后操作时间" align="center">
          <template slot-scope="scope">
            <span>{{parseTime(scope.row.updateTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="card" v-if="splitData">
      <!-- 列表 -->
      <div slot="header" class="card-title">拆单信息</div>
      <div>
        <div class="btn-header">
          <div>
            <p class="card-info">
              <span class="card-title">
                {{splitData.orderNo}}
              </span>
              <span>{{orderData.logisticsInfoDto?orderData.logisticsInfoDto.startTitleZh:'无'}}</span>
              <span>发往：{{splitData.dstWarehouseName}}</span>
            </p>
          </div>
          <div>
            <el-button type="primary" @click="addShop">放入</el-button>
          </div>
        </div>
        <el-table border :data="splitData.orderSplitItemBackVOList">
          <el-table-column label="序号" align="center" prop="id" type="index">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="品名" align="center">
            <template slot-scope="scope">
              <el-row>{{scope.row.prodTitleZh}}</el-row>
              <el-row>{{scope.row.prodTitleEn}}</el-row>
            </template>
          </el-table-column>
          <el-table-column label="品牌" align="center">
            <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType" />
            </template>
          </el-table-column>
          <el-table-column label="体积" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.volume}}m³</span>
            </template>
          </el-table-column>
          <el-table-column label="重量" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.weight}}m³</span>
            </template>
          </el-table-column>
          <el-table-column label="箱数" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.num}}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划装柜" align="center">
            无
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-delete" @click="removeShop(scope.row.id)">移出</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-row style="marginTop:15px;">
      <work-flow xmlkey="split_order" v-model="selectedUsers"></work-flow>
    </el-row>

    <div slot="footer" class="card footer_btn" v-if="orderData.status!=99">
      <el-button v-if="orderData.status!=19" type="primary" @click="submitForm">提交申请</el-button>
      <el-button v-if="orderData.status!=19" plain type="primary" @click="$emit('closeDialog')">取消</el-button>
      <el-button v-if="orderData.status==19" type="primary">审核中</el-button>
      <el-button v-if="orderData.status==19" plain type="primary" @click="cancelSplit">取消审核</el-button>
      <el-button v-if="orderData.status==19" plain type="primary" @click="$emit('closeDialog')">返回</el-button>
    </div>

    <!-- 对话框(添加 / 修改) -->
    <el-dialog title="放入品名" :visible.sync="shopOpen" width="400px" append-to-body>
      <el-form ref="shopForm" :model="shopForm" :rules="shopRules" label-width="100px">
        <el-row>
          <el-form-item label="中文品名:" prop="prodTitleZh">
            <el-select v-model="shopForm.prodTitleZh" placeholder="请选择中文品名" @change="changeProdTitleZh">
              <el-option v-for="item in orderItems" :label="item.prodTitleZh" :value="item.prodTitleZh" :key="item.prodTitleZh"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="英文品名:" prop="prodTitleEn">
            <el-select v-model="shopForm.prodTitleEn" placeholder="请选择英文品名" @change="changeProdTitleEn">
              <el-option v-for="item in orderItems" :label="item.prodTitleEn" :value="item.prodTitleEn" :key="item.prodTitleEn"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="剩余箱数:">
            {{shopForm.sum||0}}
          </el-form-item>
          <el-form-item label="放入箱数:" prop="num">
            <el-input-number v-model="shopForm.num" controls-position="right" :min="1" :max="shopForm.sum"></el-input-number>
          </el-form-item>
          <el-form-item label="备注信息:">
            <el-input v-model="shopForm.remarks"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="shopAdd">确 定</el-button>
        <el-button @click="shopCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSplitList,
  createSplit,
  cancelApply,
  createSplitItem,
  deleteSplitItem,
} from "@/api/ecw/orderHandle";
import { getTradeCityList } from "@/api/ecw/region";
import WorkFlow from "@/components/WorkFlow";
import { getOrder } from "@/api/ecw/order";
import { serviceMsg } from "../../utils";
import { createApproval } from "@/api/ecw/boxSea";

export default {
  name: "splitOrder",
  inheritAttrs: false,
  components: {
    WorkFlow,
  },
  props: {
    currRow: Object,
  },
  data() {
    return {
      orderData: {},
      splitData: {},
      detail: {},
      loading: false,
      selectedUsers: [],
      tradeCityList: [],

      shopOpen: false,
      orderItems: [],
      shopForm: {},
      // 表单校验
      shopRules: {
        prodTitleZh: [
          { required: true, message: "请选择中文品名", trigger: "change" },
        ],
        prodTitleEn: [
          { required: true, message: "请选择英文品名", trigger: "change" },
        ],
        num: [{ required: true, message: "请输入箱数", trigger: "change" }],
      },
      queryParams: {
        orderId: 0,
        lang: 0,
      },
    };
  },
  created() {
    getTradeCityList().then((res) => (this.tradeCityList = res.data));
    this.queryParams.orderId = this.currRow.orderId;
    this.getOrderDetail();
    this.getSplit();
  },
  watch: {
    //监听table这个对象
    tableData: {
      // 立即监听
      immediate: true,
      handler() {
        this.$nextTick(() => {
          const tds = document.querySelectorAll(
            "#table .el-table__footer-wrapper tr>td"
          );
          // colSpan合并列
          tds[1].colSpan = 5;
          tds[1].style.textAlign = "left";
          tds[2].style.display = "none";
          tds[3].style.display = "none";
          tds[4].style.display = "none";
        });
      },
    },
  },
  methods: {
    /* 拆箱总数 */
    totalSplitNum() {
      let _total = 0;
      const { orderSplitItemBackVOList = [] } = this.splitData;
      orderSplitItemBackVOList.forEach((v) => {
        _total += Number(v.splitNum);
      });
      return _total;
    },
    /* 打开拆单 */
    getSplit() {
      this.querySplitGoods().then((res) => {
        if (res) {
          if (this.currRow.goodsList && this.currRow.goodsList.length) {
            const [orderItem] = this.currRow.goodsList;
            createSplit({
              parentOrderId: this.currRow.orderId,
              parentOrderNo: this.currRow.orderNo,
              dstWarehouseId: orderItem.destWarehouseId,
              transportId: orderItem.transportId,
              shipmentType: 1,
            }).then((res) => {
              this.querySplitGoods();
            });
          }
        }
      });
    },
    /* 查询拆单项 */
    querySplitGoods() {
      return new Promise((resolve, reject) => {
        getSplitList({
          lang: 0,
          orderId: this.currRow.orderId,
          shipmentType: 1,
        }).then((res) => {
          const { orderSplitBackVOList } = res.data;
          if (orderSplitBackVOList && orderSplitBackVOList.length) {
            this.orderItems = this.currRow.goodsList ?? [];
            // 取拆单项
            this.splitData = orderSplitBackVOList.filter(
              (item) => !item.isMaster
            )[0];
            resolve(false);
          } else {
            resolve(true);
          }
        });
      });
    },
    getOrderDetail() {
      this.loading = true;
      getOrder(this.queryParams.orderId).then((response) => {
        this.orderData = response.data;
        this.loading = false;
      });
    },
    getSummaries() {
      const sums = [];

      sums[0] = "小计";
      if (
        !this.orderData ||
        !this.orderData.orderItemVOList ||
        this.orderData.length == 0
      ) {
        return sums;
      }
      let orderSum = 0;
      let orderV = 0;
      let orderW = 0;
      let leviteSum = 0;
      let leviteV = 0;
      let leviteW = 0;
      this.orderData.orderItemVOList.forEach((column, index) => {
        orderSum += column.num ?? 0;
        orderV += column.volume ?? 0;
        orderW += column.weight ?? 0;
        leviteSum += column.warehouseInInfoVO?.cartonsNum ?? 0;
        leviteV += column.warehouseInInfoVO?.volume ?? 0;
        leviteW += column.warehouseInInfoVO?.weight ?? 0;
      });
      sums[1] =
        "下单统计：" +
        orderSum +
        " 箱 " +
        orderV +
        " m³ " +
        orderW +
        " kg " +
        " 入仓统计：" +
        leviteSum +
        " 箱 " +
        leviteV +
        " m³ " +
        leviteW +
        " kg";

      return sums;
    },
    importCityName(id) {
      let arr = this.tradeCityList.filter((item) => item.id == id);
      return arr.length > 0 ? arr[0].titleZh : "无";
    },
    submitForm() {
      const { shipmentObj } = this.$attrs;
      // 创建拆单审核
      createApproval({
        applyReason: "拆单审核",
        approvalStatus: 0,
        approvalType: 8,
        copyUserId: this.selectedUsers,
        orderId: this.currRow.orderId,
        shipmentId: shipmentObj.id,
      }).then((res) => {
        serviceMsg(res, this).then((res) => {
          this.getSplit();
        });
      });
    },
    addShop() {
      this.shopOpen = true;
    },
    changeProdTitleZh() {
      let list = [];
      list = this.currRow.goodsList.filter(
        (item) => item.prodTitleZh == this.shopForm.prodTitleZh
      );
      this.shopForm.sum = list[0].num;
      this.shopForm.orderItemId = list[0].orderItemId;
      this.shopForm.prodTitleEn = list[0].prodTitleEn;
    },
    changeProdTitleEn() {
      let list = [];
      list = this.orderData.orderItemVOList.filter(
        (item) => item.prodTitleEn == this.shopForm.prodTitleEn
      );
      this.shopForm.sum = list[0].num;
      this.shopForm.prodTitleZh = list[0].prodTitleZh;
    },
    shopAdd() {
      this.$refs["shopForm"].validate((valid) => {
        if (valid) {
          // 输入箱数大于实装箱数
          const total = this.totalSplitNum();
          const canSplitNum = this.currRow.num - this.currRow.installNum;
          const remain = canSplitNum - total;
          if (this.shopForm.num > remain) {
            this.$message.error("放入箱数不能大于总箱数");
            return;
          }

          let params = {
            num: this.shopForm.num,
            orderItemId: this.shopForm.orderItemId,
            orderSplitId: this.splitData.id,
            remarks: this.shopForm.remarks,
          };
          createSplitItem(params).then((res) => {
            this.$message.success("放入成功");
            this.getSplit();
            this.shopForm = {};
          });
          this.shopOpen = false;
        }
      });
    },
    removeShop(id) {
      let that = this;
      that.$confirm("是否移除货物吗?").then(function () {
        deleteSplitItem(id).then((res) => {
          that.$message.success("移除成功");
          that.getSplit();
        });
      });
    },
    cancelSplit() {
      const { shipmentObj } = this.$attrs;
      approvalCancel({
        applyReason: "取消审核",
        id: shipmentObj["cabinetApprovalInfo"].id,
        shipmentId: shipmentObj.id,
      }).then((res) => {
        serviceMsg(res, this).then(() => {
          this.$emit("closeDialog");
        });
      });
    },
    shopCancel() {
      this.shopOpen = false;
      this.shopForm = {};
    },
  },
};
</script>

<style lang="scss">
.shipping-split-order {
  .card-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
  }
  .card-info {
    font-size: 16px;
    > span {
      margin-right: 10px;
    }
  }
  .card {
    margin-top: 20px;
  }
  .btn-header {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
  }
  .red {
    color: #ff3430;
    font-size: 15px;
  }
  .footer_btn {
    padding-bottom: 60px;
  }
}
</style>
