<template>
  <div style="height: 100%;">
    <el-dialog :visible.sync="open" :modal="false" :fullscreen="true" :modal-append-to-body="false" :show-close="false">
      <template slot="title">
        <div class="custom-dialog__header">
          <span class="el-dialog__title">{{ title }}</span>
          <div class="custom-dialog__right">
            <i class="el-icon-close" style="font-size: 25px" @click="handleClose"></i>
          </div>
        </div>
      </template>

      <div class="resolve-dialog-bady">
        <div class="left-menu">
          <el-tabs tab-position="left" v-model="asyncComponent" @tab-click="selectMenu">
            <el-tab-pane :name="AsyncComponents.RESOLVE_INFO">
              <span slot="label"><i class="el-icon-document"></i> 详情信息</span>
            </el-tab-pane>
            <el-tab-pane :name="AsyncComponents.PROCESS">
              <span slot="label"><svg-icon icon-class="progress"></svg-icon> 流程图</span>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="right-content">
          <keep-alive>
            <component :is="asyncComponent" :instanceId="instanceId" :id="id" v-bind="$attrs" @submit="handleSubmit">
            </component>
          </keep-alive>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TeacherLeaveInfo from "./TeacherLeaveInfo";

import Process from './Progress';
import {AsyncComponents} from "@/enums/apply";

export default {
  name: "HandleResolve",
  components: {
    ResolveDetail: TeacherLeaveInfo,
    Process
  },
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    instanceId: {
      type: [String, Number],
      default: ''
    },
    title: {
      type: String,
      default: '流程办理'
    },
    processOpen: {
      type: Boolean,
      default: false
    },
    // 是否为审批人
    isApprover: {
      type: Boolean,
      default: true
    },
    // vehicleTypes: {
    //   type: Array,
    //   default: () => []
    // }
  },
  data() {
    return {
      AsyncComponents,
      progress: {},
      asyncComponent: AsyncComponents.RESOLVE_INFO,
    }
  },
  computed: {
    open: {
      get() {
        return this.processOpen
      },
      set(value) {
        this.$emit('update:processOpen', value);
      }
    }
  },
  methods: {
    /** 【关闭】按钮 */
    handleClose() {
      this.open = false;
    },

    /** 选中菜单 */
    selectMenu({name}) {
      this.asyncComponent = name;
    },

    /** 处理提交 */
    handleSubmit() {
      this.handleClose();
      // 刷新数据
      this.$emit('refreshData');
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/moduleStyle/custom-dialog.scss";

::v-deep .el-dialog__header {
  padding-bottom: 20px;
  border-bottom: 1px solid #E4E7ED;
}

::v-deep .el-dialog__body {
  padding: 0px;
  height: calc(100% - 66px);
}

.resolve-dialog-bady {
  display: flex;
  height: 100%;

  .left-menu {
    height: 100%;
    align-items: stretch;

    .el-tabs {
      height: 100%;
    }
  }

  .right-content {
    flex-grow: 1;
    padding: 20px;
  }
}
</style>
