<script setup lang="ts">
import { useMetaEvent } from '../../../composables/useAllData'

const props = defineProps<{ node: any; rules: any[] }>()

const emit = defineEmits(['update:modelValue', 'save'])

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

const { getMetaEvent } = useMetaEvent()

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

const datalist = ref<any>([])

watchEffect(() => {
  datalist.value =
    metaEvent.value?.attributes.map(item => {
      const found = props.rules.find(rule => rule.event_attr_id === item.id) || {}
      return { ...item, form: { event_attr_id: item.id, mode: 1, rule: {}, ...found } }
    }) || []
})

function handleSubmit() {
  emit(
    'save',
    datalist.value.map((item: any) => item.form)
  )
  emit('update:modelValue', false)
}
</script>

<template>
  <el-dialog title="配置事件属性规则" append-to-body width="1000px" class="generate-event">
    <el-form label-suffix="：">
      <el-row>
        <el-col :span="12">
          <el-form-item label="事件英文名称">{{ metaEvent?.english_name }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="事件名称">{{ metaEvent?.name }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="所属连接">{{ metaEvent?.connection_name }}</el-form-item>
        </el-col>
        <el-col :span="12"><el-form-item label="状态">生效</el-form-item></el-col>
      </el-row>
    </el-form>
    <el-table border :data="datalist" :header-cell-style="{ background: '#ededed' }">
      <el-table-column label="属性英文名" prop="english_name" align="center"></el-table-column>
      <el-table-column label="属性名称" prop="name" align="center"></el-table-column>
      <el-table-column label="字段类型" prop="type_name" align="center"></el-table-column>
      <el-table-column label="字段格式" prop="format" align="center"></el-table-column>
      <el-table-column label="属性生成规则" align="center" width="400">
        <template #default="{ row }">
          <el-radio-group v-model="row.form.mode">
            <el-radio :value="1">随机值</el-radio>
            <el-radio :value="2">固定值</el-radio>
            <el-radio :value="3">历史随机值</el-radio>
          </el-radio-group>
          <div class="rule-box">
            <!-- 字符串 -->
            <template v-if="row.type === '1'">
              <!-- 随机值 -->
              <template v-if="row.form.mode === 1">
                <el-radio-group v-model="row.form.rule.type">
                  <el-radio :value="1">来自于系统数据</el-radio>
                  <el-radio :value="4">完全随机</el-radio>
                </el-radio-group>
              </template>
              <!-- 固定值 -->
              <template v-if="row.form.mode === 2">
                <el-input size="small" v-model="row.form.rule.value" />
              </template>
            </template>
            <!-- 整数|数字 -->
            <template v-if="row.type === '2' || row.type === '3'">
              <!-- 随机值 -->
              <template v-if="row.form.mode === 1">
                Min<el-input-number :controls="false" size="small" v-model="row.form.rule.num_min" /> Max<el-input-number
                  :controls="false"
                  size="small"
                  v-model="row.form.rule.num_max" />
              </template>
              <!-- 固定值 -->
              <template v-if="row.form.mode === 2">
                <el-input-number :controls="false" size="small" v-model="row.form.rule.value" />
              </template>
            </template>
            <!-- 日期|时间 -->
            <template v-if="row.type === '4' || row.type === '5'">
              <!-- 随机值 -->
              <template v-if="row.form.mode === 1">
                <el-radio-group v-model="row.form.rule.date_type">
                  <el-radio :value="1">完全随机(不早于当前时间)</el-radio>
                  <el-radio :value="2">
                    时间区间&nbsp;<el-date-picker size="small" value-format="YYYY-MM-DD" v-model="row.form.rule.date_start" style="width: 120px" />
                    &nbsp;至&nbsp;
                    <el-date-picker size="small" value-format="YYYY-MM-DD" v-model="row.form.rule.date_end" style="width: 120px" />
                  </el-radio>
                  <el-radio :value="3">
                    当前时间前&nbsp;<el-input-number :controls="false" size="small" v-model="row.form.rule.date_current_before" />&nbsp;天
                  </el-radio>
                  <el-radio :value="4">
                    当前时间后&nbsp;<el-input-number :controls="false" size="small" v-model="row.form.rule.date_current_after" />&nbsp;天
                  </el-radio>
                </el-radio-group>
              </template>
              <!-- 固定值 -->
              <template v-if="row.form.mode === 2">
                <el-date-picker size="small" value-format="YYYY-MM-DD" v-model="row.form.rule.value" />
              </template>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <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">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.rule-box {
  padding: 10px;
  border: 1px solid #bbb;
  background-color: #efefef;
  &:empty {
    display: none;
  }
}
</style>
