<script setup lang="ts">
import { Plus, Minus } from '@element-plus/icons-vue'
import FormDialog from './Step4Form.vue'
import { useLabelStore } from '../stores/label'
import type { TypeState, LabelState } from '../stores/label'
import { useCheckStep } from '../composables/useData'
const { isCheck } = useCheckStep(4)

const labelStore = useLabelStore()

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

const dialogVisible = ref(false)

const currentRow = ref()

// 添加
function handleAdd(item: TypeState) {
  currentRow.value = { type_id: item.id, type_name: item.name }
  dialogVisible.value = true
}

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

// 删除
function handleRemove(item: LabelState) {
  labelStore.removeLabel(item.id)
}

function genFormData() {
  const { types, labels, treeLabels } = labelStore
  return { type: 4, detail: { step4: { types, labels, treeLabels } } }
}

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

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

<template>
  <div>
    <h2 class="h2-title">标签体系设计</h2>
    <div class="market-label">
      <div class="market-label-box" v-for="item in labelStore.treeLabels" :key="item.name">
        <h4>{{ item.name }}</h4>
        <ul v-if="item.children?.length">
          <li v-for="child in item.children" :key="child.id">
            <p @click="handleView(child)">{{ child.name }}</p>
            <!-- <el-button type="primary" text size="small" @click="handleView(child)">查看</el-button> -->
            <el-button :icon="Minus" size="small" @click="handleRemove(child)" :disabled="isCheck"></el-button>
          </li>
        </ul>
        <el-empty desc="暂无数据" v-else></el-empty>
        <el-button type="primary" :icon="Plus" @click="handleAdd(item)" :disabled="isCheck"></el-button>
      </div>
    </div>
    <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>

<style lang="scss" scoped>
.market-label {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.market-label-box {
  padding: 20px;
  border-radius: 20px;
  background-color: #eef2f6;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  ul {
    width: 100%;
    flex: 1;
  }
  li {
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;
    cursor: pointer;
    p {
      flex: 1;
      line-height: 40px;
      text-align: center;
      background-color: #fff;
      border-radius: 10px;
      border: 1px solid #bbb;
    }
  }
}
</style>
