<!-- 固定旅程模板配置 -->
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import TripFlow from '@/components/flow/Index.vue'
import { getRule, saveRule } from '../api'
import { useMapStore } from '@/stores/map'
import { getNameByValue, tripTemplateTypeList } from '@/utils/dictionary'

const props = defineProps<{ id: string }>()

const experimentTypeList = useMapStore().getMapValuesByKey('experiment_type')

const form = reactive({
  data_generate_mode: '1',
  data_generate_frequency: '1',
  auto_generate_rule: { mode: '2', type: '2', value: '' },
  graph: []
})

const detail = ref()

function fetchInfo() {
  getRule({ itinerary_id: props.id }).then(res => {
    const ruleConfig = res.data.data_rule_config
    detail.value = res.data
    Object.assign(form, ruleConfig)
    try {
      form.auto_generate_rule = ruleConfig.auto_generate_rule ? JSON.parse(ruleConfig.auto_generate_rule) : {}
      if (form.auto_generate_rule.mode === '1') {
        form.auto_generate_rule.type = '2'
      }
      form.graph = JSON.parse(res.data.itinerary.graph)
    } catch (error) {
      console.log(error)
    }
  })
}
onMounted(fetchInfo)

function handleSubmit() {
  const params = {
    ...form,
    itinerary_id: props.id,
    auto_generate_rule: JSON.stringify({
      ...form.auto_generate_rule,
      type: form.auto_generate_rule.mode === '1' ? '1' : form.auto_generate_rule.type
    }),
    graph: JSON.stringify(form.graph)
  }
  saveRule(params).then(() => {
    ElMessage.success('保存成功')
  })
}
</script>
<template>
  <AppCard title="实验数据规则配置">
    <el-form label-suffix="：" v-if="detail">
      <el-row>
        <el-col :span="6">
          <el-form-item label="实验名称">{{ detail.experiment.name }}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="实验类型">
            {{ getNameByValue(detail.experiment.type, experimentTypeList) }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户旅程模板">{{ detail.itinerary.name }}</el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="模板类型">
            {{ getNameByValue(detail.itinerary.type, tripTemplateTypeList) }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="数据生成启动控制">
            <el-radio-group v-model="form.data_generate_mode" style="margin-right: 40px">
              <el-radio value="1">人工启动</el-radio>
              <el-radio value="2">自动启动</el-radio>
            </el-radio-group>
            <el-radio-group v-model="form.auto_generate_rule.mode" v-if="form.data_generate_mode === '2'">
              <el-radio value="2">
                <span>每隔&nbsp;&nbsp;</span>
                <el-input v-model="form.auto_generate_rule.value" style="width: 140px">
                  <template #append>
                    <el-select v-model="form.auto_generate_rule.type" style="width: 74px">
                      <el-option value="2" label="小时" />
                      <el-option value="3" label="天" />
                    </el-select>
                  </template>
                </el-input>
              </el-radio>
              <el-radio value="1">学生完成旅程配置</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据生成停止控制">
            <el-radio-group v-model="form.data_generate_frequency">
              <el-radio value="1">一次性生成</el-radio>
              <el-radio value="2" disabled>覆盖生成</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <TripFlow v-model="form.graph" action="rule" :nodes-draggable="false" :nodes-connectable="false">
      <template #footer>
        <el-row justify="center">
          <el-button plain auto-insert-space>取消</el-button>
          <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
        </el-row>
      </template>
    </TripFlow>
  </AppCard>
</template>
