<script setup>
import { ElMessage } from 'element-plus'
import { Plus, Minus } from '@element-plus/icons-vue'
import { useObjectiveStore } from '../stores/objective'
import { useCheckStep } from '../composables/useData'
const { isCheck } = useCheckStep(1)

const objectiveStore = useObjectiveStore()

const { addProblem, removeProblem, addObjective, removeObjective } = objectiveStore

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

async function handleValidate() {
  const { problems, objectives } = objectiveStore
  const problemLength = problems.filter(item => !item.content).length
  const objectiveLength = objectives.filter(item => !item.content).length
  if (problemLength || objectiveLength) {
    ElMessage.error('请填写完整')
    return Promise.reject()
  }
}

function genFormData() {
  const { problems, objectives } = objectiveStore
  return { type: 1, detail: { step1: { problems, objectives } } }
}

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

async function handleNext() {
  await handleValidate()
  emit('next', genFormData(), isCheck.value)
}
</script>

<template>
  <div class="step-wrapper">
    <h2 class="h2-title">营销背景及营销目标</h2>
    <div class="market-step1">
      <div class="market-step1-box">
        <h4>当前业务面临问题/挑战</h4>
        <ul>
          <li v-for="(item, index) in objectiveStore.problems" :key="item.id">
            <p>问题/挑战：</p>
            <el-input type="textarea" v-model="item.content" show-word-limit maxlength="200" :rows="4" :disabled="isCheck"></el-input>
            <el-button
              type="primary"
              :icon="Plus"
              @click="addProblem({ content: '' })"
              :disabled="isCheck"
              v-if="index === objectiveStore.problems.length - 1"></el-button>
            <el-button type="primary" :icon="Minus" @click="removeProblem(item.id)" :disabled="isCheck" v-else></el-button>
          </li>
        </ul>
      </div>
      <div class="market-step1-box">
        <h4>业务部门营销目标</h4>
        <ul>
          <li v-for="(item, index) in objectiveStore.objectives" :key="item.id">
            <p>营销目标：</p>
            <el-input type="textarea" v-model="item.content" show-word-limit maxlength="200" :rows="4" :disabled="isCheck"></el-input>
            <el-button
              type="primary"
              :icon="Plus"
              @click="addObjective({ content: '' })"
              :disabled="isCheck"
              v-if="index === objectiveStore.objectives.length - 1"></el-button>
            <el-button type="primary" :icon="Minus" @click="removeObjective(item.id)" :disabled="isCheck" v-else></el-button>
          </li>
        </ul>
      </div>
    </div>
    <div class="market-step-footer">
      <el-button @click="handleSubmit" :disabled="isCheck">保存</el-button>
      <el-button type="primary" @click="handleNext">下一步</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.market-step1 {
  display: flex;
  gap: 20px;
}
.market-step1-box {
  flex: 1;
  padding: 20px;
  border-radius: 10px;
  background-color: #eef2f6;
  h4 {
    text-align: center;
  }
  ul {
    width: 100%;
    flex: 1;
  }
  li {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 20px;
    white-space: nowrap;
  }
}
</style>
