<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" />
    <div
      style="
        font-size: 16px;
        font-weight: bold;
        line-height: 24px;
        padding: 16px 0;
        padding-top: 0;
      ">
      分组列表
    </div>
    <NsBasicTable v-model:dataSource="mockDataSource" v-bind="basicTableConfig" />
  </ns-drawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { NsMessage } from '/nerv-lib/component';
  import { group } from '/@/api/deviceManage';
  import { http } from '/nerv-lib/util/http';
  const emit = defineEmits(['sure']);
  const props = defineProps({ params: Object });
  const visible = ref(false);
  const model = ref({});
  const toggle = () => {
    visible.value = !visible.value;
    visible.value && getTableData();
    visible.value && getFormula();
  };

  const mockDataSource = ref([]);
  const getFormula = () => {
    http.post(group.queryFormula, props.params).then((res) => {
      model.value.formula = res.data;
    });
  };
  const getTableData = () => {
    http.post(group.queryComputeGroup, props.params).then((res) => {
      mockDataSource.value = res.data;
    });
  };

  const basicTableConfig = ref({
    bordered: true,
    placeholder: '请输入',

    pagination: false,
    rowKey: (record) => record.id,
    columns: [
      {
        title: '分组编号',
        dataIndex: 'groupNum',
        // customRender: ({ index }) => index + 1,
        width: 80,
        align: 'center',
      },
      {
        title: '分组名称',
        dataIndex: 'groupName',
        align: 'center',
      },
    ],
  });
  const schemas = [
    {
      field: 'basicInfo',
      label: '',
      displayFormItem: false,
      class: 'ns-form-item-full',
      component: 'NsChildForm',
      componentProps: {
        title: '公式编辑',
        schemas: [
          {
            label: '',
            field: 'formula',
            component: 'NsTextarea',
            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 = () => {
    if (!model.value?.formula) {
      NsMessage.warn('请填写公式');
      return;
    }
    http
      .post(group.formula, {
        ...props.params,
        ...model.value,
      })
      .then(() => {
        emit('sure');
        toggle();
        NsMessage.success('操作成功');
      });
  };

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