<template>
  <super-dialog
    v-model="dialogVisible"
    :top="top"
    :width="width"
    title="人员排班"
    className="sheduleDialog"
    v-bind="$attrs"
    @close="$emit('close-dialog')"
    @closed="closed"
    @open="open"
    v-on="$listeners"
  >
    <div :style="{height}" class="detail-box">
      <el-tabs v-model="activeName">
        <el-tab-pane label="班组管理" name="workGroupContent"></el-tab-pane>
        <el-tab-pane label="排班管理" name="workUserContent"></el-tab-pane>
        <div v-if="activeName === 'workGroupContent'" style="height: calc(100% - 30px);">
          <workGroupContent></workGroupContent>
        </div>
        <div v-else style="height: calc(100% - 30px);">
          <workUserContent></workUserContent>
        </div>
      </el-tabs>
    </div>

    <!--    <template v-slot:footer>-->
    <!--      <el-button-->
    <!--        plain-->
    <!--        type="primary"-->
    <!--        @click="dialogVisible = false"-->
    <!--      >关闭-->
    <!--      </el-button-->
    <!--      >-->
    <!--    </template>-->
  </super-dialog>
</template>

<script>
import SuperDialog from '@/components/SuperDialog/index.vue'
import workGroupContent from './components/workGroupContent/index.vue'
import workUserContent from './components/workUserContent/index.vue'

export default {
  name: 'SchedulingDialog',
  components: {SuperDialog, workGroupContent, workUserContent},
  props: {
    isShowDetail: {
      default: false,
      type: Boolean
    },
    top: {
      default: '10vh',
      type: String
    },
    width: {
      default: '80%',
      type: String
    },
    height: {
      default: '75vh',
      type: String
    },
    rowInfo: {
      default() {
        return {}
      },
      type: Object
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.isShowDetail
      },
      set(val) {
        this.$emit('update:isShowDetail', val)
      }
    }
  },
  data() {
    return {
      activeName: 'workGroupContent',
      detailInfo: {}
    }
  },
  methods: {
    // 弹层打开
    open() {
    },

    // 弹层关闭
    closed() {
      this.activeName = 'workGroupContent'
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .sheduleDialog {
  .el-dialog__body {
    overflow: hidden !important;
  }
}
.detail-box {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
</style>
