<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 { ref } from 'vue';
  import { NsMessage } from '/nerv-lib/component';

  const visible = ref(false);
  const model = ref({});
  const toggle = () => {
    visible.value = !visible.value;
  };

  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: 'formula',
            component: 'NsTextarea',
            defaultValue: '(A+B)*2',
            formItemProps: {
              wrapperCol: { span: 24 },
            },
            componentProps: {
              placeholder: '请输入',
              autoSize: {
                minRows: 6,
                maxRows: 6,
              },
            },
          },
        ],
      },
    },
    {
      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,
              pagination: false,
              rowKey: (record) => record.groupName,
              columns: [
                {
                  title: '序号',
                  dataIndex: 'name',
                  customRender: ({ index }) => index + 1,
                  width: 80,
                  align: 'center',
                },
                {
                  title: '分组名称',
                  dataIndex: 'groupName',
                  align: 'center',
                },
              ],
            },
          },
        ],
      },
    },
  ];

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

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