<script setup lang="ts">
import type { TagRule } from '@/types'
import { PriceTag, Plus, CloseBold, QuestionFilled } from '@element-plus/icons-vue'
import { useTag } from '@/composables/useAllData'
import { useRfmRes } from '@/composables/useRFMData'

// const tagRule = ref(inject('tagRule') as TagRule)
const tagRule = defineModel<TagRule>({ default: { current_logic_operate: 'and', items: [] } })

const { buttonText = '添加条件' } = defineProps<{
  buttonText?: string
}>()

const { tagList } = useTag()
const { rfmResList } = useRfmRes()

// 获取逻辑运算符名称
function getLogicalName(value: 'and' | 'or') {
  return value === 'or' ? '或' : '且'
}

// 切换逻辑运算符
function toggleOperate(rule: TagRule) {
  rule.current_logic_operate = rule.current_logic_operate === 'or' ? 'and' : 'or'
}

// 添加条件
function handleAdd(items: any[]) {
  items.push({ tag_id: '' })
}

// 删除
function handleRemove(items: any[], index: number) {
  items.splice(index, 1)
}

function showRfm(id: string) {
  return tagList.value.find((item) => item.id === id)?.label == '4'
}

function handleRfmChange(rfmKey: string, item: any) {
  const found = rfmResList.value.find((item) => item.frm_key === rfmKey)
  item.rfm_value = found?.frm_value
}
// const a = [
//   { label: '重要价值用户', label_des: '最近使用，使用频率高，消费金额大', r: '高', f: '高', m: '高', group: '组合1', guide: '留存与促活' },
//   { label: '一般价值用户', label_des: '最近使用，使用频率高，消费金额小', r: '高', f: '高', m: '低', group: '组合2', guide: '放弃' },
//   { label: '重要发展用户', label_des: '最近使用，使用频率低，消费金额大', r: '高', f: '低', m: '高', group: '组合3', guide: '拉新客户' },
//   { label: '一般发展用户', label_des: '最近使用，使用频率低，消费金额小', r: '高', f: '低', m: '低', group: '组合4', guide: '放弃' },
//   { label: '重要保持用户', label_des: '较长时间未使用，使用频率高，消费金额大', r: '低', f: '高', m: '高', group: '组合5', guide: '留存与促活' },
//   { label: '一般保持用户', label_des: '较长时间未使用，使用频率高，消费金额小', r: '低', f: '高', m: '低', group: '组合6', guide: '放弃' },
//   { label: '重要挽留用户', label_des: '较长时间未使用，使用频率低，消费金额大', r: '低', f: '低', m: '高', group: '组合7', guide: '流失客户' },
//   { label: '一般挽留用户', label_des: '较长时间未使用，使用频率低，消费金额小', r: '低', f: '低', m: '低', group: '组合8', guide: '放弃' }
// ]
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <slot name="header">
        <el-button circle color="#567722" :icon="PriceTag"></el-button>
        标签满足以下条件
      </slot>
    </template>
    <div class="rule" v-if="tagRule.items.length">
      <div class="rule-operator">
        <span @click="toggleOperate(tagRule)">{{ getLogicalName(tagRule.current_logic_operate) }}</span>
      </div>
      <div class="rule-list">
        <el-row justify="space-between" class="rule-item" v-for="(item, index) in tagRule.items" :key="index">
          <div>
            标签 等于
            <el-form-item>
              <el-select v-model="item.tag_id" style="width: 300px">
                <el-option
                  v-for="option in tagList"
                  :key="option.id"
                  :label="option.name"
                  :value="option.id"></el-option>
              </el-select>
              <template v-if="showRfm(item.tag_id)">
                <el-select
                  v-model="item.rfm_key"
                  @change="(value) => handleRfmChange(value, item)"
                  style="width: 400px; margin: 0 10px">
                  <el-option
                    v-for="item in rfmResList"
                    :key="item.frm_key"
                    :label="item.frm_value"
                    :value="item.frm_key"
                    style="height: auto">
                    <div style="line-height: 24px; padding: 5px 0">
                      <p>
                        <span style="float: left">{{ item.frm_value }}</span>
                        <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
                          {{ item.frm_extend_info.customer_marketing_strategy }}
                        </span>
                      </p>
                      <p style="clear: both; color: var(--el-text-color-secondary); font-size: 13px">
                        {{ item.frm_extend_info.label_desc }}
                      </p>
                    </div>
                  </el-option>
                </el-select>
                <el-popover popper-class="rfm-popover" placement="top" :width="800" trigger="hover">
                  <el-table :data="rfmResList" border stripe>
                    <el-table-column prop="frm_extend_info.group" label="组合" width="70" />
                    <el-table-column prop="frm_extend_info.r" label="R值" width="52" />
                    <el-table-column prop="frm_extend_info.f" label="F值" width="52" />
                    <el-table-column prop="frm_extend_info.m" label="M值" width="52" />
                    <el-table-column prop="frm_value" label="标签值" width="110" />
                    <el-table-column prop="frm_extend_info.label_desc" label="标签说明" />
                    <el-table-column
                      prop="frm_extend_info.customer_marketing_strategy"
                      label="客户营销策略"
                      width="110" />
                  </el-table>
                  <template #reference>
                    <el-icon><QuestionFilled /></el-icon>
                  </template>
                </el-popover>
              </template>
            </el-form-item>
          </div>
          <el-button text :icon="CloseBold" @click="handleRemove(tagRule.items, index)"></el-button>
        </el-row>
      </div>
    </div>
    <el-button text :icon="Plus" @click="handleAdd(tagRule.items)">{{ buttonText }}</el-button>
  </el-card>
</template>

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