<template>
  <div>
    <BasicTable :clickToRowSelect="false" @register="registerTable">
      <template #action="{ record }">
        <!-- v-if="dataCenter.editableData[record.ordern]" -->
        <!-- <div>{{dataCenter.editableData[record.ordern]}}</div> -->
        <TableAction
          :actions="[
            {
              label: '编辑',
              // auth: 'api:sw:hhgl:eidt',
              icon: 'clarity:note-edit-line',
              onClick: handleViewEidt.bind(null, record),
            },
          ]"
        />
      </template>
      <template #toolbar>
        <Authority>
          <a-button type="primary" @click="exportDataFn">导出</a-button>
        </Authority>
      </template>
    </BasicTable>
    <AccountModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
import { computed, defineComponent, createVNode, ref, watch, onMounted, reactive } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { getAutoConfigShow } from '/@/api/swHome/index';
import AccountModal from './components/AccountModal.vue';
import { exportData } from '/@/utils/fnUtils.ts';
import { useModal } from '/@/components/Modal';
const [registerModal, { openModal }] = useModal();
let dataCenter = reactive({
  columns: [
    {
      title: '起始时间',
      dataIndex: 'time',
      key: 'time',
      width: 240,
    },
    {
      title: '延时数',
      dataIndex: 'delay',
      key: 'delay',
    },
    {
      title: '重复时段数',
      dataIndex: 'repeat',
      key: 'repeat',
    },
    {
      title: '流量延时数',
      dataIndex: 'q_delay',
      key: 'q_delay',
    },
    {
      title: '数值天气预报类型',
      dataIndex: 'weather_type',
      key: 'weather_type',
    },
    {
      title: '预见期',
      dataIndex: 'forecast_time',
      key: 'forecast_time',
    },
  ],
});
// 表格控件
const [
  registerTable,
  { reload,getColumns, getDataSource, getForm, setColumns, getSelectRowKeys, getRowSelection, setTableData },
] = useTable({
  title: '定时预报参数配置',
  api: getAutoConfigShow,
  columns: dataCenter.columns,
  showIndexColumn: true,
  clickToRowSelect: false,
  inset: true,
  // rowSelection: { type: 'checkbox' },
  tableSetting: {
    redo: false,
    setting: false,
  },
  useSearchForm: false,
  showTableSetting: true,
  bordered: true,
  fetchSetting: {
    listField: 'data',
  },
  actionColumn: {
    width: 200,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: 'right',
  },
});
const exportDataFn = () => {
  exportData(getColumns(),getDataSource(),'定时预报参数配置.xlsx')
}
// 编辑
const handleViewEidt = (key, item) => {
  openModal(true, {
    isUpdate: true,
    data:key
  });
};
// 成功
const handleSuccess = () => {
  // console.log('成功啦')
  reload()
}
</script>