<script setup lang="tsx">
import { NSwitch } from 'naive-ui';
import { fetchAddChannel, fetchGetChannelList, fetchUpdateChannel } from '@/service/api/government/government-list';
import { useTable } from '@/components/zt/Table/hooks/useTable';
import { useModalFrom } from '@/components/zt/ModalForm/hooks/useModalForm';

const columns: NaiveUI.TableColumn<Api.government.ChannelVO>[] = [
  {
    key: 'channelNo',
    title: '企业编号',
    align: 'center'
  },
  {
    key: 'channelName',
    title: '企业名称',
    align: 'center'
  },
  {
    key: 'staffCount',
    title: '总员工数',
    align: 'center'
  },
  {
    key: 'normalCount',
    title: '正常员工数',
    align: 'center'
  },
  {
    key: 'status',
    title: '状态',
    align: 'center',
    render: row => {
      return (
        <NSwitch
          uncheckedValue={0}
          checkedValue={1}
          value={row.status}
          onUpdate:value={val => {
            row.status = val;
            fetchUpdateChannel(row);
          }}
        ></NSwitch>
      );
    }
  },
  {
    key: 'createTime',
    title: '创建时间',
    align: 'center'
  }
];

const [registerTable, { refresh }] = useTable({
  searchFormConfig: {
    schemas: [
      {
        field: 'channelName',
        label: '企业名称',
        component: 'NInput'
      },
      {
        field: 'status',
        label: '状态',
        component: 'NSelect',
        componentProps: {
          options: [
            {
              label: '正常',
              value: 1
            },
            {
              label: '禁用',
              value: 0
            }
          ]
        }
      }
    ],
    inline: false,
    size: 'small',
    labelPlacement: 'left',
    isFull: false
  },
  tableConfig: {
    keyField: 'id',
    title: '标签列表',
    showAddButton: true
  }
});

const [registerModalForm, { openModal, closeModal, getFieldsValue, setFieldsValue }] = useModalFrom({
  modalConfig: {
    title: '标签 ',
    width: 500,
    isShowHeaderText: true,
    height: 200
  },
  formConfig: {
    schemas: [
      {
        label: '',
        field: 'id',
        component: 'NInput',
        show: false
      },
      {
        field: 'channelName',
        label: '企业名称',
        component: 'NInput',
        required: true
      },
      {
        field: 'status',
        label: '状态',
        component: 'NSwitch',
        required: true,
        componentProps: {
          checkedValue: 1,
          uncheckedValue: 0
        },
        defaultValue: 1
      }
    ],
    gridProps: {
      cols: '1'
    },
    labelWidth: 120
  }
});
async function handleSubmit() {
  const form = await getFieldsValue();
  if (form.id) {
    await fetchUpdateChannel(form);
  } else {
    await fetchAddChannel(form);
  }
  closeModal();
  refresh();
}

async function edit(row: Recordable) {
  openModal(row);
  setFieldsValue(row);
}
</script>

<template>
  <LayoutTable>
    <ZTable :columns="columns" :api="fetchGetChannelList" @register="registerTable" @add="openModal">
      <template #op="{ row }">
        <NButton size="small" ghost type="primary" @click="edit(row)">编辑</NButton>
      </template>
    </ZTable>
    <BasicModelForm @register-modal-form="registerModalForm" @submit-form="handleSubmit"></BasicModelForm>
  </LayoutTable>
</template>

<style scoped></style>
