<template>
  <div>
    <el-scrollbar :vertical="true" style="width: 100%;" viewClass="shipping-chart">
      <div v-for="(nodes,index) in chartData['sea']" :key="index" class="chart-nodes">
        <div>
          <div v-for="node in nodes" :key="node.title" @click="nodeClick(node)" class="node-div">
            <template v-if="!node.unNode">
              <img :src="node.imgSrc" alt="">
              <p>{{node.title}}</p>
            </template>
            <template v-else-if="node.unNode">
              <el-button type="primary" @click="nodeClick(node)">AGENT</el-button>
            </template>
          </div>
        </div>
        <div class="chart-arrow" v-if="index !== (chartData['sea'].length-1)">
          <img src="@/assets/images/shipping/jt-start.png" alt="">
        </div>
      </div>
    </el-scrollbar>
    <el-dialog :title="dialogConfig.title" :visible.sync="dialogConfig.dialogVisible" :width="dialogConfig.width" destroy-on-close>
      <booking @closeDialog="closeDialog" v-if="dialogConfig.type === 'booking'" />
      <trailer @closeDialog="closeDialog" v-if="dialogConfig.type === 'trailer'" />
      <preinstall v-if="dialogConfig.type === 'preinstall'" />
      <agentWidget @closeDialog="closeDialog" v-if="dialogConfig.type === 'agent'" />
    </el-dialog>
  </div>

</template>

<script>
import booking from "./booking";
import trailer from "./trailer";
import preinstall from "./preinstall";
import agentWidget from "./agent";

export default {
  name: "shippingChart",
  components: { booking, trailer, preinstall, agentWidget },
  props: {
    shippingType: String,
    boxId: String,
  },
  data() {
    return {
      dialogConfig: {
        dialogVisible: false,
        title: "",
        width: "30%",
        type: "",
      },
      chartData: {
        sea: [
          [
            {
              title: "订舱",
              imgSrc: require("@/assets/images/shipping/dc-start.png"),
              type: "booking",
            },
          ],
          [
            {
              title: "预装",
              imgSrc: require("@/assets/images/shipping/yz-start.png"),
              type: "preinstall",
            },
            {
              title: "拖车",
              imgSrc: require("@/assets/images/shipping/tc-start.png"),
              type: "trailer",
            },
            {
              unNode: true,
              type: "agent",
              title: "代理商设置",
            },
          ],
          [
            {
              title: "装柜",
              imgSrc: require("@/assets/images/shipping/zg-start.png"),
              type: "cabinet",
            },
          ],
          [
            {
              title: "报关",
              imgSrc: require("@/assets/images/shipping/bg-start.png"),
              type: "customsDeclaration",
            },
            {
              title: "配船",
              imgSrc: require("@/assets/images/shipping/pc-start.png"),
              type: "ship",
            },
            {
              title: "提单材料",
              imgSrc: require("@/assets/images/shipping/tdcl-start.png"),
              type: "subMaterial",
            },
          ],
          [
            {
              title: "驳船",
              imgSrc: require("@/assets/images/shipping/bc-start.png"),
              type: "barge",
            },
          ],
          [
            {
              title: "起运",
              imgSrc: require("@/assets/images/shipping/qy-start.png"),
              type: "departure",
            },
          ],
          [
            {
              title: "清关文件",
              imgSrc: require("@/assets/images/shipping/qg-start.png"),
              type: "clearanceDocument",
            },
          ],
          [
            {
              title: "到港",
              imgSrc: require("@/assets/images/shipping/dg-start.png"),
              type: "arrival",
            },
          ],
          [
            {
              title: "清关",
              imgSrc: require("@/assets/images/shipping/qg-start.png"),
              type: "customsClearance",
            },
          ],
          [
            {
              title: "卸柜",
              imgSrc: require("@/assets/images/shipping/xg-start.png"),
              type: "unloading",
            },
          ],
          [
            {
              title: "结算",
              imgSrc: require("@/assets/images/shipping/js-start.png"),
              type: "settlement",
            },
          ],
        ],
      },
    };
  },
  methods: {
    closeDialog() {
      this.$set(this.dialogConfig, "dialogVisible", false);
    },
    setCommonAttr(node) {
      this.$set(this.dialogConfig, "dialogVisible", true);
      this.$set(this.dialogConfig, "title", node.title);
      this.$set(this.dialogConfig, "type", node.type);
    },
    nodeClick(node) {
      console.log(node);
      switch (node.type) {
        case "booking":
          this.$set(this.dialogConfig, "width", "40%");
          this.setCommonAttr(node);
          break;
        case "trailer":
        case "agent":
          this.$set(this.dialogConfig, "width", "25%");
          this.setCommonAttr(node);
          break;
        case "preinstall":
          this.$router.push(`/boxSea/shippingSea/preinstall/${this.boxId}`);
          break;
      }
    },
  },
};
</script>

<style lang="scss">
.shipping-chart {
  width: max-content;
  display: flex;
  justify-content: center;
  padding: 10px;
  .chart-nodes {
    display: flex;
    align-items: center;
    justify-content: center;
    .node-div {
      margin-top: 10px;
      cursor: pointer;
      p {
        margin-top: -10px;
        margin-bottom: 0px;
        text-align: center;
      }
    }
  }
  .chart-arrow {
    margin: 0 10px;
  }
}
</style>
