<template>
  <n-modal v-model:show="state.dialogModal" :mask-closable="false">
    <n-card
      style="width: 80vw"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <template #header>
        <div
          class="col-12 row justify-center relative"
          style="border-bottom: 1px solid #dfd7f2"
        >
          <div style="font-size: 20px; font-weight: bold; color: #1f2225ff">
            批量加入审批发起人
          </div>
        </div>
      </template>

      <template #header-extra>
        <n-button @click="triggerCalcApproval" text style="font-size: 24px">
          <n-icon>
            <close-icon />
          </n-icon>
        </n-button>
      </template>
      <div class="row justify-center fl-pa-md" style="color: #333639">
        <div class="row col-12 fl-mt-lg">
          <div class="col-12">请选择审批类型</div>
          <div class="col-12 fl-mt-md overflow-auto" style="height: 60vh">
            <fln-table
              :config="state.tableConfig"
              :refreshCount="state.tableConfig.refreshCount"
              @triggerSelectCheck="handleTableSelectCheck"
            >
            </fln-table>
          </div>
        </div>

        <div class="col-12 row justify-center fl-mt-md">
          <n-button
            tertiary
            style="width: 161px; background: #c7c7c9ff; color: #fff"
            class="fl-mr-md"
            @click="triggerCalcApproval"
            >上一步</n-button
          >

          <n-button
            tertiary
            style="width: 161px; background: #46299dff; color: #fff"
            :disabled="state.selectedRows.length === 0"
            @click="triggerCalcApproval('submit')"
            >确定</n-button
          >
        </div>
      </div>
    </n-card>
  </n-modal>
</template>
<script setup>
// 岗位新建中 选模版时的添加审批
import {
  UpOutlined,
  DownOutlined,
  CloseCircleOutlined,
  PlusOutlined,
  DragOutlined,
} from "@ant-design/icons-vue";
import flnFormItem from "@/components/flnlayout/form/flnformItem.vue";
import flAboutApproval from "./aboutApproval.vue";
import draggable from "vuedraggable";
import { Close as CloseIcon } from "@vicons/ionicons5";
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
  nextTick,
} from "vue";
import { processError, processSuccess } from "@/utils/helper/message";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
import { ChevronDownOutline, ChevronUpOutline } from "@vicons/ionicons5";

import flnTable from "@/components/flnlayout/table/flntable.vue";
const emit = defineEmits(["triggerCalcApproval"]);
const state = reactive({
  btnLoading: false,
  dialogModal: true,
  tableConfig: {
    tableScrollWitdh: 600,
    rowKey: "ID",
    refreshCount: 0,
    listUrl: {
      resDataField: "GroupList",
      url: "/approval/v2/only-group",
    },
    columns: [
      {
        title: "审批类型分组",
        field: "Title",
      },
      {
        title: "",
        field: "",
      },
      {
        title: "",
        field: "",
      },
      {
        title: "",
        field: "",
      },
      {
        title: "",
        field: "",
      },
      {
        title: "",
        field: "",
      },
    ],
    expandConfig: {
      defaultSelectedRows: [],
      tableScrollWitdh: 600,
      rowKey: "ID",
      refreshCount: 0,
      listUrl: {
        resDataField: "TypeList",
        url: "/approval/v2/type/all",
        params: [
          {
            label: "domain",
            field: "Domain",
          },
          {
            label: "groupId",
            field: "ID",
          },
        ],
      },
      columns: [
        {
          type: "selection",
          width: 50,
          disabled(row) {
            return row.Auths[0].UserID !== 0 || row.Auths[0].IsAll !== 0;
          },
        },
        {
          title: "流程名称",
          field: "Title",
        },
        {
          title: "发起人",
          dataIndex: "Auths",
          key: "Auths",
          render(row) {
            return h(
              "div",
              {
                style:
                  "word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;",
                title: `${getAuths(row?.Auths)}`,
              },
              `${getAuths(row?.Auths)}`
            );
          },
        },
        {
          title: "审批节点",
          key: "ApprovalUsers",
          dataIndex: "ApprovalUsers",
          render(row) {
            return h("div", {}, `${getApprovalUsers(row?.ApprovalUsers)}`);
          },
        },
        {
          title: "抄送",
          dataIndex: "CopyUsers",
          key: "CopyUsers",
          render(row) {
            return h(
              "div",
              {},
              `${
                Array.isArray(row.CopyUsers)
                  ? row.CopyUsers.map((item) =>
                      item.ID !== 0
                        ? item.Name
                        : `${item.DepartmentName}-${item.PositionName}`
                    ).join(",")
                  : "-"
              }`
            );
          },
        },
        {
          title: "备注",
          dataIndex: "Remark",
          key: "Remark",
        },
      ],
    },
  },
  selectedRows: [],
});
onBeforeMount(() => {
  state.dialogModal = true;
});

onMounted(() => {});
const getAuths = (auths) => {
  if (auths) {
    if (auths && auths.length === 1 && auths[0].IsAll === 1) {
      return "全公司人员";
    } else {
      return auths
        .filter((item) => item.IsAll === 0)
        .map((item) =>
          item.Name ? item.Name : item.DepartmentName + item.PositionName
        )
        .filter(Boolean)
        .join("—");
    }
  }
};
const getApprovalUsers = (userList) => {
  let user = "";
  if (userList) {
    user = userList
      .filter((item) => item.DepartmentUID !== "undefined")
      .map((item) => {
        return {
          flow:
            item.IsDirect === 1 && item.IsDesignate === 1
              ? `直属第${item.Level}级`
              : item.IsDirect === 1
              ? `直属${item.Level}级`
              : item.Name
              ? item.Name
              : item.DepartmentName + item.PositionName,
        };
      })
      .map((item) => item.flow)
      .join("—");
  } else {
    user = "";
  }
  return user;
};
const triggerCalcApproval = (type) => {
  if (type === "submit") {
    emit("triggerCalcApproval", state.selectedRows);
  } else {
    emit("triggerCalcApproval", []);
  }
};
const handleTableSelectCheck = (data) => {
  if (data && Array.isArray(data.selectedRow)) {
    data.selectedRow = data.selectedRow.filter((item) => {
      if (item) {
        return item;
      }
    });
  }
  if (data.action === "check" || data.action === "checkAll") {
    state.selectedRows = state.selectedRows.concat(data.selectedRow);
    state.selectedRows = state.selectedRows.filter((item, index, arr) => {
      return (
        arr.findIndex((obj) => JSON.stringify(obj) === JSON.stringify(item)) ===
        index
      );
    });
  }
  if (data.action === "uncheck") {
    state.selectedRows = state.selectedRows.filter((item) => {
      return item.ID !== data.selectedRow.ID;
    });
  }
  if (data.action === "uncheckAll") {
    state.selectedRows = state.selectedRows.filter((item) => {
      return (
        data.selectedRow.findIndex((obj) => {
          return obj.ID === item.ID;
        }) === -1
      );
    });
  }
  state.tableConfig.expandConfig.defaultSelectedRows = state.selectedRows;
};
</script>

<style lang="scss" scoped>
:deep(
    .fln-table
      .n-data-table-table
      .n-checkbox.n-checkbox--disabled
      .n-checkbox-box
  ) {
  background-color: #d5d5d5 !important;
}
</style>
