<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { createMaterial, updateMaterial, getMaterial } from '../api'
import { pickBy } from 'lodash-es'

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

const StepOne = defineAsyncComponent(() => import('../components/StepOne.vue'))
const StepTwo = defineAsyncComponent(() => import('../components/StepTwo.vue'))
const StepThree = defineAsyncComponent(() => import('../components/StepThree.vue'))

const router = useRouter()
const route = useRoute()
const activeName = ref(1)

const form: any = reactive({
  id: '',
  type: route.query.type || '1',
  name: '',
  way: '2',
  industry_id: '',
  scenario_type: '1',
  personnel_type: '1',
  channel: '',
  key_points: '',
  content: '',
  extend_info: {},
  teacher_id: '',
})

const detail = ref()
async function fetchInfo() {
  const res = await getMaterial({ id: route.query.id as string })
  detail.value = res.data.detail
  Object.assign(form, res.data.detail)
}
onMounted(() => {
  if (props.action === 'update' || props.action === 'view') fetchInfo()
})

// 上一步
function handlePrev() {
  activeName.value = activeName.value - 1
}

// 下一步
function handleNext() {
  activeName.value = activeName.value + 1
}

// 下一步提交
async function handleNextAndSubmit() {
  if (!form.id && form.way == 1) {
    const params = pickBy(form, (item) => item !== '' && item != '0')
    const res = await createMaterial(params)
    form.id = res.data.id
  }
  handleNext()
}
// 提交
async function handleSubmit() {
  form.id ? await handleUpdate() : await handleCreate()
}
// 创建
async function handleCreate() {
  const params = pickBy(form, (item) => item !== '' && item != '0')
  await createMaterial(params)
  ElMessage.success('创建成功')
  router.replace('/material')
}

// 修改
async function handleUpdate() {
  const params = pickBy(form, (item) => item !== '' && item != '0')
  await updateMaterial(params)
  ElMessage.success('修改成功')
  router.replace('/material')
}
</script>

<template>
  <AppCard title="营销内容创作" full class="material">
    <el-tabs v-model="activeName" stretch class="material-tabs">
      <el-tab-pane lazy label="第1步" :name="1" disabled>
        <StepOne v-model="form" :action="action" style="max-width: 1000px; margin: 0 auto" @next="handleNext"></StepOne>
      </el-tab-pane>
      <el-tab-pane lazy label="第2步" :name="2" disabled>
        <StepTwo
          v-model="form"
          :action="action"
          style="max-width: 1000px; margin: 0 auto"
          @prev="handlePrev"
          @next="handleNextAndSubmit"></StepTwo>
      </el-tab-pane>
      <el-tab-pane lazy label="第3步" :name="3" disabled>
        <StepThree v-model="form" :action="action" @prev="handlePrev" @submit="handleSubmit"></StepThree>
      </el-tab-pane>
    </el-tabs>
  </AppCard>
</template>

<style lang="scss">
.material-tabs {
  .el-tabs__header {
    width: 300px;
    margin: 0 auto 20px;
  }
  .el-tabs__nav-wrap::after {
    display: none;
  }
}
.material {
  .el-card {
    background-color: rgba(242, 242, 242, 0.49);
  }
}
</style>
