<template>
  <div>
    <el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="19">
        <div style="display: flex; justify-content: space-between;align-items: flex-end;">
          <h2>海运出货操作</h2>
        </div>

        <!-- 信息 -->
        <el-card style="margin-top: 15px">
          <el-descriptions :column="5" border>
            <el-descriptions-item label="自编号">{{shipmentObj.selfNo}}</el-descriptions-item>
            <el-descriptions-item label="运输方式">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="shipmentObj.transportType" />
            </el-descriptions-item>
            <el-descriptions-item label="始发地">
              {{importCityName(shipmentObj.startWarehouseId)}}
            </el-descriptions-item>
            <el-descriptions-item label="目的地">
              {{importCityName(shipmentObj.destWarehouseId)}}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              {{statusLabel}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 海运流程图 -->
        <seaProcess :seaBaseData="seaBaseData" :shipmentObj="shipmentObj" :allSupplier="allSupplier" :allDocks="allDocks" :allUsers="allUsers" :warehouseList="warehouseList" @getBoxInfo="getBoxInfo" />

        <!-- 海运步骤图 -->
        <seaStepDetail :seaBaseData="seaBaseData" :shipmentObj="shipmentObj" :allSupplier="allSupplier" :allDocks="allDocks" :allUsers="allUsers" :warehouseList="warehouseList" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import seaProcess from "./seaProcess.vue";
import seaStepDetail from "./seaStepDetail.vue";
import { getbox } from "@/api/ecw/box";
import { getWarehouseList } from "@/api/ecw/warehouse";
import { getSupplierPage } from "@/api/ecw/supplier";
import { getDockPage } from "@/api/ecw/dock";
import { listUser } from "@/api/system/user";
import { statusName, seaBaseData } from "./utils";

/**
 * 海运操作主页面
 */
export default {
  name: "shippingSea",
  components: {
    seaProcess,
    seaStepDetail,
  },
  props: {
    shipmentId: String,
  },
  data() {
    return {
      shipmentObj: {},
      warehouseList: [],
      // 供应商
      allSupplier: [],
      // 码头
      allDocks: [],
      // 用户
      allUsers: [],
      // 流程图节点
      seaBaseData: seaBaseData(),
      // 状态
      statusLabel: "",
    };
  },
  created() {
    this.getBoxInfo();
    // 仓库
    getWarehouseList().then((r) => {
      this.warehouseList = r.data;
    });
    // 供应商
    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allSupplier = data.list.map((item) => {
        if (item.companyType) {
          item.companyTypes = item.companyType.split(",");
        }
        return item;
      });
    });
    // 码头
    getDockPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allDocks = data.list;
    });
    // 用户
    listUser({ pageNo: "1", pageSize: "10000" }).then((res) => {
      const { data } = res;
      this.allUsers = data.list ?? [];
    });
  },
  methods: {
    /* 获取仓库 */
    importCityName(id) {
      var arr = this.warehouseList.filter((item) => item.id == id);
      return arr.length > 0 ? arr[0].titleZh : "无";
    },
    // 出货
    getBoxInfo() {
      getbox(this.shipmentId).then((res) => {
        const { data } = res;
        this.shipmentObj = data ?? {};
      });
    },
  },
  watch: {
    /* 监听发货对象 */
    shipmentObj(val) {
      let currNodeStatus = 11,
        isBreak = false;
      // 迭代每个节点
      for (let i = 0; i < this.seaBaseData.length; i++) {
        const nodes = this.seaBaseData[i];
        for (let j = 0; j < nodes.length; j++) {
          const node = nodes[j];
          const { keyName, voName, status } = node;
          if (!keyName) continue;
          const { start, wait, end } = status;

          if (start.includes(val[keyName]) && val[voName]) {
            currNodeStatus = val[keyName];
          }

          if (wait.includes(val[keyName])) {
            currNodeStatus = val[keyName];
            isBreak = true;
            break;
          }

          if (end.includes(val[keyName])) {
            currNodeStatus = val[keyName];
          }
        }
        if (isBreak) break;
      }
      this.statusLabel = statusName.get(currNodeStatus);
    },
  },
};
</script>

<style lang="scss">
// 海运操作统一弹窗样式
.shipping-dialog {
  .el-dialog__body {
    height: calc(100% - 54px);
    > :first-child {
      height: 100%;
    }
  }
  // 页面内元素弹窗form控件宽度设置
  .el-form-item__content {
    > div {
      width: 100%;
    }
  }
  .operate-button {
    text-align: center;
  }
  .two-element {
    .el-form-item__content {
      display: flex;
      > :last-child {
        margin-left: 10px;
      }
    }
  }
}
</style>
