<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" @closePage="closePage"
                       @submit="handleSubmit"></component>
          </keep-alive>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import StudentLeaveInfo from './StudentLeaveInfo'
import TaskResolve from './TaskResolve'
import Process from './Progress'
import {AsyncComponents} from '@/enums/apply'

export default {
  name: 'HandleResolve',
  components: {
    ResolveDetail: StudentLeaveInfo,
    TaskResolve,
    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
    }

  },
  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')
    },
    closePage() {
      this.open = false
      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>
