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

import { useMetaEvent } from '@/composables/useAllData'
const { metaEventList } = useMetaEvent()

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: { event_id: '', event_name: '', attr_id: '', attr_name: '', type: 1, value: undefined }
  })
})

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: undefined }
      }
    ]
  },
  tag_rule: { event_id: '', event_name: '', attr_id: '', attr_name: '', type: 1, value: '' }
})

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 }
)

watch(
  () => first.value.happen_info.event_id,
  () => {
    form.tag_rule.event_id = first.value.happen_info.event_id
    form.tag_rule.event_name = first.value.happen_info.event_name
    form.tag_rule.attr_id = ''
    form.tag_rule.attr_name = ''
  }
)

// 获取事件属性列表
function getEventAttrList(eventId: string) {
  return metaEventList.value.find(item => item.id === eventId)?.event_attrs || []
}

function handleAttrChange(value: string) {
  const found = getEventAttrList(form.tag_rule.event_id).find(item => item.id === value)
  form.tag_rule.attr_name = found?.name
}
</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">{{ form.tag_rule.event_name }}</el-button>
        <el-select v-model="form.tag_rule.attr_id" style="width: 110px" @change="handleAttrChange">
          <el-option v-for="option in getEventAttrList(form.tag_rule.event_id)" :key="option.id" :label="option.name" :value="option.id"></el-option>
        </el-select>
        <el-button type="info" style="margin: 0 10px">出现次数最多</el-button>
        <p>的</p>
        <el-input-number v-model="form.tag_rule.value" style="margin: 0 10px; width: 60px" :controls="false"></el-input-number>
        <p>个</p>
        <el-button type="info" style="margin: 0 10px">{{ form.tag_rule.attr_name }}</el-button>
        <p>作为用户标签</p>
      </el-row>
    </template>
  </EventRule>
</template>

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