<script setup>
import FormDialog from './Step7Form.vue'
import { useMaterialStore } from '../stores/material'
import { useCheckStep } from '../composables/useData'
const { isCheck } = useCheckStep(7)

const materialStore = useMaterialStore()

const listOptions = computed(() => {
  return {
    data: materialStore.materials,
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '一级流程节点', prop: 'node1' },
      { label: '二级流程节点', prop: 'node2' },
      { label: '营销物料类型', prop: 'type' },
      { label: '物料风格', prop: 'style' },
      { label: '物料侧重点', prop: 'desc' },
      { label: '物料更新频率', prop: 'update_rule' },
      { label: '操作', slots: 'table-x', width: 140 }
    ]
  }
})

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

const dialogVisible = ref(false)

const currentRow = ref()

// 添加
function handleAdd() {
  currentRow.value = null
  dialogVisible.value = true
}

// 查看
function handleView(item) {
  currentRow.value = item
  dialogVisible.value = true
}

// 删除
function handleRemove(item) {
  materialStore.removeMaterial(item.id)
}

function genFormData() {
  const { materials } = materialStore
  return { type: 7, detail: { step7: { materials } } }
}

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

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

<template>
  <div>
    <div class="h2-title">
      <h2>营销物料设计</h2>
      <div>
        <el-button type="primary" @click="handleAdd" :disabled="isCheck">新建</el-button>
      </div>
    </div>
    <AppList v-bind="listOptions">
      <template #table-x="{ row }">
        <el-button text type="primary" @click="handleView(row)" :disabled="isCheck">编辑</el-button>
        <el-button text type="danger" @click="handleRemove(row)" :disabled="isCheck">删除</el-button>
      </template>
    </AppList>
    <div class="market-step-footer">
      <el-button @click="handleSubmit" :disabled="isCheck">保存</el-button>
      <el-button type="primary" @click="handleNext">下一步</el-button>
    </div>
    <FormDialog v-model="dialogVisible" :data="currentRow" v-if="dialogVisible" />
  </div>
</template>
