<template>
  <el-tab-pane class="oa-flow-tab-pane">
    <template #label>
      <div class="flx-col flx-end-end text-h5-m">
        <el-badge :value="getStatus(item.docflag)" class="item" :type="getStatusType(item.docflag)">
          {{ item.doccode }}
        </el-badge>
      </div>
    </template>

    <div class="oa-flow-group w-full h-full flx-col" ref="oaFlowGroupRef">
      <oaFlowItem
        :data-ref="'item' + index"
        v-for="(itm, index) in data"
        :t="t"
        :item="itm"
        :index="index"
        :key="index"
        :current="current"
        :nowtime="item.nowtime"
      />
    </div>
    <footer v-if="current" class="oaflow-footer flx-justify-between mt-8">
      <el-button class="flx-1" type="success" @click="agreeAction(true)">{{ t("common.agree") }}</el-button>
      <el-button class="flx-1" type="danger" @click="agreeAction(false)">{{ t("common.oppose") }}</el-button>
    </footer>
  </el-tab-pane>
</template>

<script setup lang="tsx" name="LjToastOaFlowTab">
import { ref, watch, nextTick } from "vue";
import { ElTabPane } from "element-plus";
import oaFlowItem from "./oaFlowItem.vue";
import { oaFlowStatusViewBill } from "@/components/LjOaFlow/interface/index";
import { useOaFlow } from "@/components/LjOaFlow/hooks/index";

// 接收父组件参数并设置默认值
interface oaFlowItemProps {
  t: any;
  item: any;
  data: oaFlowStatusViewBill[] | undefined;
  /**
   * @argument 当前待审批
   */
  current?: any;
  /**
   * @description 状态enum
   */
  statusEnum: any[];
  agreeAction: any;
}

const props = withDefaults(defineProps<oaFlowItemProps>(), {
  item: {},
  current: undefined
});

const oaFlowGroupRef = ref();
const scrollToElement = (index: number) => {
  if (!oaFlowGroupRef.value) return;

  // 获取目标子元素
  const targetElement: any = (oaFlowGroupRef.value as HTMLElement).querySelector(`[data-ref='item${index}']`);

  console.log("targetElement :>> ", targetElement);
  if (!targetElement) return;

  // 计算目标元素相对于父元素的偏移量
  const targetOffsetTop = targetElement?.offsetTop;

  // 设置父元素的 scrollTop 为目标元素的偏移量
  (oaFlowGroupRef.value as HTMLElement).scrollTop = targetOffsetTop;
};

const getStatus = (status: number | string) => {
  return props.statusEnum?.find((item: any) => item.value === status)?.label || "";
};
const getStatusType = (status: number | string) => {
  return props.statusEnum?.find((item: any) => item.value === status)?.type || "info";
};

watch(
  () => props.data,
  (val: any) => {
    nextTick(() => {
      let showIndex = val?.findIndex((item: any) => item.oarowid == "1") ?? -1;
      console.log("props.data :>> ", props.data);
      console.log("showIndex :>> ", showIndex);
      showIndex > -1 && scrollToElement(showIndex);
    });
  }
);
</script>

<style lang="scss" scoped>
.oa-flow-tab-pane {
  position: relative;

  &:before {
    content: "";
    position: absolute;
    left: 20%;
    width: 1px;
    height: 100%;
    transform: translateX($space-a2);
    z-index: -1;

    background: repeating-linear-gradient(
      to bottom,
      $color-gray-6,
      $color-gray-6 10px,
      transparent 10px,
      transparent 20px
    ); /* 创建一条虚线背景 */
    // height: 1px; /* 设置元素的高度为1像素 */
    // width: 100%; /* 设置元素的宽度为100% */
  }
}
.oa-flow-group {
  overflow-y: auto;
  max-height: 60vh;
}
.oaflow-footer {
}
</style>
