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

import { ref } from 'vue';

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

import { Button, Image, message, Tabs, TabPane } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { TableAction } from '#/components/table-action';

import { deletePlatformQualifications } from './api/qualifications';
import FormModalDemo from './components/modal.vue';
import QualificationsModalDemo from './components/qualifications-modal.vue';
import { formOptions as qualificationsFormOptions } from './config/qualifications-search';
import { gridOptions as qualificationsGridOptions } from './config/qualifications-table';

// 平台信息相关
const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});

const showPlatformInfoModal = () => {
  formModalApi.setData({
    platform_id: 1, // 默认平台ID
    gridApi: null,
  });
  formModalApi.open();
};

// 平台资质相关
const activeTab = ref('qualifications');
const hasTopTableDropDownActions = ref(false);

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

const [QualificationsGrid, qualificationsGridApi] = useVbenVxeGrid({
  formOptions: qualificationsFormOptions,
  gridOptions: qualificationsGridOptions,
  gridEvents,
});

const [QualificationsFormModal, qualificationsFormModalApi] = useVbenModal({
  connectedComponent: QualificationsModalDemo,
});

const showQualificationsModal = (data = {}, isUpdate = false) => {
  qualificationsFormModalApi.setData({
    // 表单值
    values: data,
    update: isUpdate,
    gridApi: qualificationsGridApi,
  });
  qualificationsFormModalApi.open();
};

const deleteQualificationsApi = (row: any) => {
  let ids = [];
  if (row) {
    ids.push(row);
  } else {
    ids = qualificationsGridApi.grid.getCheckboxRecords().map((item) => item.id);
  }
  deletePlatformQualifications({ ids }).then(() => {
    message.success('删除成功!');
    qualificationsgridApi.query();
  });
};
</script>

<template>
  <Page auto-content-height title="平台信息管理">
    <!-- 平台信息编辑弹窗 -->
    <FormModal />
    <!-- 平台资质编辑弹窗 -->
    <QualificationsFormModal />

    <Tabs v-model:active-key="activeTab" type="card">
<!--      &lt;!&ndash; Tab 1: 平台信息 &ndash;&gt;-->
<!--      <TabPane key="info" tab="平台信息">-->
<!--        <div class="p-4">-->
<!--          <TableAction-->
<!--            :actions="[-->
<!--              {-->
<!--                label: '编辑平台信息',-->
<!--                type: 'primary',-->
<!--                icon: 'ant-design:edit-outlined',-->
<!--                onClick: showPlatformInfoModal,-->
<!--              },-->
<!--            ]"-->
<!--          />-->
<!--          <div class="mt-4 text-gray-500">-->
<!--            <p>点击"编辑平台信息"按钮可以配置平台的联系方式和投诉举报方式。</p>-->
<!--            <p class="mt-2">这些信息将在小程序端显示给用户。</p>-->
<!--          </div>-->
<!--        </div>-->
<!--      </TabPane>-->

      <!-- Tab 2: 平台资质管理 -->
      <TabPane key="qualifications" tab="平台资质管理">
        <QualificationsGrid>
          <template #toolbar-buttons>
            <TableAction
              :actions="[
                {
                  label: '新增',
                  type: 'primary',
                  icon: 'ant-design:plus-outlined',
                  onClick: showQualificationsModal.bind(null),
                },
              ]"
              :drop-down-actions="[
                {
                  label: '删除',
                  icon: 'ant-design:delete-outlined',
                  ifShow: hasTopTableDropDownActions,
                  popConfirm: {
                    title: '确定删除吗？',
                    confirm: deleteQualificationsApi.bind(null, false),
                  },
                },
              ]"
            >
              <template #more>
                <Button style="margin-left: 16px">
                  批量操作
                  <Icon icon="ant-design:down-outlined" />
                </Button>
              </template>
            </TableAction>
          </template>
          <template #drug_license_image="{ row }">
            <Image
              v-if="row.drug_license_image"
              :src="row.drug_license_image"
              height="30"
              width="30"
              :preview="{ src: row.drug_license_image }"
              style="cursor: pointer;"
            />
            <span v-else>暂无</span>
          </template>
          <template #business_license_image="{ row }">
            <Image
              v-if="row.business_license_image"
              :src="row.business_license_image"
              height="30"
              width="30"
              :preview="{ src: row.business_license_image }"
              style="cursor: pointer;"
            />
            <span v-else>暂无</span>
          </template>
          <template #medical_device_license_image="{ row }">
            <Image
              v-if="row.medical_device_license_image"
              :src="row.medical_device_license_image"
              height="30"
              width="30"
              :preview="{ src: row.medical_device_license_image }"
              style="cursor: pointer;"
            />
            <span v-else>暂无</span>
          </template>
          <template #food_license_image="{ row }">
            <Image
              v-if="row.food_license_image"
              :src="row.food_license_image"
              height="30"
              width="30"
              :preview="{ src: row.food_license_image }"
              style="cursor: pointer;"
            />
            <span v-else>暂无</span>
          </template>
          <template #pharmacist_certificate_image="{ row }">
            <Image
              v-if="row.pharmacist_certificate_image"
              :src="row.pharmacist_certificate_image"
              height="30"
              width="30"
              :preview="{ src: row.pharmacist_certificate_image }"
              style="cursor: pointer;"
            />
            <span v-else>暂无</span>
          </template>
          <template #internet_drug_license_image="{ row }">
            <Image
              v-if="row.internet_drug_license_image"
              :src="row.internet_drug_license_image"
              height="30"
              width="30"
              :preview="{ src: row.internet_drug_license_image }"
              style="cursor: pointer;"
            />
            <span v-else>暂无</span>
          </template>
          <template #store_name="{ row }">
            <span v-if="row.store_id === 0 || row.store_id === null">平台通用</span>
            <span v-else>{{ row.store_name || `店铺ID: ${row.store_id}` }}</span>
          </template>
          <template #toolbar-tools></template>
          <template #action="{ row }">
            <TableAction
              :actions="[
                {
                  label: '编辑',
                  type: 'link',
                  icon: 'uil:edit',
                  size: 'small',
                  onClick: showQualificationsModal.bind(null, row, true),
                },
                {
                  label: '删除',
                  type: 'link',
                  icon: 'ant-design:delete-outlined',
                  size: 'small',
                  popConfirm: {
                    title: '确定删除吗？',
                    confirm: deleteQualificationsApi.bind(null, row.id),
                  },
                },
              ]"
            />
          </template>
        </QualificationsGrid>
      </TabPane>
    </Tabs>
  </Page>
</template>
