<script setup lang="ts">
import { Warning } from '@element-plus/icons-vue'
import EventRule from './EventRule.vue'
import { wayList } from '@/utils/dictionary'

const eventAttrRule = defineModel<any>({
  default: () => ({
    event_attr_rule: {
      current_logic_operate: 'and',
      happen_info: { is_happened: true, event_id: '-1', event_name: '所有事件', attr_list: [] },
      trigger_info: { operate: '', operate_name: '', value: '' }
    },
    tag_rule: { way: '' }
  })
})

const form: any = reactive({
  event_attr_rule: {
    current_logic_operate: 'and',
    items: [
      {
        happen_info: { is_happened: true, event_id: '-1', event_name: '所有事件', attr_list: [] },
        trigger_info: { operate: '', operate_name: '', value: '' }
      }
    ]
  },
  tag_rule: { way: '' }
})

const { current_logic_operate, ...rest } = eventAttrRule.value.event_attr_rule
Object.assign(form, { tag_rule: eventAttrRule.value.tag_rule, event_attr_rule: { current_logic_operate, items: [rest] } })

const first = computed(() => form.event_attr_rule.items[0])

watch(
  form,
  () => {
    eventAttrRule.value = {
      event_attr_rule: { current_logic_operate: form.event_attr_rule.current_logic_operate, ...first.value },
      tag_rule: form.tag_rule
    }
  },
  { deep: true }
)
</script>

<template>
  <p class="rule-tips">
    <el-icon><Warning /></el-icon>
    事件指标标签：将事件指标作为用户的标签。
  </p>
  <!-- 事件属性规则 -->
  <EventRule :limit="1" v-model="form.event_attr_rule" style="margin-top: 20px">
    <template #footer>
      <el-row align="middle" style="margin-top: 10px" v-if="first.happen_info.event_id">
        <p>将</p>
        <el-button type="info" style="margin: 0 10px">{{ first.happen_info.event_name }}</el-button>
        <el-select v-model="form.tag_rule.way" style="margin-right: 10px; width: 130px">
          <el-option v-for="item in wayList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <p>作为用户标签</p>
      </el-row>
    </template>
  </EventRule>
</template>

<style src="@/assets/styles/rule.scss"></style>
