<script setup lang="ts">
import ConfigTemplate from '../../ConfigTemplate.vue'
import { useConnection } from '../../../composables/useAllData'

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

const role = inject('role') as string

const form = reactive({
  operate: '',
  connection_id: '',
  message: ''
})
watchEffect(() => {
  Object.assign(form, props.node.data[role])
})

const { connectionList } = useConnection(1)

const operateList = ref([
  { label: '关注公众号', value: '0' },
  { label: '留言文本', value: '1' },
  { label: '留言图片', value: '2' },
  { label: '留言语音', value: '3' },
  { label: '留言视频', value: '4' },
  { label: '点击菜单', value: '5' },
  { label: '点击菜单会话项', value: '6' },
  { label: '扫描二维码', value: '7' },
  { label: '取消关注', value: '8' },
  { label: '其他', value: '9' }
])
</script>

<template>
  <ConfigTemplate :model="form" :node="node" :stepNum="2">
    <template #default="{ step }: { step: number }">
      <el-form-item>
        <template v-if="step === 0">
          <el-radio-group v-model="form.operate" v-if="step === 0">
            <el-radio v-for="item in operateList" :key="item.value" :value="item.value" style="width: 105px">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </template>
        <template v-else-if="step === 1">
          <el-select placeholder="请选择" style="width: 100%" v-model="form.connection_id">
            <el-option v-for="item in connectionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </template>
        <template v-else-if="step === 2">
          <el-input v-model="form.message" placeholder="请输入"></el-input>
        </template>
      </el-form-item>
    </template>
  </ConfigTemplate>
</template>
