<template>
  <ns-drawer
    v-model:visible="visible"
    width="520"
    title="分组编辑"
    :ok="btnClick"
    :cancel="() => (visible = false)"
    placement="right">
    <ns-form :schemas="schemas" :model="model" formLayout="vertical" />
  </ns-drawer>
</template>
<script lang="ts" setup>
  import { createVNode, onMounted, ref, unref } from 'vue';
  import { NsMessage } from '/nerv-lib/component';
  import { DeleteOutlined } from '@ant-design/icons-vue';
  const visible = ref(false);
  const model = ref({});
  const toggle = () => {
    visible.value = !visible.value;
  };
  const deleteRow = (index) => {
    console.log(index);
    mockDataSource.value.splice(index, 1);
  };
  const addRow = () => {
    console.log(model);
    if (model.value?.groupName) mockDataSource.value.push(unref(model) as any);
  };
  const mockDataSource = ref([
    {
      groupName: '1号厂区',
    },
    {
      groupName: '2号厂区',
    },
    {
      groupName: '3号厂区',
    },
  ]);
  const schemas = [
    {
      field: 'basicInfo',
      label: '',
      displayFormItem: false,
      class: 'ns-form-item-full',
      component: 'NsChildForm',
      componentProps: {
        title: '分组信息',
        schemas: [
          {
            label: '分组编号',
            field: 'groupCode',
            component: 'NsInput',
            defaultValue: 'WDIFHSUNGNDOR',
            componentProps: {
              disabled: true,
              placeholder: '请输入',
            },
          },
          {
            label: '分组名称',
            field: 'groupName',
            component: 'NsInput',
            componentProps: {
              placeholder: '请输入',
              addonAfter: createVNode(
                'div',
                { style: { cursor: 'pointer' }, onclick: addRow },
                '新增',
              ),
            },
            rules: [{ required: true }],
          },
        ],
      },
    },
    {
      field: 'list',
      label: '',
      displayFormItem: false,
      class: 'ns-form-item-full',
      component: 'NsChildForm',
      componentProps: {
        title: '分组列表',
        schemas: [
          {
            label: '',
            field: 'NsBasicTable',
            component: 'NsBasicTable',
            formItemProps: {
              wrapperCol: { span: 24 },
            },
            componentProps: {
              disabled: true,
              placeholder: '请输入',
              dataSource: mockDataSource.value,
              rowSelection: { type: 'radio' },
              pagination: false,
              rowKey: (record) => record.groupName,
              columns: [
                {
                  title: '序号',
                  dataIndex: 'name',
                  customRender: ({ index }) => index + 1,
                  width: 80,
                  align: 'center',
                },
                {
                  title: '分组名称',
                  dataIndex: 'groupName',
                  align: 'center',
                },
                {
                  title: '删除',
                  dataIndex: 'delete',
                  width: 80,
                  align: 'center',
                  customRender: ({ index }) =>
                    createVNode(DeleteOutlined, {
                      style: { color: 'red', cursor: 'pointer' },
                      onClick: () => deleteRow(index),
                    }),
                },
              ],
            },
          },
        ],
      },
    },
  ];

  const btnClick = () => {
    visible.value = false;
    NsMessage.success('操作成功');
  };

  defineExpose({
    toggle,
  });
</script>
<style scoped lang="less">
  .drawerContainer {
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
</style>
