<template>
  <el-drawer
    v-model="drawerOpen"
    :title="title"
    :close="handleClose"
  >
    <el-button style="margin-bottom:16px;" type="primary" icon="Plus" @click="handleAddGroup">添加分组</el-button>

    <el-table :data="groupData" style="width: 100%">
      <el-table-column type="index" width="50" label="#" />
      <el-table-column prop="groupName" label="分组名称">
        <template #default="{ row }">
          <el-input v-model="row.groupName" style="width: 100%" placeholder="请输入分组名称" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="{ row, $index }">
          <el-button type="danger" size="small" @click="handleDel(row, $index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <el-button size="large" @click="handleClose">取消</el-button>
      <el-button type="primary" size="large" @click="handleConfim">确认</el-button>
    </template>
  </el-drawer>
</template>
<script setup name="EditGrounp">
import { ref } from 'vue';

  const drawerOpen = ref(false)

  defineProps({
    title: {
      type: String,
      default: () => '编辑分组'
    }
  })

  // 分组数据拷贝
  const groupData = ref([])
  const rendingName = ref('')
  const openDraw = (propData, renderName = 'groupName') => {
    rendingName.value = renderName
    groupData.value = propData?.reduce((pre, cur) => {
      pre.push({
        ...cur,
        groupName: cur[renderName]
      })
      return pre
    }, []) || []
    drawerOpen.value = true
  }

  const handleAddGroup = () => {
    groupData.value.push({
      groupName: undefined
    })
  }

  const handleDel = (row, index) => {
    console.log(row, index);
    groupData.value.splice(index, 1)
  }

  const emit = defineEmits(['handleConfim'])
  const handleConfim = () => {
    const data = groupData.value?.reduce((pre, cur, index) => {
      pre.push({
        ...cur,
        name: index,
        [rendingName.value]: cur['groupName']
      })
      return pre
    }, []) || []
    emit('handleConfim', data)
    drawerOpen.value = false
  }

  const handleClose = () => {
    drawerOpen.value = false
    groupData.value = []
  }

  defineExpose({
    openDraw
  })

</script>


<style scoped lang='scss'>

</style>