<script setup lang="ts">
import ConfigTemplate from '../../ConfigTemplate.vue'
import { useMaterial, useConnection } from '../../../composables/useAllData'
import { useMapStore } from '@/stores/map'

const MaterialPreview = defineAsyncComponent(() => import('@/components/MaterialPreview.vue'))

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

const role = inject('role') as string

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

const materialTypeList = useMapStore().getMapValuesByKey('experiment_marketing_material_type')

const { materialList, materialType } = useMaterial()
watchEffect(() => {
  materialType.value = form.material_type
})

const { connectionList } = useConnection(1)

const material = computed(() => materialList.value.find(item => item.id === form.material_id))
</script>

<template>
  <ConfigTemplate :model="form" :node="node" :stepNum="1">
    <template #default="{ step }: { step: number }">
      <template v-if="step === 0">
        <el-form-item>
          <el-radio-group v-model="form.material_type" @change="form.material_id = ''">
            <el-radio v-for="item in materialTypeList" :key="item.id" :value="item.value" style="width: 105px">
              发送{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="请选择资料内容" v-model="form.material_id" style="width: 100%">
            <el-option v-for="item in materialList" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
          <MaterialPreview :data="material" v-if="material"></MaterialPreview>
        </el-form-item>
      </template>
      <template v-else-if="step === 1">
        <el-form-item>
          <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>
        </el-form-item>
      </template>
    </template>
  </ConfigTemplate>
</template>
