<template>
  <el-tab-pane>
    <template #label>
      <div class="flx-col flx-end-end text-h5-m">
        {{ item.doccode }}
        <span class="text-f-c text-secondary-text">
          {{ getStatus(item.docflag) }}
        </span>
      </div>
    </template>
    <!-- <el-steps :space="200" :active="1" align-center finish-status="success">
      <el-step title="Done">
        <template #icon>
          <el-icon :size="24">
            <SuccessFilled />
          </el-icon>
        </template>
      </el-step>
      <el-step title="Processing">
        <template #icon> <el-progress type="circle" :width="24" :percentage="25" :show-text="false" /> </template>
      </el-step>
      <el-step title="Step 3" />
    </el-steps> -->

    <div class="w-full h-full flx-col">
      <LjVxeTable
        ref="vxeTableRef"
        row-key="key"
        :columns="columns"
        :data="data"
        table-cls=""
        :table-props="tableProps"
        :tool-button="[]"
        :auto-load-layout="false"
      >
        <template #operation="scope">
          <slot name="operation" :data="scope" />
        </template>
      </LjVxeTable>
    </div>
  </el-tab-pane>
</template>

<script setup lang="tsx" name="oaFlowItem">
import { ref, useSlots } from "vue";
import { ElProgress, ElSteps, ElStep, ElTabs, ElTabPane } from "element-plus";
import LjVxeTable from "@/components/LjVxeTable/index.vue";
import { formatToDateTime, formatToDate } from "@/utils/dateUtil";
import { useI18n } from "vue-i18n";
import { ColumnProps } from "@/components/LjVxeTable/interface";
import { SuccessFilled, CircleCloseFilled, QuestionFilled } from "@element-plus/icons-vue";
import variables from "@/styles/js.module.scss";
import { oaFlowStatusViewBill } from "../interface/index";

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

const { t } = useI18n();
const props = withDefaults(defineProps<oaFlowItemProps>(), {
  item: {},
  current: undefined
});
const _variables: any = variables;

const rowClsNameFunc = (data: any) => {
  const { row, rowIndex, $rowIndex } = data;
  //   if (row.task_status == 2) {
  //     return "vxecol-disable";
  //   }
  return "";
};

let columns: ColumnProps<oaFlowStatusViewBill>[] = [
  {
    field: "oarowid",
    title: "当前步骤",
    table: "oa_doc",
    width: 100,
    render: scope => {
      let _keys = Object.keys(scope);
      let _data = _keys.includes("row") ? scope.row : _keys.includes("searchParam") ? scope.searchParam : scope;
      switch (Number(_data.oarowid)) {
        case 1:
          return <el-checkbox class={"el-checkbox__disabled-checked"} checked={true} disabled={true} />;
        default: // 0
          return "";
      }
    }
  },
  {
    field: "flowstepname",
    title: "流转步骤",
    table: "oa_doc"
  },
  {
    field: "empname",
    title: "审批人",
    table: "oa_doc"
  },
  {
    field: "passed",
    title: "审批",
    table: "oa_doc",
    width: 80,
    render: scope => {
      let _keys = Object.keys(scope);
      let _data = _keys.includes("row") ? scope.row : _keys.includes("searchParam") ? scope.searchParam : scope;
      let col;
      switch (Number(_data.passed)) {
        case 1:
          return (
            <el-icon color={_variables.colorPolarGreen7} size={24}>
              <SuccessFilled />
            </el-icon>
          );
        case 2:
          return (
            <el-icon color={_variables.colorVolcano6} size={24}>
              <CircleCloseFilled />
            </el-icon>
          );
        default: // 0
          return (
            <el-icon color={_variables.colorTextDisable} size={24}>
              <QuestionFilled />
            </el-icon>
          );
      }
    }
  },
  {
    field: "empcontent",
    title: "审批意见",
    table: "oa_doc"
  },
  {
    field: "dscrp",
    title: "备注",
    table: "oa_doc"
  },
  {
    field: "greetime",
    title: "审批时间",
    table: "oa_doc"
  },
  {
    field: "opemp",
    title: "发起人",
    table: "oa_doc"
  },
  {
    field: "opdt",
    title: "发起时间",
    table: "oa_doc",
    format: "yyyy-MM-dd HH:mm",
    width: 160
  },
  {
    field: "flowinfo",
    title: "审批描述",
    table: "oa_doc"
  },
  {
    field: "limittime",
    title: "审批限定时间",
    table: "oa_doc",
    format: "yyyy-MM-dd HH:mm",
    width: 160
  },
  {
    field: "modemp",
    title: "步骤修改人",
    table: "oa_doc",
    width: 100
  },
  {
    field: "moddate",
    title: "步骤修改时间",
    table: "oa_doc",
    format: "yyyy-MM-dd HH:mm",
    width: 160
  },
  { field: "operation", title: "操作", width: 160, fixed: "right" }
];

// const vxeTableRef = ref();
// watch(
//   () => props.current,
//   val => {
//     if (val) {
//       console.log("watch val :>> ", val);
//       columns.push({ field: "operation", title: "操作", width: 160, fixed: "right" });
//       nextTick(() => {
//         vxeTableRef.value.refresh();
//       });
//     }
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// );

// 通用行合并函数（将相同多列数据合并为一行）
const mergeRowMethod = ({ row, _rowIndex, column, visibleData }: any) => {
  const fields = ["flowstepname"];
  const cellValue = row[column.field];
  if (cellValue && fields.includes(column.field)) {
    const prevRow = visibleData[_rowIndex - 1];
    let nextRow = visibleData[_rowIndex + 1];
    if (prevRow && prevRow[column.field] === cellValue) {
      return { rowspan: 0, colspan: 0 };
    } else {
      let countRowspan = 1;
      while (nextRow && nextRow[column.field] === cellValue) {
        nextRow = visibleData[++countRowspan + _rowIndex];
      }
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 };
      }
    }
  }
};

const tableProps = {
  height: "auto",
  scrollX: {
    enabled: false
  },
  scrollY: {
    enabled: false
  },
  editConfig: { trigger: "click", mode: "cell" },
  spanMethod: mergeRowMethod,
  rowClassName: rowClsNameFunc
};

const getStatus = (status: number | string) => {
  console.log("props.statusEnum :>> ", props.statusEnum);
  console.log(
    "props.statusEnum?.find((item: any) => item.value === status)?.label :>> ",
    props.statusEnum?.find((item: any) => item.value === status)
  );
  return props.statusEnum?.find((item: any) => item.value === status)?.label || "";
};
</script>
