<template>
  <ns-drawer
    v-model:visible="visible"
    width="520"
    title="新增"
    :ok="btnClick"
    :cancel="() => (visible = false)"
    placement="right">
    <a-tabs>
      <a-tab-pane class="pane" key="1" tab="能源种类">
        <ns-form :schemas="schemas" :model="model" formLayout="vertical" />
      </a-tab-pane>
      <a-tab-pane class="pane" key="2" tab="能耗统计">
        <ns-basic-table v-bind="tableConfig" formLayout="vertical" />
      </a-tab-pane>
    </a-tabs>
  </ns-drawer>
</template>
<script lang="ts" setup>
  import { createVNode, ref, toRef, toRefs } from 'vue';
  import { NsMessage } from '/nerv-lib/component';
  import { Switch } from 'ant-design-vue';
  const visible = ref(false);
  const model = ref({});
  const toggle = () => {
    visible.value = !visible.value;
  };

  const mockDataSource = ref([]);
  for (let index = 0; index < 12; index++) {
    mockDataSource.value.push({ type: '手动', op: true });
  }
  const schemas = [
    {
      label: '能源种类',
      field: 'formula1',
      component: 'NsInput',
      componentProps: {
        placeholder: '请输入',
      },
      rules: [{ required: true }],
    },
    {
      label: '计量单位',
      field: 'formula2',
      component: 'NsInput',
      componentProps: {
        placeholder: '请输入',
      },
      rules: [{ required: true }],
    },
    {
      label: '计算碳排',
      field: 'formula3',
      component: 'NsRadioGroup',
      defaultValue: 1,
      componentProps: {
        radioType: 'radio',
        options: [
          { label: '是', value: 1 },
          { label: '否', value: 0 },
        ],
      },
      rules: [{ required: true }],
    },
    {
      label: '计算标煤',
      field: 'formula4',
      component: 'NsRadioGroup',
      defaultValue: 1,
      componentProps: {
        radioType: 'radio',
        options: [
          { label: '是', value: 1 },
          { label: '否', value: 0 },
        ],
      },
      rules: [{ required: true }],
    },
    {
      label: '采集节点',
      field: 'formula5',
      component: 'NsInput',
      componentProps: {
        placeholder: '请输入',
      },
    },
  ];
  const tableConfig = {
    dataSource: mockDataSource.value,
    pagination: false,
    rowKey: (record) => record.groupName,
    columns: [
      {
        title: '月份',
        dataIndex: 'month',
        customRender: ({ index }) => index + 1 + '月',
        width: 80,
        align: 'center',
      },
      {
        title: '汇总方式',
        dataIndex: 'type',
        align: 'center',
      },
      {
        title: '操作',
        dataIndex: 'op',
        align: 'center',
        customRender: (data) =>
          createVNode(Switch, {
            checked: Boolean(data.record.op),
            onChange: (val) => {
              setTimeout(() => {
                data.record.op = val;
              }, 10);
            },
          }),
      },
    ],
  };
  const btnClick = () => {
    visible.value = false;
    NsMessage.success('操作成功');
  };

  defineExpose({
    toggle,
  });
</script>
<style scoped lang="less">
  .pane {
    margin-top: 16px;
  }
</style>
