<template>
  <PageWrapper dense>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button
          type="primary"
          danger
          @click="multipleRemove(passengerFeedbackRemove)"
          :disabled="!selected"
          v-auth="'message:passengerFeedback:remove'"
          >删除</a-button
        >
        <a-button
          type="primary"
          @click="handleAdd"
          v-auth="'message:passengerFeedback:add'"
          >新增</a-button
        >
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '修改',
                icon: IconEnum.EDIT,
                type: 'primary',
                ghost: true,
                auth: 'message:passengerFeedback:edit',
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                icon: IconEnum.DELETE,
                type: 'primary',
                danger: true,
                ghost: true,
                auth: 'message:passengerFeedback:remove',
                popConfirm: {
                  placement: 'left',
                  title: '是否删除乘客反馈信息;[' + record.id + ']?',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <PassengerFeedbackModal @register="registerModal" @reload="reload" />
  </PageWrapper>
</template>

<script setup lang="ts">
import { PageWrapper } from "@/components/Page";
import { BasicTable, useTable, TableAction } from "@/components/Table";
import {
  passengerFeedbackList,
  passengerFeedbackExport,
  passengerFeedbackRemove,
} from "@/api/message/passengerFeedback";
import { downloadExcel } from "@/utils/file/download";
import { useModal } from "@/components/Modal";
import PassengerFeedbackModal from "./PassengerFeedbackModal.vue";
import { formSchemas, columns } from "./passengerFeedback.data";
import { IconEnum } from "@/enums/appEnum";

defineOptions({ name: "PassengerFeedback" });

const [registerTable, { reload, multipleRemove, selected, getForm }] = useTable({
  rowSelection: {
    type: "checkbox",
  },
  title: "手机端角色列表",
  api: passengerFeedbackList,
  showIndexColumn: false,
  rowKey: "id",
  useSearchForm: true,
  formConfig: {
    schemas: formSchemas,
    baseColProps: {
      xs: 24,
      sm: 24,
      md: 24,
      lg: 6,
    },
  },
  columns: columns,
  actionColumn: {
    width: 200,
    title: "操作",
    key: "action",
    fixed: "right",
  },
});

const [registerModal, { openModal }] = useModal();

function handleEdit(record: Recordable) {
  openModal(true, { record, update: true });
}

function handleAdd() {
  openModal(true, { update: false });
}

async function handleDelete(record: Recordable) {
  await passengerFeedbackRemove([record.id]);
  await reload();
}
</script>

<style scoped></style>
