<template>
  <view class="u-p-40">
    <SearchList />

    <uni-section title="患者列表" type="line" class="uni-my-5" titleFontSize="16px"></uni-section>
    <uni-grid :column="4" :highlight="true" :square="false" :show-border="false" @change="onClickItem">
      <uni-grid-item :index="0" class="u-p-20 ">
        <view class="list-item flex justify-center">
          <view class="icon-plus bg-main"><uni-icons type="plusempty" color="#fff" size="14" /></view>
          <text class="font-bold primary">创建患者</text>
        </view>
      </uni-grid-item>

      <uni-grid-item v-for="(item, index) in data" :index="index + 1" :key="index + 1" class="u-p-20">
        <view class="list-item flex active">
          <view class="flex-1">
            <view class="text-title">
              <text>{{ item.name }}</text>
              <text>{{ item.age }}</text>
              <text>{{ item.sex }}</text>
            </view>
            <view class="text-summary">
              <u-tag :text="item.status" mode="light" size="mini" />
              <text class="time">{{ item.time }}</text>
            </view>
          </view>

          <view>
            <uni-icons type="forward" size="12"></uni-icons>
          </view>
        </view>
      </uni-grid-item>
    </uni-grid>

    <image class="create-user" src="@/static/images/bed.png" mode="scaleToFill" />
  </view>
</template>

<script lang="ts" setup>
import type { IPatient } from '@/store/modules/service';
import { useServiceStore } from '@/store/modules/service';

const serviceStore = useServiceStore()

const data: IPatient[] = [
  { name: '脏兵', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
  { name: '脏兵1', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
  { name: '脏兵2', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
  { name: '脏兵3', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
  { name: '脏兵4', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
  { name: '脏兵', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
  { name: '脏兵1', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
  { name: '脏兵2', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
  { name: '脏兵3', age: 17, sex: '男', status: '到院', time: '2022-11-23 12:11' },
]

function onClickItem(event) {
  const item = data[event.detail.index]
  serviceStore.setCurrentPatient(item)
  uni.$u.openPage('detail2')

}
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.list-item {
  width: 100%;
  background-color: #fff;
  border-radius: 6px;
  padding: 1.5em 1em;
  margin-right: 1.2em;
  height: 220rpx;

  &.active {
    @extend .bg-main-v;

    .text-title {
      color: #fff
    }

    .text-summary {
      color: #fff
    }

    :deep(.uniui-forward) {
      color: #fff !important;
    }
  }

  .text-title {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin-bottom: 0.6em;

    text {
      margin-right: 1em;
    }
  }

  .text-summary {
    color: #888;
    font-size: 13px;

    .time {
      margin-left: 1em;
    }
  }
}

.icon-plus {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.5em;
  font-weight: bold;
}

.create-user {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 120rpx;
  height: 120rpx;
}
</style>
