<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="medical-case-selector">
      <view class="selector-header">
        <text class="header-title">快速生成:</text>
        <view class="close-btn" @click="close">
          <text class="close-icon">✕</text>
        </view>
      </view>

      <view class="case-type-grid">
        <view
          v-for="type in caseTypes"
          :key="type.id"
          class="case-type-item"
          @click="selectType(type)"
        >
          <text class="type-name">{{ type.name }}</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from "vue";

const emit = defineEmits(["select"]);

const popup = ref(null);

const caseTypes = [
  {
    id: "outpatient",
    name: "门诊病历",
  },
  {
    id: "inhospital",
    name: "住院病历",
  },
  {
    id: "physicalExaminationTemplate",
    name: "体检记录",
  },
  {
    id: "preConsultationRecord",
    name: "预问诊记录",
  },
];

const open = () => {
  popup.value?.open();
};

const close = () => {
  popup.value?.close();
};

const selectType = (type) => {
  emit("select", type);
  close();
};

defineExpose({
  open,
  close,
});
</script>

<style scoped lang="scss">
.medical-case-selector {
  width: 600rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx;

  .selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    .header-title {
      font-size: 38rpx;
      font-weight: 600;
      color: #333333;
    }

    .close-btn {
      width: 48rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .close-icon {
        font-size: 42rpx;
        color: #999999;
      }
    }
  }

  .case-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;

    .case-type-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40rpx 20rpx;
      background-color: #f8f9fa;
      border: 2rpx solid #e5e5e5;
      border-radius: 16rpx;
      transition: all 0.3s ease;

      &:active {
        background-color: #e8f4ff;
        border-color: #1890ff;
        transform: scale(0.98);
      }

      .type-name {
        font-size: 32rpx;
        color: #333333;
        text-align: center;
        font-weight: 500;
      }
    }
  }
}
</style>
