<template>
  <!-- 选择审核部门模态框 -->
  <BasicModal 
    v-bind="$attrs" 
    @register="registerModal" 
    title="选择审核部门" 
    @ok="handleSubmit" 
    :okText="okTextVal"
    :destroyOnClose="true" 
    :confirmLoading="iconLoading"
    width="1000px"
  >
    <template #footer>
        <a-button type="primary" :loading="iconLoading" @click="handleSubmit">确认</a-button>
    </template>
    <!-- 部门选择界面 -->
    <div class="dept-box" v-if="okTextVal === '确认'">
      <!-- 左侧部门树 -->
      <div class="dept-left">
        <BasicTree 
          ref="asyncExpandTreeRef" 
          title="部门列表" 
          treeWrapperClassName="h-[calc(100%-35px)] overflow-auto" 
          :clickRowToExpand="false" 
          :treeData="treeDeptData"
          :fieldNames="{ key: 'id', title: 'name' }" 
          :checkable="true" 
          :checkStrictly="true" 
          @check="handleDeptSelect"
          :expandedKeys="expandedKeys" 
          @expand="expand"
        />
      </div>
      <!-- 右侧已选部门 -->
      <div class="dept-right">
        <a-divider>选中部门({{ orgList.length }}个)</a-divider>
        <div class="dept-right-content">
          <a-tag 
            color="processing" 
            closable 
            v-for="item in orgList" 
            :key="item.id" 
            @close="closeTag(item)"
          >
            {{ item.name }}
          </a-tag>
        </div>
      </div>
    </div>

  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, unref, nextTick } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicTree, TreeItem, TreeActionType } from '@/components/Tree';
import { useMessage } from '@/hooks/web/useMessage';
import { handleWorkitem, listSupervisionOrg } from '@/api/demo/handlingmanagement';

// 组件名称定义
defineOptions({ name: 'OrgPositonModal' });

// 定义事件
const emit = defineEmits(['success', 'register', 'select']);

// 定义属性
const props = defineProps({
  workItemId: Number,
});

// 状态管理
const treeDeptData = ref<TreeItem[]>([]); // 部门树数据
const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null); // 部门树引用
const { createMessage } = useMessage(); // 消息提示
const okTextVal = ref('确认'); // 确认按钮文本
const defaultOrg = ref([]); // 默认选中的部门
const expandedKeys = ref<any>([]); // 展开的节点键值
const orgList = ref<any[]>([]); // 已选部门列表
const rowId = ref(''); // 记录ID
const iconLoading = ref(false); // 图标加载状态

/**
 * 展开节点处理函数
 * @param expandedKeys 已展开的节点键值数组
 * @param params 展开参数
 */
function expand(expandedKeys: any[], { expanded, node }: { expanded: boolean; node: any }) {
  if (expanded) {
    // 处理父节点展开逻辑
    if (node.parent && node.parent.children) {
      for (let i = 0; i < expandedKeys.length; i++) {
        for (let j = 0; j < node.parent.children.length; j++) {
          if (expandedKeys[i] === node.parent.children[j].key) {
            expandedKeys.splice(i, 1);
          }
        }
      }
    }
    // 添加当前节点到展开列表
    expandedKeys.push(node.key);
  }
}

/**
 * 获取部门选项数据
 * 从服务器获取部门列表
 */
const getDeptOptions = async () => {
  const data = await listSupervisionOrg({});
  treeDeptData.value = data;
  
  // 异步更新DOM后处理
  nextTick(() => {
    // 只展开第一级节点
    unref(asyncExpandTreeRef)?.filterByLevel(1);
    // 设置默认选中的部门
    unref(asyncExpandTreeRef)?.setCheckedKeys(defaultOrg.value);
    
    // 初始化已选部门列表
    const keys = defaultOrg.value;
    const arr: any[] = [];
    keys.forEach((element) => {
      arr.push(unref(asyncExpandTreeRef)?.getSelectedNode(element));
    });
    orgList.value = arr;
  });
};

/**
 * 部门选择处理函数
 * @param checkedKeys 选中的节点键值
 */
async function handleDeptSelect(checkedKeys: any) {
  // 处理不同格式的选中键值
  const keys = checkedKeys.checked ? checkedKeys.checked : checkedKeys;
  const arr: any[] = [];
  
  // 构建已选部门列表
  keys.forEach((element) => {
    arr.push(unref(asyncExpandTreeRef)?.getSelectedNode(element));
  });
  
  orgList.value = arr;
}



// 模态框注册
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  // 重置加载状态
  setModalProps({ confirmLoading: false });
  // 清空已选部门
  orgList.value = [];
  // 保存记录ID
  rowId.value = data.record.id;
  // 获取部门选项
  getDeptOptions();
  // 设置确认按钮文本
  okTextVal.value = '确认';
});

/**
 * 提交处理函数
 * 提交选中的部门进行转发操作
 */
async function handleSubmit() {
  try {
    // 构建部门ID数组
    const orgIds: any[] = [];
    orgList.value.forEach((element) => {
      orgIds.push(element.id);
    });
    if(orgIds.length == 0){
      return createMessage.warning('请先选择转发部门');
    }
    // 构建请求参数
    const query = {
      workitemId: props.workItemId,
      orgIds: orgIds,
    };
    iconLoading.value = true;
    // 调用转发接口
    handleWorkitem(query).then((data) => {
      if (data) {
        setTimeout(() => {
          iconLoading.value = false;
          // 设置加载状态
          setModalProps({ confirmLoading: true });
          // 关闭模态框
          closeModal();
          // 触发成功事件
          emit('success');
          // 显示成功消息
          return createMessage.success('转发成功');
      }, 2000);
       
      } else {
        // 显示失败消息
        iconLoading.value = false;
        return createMessage.error('转发失败');
      }
    });
  } finally {
    // 重置加载状态
    setModalProps({ confirmLoading: false });
  }
}

/**
 * 关闭标签处理函数
 * 移除已选部门并更新选择状态
 * @param data 部门数据
 */
function closeTag(data: any) {
  // 查找部门在列表中的索引
  const currentIndex = (orgList.value || []).findIndex((element) => element.id === data.id);
  if (currentIndex !== -1) {
    // 从列表中移除
    orgList.value.splice(currentIndex, 1);
    // 更新树的选中状态
    const keys = orgList.value.map((item) => item.id);
    unref(asyncExpandTreeRef)?.setCheckedKeys(keys);
  }
}
</script>

<style lang="less" scoped>
.dept-box {
  display: flex;
  height: 60vh;

  .dept-left {
    width: 60%;
    height: 100%;
  }

  .dept-right {
    width: 38%;
    padding-top: 10px;
    margin-left: 2%;
    height: 100%;

    ::v-deep .ant-tag {
      margin-top: 10px;
      padding: 4px;
    }

    .dept-right-content {
      height: 90%;
      overflow: auto;
    }
  }
}
</style>
