<template>
  <div :class="`${prefixCls} h-full`">
    <el-tabs v-model="tabsValue" tab-position="left" class="demo-tabs" @tab-click="handleClickTabs">
      <template v-if="oaFlowList.length">
        <oaFlowItem
          v-for="(item, index) in oaFlowList"
          :key="index"
          :name="index"
          :item="item"
          :data="itemData"
          :current="currentOaflow"
          :status-enum="statusEnum ?? oaDocStatus"
        >
          <template #operation="{ data }">
            <template v-if="isCurEmp(data.row)">
              <el-button class="tag-item" type="success" @click="handleOpenBox(true)">同意</el-button>
              <el-button class="tag-item" type="danger" @click="handleOpenBox(false)">否决</el-button>
            </template>
          </template>
        </oaFlowItem>
      </template>
      <el-empty v-else :description="$t('sys.empty.nodate')" />
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="LjOaFlow">
import { ref, onMounted, computed, watch } from "vue";
import { useDesign } from "@/hooks/useDesign";
import { ElProgress, ElSteps, ElStep, ElTabs, ElTabPane, ElMessage, ElMessageBox } from "element-plus";
import oaFlowItem from "./components/oaFlowItem.vue";
import { CommonDynamicSelect, CommonBill } from "@/api/modules/common";
import { useUserStore } from "@/stores/modules/user";
import { TYPE, useToast, POSITION } from "vue-toastification";
import ToastErrCopy from "@/components/ToastWidget/ToastErrCopy/index.vue";
import mittBus from "@/utils/mittBus";
import { MittEnum } from "@/enums/mittEnum";
import { useI18n } from "vue-i18n";
import { onActivated } from "vue";
import { useOaFlow } from "./hooks/index";

// 接收父组件参数并设置默认值
interface LjOaFlowProps {
  /**
   * @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;
}
const props = withDefaults(defineProps<LjOaFlowProps>(), {
  requestAuto: true
  // showFooter: true
});

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

// const isCurEmp = computed(() => {
//   return itemData.value.some((item: any) => Number(item.oarowid) === 1 && Number(item.empid) === useUserStore().userInfo.empid);
// });

const { prefixCls } = useDesign("oa_flow");
const toast = useToast();
const { t } = useI18n();

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 getOaFlowList = async (scid: number, billid: number) => {
//   if (!billid) return;
//   // 流转状况
//   let { datatable } = await CommonDynamicSelect({
//     dsname: "web_doc_view_bill",
//     queryparams: {
//       powerid: props.powerid,
//       scid: scid,
//       billid: billid
//     }
//   });
//   console.log("getOaFlowList datatable :>> ", datatable);
//   oaFlowList.value = datatable;

//   mittBus.emit(MittEnum.OAFlowChange, datatable);
// };

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 = (pane: any) => {
  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(() => {
  if (props.requestAuto) {
    getOaFlowList(props.scid, props.billid).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);
      }
    });
  }
});

onActivated(() => {
  console.log("oaflow onActivated :>> ", oaFlowList.value);
  mittBus.emit(MittEnum.OAFlowChange, oaFlowList.value);
});

defineExpose({
  oaDocStatus,
  getOaFlowList
});
</script>

<style lang="scss">
$prefix-cls: "#{$namespace}-oa_flow";

.#{$prefix-cls} {
  .el-tabs {
    height: 100%;
  }
  .el-tabs__content,
  .el-tab-pane {
    height: 100%;
  }
}
</style>
