<script setup lang="ts">
import type { TripTemplate } from '../types'
import { getGenerateDataRule, updateGenerateDataRule } from '../api'
import { ElMessage } from 'element-plus'

const props = defineProps<{ data: TripTemplate }>()
const emit = defineEmits<{
  (e: 'update:modelValue', visible: boolean): void
}>()

const dataset: any = reactive({ events: [], list: [] })
async function fetchGenerateDataRule() {
  const { data } = await getGenerateDataRule({ itinerary_id: props.data.id })
  data.list = data.list.map((item: any) => {
    return { ...item, ratio: parseFloat(item.ratio) }
  })
  Object.assign(dataset, data)
}
onMounted(() => {
  fetchGenerateDataRule()
})

const listOptions = computed(() => {
  return {
    data: dataset.list,
    columns: [
      { label: '连接名称', prop: 'connection_name', width: 100 },
      { label: '动作类型', prop: 'action', width: 100 },
      { label: '旅程动作', prop: 'itinerary', width: 100 },
      { label: '旅程事件', prop: 'event' },
      { label: '对应用户事件', prop: 'user_event_id', slots: 'table-event' },
      { label: '生成数据比例规则', prop: 'ratio', slots: 'table-ratio', width: 140 }
    ]
  }
})

function isDisabled(connectionType: string) {
  if (connectionType === '15') return true
  return false
}

function getConnection(connectionType: string) {
  return dataset.events.filter((item: any) => item.connection_type === connectionType)
}

async function handleSubmit() {
  const config = dataset.list.reduce((result: any, item: any) => {
    const { ratio, user_event_id } = item
    result[item.id] = { ratio, user_event_id }
    return result
  }, {})
  await updateGenerateDataRule({ itinerary_id: props.data.id, config: JSON.stringify(config) })
  ElMessage.success('保存成功')
  emit('update:modelValue', false)
}
</script>

<template>
  <el-dialog title="旅程数据规则" width="900" @closed="$emit('update:modelValue', false)">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-event="{ row }">
        <el-select v-model="row.user_event_id" :disabled="isDisabled(row.connection_type)" clearable>
          <el-option
            v-for="item in getConnection(row.connection_type)"
            :key="item.id"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </template>
      <template #table-ratio="{ row }">
        <div class="table-ratio">
          <el-input-number
            v-model="row.ratio"
            :controls="false"
            :max="100"
            :min="0"
            :disabled="isDisabled(row.connection_type)"></el-input-number
          >%
        </div>
      </template>
    </AppList>

    <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">
.table-ratio {
  display: flex;
  align-items: center;
  gap: 5px;
  .el-input__inner {
    text-align: center;
  }
}
</style>
