<template>
  <div>
    <el-row type="flex" style="margin-top: 15px; margin-bottom: 15px" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="20" :xl="20">
        <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="状态"></el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 海运流程图 -->
        <div class="shipping-flow">
          <shippingChart :shipmentObj="shipmentObj" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import shippingChart from "../shippingSea/seaProcess";
import { getbox } from "@/api/ecw/box";
import { getWarehouseList } from "@/api/ecw/warehouse";

/**
 * 海运操作主页面
 */
export default {
  name: "shippingSea",
  components: {
    shippingChart,
  },
  props: {
    shipmentId: String,
  },
  data() {
    return {
      shipmentObj: {},
      warehouseList: [],
    };
  },
  created() {
    getbox(this.shipmentId).then((res) => {
      const { data } = res;
      this.shipmentObj = data ?? {};
    });
    getWarehouseList().then((r) => {
      this.warehouseList = r.data;
    });
  },
  methods: {
    importCityName(id) {
      var arr = this.warehouseList.filter((item) => item.id == id);
      return arr.length > 0 ? arr[0].titleZh : "无";
    },
  },
};
</script>

<style lang="scss">
.shipping-flow {
  margin-top: 5px;
}
// 海运操作统一弹窗样式
.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>
