<script setup>
import { useMaterialStore } from '../stores/material'
import { useTripStore } from '../stores/trip'
import { useMapStore } from '@/stores/map'
const materialTypeList = useMapStore().getMapValuesByKey('experiment_marketing_material_type')
const tripStore = useTripStore()
const materialStore = useMaterialStore()
const { addMaterial, updateMaterial } = materialStore

const emit = defineEmits(['update:modelValue'])
const props = defineProps(['data'])

const form = reactive({
  node1: '',
  node1_id: '',
  node2: '',
  node2_id: '',
  type: '',
  style: '',
  desc: '',
  update_rule: '低'
})
watchEffect(() => {
  Object.assign(form, props.data)
})

const formRef = ref(null)
const rules = reactive({
  node1_id: [{ required: true, message: '请选择', trigger: 'blur' }],
  node2_id: [{ required: true, message: '请选择', trigger: 'blur' }],
  type: [{ required: true, message: '请选择', trigger: 'blur' }],
  style: [{ required: true, message: '请选择', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入', trigger: 'blur' }],
  update_rule: [{ required: true, message: '请选择', trigger: 'blur' }]
})

const handleSubmit = async () => {
  await formRef.value.validate()
  props.data?.id ? updateMaterial(toRaw(form)) : addMaterial(toRaw(form))
  emit('update:modelValue', false)
}
const styleList = ['专业权威', '详细深入', '时尚年轻', '种草分享', '网红推荐', '生动有趣']

const node2List = computed(() => {
  return tripStore.node2List(form.node1_id)
})

function handleNode1Change(nodeId) {
  const found = tripStore.node1List.find(node => node.id === nodeId)
  if (!found) return
  form.node1 = found.label || found.data?.label
  form.node2 = ''
  form.node2_id = ''
}
function handleNode2Change(nodeId) {
  const found = node2List.value.find(node => node.id === nodeId)
  if (!found) return
  form.node2 = found.label || found.data?.label
}
</script>

<template>
  <el-dialog title="自动化营销旅程设计-营销物料" width="600" @closed="$emit('update:modelValue', false)">
    <el-form label-suffix=":" label-width="140" :model="form" :rules="rules" ref="formRef">
      <el-form-item label="一级流程节点" prop="node1_id">
        <el-select-v2
          v-model="form.node1_id"
          :options="tripStore.node1List"
          :props="{ label: 'label', value: 'id' }"
          @change="handleNode1Change"></el-select-v2>
      </el-form-item>
      <el-form-item label="二级流程节点" prop="node2_id">
        <el-select-v2 v-model="form.node2_id" :options="node2List" :props="{ label: 'label', value: 'id' }" @change="handleNode2Change"></el-select-v2>
      </el-form-item>
      <el-form-item label="营销物料类型" prop="type">
        <el-select-v2 v-model="form.type" :options="materialTypeList" :props="{ label: 'label', value: 'label' }"></el-select-v2>
      </el-form-item>
      <el-form-item label="营销物料风格" prop="style">
        <el-radio-group v-model="form.style">
          <el-radio v-for="item in styleList" :label="item" :value="item" :key="item"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="营销物料侧重点" prop="desc">
        <el-input v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="营销物料更新频率" prop="update_rule">
        <el-radio-group v-model="form.update_rule">
          <el-radio label="低" value="低"></el-radio>
          <el-radio label="中" value="中"></el-radio>
          <el-radio label="高" value="高"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
