<template>
  <div>
    <BasicTable :clickToRowSelect="false" @register="registerTable">
      <template #toolbar>
        <!-- value="api:sw:txxdgl:add" -->
        <Authority>
          <a-button type="primary" @click="handleCreate">新增</a-button>
        </Authority>
        <Authority>
          <a-button type="primary" @click="exportDataFn">导出</a-button>
        </Authority>
      </template>
      <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),
            },
            {
              label: '删除',
              // auth: 'api:sw:hhgl:eidt',
              icon: 'clarity:note-edit-line',
              // onClick: handleViewEDel.bind(null, record),
              popConfirm: {
                title: '是否确认删除',
                confirm: handleViewEDel.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <AccountModalCode @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';
//delSchemeAddSpinner
import { getCodeConfigShow, getStationType, delStationCode } from '/@/api/swHome/index';
import AccountModalCode from './components/AccountModalCode.vue';
import { useModal } from '/@/components/Modal';
const [registerModal, { openModal }] = useModal();
import { getBasicColumns } from './columnsCode';
import { exportData } from '/@/utils/fnUtils.ts';
let dataCenter = reactive({
  searchFormSchema: [
    {
      field: 'd_type',
      label: '测站类型',
      component: 'ApiSelect',
      colProps: { span: 8 },
      required: true,
      componentProps: {
        api: getStationType,
        labelField: 'd_name',
        valueField: 'd_type',
        resultField: 'data',
      },
    },
  ],
});
// 表格控件
const [
  registerTable,
  { reload,getColumns, getDataSource, getForm, setColumns, getSelectRowKeys, getRowSelection, setTableData },
] = useTable({
  title: '站码对应',
  api: getCodeConfigShow,
  columns: getBasicColumns(),
  showIndexColumn: true,
  clickToRowSelect: false,
  inset: true,
  // rowSelection: { type: 'checkbox' },
  // beforeFetch: (params: any) => {
  //   let data = { ...params, ...{ d_type: 12 } };
  //   return data;
  // },
  formConfig: {
    labelWidth: 120,
    schemas: dataCenter.searchFormSchema,
  },
  tableSetting: {
    redo: false,
    setting: false,
  },
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  fetchSetting: {
    listField: 'data',
  },
  actionColumn: {
    width: 200,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
    fixed: 'right',
  },
});
// 新增
const handleCreate = (key, item) => {
  openModal(true, {
    isUpdate: false,
    data: {},
  });
};
// 编辑
const handleViewEidt = (key, item) => {
  key.d_type = key.d_type+''
  console.log(key)
  openModal(true, {
    isUpdate: true,
    data: key,
  });
};
// 删除
const handleViewEDel = (item, key) => {
  delStationCode([{
    ordern:item.ordern
  }]).then(res => {
    if(res.code == 200){
      reload()
    }
  })
};
const exportDataFn = () => {
  exportData(getColumns(),getDataSource(),'站码对应.xlsx')
}
// 成功
const handleSuccess = () => {
  // console.log('成功啦')
  reload();
};
</script>
<style lang="less" scoped>
::v-deep(.vben-basic-table-form-container){
  padding: 0;
}
</style>