<template>
  <el-dialog
    :model-value="visible"
    title="选择审批节点"
    :width="600"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :append-to-body="true"
    @open="onOpen"
    @close="onClose"
  >
    <el-form ref="routeRef" :model="state.routeForm">
      <el-form-item label="流转节点" prop="nextNodeCode">
        <el-select v-model="state.routeForm.nextNodeCode" @change="onChangeNextNode">
          <el-option v-for="item in state.routeList" :key="item.code" :value="item.code" :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="审批用户" prop="nextOguList">
        <el-select
          v-model="state.routeForm.nextOguList"
          multiple
          :disabled="!state.routeForm.nextNodeCode"
          filterable
        >
          <el-option v-for="ogu in oguList" :key="ogu.fullPathName" :value="ogu.fullPathName" :label="ogu.oguName" />
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button type="primary" @click="onSave">确定</el-button>
      <el-button @click="onClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { type FormInstance } from 'element-plus'

import { type NextRouteData, type RuntimeOgu, type RuntimeRouteNode, useLoading } from '@cacp/ui'

const props = defineProps<{
  visible: boolean
  getRouteList: () => Promise<Array<RuntimeRouteNode>>
}>()

const emits = defineEmits<{
  (e: 'on-save', res: NextRouteData): void
  (e: 'on-close'): void
}>()

const { loading, setLoading } = useLoading()
const routeRef = ref<FormInstance>()
const state = reactive<{
  routeList: Array<RuntimeRouteNode>
  routeForm: {
    nextNodeCode: string
    nextOguList: Array<string>
  }
}>({
  routeList: [],
  routeForm: {
    nextNodeCode: '',
    nextOguList: []
  }
})

const oguList = computed(() => {
  if (!state.routeForm.nextNodeCode) {
    return []
  }

  const r = state.routeList.find((r) => r.code === state.routeForm.nextNodeCode)
  return r?.assigns ?? []
})

async function onOpen() {
  state.routeList = []
  state.routeForm.nextNodeCode = ''
  state.routeForm.nextOguList = []

  await loadData()
}

function onClose() {
  emits('on-close')
}

function onSave() {
  const r = state.routeList.find(i => i.code === state.routeForm.nextNodeCode)
  const nextOguList = r?.assigns.filter((a: RuntimeOgu) => state.routeForm.nextOguList.some(no => no === a.fullPathName)) ?? []
  const res: NextRouteData = {
    nextNodeCode: state.routeForm.nextNodeCode,
    nextOguList: nextOguList
  }

  emits('on-save', res)
}

async function loadData() {
  setLoading(true)
  const res = await props.getRouteList()
  state.routeList = res
  setLoading(false)
}

function onChangeNextNode(code: string) {
  if (!code) {
    state.routeForm.nextOguList = []
  } else {
    const r = state.routeList.find(i => i.code === code)
    state.routeForm.nextOguList = r?.assigns.map((a: RuntimeOgu) => a.fullPathName) ?? []
  }
}
</script>
