<!-- 小红书 -->
<script setup lang="ts">
import NodeTemplate from '../../NodeTemplate.vue'
import Icon from '@/components/ConnectionIcon.vue'

const Config = defineAsyncComponent(() => import('./Config.vue'))
const ConfigView = defineAsyncComponent(() => import('./ConfigView.vue'))
const Rule = defineAsyncComponent(() => import('./Rule.vue'))

const props = defineProps<{ node: any }>()

const action = inject('action') as string
const role = inject('role') as string
const templateType = inject('templateType') as string

// 是否置灰
const isGray = computed(() => {
  return templateType === '2' && role === 'student' && action === 'edit' && !props.node.data[role]
})

// 设置
const settingVisible = ref(false)
</script>

<template>
  <NodeTemplate :node="node" @setting="settingVisible = true">
    <div class="node-item">
      <Icon class="circle" name="circle" :color="isGray ? '#9a9a9a' : '#4C5AB3'" w="60" h="60"></Icon>
      <Icon class="icon" name="8" color="#fff" w="24" h="24"></Icon>
    </div>
  </NodeTemplate>
  <!-- 配置 -->
  <Config v-model="settingVisible" :node="node" v-if="settingVisible && action === 'edit'" />
  <!-- 查看配置 -->
  <ConfigView v-model="settingVisible" :node="node" v-if="settingVisible && action === 'view'" />
  <!-- 数据生成规则 -->
  <Rule v-model="settingVisible" :node="node" v-if="settingVisible && action === 'rule'" />
</template>
