<script setup>
import { nanoid } from 'nanoid'
import Step4FormAttr from './Step4FormAttr.vue'
import Step4FormEvent from './Step4FormEvent.vue'
import { useMemberAttrs, useEvents } from '../composables/useData'
import { useLabelStore } from '../stores/label'
import { useCheckStep } from '../composables/useData'
const { isCheck } = useCheckStep(4)

const labelStore = useLabelStore()
const { addLabel, updateLabel } = labelStore

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

const form = reactive({
  id: nanoid(4),
  type_id: '',
  type_name: '',
  name: '',
  data_type: '用户属性',
  attr_id: '',
  attr_name: '',
  attr_type: '',
  event_id: '',
  event_name: '',
  desc: ''
})
watchEffect(() => {
  Object.assign(form, props.data)
})

const formRef = ref(null)
const rules = reactive({
  name: [{ required: true, message: '请输入', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入', trigger: 'blur' }]
})

const { memberAttrs } = useMemberAttrs()

const handleAttrChange = value => {
  const found = memberAttrs.value.find(item => item.id === value)
  form.attr_name = found.name
  form.attr_type = found.type
  form.attr_type_name = found.type_name
}

const { events } = useEvents()

const handleEventChange = value => {
  const found = events.value.find(item => item.id === value)
  form.event_name = found.name
}

const handleSubmit = async () => {
  await formRef.value.validate()
  props.data.id ? updateLabel(toRaw(form)) : addLabel(toRaw(form))
  emit('update:modelValue', false)
}
</script>

<template>
  <el-dialog title="设计标签" width="800" @closed="$emit('update:modelValue', false)">
    <el-form label-suffix=":" label-width="160" :model="form" :rules="rules" ref="formRef" :disabled="isCheck">
      <el-form-item label="标签所属目录">
        <el-select-v2 v-model="form.type_name" :options="labelStore.types" :props="{ label: 'name', value: 'name' }" disabled></el-select-v2>
      </el-form-item>
      <el-form-item label="标签名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="关联数据类型" prop="data_type">
        <el-radio-group v-model="form.data_type">
          <el-radio label="用户属性" value="用户属性"></el-radio>
          <el-radio label="用户行为事件" value="用户行为事件"></el-radio>
          <el-radio label="其他" value="其他"></el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 用户属性 -->
      <template v-if="form.data_type == '用户属性'">
        <el-form-item label="用户属性字段">
          <el-select-v2 v-model="form.attr_id" :options="memberAttrs" :props="{ label: 'name', value: 'id' }" @change="handleAttrChange"></el-select-v2>
        </el-form-item>
        <el-form-item label="字段类型">{{ form.attr_type_name }}</el-form-item>
        <Step4FormAttr :attrId="form.attr_id" :attrType="form.attr_type"></Step4FormAttr>
      </template>
      <!-- 用户行为事件 -->
      <template v-if="form.data_type == '用户行为事件'">
        <el-form-item label="用户行为事件">
          <el-select-v2 v-model="form.event_id" :options="events" :props="{ label: 'name', value: 'id' }" @change="handleEventChange"></el-select-v2>
        </el-form-item>
        <Step4FormEvent :eventId="form.event_id"></Step4FormEvent>
      </template>

      <el-form-item label="标签设置规则及说明" prop="desc">
        <el-input type="textarea" v-model="form.desc" show-word-limit maxlength="100" :rows="4"></el-input>
      </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" :disabled="isCheck">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
