<template>
  <div class="lj-toast-oa-flow flx-col w-full">
    <header class="flx">
      <span class="flx-1 text-h5-b">{{ t("business.header.oaFlow") }}</span>
      <el-button
        v-if="!hideClose"
        circle
        text
        class="close-btn flx-shrink"
        :icon="CloseBold"
        @click="emit('close-toast')"
      ></el-button>
    </header>
    <main class="w-full">
      <el-tabs v-model="tabsValue" @tab-click="handleClickTabs">
        <template v-if="oaFlowList.length">
          <oaFlowTab
            v-for="(item, index) in oaFlowList"
            :t="t"
            :key="index"
            :name="index"
            :item="item"
            :data="itemData"
            :current="currentOaflow"
            :status-enum="statusEnum ?? oaDocStatus"
            :agree-action="handleOpenBox"
          >
          </oaFlowTab>
        </template>
        <el-empty v-else :description="t('sys.empty.nodate')" />
      </el-tabs>
    </main>
    <footer></footer>
  </div>
</template>

<script setup lang="ts" name="LjToastOaFlow">
import { ref, onMounted, computed, watch } from "vue";
import { useDesign } from "@/hooks/useDesign";
import { CommonDynamicSelect, CommonBill } from "@/api/modules/common";
import { useUserStore } from "@/stores/modules/user";
import { useOaFlow } from "@/components/LjOaFlow/hooks/index";
import oaFlowTab from "./components/oaFlowTab.vue";
import { CloseBold } from "@element-plus/icons-vue";

// 接收父组件参数并设置默认值
interface LjOaFlowProps {
  /**
   * @description i18n
   */
  t: any;
  /**
   * @description 类型ID
   */
  powerid: number;
  /**
   * @description 分部id
   */
  scid?: any;
  /**
   * @description 单据id
   */
  billid?: any;
  /**
   * @argument boolean 是否自动执行请求 api ==> 非必传（默认为true）
   */
  requestAuto?: boolean;
  // /**
  //  * @argument boolean 是否显示按钮
  //  */
  // showFooter?: boolean;
  /**
   * @description 状态enum
   */
  statusEnum?: any;
  data?: any;
  /**
   * @description 是否隐藏关闭按钮
   */
  hideClose?: boolean;
}
const props = withDefaults(defineProps<LjOaFlowProps>(), {
  requestAuto: true,
  hideClose: false
  // showFooter: true
});
const emit = defineEmits(["close-toast"]);

// const { t } = useI18n();
const { userInfo } = useUserStore();
// const { prefixCls } = useDesign("toast-oa-flow");

const { itemData, oaFlowList, tabsValue, currentOaflow, oaDocStatus, isCurEmp, handleOpenBox, getOaFlowList } = useOaFlow(
  props.powerid
);

// watch(
//   [() => props.scid, () => props.billid],
//   (val: any) => {
//     console.log("watch oaflow val :>> ", val);
//     getOaFlowList(val[0], val[1]).then(() => {
//       if (oaFlowList.value.length > 0) {
//         let _index: any = tabsValue.value ?? 0;
//         console.log("onMounted oaFlowList.value :>> ", oaFlowList.value);
//         console.log("onMounted _index :>> ", _index);
//         let { docid } = oaFlowList.value[_index];
//         getOaFlowItem(docid);
//       }
//     });
//   },
//   {}
// );

const getOaFlowItem = async (docid: number) => {
  // 流转状况
  let { datatable } = await CommonDynamicSelect({
    dsname: "web_oa_flow_status_view_bill",
    queryparams: {
      docid: docid
    }
  });
  console.log("getOaFlowItem datatable :>> ", datatable);
  itemData.value = datatable;

  console.log("currentOaflow :>> ", currentOaflow.value);

  // if (currentOaflow.value) {
  //   let _data = currentOaflow.value;
  //   toast(
  //     {
  //       component: ToastErrCopy,
  //       props: {
  //         type: "info",
  //         title: "待你审批",
  //         message: _data.doctitle + "<br/>" + _data.flowstepname + ":" + _data.flowinfo,
  //         actions: [
  //           {
  //             label: t("common.agree"),
  //             value: 1,
  //             props: {
  //               type: "success"
  //             }
  //           },
  //           {
  //             label: t("common.oppose"),
  //             value: 0,
  //             props: {
  //               type: "danger"
  //             }
  //           }
  //         ]
  //       },
  //       listeners: {
  //         actionClick: (data: any) => {
  //           console.log("data :>> ", data);
  //           if (data.value) {
  //             // agree
  //             handleOpenBox(true);
  //           } else {
  //             // oppose
  //             handleOpenBox(false);
  //           }
  //         }
  //       }
  //     },
  //     {
  //       position: POSITION.BOTTOM_RIGHT,
  //       icon: false,
  //       timeout: 0,
  //       closeButton: false,
  //       toastClassName: "longjoe-toast"
  //     }
  //   );
  // }
};
const handleClickTabs = () => {
  console.log(tabsValue.value);
  // console.log("handleClickTabs pane :>> ", pane);
  let _index: any = tabsValue.value ?? 0;
  console.log("oaFlowList.value :>> ", oaFlowList.value);
  console.log("_index :>> ", _index);
  let { docid } = oaFlowList.value[_index];
  getOaFlowItem(docid);
};

onMounted(() => {
  console.log("onMounted props.data 初始化:>> ", props.data);
  if (props.data) {
    oaFlowList.value = props.data;
    oaFlowList.value.length > 0 && handleClickTabs();
  }
});
</script>

<style lang="scss" scoped>
.lj-toast-oa-flow {
  width: 240px;

  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }
}
</style>
