<script setup>
import {onMounted} from 'vue'
import {amisRender} from '@/utils.js'

onMounted(() => {
  amisRender(
      '#amis-organization',
      information => {
        return {
          type: 'page',
          body: [
            {
              type: 'tpl',
              tpl: '${baseUrl}1',
            },
            {
              type: 'crud',
              syncLocation: false,
              headerToolbar: [
                {
                  type: 'action',
                  label: '新增组织',
                  level: 'primary',
                  actionType: 'dialog',
                  dialog: {
                    title: '新增组织',
                    body: {
                      type: 'form',
                      api: {
                        method: 'post',
                        url: `${information.baseUrl}/jsonapi`,
                        data: {
                          data: {
                            type: 'organization',
                            attributes: {
                              name: '${name}'
                            }
                          }
                        },
                        headers: {
                          'Content-Type': 'application/vnd.api+json'
                        }
                      },
                      body: [
                        {
                          type: 'input-text',
                          name: 'name',
                          label: '组织名称',
                          required: true,
                        },
                      ],
                    },
                  },
                },
              ],
              api: {
                method: 'get',
                url: `${information.baseUrl}/jsonapi/organization`,
                data: {
                  page: {
                    size: '${perPage|default:undefined}',
                    number: '${page|default:undefined}',
                  }
                },
              },
              columns: [
                {
                  name: 'organizationId',
                  label: '组织编号',
                },
                {
                  name: 'organizationName',
                  label: '组织名称',
                },
              ],
            },
          ],
        }
      },
  )
})
</script>

<template>
  <div id="amis-organization"></div>
</template>

<style scoped>
</style>