<template>
  <a-form v-model="computedModelValue" :config="config" :disabled="disabled" :span="24">
    <template #permissionFlag>
      <el-select
        v-if="computedModelValue.collaborativeWay === '1'"
        v-model="computedModelValue.permissionFlagArr"
        multiple
        clearable
        filterable
        :disabled="disabled"
      >
        <el-option-group
          v-for="groupOption in groupOptions"
          :key="groupOption.label"
          :label="groupOption.label"
          :disabled="disabled"
        >
          <el-option
            v-for="item in groupOption.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-option-group>
      </el-select>
      <el-select
        v-else
        v-model="computedModelValue.permissionFlagArr"
        multiple
        clearable
        filterable
        :disabled="disabled"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </template>
  </a-form>
</template>

<script setup lang="ts">
import AForm from '@/components/AForm/index.vue'
import { StrAnyObj } from '@/typings'
import { FormConfigType } from '@/components/AForm/type'
import { getListApi as getRoleListApi } from '@/api/system/role'
import { getListApi as getUserListApi } from '@/api/system/user'
import { getListApi as getDeptListApi } from '@/api/system/dept'

const groupOptions = ref([])
const options = ref([])

const props = withDefaults(
  defineProps<{
    modelValue: StrAnyObj
    disabled: boolean
  }>(),
  {
    disabled: false
  }
)

const emits = defineEmits(['update:modelValue'])

const computedModelValue = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emits('update:modelValue', newValue)
  }
})

const config: FormConfigType[] = [
  {
    type: 'input',
    prop: 'nodeCode',
    label: '节点编码'
  },
  {
    type: 'input',
    prop: 'nodeName',
    label: '节点名称'
  },
  {
    type: 'radio',
    prop: 'collaborativeWay',
    label: '协作方式',
    option: [
      {
        key: '1',
        label: '或签',
        disabled: () => props.modelValue.collaborativeWay !== '1'
      },
      {
        key: '2',
        label: '票签',
        disabled: () => props.modelValue.collaborativeWay !== '2'
      },
      {
        key: '3',
        label: '会签',
        disabled: () => props.modelValue.collaborativeWay !== '3'
      }
    ]
  },
  {
    type: 'inputNumber',
    prop: 'nodeRatioNumber',
    label: '票签占比',
    min: 0.01,
    max: 99.99,
    precision: 2,
    if: () => props.modelValue.collaborativeWay === '2'
  },
  {
    type: 'slot',
    prop: 'permissionFlag',
    label: '办理人选择'
  },
  {
    type: 'radio',
    prop: 'skipAnyNode',
    label: '跳转任意节点',
    option: [
      { key: 'N', label: '否' },
      { key: 'Y', label: '是' }
    ]
  },
  {
    type: 'select',
    prop: 'listenerTypeArr',
    label: '监听器类型',
    multiple: true,
    option: [
      { key: 'create', label: '创建' },
      { key: 'start', label: '开始' },
      { key: 'assignment', label: '分派' },
      { key: 'finish', label: '完成' },
    ]
  },
  {
    type: 'input',
    itemType: 'textarea',
    prop: 'listenerPath',
    label: '监听器路径',
    rows: 8
  },
  {
    type: 'radio',
    prop: 'formCustom',
    label: '审批表单',
    option: [
      { key: '1', label: '流程表单' },
      { key: '2', label: '节点表单' }
    ]
  },
  {
    type: 'input',
    prop: 'formPath',
    label: '节点表单路径',
    if: () => props.modelValue.formCustom === '2'
  }
]

// 选择角色权限范围触发
async function getPermissionFlag() {
  const roleListApi = getRoleListApi({ status: 1 })
  const userListApi = getUserListApi({ status: 1 })
  const deptListApi = getDeptListApi({ status: 1 })

  options.value = (await userListApi).map((item) => {
    return {
      value: item.id,
      label: `用户:${item.nickname}`
    }
  })

  groupOptions.value.push({
    label: '用户',
    options: options.value
  })

  groupOptions.value.push({
    label: '部门',
    options: (await deptListApi).map((item) => {
      return {
        value: `dept:${item.id}`,
        label: `部门:${item.name}`
      }
    })
  })

  groupOptions.value.push({
    label: '角色',
    options: (await roleListApi).map((item) => {
      return {
        value: `role:${item.id}`,
        label: `角色:${item.name}`
      }
    })
  })
}

getPermissionFlag()
</script>
