<script setup lang="ts">
import Follow from '@/components/Follow.vue';
import { progressStatus } from '@/model/options';

import type { TaskQuery, TaskModel } from '@/model/follow.model';

import { planMethod, taskMethod, taskRemindStatusMethod } from '@/request/api/follow.api';
import { usePagination, useRequest } from 'alova/client';
import { notification } from 'ant-design-vue';

import {
  type VxeFormListeners,
  type VxeFormProps,
  type VxeGridInstance,
  type VxeGridListeners,
  type VxeGridProps,
  VxeUI,
} from 'vxe-pc-ui';

// 获取任务列表
const { data: tags, loading: tagsLoading } = useRequest(taskMethod, {
  initialData: { total: 0, data: [] },
});
// 获取随访计划
const { data: plans, loading: planLoading } = useRequest(planMethod, {
  initialData: { total: 0, data: [] },
});
const model = shallowRef<TaskQuery>();
const searchFormProps = reactive<VxeFormProps<TaskQuery>>({
  titleWidth: 110,
  titleAlign: 'right',
  titleColon: true,
  data: {},
  items: [
    {
      field: 'progressArray',
      title: '随访状态',
      span: 6,
      slots: { default: 'progress' },
    },
    {
      field: 'followupPlanId',
      title: '随访计划',
      span: 4,
      itemRender: {
        name: 'VxeSelect',
        props: {
          placeholder: '随访计划',
          loading: planLoading,
          options: computed(() => plans.value.data),
          optionProps: { value: 'id', label: 'name' },
          clearable: true,
          multiple: false,
          filterable: true,
        },
      },
    },
    {
      field: 'patientName',
      title: '患者姓名',
      span: 6,
      itemRender: {
        name: 'VxeInput',
      },
    },

    {
      field: 'action',
      span: 6,
      itemRender: {
        name: 'VxeButtonGroup',
        options: [
          { type: 'submit', content: '查询', status: 'primary' },
          { type: 'reset', content: '重置' },
        ],
      },
    },
    {
      field: 'date',
      title: '预定随访日期',
      span: 6,
      itemRender: {
        name: 'VxeDatePicker',
        props: { placeholder: '请选择日期', type: 'date' },
      },
    },
    {
      field: 'medicalDoctor',
      title: '接诊医生',
      span: 6,
      itemRender: {
        name: 'VxeInput',
      },
    },
  ],
});
const searchFormEmits: VxeFormListeners<TaskQuery> = {
  submit({ data }) {
    model.value = { ...data, progressArray: progressArray.value };
    submit();
  },
  reset({ data }) {
    progressArray.value = ['0', '1'];
    model.value = { ...data };
  },
};

const gridRef = ref<VxeGridInstance<TaskModel>>();
const gridOptions = reactive<VxeGridProps<TaskModel>>({
  id: 'tag-list',
  border: true,
  showOverflow: true,
  height: 'auto',
  autoResize: false,
  syncResize: true,
  scrollY: { enabled: true, gt: 0 },
  toolbarConfig: {
    custom: true,
    zoom: true,
  },
  // data:
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  columns: [
    { field: 'followupTaskName', title: '随访计划' },
    { field: 'patientName', title: '姓名' },
    { field: 'sex', title: '性别', slots: { default: 'sex' } },
    { field: 'age', title: '年龄' },
    { field: 'progress', title: '随访状态', slots: { default: 'cell' } },
    { field: 'medicalDoctor', title: '接诊医生' },
    { field: 'phone', title: '手机号码' },
    { field: 'tagNames', title: '标签' },
    {
      field: 'action',
      title: '操作',
      align: 'center',
      width: 120,
      showOverflow: false,
      slots: { default: 'btn' },
    },
  ],
  data: [],
});
const gridEvents: VxeGridListeners = {};

const {
  data,
  loading,
  page,
  pageSize,
  total,
  onSuccess,
  replace,
  refresh,
  remove,
  send: submit,
} = usePagination((page, size) => taskMethod(page, size, model.value), {
  initialData: { data: [], total: 0 },
  initialPage: 1,
  initialPageSize: 100,
  immediate: true,
});

const { loadings, pages, pageSizes, totals } = usePagination(
  (page, size) => planMethod(page, size),
  {
    initialData: { data: [], total: 0 },
    initialPage: 1,
    initialPageSize: 100,
    immediate: false,
  }
);

onSuccess(({ data: { data } }) => {
  gridRef.value?.loadData(data);
});

onMounted(() => {
  model.value = toRaw(searchFormProps.data);
});

function remind(row, rowIndex) {
  VxeUI.modal.confirm({
    title: `提醒`,
    content: `是否要提醒 ${row.followupPlanName}？`,
    showClose: false,
    onConfirm() {
      taskRemindStatusMethod({ id: row.id }).then(() => {
        notification.success({
          message: `提醒计划： ${row.followupPlanName} `,
          description: '提醒成功',
        });
        replace(model, rowIndex);
      });
    },
  });
}

function fillFollow(row:any, rowIndex:number) {
  VxeUI.modal.open({
    title: row.progress === '1' ? '填写随访' : '查看',
    width: 1100,
    height: 800,
    escClosable: true,
    destroyOnClose: true,
    id: `follow-modal`,
    remember: true,
    storage: true,
    position: {
      top: Math.min(100, window.innerHeight * 0.1),
    },
    slots: {
      default() {
        return h(Follow, <any>{
          data: row,
          onSubmit(data: TaskModel) {
            refresh(page.value);
          },
        });
      },
    },
  });
}

const progressArray = ref(['0', '1']);
</script>
<template>
  <div class="page-container flex flex-col">
    <header class="flex-none">
      <vxe-form v-bind="searchFormProps" v-on="searchFormEmits">
        <template #progress>
          <vxe-checkbox-group
            v-model="progressArray"
            :options="progressStatus"
          ></vxe-checkbox-group>
        </template>
      </vxe-form>
    </header>
    <main class="flex-auto overflow-hidden">
      <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents" :loading="loading">
        <template #btn="{ row, rowIndex }">
          <div v-if="row.progress === '1'">
            <vxe-button @click="remind(row, rowIndex)" v-show="row.isCanRemind==='Y'">提醒</vxe-button>
            <vxe-button @click="fillFollow(row, rowIndex)">填写随访</vxe-button>
          </div>
          <div v-else>
            <vxe-button @click="fillFollow(row, rowIndex)">查看</vxe-button>
          </div>
        </template>
        <template #sex="{ row }">{{ row.sex === '1' ? '女' : '男' }}</template>
        <template #cell="{ row }"
          >{{ row.progress === '1' ? '未完成' : row.progress === '2' ? '已完成' : '未开始' }}
        </template>
        <template #toolbar-extra>
          <vxe-button
            style="margin-right: 12px"
            icon="vxe-icon-repeat"
            circle
            @click="refresh(page)"
          ></vxe-button>
        </template>
      </vxe-grid>
    </main>
    <footer class="flex-none">
      <vxe-pager
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :total="total"
        :layouts="[
          'Home',
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'End',
          'Sizes',
          'FullJump',
          'Total',
        ]"
      />
    </footer>
  </div>
</template>
<style scoped lang="scss">
.page-container {
  padding: 0 24px;
  max-height: var(--page-main-container);
}
</style>
