<template>
  <div class="m-4">
    <!-- 透前准备
    <a-button type="primary" @click="plusFn">
      {{ countRef }}
    </a-button> -->
    <XTTitle title="透析病历" :right-data="titleData" />

    <div class="mt-6" />
    <XTTab type="illness11" :selected="tabSelected" :data="tabData1" @item-click="callTab" />
    <div class="mt-6" />
    <div class="mt-6" />
    <XTTab type="illness11" :selected="tabSelected" :data="tabData2" @item-click="callTab" />
    <div class="mt-6" />
    <div class="flex justify-between my-4">
      <XTTab
        type="illness"
        :width="120"
        :selected="tabSelected"
        :data="tabData"
        @item-click="callTab"
      />
      <XTForm :form-data="formData" />
    </div>
    <div class="flex">
      <Sift :data="siftData" />
    </div>
    <div class="m-6">
      <BasicForm @register="registerForm" @field-value-change="filedChange" />
    </div>
    <div>
      <BasicTable @register="registerTable">
        <template #headerTop>
          <span>headerTop</span>
        </template>
        <template #toolbar>
          <span>toolbar</span>
        </template>
      </BasicTable>
    </div>
    <div class="mx-6 my-2">
      <ChartsCard
        title="透前血压趋势"
        :has-safe="true"
        :colors="chartData.colors"
        :safe-range="chartData.safeRange"
      />
    </div>
    <div class="mx-6 my-2">
      <DescCard
        id="1"
        icon="icon-xt-add_default"
        title="透析测量"
        type="touxi"
        :data="descData"
        :right="descRight"
      />
    </div>
    <div class="mx-6 my-2">
      <TimeLine :data="timeLineData" @hover="callHover">
        <template #head>
          <transition 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>
          </transition>
        </template>
      </TimeLine>
    </div>
    <div class="mx-6 my-2">
      <List type="default" :data="listData" selected="0" />
    </div>
    <div class="mx-6 my-2">
      <List type="attachment" :data="listData1" selected="0" :width="320" />
    </div>
    <div class="flex justify-between">
      <XTCard class="m-2" :data="cardData1" @item-click="cellCard" />
    </div>
    <div class="flex justify-between">
      <XTCard class="m-2" :data="cardData" @item-click="cellCard" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { XTTab } from '/@/components/XTTab/index';
  import { XTCard } from '/@/components/XTCard/index';
  import { XTForm } from '/@/components/XTForm/index';
  import { XTTitle } from '/@/components/XTTitle/index';
  import { ColorEnum } from '/@/enums/colorEnum';
  import { BasicForm, useForm } from '/@/components/Form';
  import { dataFormSchema, columns } from './data';
  import { BasicTable, useTable } from '/@/components/Table';
  import { onMounted } from 'vue';
  import ChartsCard from '/@/components/XTCard/src/ChartsCard.vue';
  import DescCard from '/@/components/XTCard/src/DescCard.vue';
  import TimeLine from '/@/components/XTTimeLine/src/TimeLine.vue';
  import List from '/@/components/XTList/src/List.vue';
  import { Sift } from '/@/components/XTList/index';
  // import { TransitionPresets, useTransition } from '@vueuse/core';

  const tabSelected = ref('0');
  const dataSource = ref([]);
  const titleData = [
    {
      type: 'import',
      icon: 'icon-xt-import_default',
    },
    {
      type: 'export',
      icon: 'icon-xt-export_default',
    },
    {
      type: 'add',
      btnIcon: 'icon-xt-add_default',
      btnText: '患者建档',
    },
  ];
  const siftData = [
    {
      field: 'gender',
      label: '性别',
      value: '男',
    },
    {
      field: 'age',
      label: '年龄区间',
      value: '25岁-50岁',
    },
  ];
  const chartData = {
    colors: [
      {
        color: 'rgba(0, 117, 255, 1)',
        label: '化验值',
        dot: 'rgba(0, 117, 255, 1)',
      },
    ],
    safeRange: [
      {
        // name: '60分到80分',
        yAxis: 0,
      },
      {
        yAxis: 20,
      },
    ],
  };
  const listData = [
    {
      id: '0',
      title: '红细胞笔迹测定',
      startTime: '2023-11-11 12:00',
      endTime: '2023-12-11 12:00',
      status: 'default',
    },
    {
      id: '2',
      title: '红细胞笔迹测定2',
      startTime: '2023-11-11 12:00',
      endTime: '2023-12-11 12:00',
      status: 'default',
    },
  ];
  const listData1 = [
    {
      id: '0',
      title: '红细胞笔迹测定',
      startTime: '2023-11-11 12:00',
      endTime: '2023-12-11 12:00',
      status: 'default',
    },
    {
      id: '2',
      title: '红细胞笔迹测定2',
      startTime: '2023-11-11 12:00',
      endTime: '2023-12-11 12:00',
      status: 'default',
    },
  ];

  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 descRight = {
    show: true,
    date: '2023-04-23',
    doctor: '张医生',
    edit: true,
    delete: true,
  };

  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);
    }

    await setFieldsValue({
      configName333: {
        bool: 1,
        remark: '321321dsada',
        dictValues: ['DIC_BIZ', '-1'],
      },
      configValue: [100, 150],
      idCard: {
        input: '测试',
        dictValue: 'DIC_BIZ',
      },
      apiCheck: ['pump_single'],
    });
  });
  // 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,
  });

  const [registerForm, { setFieldsValue }] = useForm({
    layout: 'vertical',
    labelWidth: '100%',
    baseColProps: {
      span: 8,
    },
    baseRowGutter: [16, 8],
    schemas: dataFormSchema,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 8,
    },
    showResetButton: false,
    submitButtonOptions: {
      text: '添加',
    },
  });

  function filedChange(key, value) {
    console.log('🚀 ~ file: index.vue:47 ~ filedChange ~ value:', value);
    console.log('🚀 ~ file: index.vue:47 ~ filedChange ~ key:', key);
  }
  const tabData = [
    {
      key: '0',
      label: '全部',
      value: 128,
      hasValue: true,
      hasBracket: true,
    },
    {
      key: '1',
      label: 'A区',
      value: 12,
      hasValue: true,
      prefixColor: '#1BC1B3',
      valueColor: 'red',
      hasBracket: true,
    },
    {
      key: '2',
      label: 'B区',
      value: 18,
      hasValue: true,
      prefixColor: '#854AFF',
      hasBracket: true,
    },
  ];
  const tabData2 = [
    {
      key: '0',
      label: 'A1',
    },
    {
      key: '1',
      label: 'A2',
      disabled: true,
    },
    {
      key: '2',
      label: 'B3',
    },
  ];
  const tabData1 = [
    {
      key: '0',
      label: '全部',
    },
    {
      key: '1',
      label: 'A区',
    },
    {
      key: '2',
      label: 'B区',
    },
  ];
  // formdata
  const formData = [
    {
      name: 'text',
      label: '全部',
      componentType: 'Select',
      placeholder: '请选择',
      width: 80,
      defaultValue: '1',
      dicts: [
        { label: '全部', value: '1' },
        { label: '未称量', value: '2', prefixColor: '#1BC1B3' },
        { label: '待确认', value: '3', prefixColor: '#854AFF' },
        { label: '可打印', value: '4', prefixColor: '#1BC1B3' },
        { label: '完成', value: '5', prefixColor: '#854AFF' },
      ],
    },
    {
      name: 'text22',
      componentType: 'Select',
      placeholder: '请选择',
      width: 120,
      defaultValue: '1',
      label: '班次',
      dicts: [
        { label: '第一班', value: '1' },
        { label: '第二班', value: '2' },
        { label: '第三班', value: '3' },
      ],
    },
    {
      name: 'text1',
      componentType: 'Input',
      placeholder: '请输入',
      width: 200,
    },
    {
      name: 'text233',
      componentType: 'DatePicker',
      placeholder: '请输入',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
    },
    {
      name: 'text233',
      componentType: 'RangePicker',
      placeholder: '请输入',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
    },
    {
      name: 'filter',
      componentType: 'IconBtn',
      count: 4,
    },
  ];
  // card 标签组
  const cardData = [
    {
      groupKey: '123',
      groupTit: '待确认/测试/待核对',
      groupMode: 'default',
      groupValue: [
        { value: 10, color: ColorEnum.BLUE, background: ColorEnum.BLUE_BG },
        { value: 1, color: ColorEnum.MUTED, background: ColorEnum.MUTED_BG },
        { value: 4, color: ColorEnum.PRIMARY, background: ColorEnum.PRIMARY_BG },
      ],
      groupValueShow: true,
      groupData: [
        {
          id: '1',
          type: '1',
          borderLeftColor: ColorEnum.BLUE,
          ward: 'A区',
          bed: '99',
          cure: 'HDF/AVF',
          name: '范了饭饭饭',
          age: 20,
          gender: '1',
          infoShow: true,
          info: [
            { label: '时间', value: '4:00', span: 12 },
            { label: '超滤量', value: '2.1', suffix: 'kg', span: 12 },
            { label: '血流量', value: '300', span: 12 },
            { label: '透析器', value: 'fx60', span: 12 },
            { label: '抗凝剂', value: '低分子肝素1配上低分子肝素2', span: 24 },
          ],
          way: [
            { label: '下机', type: '0' },
            { label: '医嘱执行', type: '1', badge: 12 },
            { label: '记录并发症', type: '2', badge: 2 },
            { label: '交叉核对', type: '3' },
          ],
        },
        {
          id: '12',
          type: '2',
          borderLeftColor: ColorEnum.PRIMARY,
          ward: 'C区',
          bed: '99',
          cure: 'HDF/AVF',
          name: '范了饭饭饭',
          age: 20,
          gender: '1',
          infoShow: true,
          info: [
            { label: '时间', value: '4:00', span: 12 },
            { label: '超滤量', value: '2.1', suffix: 'kg', span: 12 },
            { label: '血流量', value: '300', span: 12 },
            { label: '透析器', value: 'fx60', span: 12 },
            { label: '抗凝剂', value: '低分子肝素1配上低分子肝素2', span: 24 },
          ],
          way: [
            { label: '下机', type: '0' },
            { label: '医嘱执行', type: '1', badge: 12 },
            { label: '记录并发症', type: '2', badge: 2 },
            { label: '交叉核对', type: '3' },
          ],
        },
        {
          id: '3',
          type: '3',
          borderLeftColor: ColorEnum.MUTED,
          ward: 'C区',
          bed: '99',
          cure: 'HDF/AVF',
          name: '范了饭饭饭',
          age: 20,
          gender: '1',
          infoShow: true,
          info: [
            { label: '时间', value: '4:00', span: 12 },
            { label: '超滤量', value: '2.1', suffix: 'kg', span: 12 },
            { label: '血流量', value: '300', span: 12 },
            { label: '透析器', value: 'fx60', span: 12 },
            { label: '抗凝剂', value: '低分子肝素1配上低分子肝素2', span: 24 },
          ],
          way: [
            { label: '下机', type: '0' },
            { label: '医嘱执行', type: '1', badge: 12 },
            { label: '记录并发症', type: '2', badge: 2 },
            { label: '交叉核对', type: '3' },
          ],
        },
      ],
    },
  ];
  const cardData1 = [
    {
      groupKey: '123',
      groupTit: '待确认/测试',
      groupMode: 'simple',
      groupValue: [
        { value: 10, color: ColorEnum.BLUE, background: ColorEnum.BLUE_BG },
        { value: 1, color: ColorEnum.MUTED, background: ColorEnum.MUTED_BG },
      ],
      groupValueShow: true,
      groupData: [
        {
          id: '1',
          type: '1',
          borderLeftColor: ColorEnum.BLUE,
          ward: 'A区',
          bed: '99',
          cure: 'HDF/AVF',
          name: '范了饭饭饭',
          age: 20,
          gender: '1',
          infoShow: false,
          way: [
            { label: '透前称量', type: '2' },
            { label: '确认配方', type: '3' },
          ],
        },
      ],
    },
  ];

  function handleAdd() {
    timeOuter.value = false;
  }
  // 回调
  function callTab(data) {
    console.log('🚀 ~ file: index.vue:41 ~ callTab ~ data:', data);
    tabSelected.value = data.value;
  }

  function cellCard(data) {
    console.log('🚀 ~ file: index.vue:106 ~ cellCard ~ data:', data);
  }

  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>
