<script setup>
import { Plus, CircleClose } from '@element-plus/icons-vue'
import FormDialog from './Step5Form.vue'
import { useGroupStore } from '../stores/group'
import { useCheckStep } from '../composables/useData'
const { isCheck } = useCheckStep(5)

const groupStore = useGroupStore()

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

const dialogVisible = ref(false)

const currentRow = ref()

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

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

// 删除
function handleRemove(item) {
  groupStore.removeGroup(item.id)
}

function genFormData() {
  const { groups, staticGroups, dynamicGroups } = groupStore
  return { type: 5, detail: { step5: { groups, staticGroups, dynamicGroups } } }
}

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"><router-link :to="`/group?experiment_id=${$route.query.experiment_id}`" target="_blank">维护用户群组</router-link></el-button>
      </div>
    </div>
    <div class="market-group">
      <div class="market-group-box">
        <div class="market-group-box-hd">
          <h4>静态用户群组</h4>
          <el-button type="primary" :icon="Plus" @click="handleAdd({ type: 1, type_name: '静态群组' })" :disabled="isCheck"></el-button>
        </div>
        <ul v-if="groupStore.staticGroups?.length">
          <li v-for="(item, index) in groupStore.staticGroups" :key="index" @click="handleView(item)">
            <p>{{ item.name }}</p>
            <el-icon @click.stop="handleRemove(item)" class="remove" v-if="!isCheck"><CircleClose /></el-icon>
          </li>
        </ul>
        <el-empty desc="暂无数据" v-else></el-empty>
      </div>
      <div class="market-group-box">
        <div class="market-group-box-hd">
          <h4>动态用户群组</h4>
          <el-button type="primary" :icon="Plus" @click="handleAdd({ type: 2, type_name: '动态群组' })" :disabled="isCheck"></el-button>
        </div>
        <ul v-if="groupStore.dynamicGroups?.length">
          <li v-for="(item, index) in groupStore.dynamicGroups" :key="index" @click="handleView(item)">
            <p>{{ item.name }}</p>
            <el-icon @click.stop="handleRemove(item)" class="remove" v-if="!isCheck"><CircleClose /></el-icon>
          </li>
        </ul>
        <el-empty desc="暂无数据" v-else></el-empty>
      </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-group-box {
  margin: 20px 0;
  padding: 20px;
  border-radius: 20px;
  background-color: #eef2f6;
  min-height: 200px;
  ul {
    margin: 40px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  li {
    position: relative;
    width: 128px;
    height: 128px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 20px;
    line-height: 24px;
    .remove {
      display: none;
      position: absolute;
      color: var(--main-color);
      font-size: 30px;
      top: 5px;
      right: 5px;
    }

    &:hover {
      .remove {
        display: block;
      }
    }
  }
}
.market-group-box-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
