<script setup lang="ts">
import RuleTemplate from '../../RuleTemplate.vue'
import { useMetaEvent } from '../../../composables/useAllData'
import { SuccessFilled, CircleCloseFilled } from '@element-plus/icons-vue'
import Generate from './Generate.vue'

const { getMetaEvent } = useMetaEvent()

const props = defineProps<{ node: any }>()

const config = computed(() => {
  return props.node.data.teacher || {}
})

const metaEvent = computed(() => getMetaEvent(config.value?.event_id))

function paramsParse(data: any) {
  return { event_id: data.event_id }
}

function generateParse(data: any) {
  return { ...form, experiment_meta_event_id: data.event_id }
}

const radio = ref('1')

const form = reactive({
  data_rule: {
    generate_way: 1,
    yes_value: undefined,
    no_value: undefined,
    event_count_min: undefined,
    event_count_max: undefined
  },
  event_attr_rule: []
})
watchEffect(() => {
  Object.assign(form, props.node.data.generate)
})

const generateVisible = ref(false)

function handleConfig() {
  generateVisible.value = true
}

function onSaveEventRule(rules: []) {
  form.event_attr_rule = rules
}
</script>

<template>
  <RuleTemplate :node="node" step :paramsParse="paramsParse" :generateParse="generateParse" v-bind="$attrs">
    <template #header-answer>
      <span class="is-answer">{{ metaEvent?.name }}</span>
    </template>
    <template #step-body-after>
      <el-row justify="center" style="margin-bottom: 20px">
        <el-radio-group v-model="radio" size="large">
          <el-radio-button value="1">判断事件数据</el-radio-button>
          <el-radio-button value="2">生成事件数据</el-radio-button>
        </el-radio-group>
      </el-row>
    </template>
    <template #step2-body v-if="radio === '2'">
      <section class="rule-result-body">
        <div class="rule-result-col">
          <p class="rule-result-tips">
            <el-icon class="is-success"><SuccessFilled /></el-icon>操作正确，生成数据数量：
          </p>
          <el-form-item label="生成规则">
            <el-radio-group :model-value="1">
              <el-radio :value="1">随机</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生成方式">
            <el-radio-group v-model="form.data_rule.generate_way">
              <el-radio :value="1">百分比</el-radio>
              <el-radio :value="2">数值</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="请输入分支条件数值"></el-form-item>
          <el-form-item label="是">
            <template v-if="form.data_rule.generate_way === 1">
              <el-input-number v-model="form.data_rule.yes_value" :controls="false" :max="100" />
              &nbsp;%
            </template>
            <el-input-number v-model="form.data_rule.yes_value" :controls="false" v-else />
          </el-form-item>
          <el-form-item label="否">
            <template v-if="form.data_rule.generate_way === 1">
              <el-input-number v-model="form.data_rule.no_value" :controls="false" :max="100" />
              &nbsp;%
            </template>
            <el-input-number v-model="form.data_rule.no_value" :controls="false" v-else />
          </el-form-item>
          <el-form-item label="请输入每个用户生成事件数据的取值范围"></el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="Min">
                <el-input-number v-model="form.data_rule.event_count_min" :controls="false" :max="3" style="width: 80px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Max">
                <el-input-number v-model="form.data_rule.event_count_max" :controls="false" :max="5" style="width: 80px" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="center">
            <el-button type="primary" plain @click="handleConfig">配置事件属性值规则</el-button>
          </el-row>
        </div>
        <el-divider direction="vertical" style="height: auto" />
        <div class="rule-result-col">
          <p class="rule-result-tips">
            <el-icon class="is-error"><CircleCloseFilled /></el-icon>操作错误，根据实际操作结果生成数据数量：
          </p>

          <el-form-item label="生成规则">
            <el-radio-group :model-value="1">
              <el-radio :value="1">随机</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生成方式">
            <el-radio-group v-model="form.data_rule.generate_way">
              <el-radio :value="1">百分比</el-radio>
              <el-radio :value="2">数值</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="请输入分支条件数值"></el-form-item>
          <el-form-item label="是">
            <template v-if="form.data_rule.generate_way === 1">
              <el-input-number v-model="form.data_rule.yes_value" :controls="false" :max="100" />
              &nbsp;%
            </template>
            <el-input-number v-model="form.data_rule.yes_value" :controls="false" v-else />
          </el-form-item>
          <el-form-item label="否">
            <template v-if="form.data_rule.generate_way === 1">
              <el-input-number v-model="form.data_rule.no_value" :controls="false" :max="100" />
              &nbsp;%
            </template>
            <el-input-number v-model="form.data_rule.no_value" :controls="false" v-else />
          </el-form-item>
          <el-form-item label="请输入每个用户生成事件数据的取值范围"></el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="Min">
                <el-input-number v-model="form.data_rule.event_count_min" :controls="false" :max="3" style="width: 80px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Max">
                <el-input-number v-model="form.data_rule.event_count_max" :controls="false" :max="5" style="width: 80px" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row justify="center">
            <el-button type="primary" plain @click="handleConfig">配置事件属性值规则</el-button>
          </el-row>
        </div>
      </section>
    </template>
    <template #step3-body v-if="radio === '2'">
      <section class="rule-result-body">
        <div class="rule-result-col">
          <p class="rule-result-tips">
            <el-icon class="is-success"><SuccessFilled /></el-icon>操作正确，生成数据数量：
          </p>
          <el-form-item label="满足判断条件数据"><span class="rule-num">3000</span></el-form-item>
          <el-form-item label="不满足判断条件数据"><span class="rule-num">3000</span></el-form-item>
        </div>
        <el-divider direction="vertical" style="height: auto" />
        <div class="rule-result-col">
          <p class="rule-result-tips">
            <el-icon class="is-error"><CircleCloseFilled /></el-icon>操作错误，生成数据数量：
          </p>
          <el-form-item label="满足判断条件数据"><span class="rule-num">3000</span></el-form-item>
          <el-form-item label="不满足判断条件数据"><span class="rule-num">3000</span></el-form-item>
        </div>
      </section>
    </template>
  </RuleTemplate>
  <Generate :node="node" :rules="form.event_attr_rule" v-model="generateVisible" @save="onSaveEventRule" v-if="generateVisible"></Generate>
</template>
