<script setup>
import { useStorage } from '@vueuse/core'
import { getFieldsList } from '../api'

const props = defineProps({
  fields: { type: Array, default: () => [] },
})
const visible = ref(false)

const fieldsList = ref(props.fields)

const selectedFields = useStorage('userListColumns', props.fields)

onMounted(() => {
  getFieldsList({ page: 1, 'per-page': 1000 }).then((res) => {
    const fields = (fieldsList.value = res.data.list
      .filter((item) => item.id != '10000')
      .map((item) => {
        return { label: item.name, prop: `fields.${item.id}` }
      }))
    fieldsList.value = [...props.fields, ...fields]
  })
})
</script>

<template>
  <el-button @click="visible = true">列配置</el-button>
  <el-dialog title="表格列配置" v-model="visible">
    <el-checkbox-group v-model="selectedFields">
      <el-checkbox v-for="field in fieldsList" :key="field.prop" :label="field.label" :value="field" />
    </el-checkbox-group>
  </el-dialog>
</template>
