<template>
  <div class="m-4">
    <div>
      <BasicTable @register="registerTable">
        <template #headerTop>
          <span>headerTop</span>
        </template>
        <template #toolbar>
          <span>toolbar</span>
        </template>
      </BasicTable>
    </div>

    <div class="mx-6 my-2">
      <TimeLine :data="timeLineData" @hover="callHover">
        <template #head>
          <div class="animate__animated animate__slideInLeft">
            <div class="timeline-outer" v-if="timeOuter">
              <div class="timeline-outer_item" @click="handleAdd">AVF</div>
              <div class="timeline-outer_item">AVH</div>
              <div class="timeline-outer_item">TCG</div>
            </div>
          </div>
        </template>
      </TimeLine>
    </div>
    <div class="mx-6 my-4">
      <a-button type="primary" @click="showImport"> 显示导入</a-button>
    </div>
    <div class="mx-6 my-4">
      <a-button type="primary" @click="showShortcut"> 显示快捷方式</a-button>
    </div>
    <ImportModal @register="registerModal" />
    <ShortcutModal @register="registerModalShortcut" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { onMounted } from 'vue';
  import { columns } from './data';
  import TimeLine from '/@/components/XTTimeLine/src/TimeLine.vue';
  import { ImportModal } from '/@/components/XTImport/index';
  // import { TransitionPresets, useTransition } from '@vueuse/core';
  import { useModal } from '/@/components/Modal';
  import {
    archivesPatientBasicExport,
    archivesPatientBasicImportBatch,
  } from '/@/api/biz/archives/patientBasicApi';
  import ShortcutModal from './ShortcutModal.vue';

  const [registerModal, { openModal }] = useModal();
  const [registerModalShortcut, { openModal: openModalShortcut }] = useModal();
  const dataSource = ref([]);

  const descData = [
    {
      label: '诊断名称/病史/状态',
      value: '乙肝 / 2022-01-19 ～',
      tags: [{ id: '12', label: '活动中', type: 'error' }],
    },
    {
      label: '备注',
      value: '药物治疗或其他治疗',
    },
    {
      label: '测试',
      value: '药物治疗或其他治疗',
    },
    {
      label: '诊断名称/病史/状态备份',
      value: '结核 / 2022-02-10 ～ 20',
      tags: [
        { id: '1', label: '未活动', type: 'muted' },
        { id: '2', label: '未活动1', type: 'primary' },
      ],
    },
  ];

  const timeLineData = [
    {
      id: '1',
      dot: '王医生',
      date: '2023-05-20',
      cnt: {
        title: '测试' + Math.round(Math.random() * 1000),
        id: '123',
        type: '123',
        data: descData,
      },
    },
    {
      id: '12',
      dot: '范医生',
      date: '2023-03-20',
      cnt: {
        title: '测试' + Math.round(Math.random() * 1000),
        id: '123',
        type: '123',
        data: descData,
      },
    },
  ];
  const timeOuter = ref(false);
  onMounted(async () => {
    for (let i = 0; i < 10; i++) {
      const obj = {
        createTime: '2023-05-23 10:09:48',
        updateTime: '2023-05-23 19:00:32',
        id: '1660830352886149125' + Math.round(Math.random() * 10000),
        name: '驼人',
        packageId: '1655202440997244930',
        packageName: '测试套餐',
        username: 'tuoren',
        type: 'custom',
        contractUser: 'Lf',
        contactMobile: '18339543638',
        remark: null,
        disable: 0,
      };
      dataSource.value.push(obj);
    }
  });
  // const count = ref(0);
  // const countRef = useTransition(count, {
  //   duration: 1000,
  //   transition: TransitionPresets.easeInCirc,
  // });
  // function plusFn() {
  //   count.value = Math.round(Math.random() * 100);
  // }
  // const [registerTable, { reload, getCacheColumns, setColumns }] = useTable({
  const [registerTable] = useTable({
    id: 'sys_config',
    title: '参数列表2121',
    columns,
    dataSource: dataSource,
    useSearchForm: false,
    titleStyle: {
      fontSize: '14px',
      color: '#000a18',
      cursor: 'default',
    },
    titleLined: true,
    bordered: false,
    showIndexColumn: false,
    pagination: false,
    // maxHeight: 350,
    canResize: false,
  });

  function handleAdd() {
    timeOuter.value = false;
  }

  function showImport() {
    openModal(true, {
      title: '导入数据111',
      importUrl: archivesPatientBasicImportBatch,
      exportUrl: archivesPatientBasicExport,
    });
  }
  function showShortcut() {
    console.log('显示快捷方式');
    openModalShortcut(true, {
      title: '导入数据111',
    });
  }
  // 回调

  function callHover() {
    timeOuter.value = true;
  }
</script>

<style lang="less" scoped>
  ::v-deep(.ant-form-item-label > label) {
    width: 100% !important;
  }

  .timeline-outer {
    display: flex;
    margin-left: 20px;
    transition: all 0.3s ease-in-out;

    &_item {
      padding: 0 30px;
      height: 40px;
      line-height: 40px;
      border-radius: 30px;
      color: #fff;
      background: #0075ff;
      margin-right: 20px;
      cursor: pointer;
    }
  }
</style>
