<script lang="ts" setup>
import type { VxeGridListeners } from '#/adapter/vxe-table';

import { ref } from 'vue';

import {
  Page,
  useVbenModal,
} from '@vben/common-ui';

import {Button, message, Tag} from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';
import PrescriptionDetail from '#/views/doctor/doctor-reception/components/PrescriptionDetail.vue';
import PrescriptionSource from './components/source.vue';
import RejectionReason from './components/modal.vue';

import { formOptions } from './config/search';
import { gridOptions } from './config/table';
import {passApi} from "#/views/pharmacist/audit-prescription/api";

const hasTopTableDropDownActions = ref(false);

const gridEvents: VxeGridListeners<any> = {
  checkboxChange() {
    // eslint-disable-next-line no-use-before-define
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
  checkboxAll() {
    // eslint-disable-next-line no-use-before-define
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
};

const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents,
});

const [PrescriptionDetailModal, PrescriptionDetailModalApi] = useVbenModal({
  connectedComponent: PrescriptionDetail,
});

const [RejectionReasonModal, RejectionReasonModalApi] = useVbenModal({
  connectedComponent: RejectionReason,
});

const [PrescriptionSourceModal, PrescriptionSourceModalApi] = useVbenModal({
  connectedComponent: PrescriptionSource,
});
const openPrescriptionDetail = (values) => {
  // 打开西药处方模态框逻辑
  PrescriptionDetailModalApi.setData({
    values,
  });
  PrescriptionDetailModalApi.open();
};
const openPrescriptionSourceModal = (id) => {
  // 打开西药处方模态框逻辑
  PrescriptionSourceModalApi.setData({
    id,
  });
  PrescriptionSourceModalApi.open();
};

const pass = (id) => {
  passApi({
    id,
  }).then(() => {
    gridApi.query();
    message.success('通过成功');
  })
}

const reject = (id) => {
  RejectionReasonModalApi.setData({
    values: id,
    gridApi,
  });
  RejectionReasonModalApi.open();
}
</script>

<template>
  <Page auto-content-height title="订单管理">
    <PrescriptionDetailModal />
    <PrescriptionSourceModal />
    <RejectionReasonModal />
    <Grid>
      <template #toolbar-buttons>
        <TableAction :actions="[]" :drop-down-actions="[]"></TableAction>
      </template>
      <template #status="{ row }">
        <div>
          <Tag v-if="row.prescription_type === 1" color="orange">中药</Tag>
          <Tag v-else-if="row.prescription_type === 2" color="blue">
            商品【西药】
          </Tag>
          <Tag v-else-if="row.prescription_type === 3" color="purple">
            商品【非处方药】
          </Tag>
          <Tag v-else-if="row.prescription_type === 4" color="green">
            已退款
          </Tag>
          <Tag v-else-if="row.prescription_type === 5" color="pink">
            产品服务包
          </Tag>
        </div>
        <div class="mt-3">
          <Tag v-if="row.status === 0" color="red">待审核</Tag>
          <Tag v-else-if="row.status === 1" color="green">通过审核</Tag>
          <Tag v-else-if="row.status === 2" color="red">拒绝审核</Tag>
          <Tag v-else-if="row.status === 3" color="purple">无需审核</Tag>
          <Tag v-else-if="row.status === 4" color="green">无需审核</Tag>
        </div>
      </template>
      <template #toolbar-tools></template>
      <template #action="{ row }">
        <TableAction
          :actions="[
            {
              label: '查看处方',
              type: 'link',
              icon: 'marketeq:eye',
              // auth: ['超级订单', 'sys:user:save'],
              onClick: openPrescriptionDetail.bind(null, row.id),
            },
            {
              label: '处方溯源',
              type: 'link',
              icon: 'marketeq:eye',
              // auth: ['超级订单', 'sys:user:save'],
              onClick: openPrescriptionSourceModal.bind(null, row.id),
            },
            {
              label: '通过审核',
              type: 'link',
              icon: 'marketeq:eye',
              // auth: ['超级订单', 'sys:user:save'],
              onClick: pass.bind(null, row.id),
            },
            {
              label: '拒绝审核',
              type: 'link',
              icon: 'marketeq:eye',
              // auth: ['超级订单', 'sys:user:save'],
              onClick: reject.bind(null, row.id),
            },
          ]"
          :drop-down-actions="[
            // {
            //   label: '查看处方',
            //   type: 'link',
            //   icon: 'marketeq:eye',
            //   // auth: ['超级订单', 'sys:user:save'],
            //   onClick: openPrescriptionDetail.bind(null, row.id),
            // },
            // {
            //   label: '处方溯源',
            //   type: 'link',
            //   icon: 'marketeq:eye',
            //   // auth: ['超级订单', 'sys:user:save'],
            //   onClick: openPrescriptionSourceModal.bind(null, row.id),
            // },
          ]"
        />
      </template>
    </Grid>
  </Page>
</template>
<style scoped lang="scss">
.custom-list {
  list-style-type: none;
  padding-left: 0;
}

.custom-list-item {
  background-color: rgba(64, 158, 255, 0.04);
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 8px 12px;
  font-size: 14px;
  transition: background-color 0.3s;

  &:hover {
    background-color: rgba(64, 158, 255, 0.1);
  }

  &::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #409eff;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
  }
}
</style>
