<script setup lang="tsx">
import { ElDrawer } from 'element-plus'
import { reactive, ref, watch } from 'vue'
import { Table, TableColumn } from '@/components/Table'
import { BaseButton } from '@/components/Button'

const props = defineProps({
  list: {
    type: Object,
    default: () => ({})
  }
})

const datalist = ref<any[]>([])

watch(
  () => props.list,
  (value) => {
    if (value) {
      const list: any[] = []
      for (const item in value) {
        list.push(value[item])
      }
      datalist.value = list
    }
  }
)

const modelValue = defineModel<boolean>()

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'title',
    label: '任务类型',
    minWidth: '100px'
  },
  {
    field: 'info',
    label: '内容',
    minWidth: '300px'
  },
  {
    field: 'action',
    label: '操作',
    width: '90px',
    slots: {
      default: (data: any) => {
        const row = data.row
        return (
          <>
            <BaseButton type="primary" onClick={() => confirm(row)}>
              选择
            </BaseButton>
          </>
        )
      }
    }
  }
])

const emit = defineEmits(['confirm'])
const confirm = (row: any) => {
  const data = Object.assign({}, row)
  emit('confirm', data)
}
</script>

<template>
  <ElDrawer v-model="modelValue" title="选择规则" size="700px">
    <Table :columns="tableColumns" default-expand-all node-key="id" stripe :data="datalist" />
    <template #footer>
      <div>
        <BaseButton @click="() => (modelValue = false)">关闭</BaseButton>
      </div>
    </template>
  </ElDrawer>
</template>
