<template>
  <el-dialog v-model="dialogTableVisible" title="提交审批">
    <el-row v-if="tableList.main.length > 0">
      <el-col :span="24">
        <el-table ref="tableRef" :data="tableList.main" v-if="tableList.main.length > 0">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column property="nodeName" label="节点名称" width="200" />
          <el-table-column property="processType" label="审批类型" width="200" />
          <el-table-column property="handlerNames" label="审批人">
            <template #default="{ row, $index }">
              <span>{{ row.handlerNames }}</span>
              <el-button
                type="text"
                v-if="!(row.nodeName == '开始' || row.nodeName == '结束')"
                @click="handleSelectUser($index)"
              >
                选择
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="申请原因" prop="auditNote" label-width="90">
          <el-input v-model="auditNote" type="textarea" />
        </el-form-item>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit">提交</el-button>
      </span>
    </template>
    <FastTransferUser v-model="showFastTransferUserDialog" :selectList="flowUserConfigSelectList" @confirm="handleConfirmUser"></FastTransferUser>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, ElTable } from 'element-plus'
const tableRef = ref<InstanceType<typeof ElTable>>()
let dialogTableVisible = ref(false)
let tableList = ref({ main: [] as any[], subFb: [] })
let auditNote = ref('')
// 定义需要暴露出去的方法
const tabsExpose: Object = {
  open: (opt): void => {
    tableList.value = { main: [], subFb: [] }
    // 判断当前tab是否存在
    dialogTableVisible.value = true
    // debugger
    tableList.value = opt.tableList
  },
  close: (): void => {
    // 判断当前tab是否存在
    dialogTableVisible.value = false
  }
}

const showFastTransferUserDialog = ref(false);
const flowUserConfigIndex = ref() as Ref<number>;
const flowUserConfigSelectList = ref([]);
const handleSelectUser = (index: number) => {
  flowUserConfigIndex.value = index;
  const handlerNamesList = tableList.value.main[index].handlerNames ? tableList.value.main[index].handlerNames.split(';') : [];
  const handlerIdsList = tableList.value.main[index].handlerIds ? tableList.value.main[index].handlerIds.split(';') : [];
  flowUserConfigSelectList.value = handlerNamesList.map((subItem: any,subIndex: number) => {
    return {
      realName: subItem,
      username: handlerIdsList[subIndex]
    }
  });
  showFastTransferUserDialog.value = true;
}
const handleConfirmUser = (list: any[]) => {
  tableList.value.main[flowUserConfigIndex.value].handlerNames = list.map(i => i.realName).join(';');
  tableList.value.main[flowUserConfigIndex.value].handlerIds = list.map(i => i.username).join(';');
  tableList.value.main[flowUserConfigIndex.value].changeHandlerIds = list.map(i => i.username).join(';');
}

const emit = defineEmits(['submit'])
const submit = () => {
  for (var i = 0; i < tableList.value.main.length; i++) {
    if (tableList.value.main[i].mustSelected && tableList.value.main[i].handlerIds.length == 0) {
      ElMessage.warning(tableList.value.main[i].nodeName + '节点审批人不能为空！')
      return
    }
    if (i > 0 && tableList.value.main[i].handlerIds.length > 0) {
      tableList.value.main[i].changeHandlerIds = '111'
    }
  }
  dialogTableVisible.value = false

  emit('submit', tableList, auditNote)
}

defineExpose(tabsExpose)
</script>

