<script setup>
import Flow from './flow/Flow.vue'
import { useTripStore } from '../stores/trip'
import { useObjectiveStore } from '../stores/objective'
import { useCheckStep } from '../composables/useData'
const { isCheck } = useCheckStep(6)
const tripStore = useTripStore()
const objectiveStore = useObjectiveStore()

const emit = defineEmits(['submit', 'next'])

function genFormData() {
  const { nodes, edges } = tripStore
  return { type: 6, detail: { step6: { nodes, edges } } }
}

async function handleSubmit() {
  emit('submit', genFormData())
}

async function handleNext() {
  emit('next', genFormData(), isCheck.value)
}

const problemDialogVisible = ref(false)
const objectiveDialogVisible = ref(false)
</script>

<template>
  <div class="market-trip">
    <div class="h2-title">
      <h2>自动化营销旅程设计</h2>
      <div>
        <el-button type="primary">
          <router-link :to="`/trip/my?experiment_id=${$route.query.experiment_id}`" target="_blank">维护自动化营销旅程</router-link>
        </el-button>
      </div>
    </div>
    <el-row justify="center">
      <el-space :size="100">
        <el-button type="primary" size="large" @click="problemDialogVisible = true">当前面临的问题与挑战</el-button>
        <el-button type="primary" size="large" @click="objectiveDialogVisible = true">业务部门的营销目标</el-button>
      </el-space>
    </el-row>
    <div style="height: 60vh">
      <Flow id="step-flow-1" v-model:nodes="tripStore.nodes" v-model:edges="tripStore.edges" :disabled="isCheck"></Flow>
    </div>
    <div class="market-step-footer">
      <el-button @click="handleSubmit" :disabled="isCheck">保存</el-button>
      <el-button type="primary" @click="handleNext">下一步</el-button>
    </div>
    <el-dialog title="当前面临的问题与挑战" v-model="problemDialogVisible" width="600">
      <ul class="problem-list">
        <li v-for="(item, index) in objectiveStore.problems" :key="item.id">问题/挑战{{ index + 1 }}：{{ item.content }}</li>
      </ul>
    </el-dialog>
    <el-dialog title="业务部门的营销目标" v-model="objectiveDialogVisible" width="600">
      <ul class="problem-list">
        <li v-for="(item, index) in objectiveStore.objectives" :key="item.id">营销目标{{ index + 1 }}：{{ item.content }}</li>
      </ul>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.problem-list {
  li {
    line-height: 24px;
  }
  li + li {
    margin-top: 20px;
  }
}
</style>
