<template>
  <el-dialog
    class="dialog-with-menu"
    style="padding: 40px"
    :fullscreen="fullscreen"
    :visible="visible"
    @close="handleClose"
    :destroy-on-close="false"
    :close-on-click-modal="configs.clickModalToClose ?? true"
  >
    <!-- <el-button type="text" icon="el-icon-close" style="position: absolute; z-index: 100; top: 0; right: 18px" @click="handleClose">关闭</el-button> -->

    <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
      <el-tab-pane name="sub" label="子订单进度">
        <SubOrderDetail v-if="order !== null" :order="order" />
      </el-tab-pane>
      <el-tab-pane name="car" label="窑车详情">
        <CarDetail v-if="order !== null" :order-id="order.id" :table-layout="carLayoutKey" />
      </el-tab-pane>
      <el-tab-pane name="tray" label="托盘详情">
        <TrayDetail />
      </el-tab-pane>
      <el-tab-pane name="order" label="订单详情">
        <OrderDetail ref="order-detail-tag" :configs="configs" />
      </el-tab-pane>
    </el-tabs>
    <!-- 
    <div style="width: 100%; height: 76px; position: absolute; z-index: 100; bottom: 0; text-align: right;">
      <el-button type="" plain @click="handleClose" style="margin-right: 18px; margin-top: 18px;">关闭</el-button>
    </div> -->

    <!-- footer  -->
    <div slot="footer" style="">
      <!-- <template v-for="(operate, index) in configs.form.operations">
        <el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{
          operate.label
        }}</el-button>
      </template> -->
      <el-button @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import CarDetail from "./tabs/carDetail.vue";
import OrderDetail from "./tabs/orderDetail.vue";
import SubOrderDetail from "./tabs/subOrderDetail.vue";
import TrayDetail from "./tabs/trayDetail.vue";

export default {
  name: "DialogWithMenu--OrderVersion",
  components: { CarDetail, OrderDetail, SubOrderDetail, TrayDetail },
  props: {
    configs: {
      type: Object,
      default: () => null,
    },
    fullscreen: {
      type: Boolean,
      default: false,
    },
  },
  inject: ["urls"],
  data() {
    return {
      detailMode: false,
      visible: false,
      activeTab: "sub",
      order: null,
      carLayoutKey: 0,
    };
  },

  methods: {
    handleTabClick(tab, event) {
      console.log("handle tab click", tab, event);
      switch (tab.label) {
        case "子订单进度":
          break;
        case "窑车详情":
          this.carLayoutKey = Math.random();
          break;
        case "托盘详情":
          break;
        case "订单详情":
          break;
      }
    },

    /** init **/
    init(order, detailMode) {
      console.log("init menu dialog,", order);
      this.order = order;
      this.detailMode = detailMode ?? false;
      this.visible = true;

      this.$nextTick(() => {
        this.$refs["order-detail-tag"].init(this.order.id, this.detailMode);
      });
    },

    handleClose() {
      this.visible = false;

      setTimeout(() => {
        this.$emit("destroy-dialog");
        // this.resetForm();
        // this.$emit("update:dialogVisible", false);
      }, 200);
    },
  },
};
</script>

<style scoped>
.dialog-with-menu >>> .el-dialog__body {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  /* padding-top: 0 !important;
  padding-bottom: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
  height: 100%; */
}

.el-select,
.el-cascader,
.el-date-editor {
  width: 100% !important;
}

.dialog-with-menu >>> .el-dialog__header {
  padding: 0;
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
}
.dialog-with-menu >>> .el-dialog__body {
  height: calc(100% - 72px);
}

.dialog-with-menu >>> .el-tabs__content {
  height: calc(100% - 32px);
  overflow-y: auto;
  padding-right: 12px;
}

.dialog-with-menu >>> .el-tabs {
  height: 100%;
}

.h0 {
  height: 0;
  width: 0;
}
</style>
