<template>
  <div :class="`${prefixCls} ${heightType == 'auto' ? 'flx-1' : ''}`">
    <el-tabs v-model="activeName" class="workplan-tabs" @tab-click="handleClick">
      <el-tab-pane :label="$t('business.home.layout.oaDoc')" name="OADocument" :class="heightType == 'auto' ? 'flx h-full' : ''">
        <OADocument ref="OADocumentRef" />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('business.home.layout.adviceMessage')"
        name="AdviceMessage"
        :class="heightType == 'auto' ? 'flx h-full' : ''"
      >
        <AdviceMessage ref="AdviceMessageRef" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="home">
import { ref, reactive, inject, onMounted, computed } from "vue";
import type { TabsPaneContext } from "element-plus";
import OADocument from "./components/OADocument.vue";
import AdviceMessage from "./components/AdviceMessage.vue";
import { useDesign } from "@/hooks/useDesign";

const { prefixCls } = useDesign("home_widget-workplan");
const emit = defineEmits(["workplanTableCurrentChanged"]);

interface homeWidgetProps {
  /**
   * @description 组件id
   */
  id?: string;
  /**
   * @description 组件参数
   */
  initParam?: any;
}

export interface workplanProps extends homeWidgetProps {
  /**
   * @description 表格高度
   */
  height?: number;
  /**
   * @description 表格高度类型
   */
  heightType?: string;
  tableHeight?: string | number;
  minHeight?: string | number;
}
const prop = withDefaults(defineProps<workplanProps>(), {});

const activeName = ref("OADocument");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const currentChanged = (data: any) => {
  emit("workplanTableCurrentChanged", data);
};

const onRefresh = (data: any) => {
  console.log("workplanTableCurrentChanged onRefresh data :>> ", data);
};

onMounted(() => {
  //   console.log("完成渲染onMounted home_saletask_mx:>> ", prop);
});

defineExpose({
  onRefresh
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
