<template>
  <div class="home">
      <nav-bar/>
    
    <!-- 密码验证弹窗 -->
    <van-popup v-model="showPasswordModal" position="center" :style="{ width: '80%', borderRadius: '10px' }">
      <div class="popup-content">
        <h3 class="popup-title">身份验证</h3>
        <p class="popup-description">请输入密码以使用收费室功能</p>
        <div class="input-container">
          <van-field
            v-model="password"
            placeholder="请输入密码"
            class="password-input"
            type="password"
            maxlength="20"
            @keyup.enter="validatePassword"
          />
          <div v-if="passwordError" class="error-message">密码错误，请重新输入</div>
        </div>
        <div class="popup-buttons">
          <van-button type="primary" @click="validatePassword" class="popup-button confirm">确认</van-button>
        </div>
      </div>
    </van-popup>
    
    <!-- 主要功能按钮，仅在密码验证通过后显示 -->
    <div v-if="passwordVerified" class="button-container">
      <van-button type="primary" round @click="showRefundTicketDialog" class="action-button">线上退号退费</van-button>
      <van-button type="primary" round @click="showRefundOutpatientDialog" class="action-button">线上门诊医保退费</van-button>
      <van-button type="primary" round @click="showRefundSelfDialog" class="action-button">线上门诊自费退费</van-button>
    </div>
    
    <!-- 退号退费弹窗 - 输入就诊人ID -->
    <van-popup v-model="showRefundTicket" position="center" :style="{ width: '80%', borderRadius: '10px' }">
      <div class="popup-content">
        <h3 class="popup-title">退号退费</h3>
        <p class="popup-description">请输入就诊人ID</p>
        <div class="input-container">
          <van-field
            v-model="patientId"
            placeholder="请输入就诊人ID"
            class="patient-id-input"
            maxlength="20"
            inputType="number"
            :rules="[{ required: true, message: '请输入就诊人ID' }]"
          />
        </div>
        <div class="popup-buttons">
          <van-button @click="showRefundTicket = false" class="popup-button cancel">取消</van-button>
          <van-button type="primary" @click="searchRegistrationInfo" class="popup-button confirm" :disabled="!patientId">确认</van-button>
        </div>
      </div>
    </van-popup>
    
    <!-- 可滑动的挂号信息弹窗 -->
    <van-popup v-model="showRegistrationList" position="bottom" :style="{ height: '80%', borderRadius: '10px 10px 0 0' }" :close-on-click-overlay="false">
      <div class="registration-popup">
        <div class="popup-header">
          <h3 class="popup-title">挂号信息</h3>
          <van-button icon="cross" type="default" size="small" @click="showRegistrationList = false" />
        </div>
        
        <div class="registration-list-scroll">
          <table class="registration-table">
            <thead>
              <tr>
                <th>就诊人</th>
                <th>挂号时间</th>
                <th>科室</th>
                <th>就诊医生</th>
                <th>退款金额</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr 
                v-for="(item, index) in registrationList" 
                :key="index"
                :class="{ 'selected': selectedIndex === index }"
                @click="selectRegistration(index)"
              >
                <td>{{ item.patientName }}</td>
                <td>{{ item.registerTime }}</td>
                <td>{{ item.department }}</td>
                <td>{{ item.doctor }}</td>
                <td class="refund-amount">{{ item.refundAmount }}</td>
                <td>
                  <van-button type="danger" size="small" @click.stop="confirmRefund(index)">退号</van-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </van-popup>
    
    <!-- 门诊退费弹窗 -->
    <van-popup v-model="showRefundOutpatient" position="center" :style="{ width: '80%', borderRadius: '10px' }">
      <div class="popup-content">
        <h3 class="popup-title">门诊医保退费</h3>
        <p class="popup-description">请输入就诊人ID</p>
        <div class="input-container">
          <van-field
            v-model="patientId"
            placeholder="请输入就诊人ID"
            class="patient-id-input"
            maxlength="20"
            inputType="number"
            :rules="[{ required: true, message: '请输入就诊人ID' }]"
          />
        </div>
        <div class="popup-buttons">
          <van-button @click="showRefundOutpatient = false" class="popup-button cancel">取消</van-button>
          <van-button type="primary" @click="searchRegistrationInfo2" class="popup-button confirm" :disabled="!patientId">确认</van-button>
        </div>
      </div>
    </van-popup>
    
    <!-- 医保缴费信息弹窗 -->
    <van-popup v-model="showYbPaymentList" position="bottom" :style="{ height: '80%', borderRadius: '10px 10px 0 0' }" :close-on-click-overlay="false">
      <div class="registration-popup">
        <div class="popup-header">
          <h3 class="popup-title">医保缴费信息</h3>
          <van-button icon="cross" type="default" size="small" @click="showYbPaymentList = false" />
        </div>
        
        <div class="registration-list-scroll">
          <table class="registration-table">
            <thead>
              <tr>
                <th>患者ID</th>
                <th>医保订单号</th>
                <th>订单时间</th>
                <th>总金额</th>
                <th>个人支付</th>
                <th>个账金额</th>
                <th>基金支付</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in ybPaymentList" :key="index">
                <td>{{ item.patId }}</td>
                <td>{{ item.hospOutTradeNo }}</td>
                <td>{{ item.orderDate }}</td>
                <td>{{ item.feeSumamt }}</td>
                <td>{{ item.ownPayAmt }}</td>
                <td>{{ item.psnAcctPay }}</td>
                <td>{{ item.fundPay }}</td>
                <td>
                  <van-button type="danger" size="small" @click.stop="confirmYbRefund(index)">退费</van-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </van-popup>
    
    <!-- 门诊自费退费弹窗 - 输入就诊人ID -->
    <van-popup v-model="showRefundSelf" position="center" :style="{ width: '80%', borderRadius: '10px' }">
      <div class="popup-content">
        <h3 class="popup-title">门诊自费退费</h3>
        <p class="popup-description">请输入就诊人ID</p>
        <div class="input-container">
          <van-field
            v-model="patientId"
            placeholder="请输入就诊人ID"
            class="patient-id-input"
            maxlength="20"
            inputType="number"
            :rules="[{ required: true, message: '请输入就诊人ID' }]"
          />
        </div>
        <div class="popup-buttons">
          <van-button @click="showRefundSelf = false" class="popup-button cancel">取消</van-button>
          <van-button type="primary" @click="searchRegistrationInfo3" class="popup-button confirm" :disabled="!patientId">确认</van-button>
        </div>
      </div>
    </van-popup>
    
    <!-- 门诊自费退费记录表格弹窗 -->
    <van-popup v-model="showSelfPaymentList" position="bottom" :style="{ height: '80%', borderRadius: '10px 10px 0 0' }" :close-on-click-overlay="false">
      <div class="registration-popup">
        <div class="popup-header">
          <h3 class="popup-title">门诊自费缴费记录</h3>
          <van-button icon="cross" type="default" size="small" @click="showSelfPaymentList = false" />
        </div>
        
        <div class="registration-list-scroll">
          <table class="registration-table">
            <thead>
              <tr>
                <th>就诊人ID</th>
                <th>订单号</th>
                <th>科室</th>
                <th>医生</th>
                <th>支付金额</th>
                <th>支付时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in selfPaymentList" :key="index">
                <td>{{ item.patientId }}</td>
                <td>{{ item.orderNo }}</td>
                <td>{{ item.department }}</td>
                <td>{{ item.doctor }}</td>
                <td class="refund-amount">¥{{ item.amount }}</td>
                <td>{{ item.payTime }}</td>
                <td>
                  <van-button type="danger" size="small" @click.stop="confirmSelfRefund(index)">退费</van-button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </van-popup>
  </div>
   
</template>

<script>
import Vue from "vue";
import {
selectGuaHaoList,
apiopBillsPayedRefund,
selectYbByPatientId,
refundOrderOnline,
selectOrderList
} from "@/request/api.js";
import {Dialog, Toast, Popup, Field, Button} from "vant";
export default {
  components: {
    [Button.name]: Button,
    [Field.name]: Field
  },
  data() {
    return {
      showRefundTicket: false,
      showRefundOutpatient: false,
      showRefundSelf: false, // 门诊自费退费弹窗控制
      showRegistrationList: false,
      showYbPaymentList: false,
      showSelfPaymentList: false, // 门诊自费退费记录弹窗控制
      patientId: '',
      orderNumber: '',
      selectedIndex: -1,
      registrationList: [],
      ybPaymentList: [],
      selfPaymentList: [], // 门诊自费退费记录数据
      show: false, // 用于控制加载状态
      loadingInstance: null, // 加载提示实例
      
      // 密码验证相关
      showPasswordModal: false,
      password: '',
      passwordVerified: false,
      passwordError: false
    }
    
  },
  mounted() {
    // 页面加载时检查缓存中是否有已验证的密码状态
    const verified = localStorage.getItem('tui_password_verified');
    this.passwordVerified = verified === 'true';
    
    // 如果未验证，则显示密码弹窗
    if (!this.passwordVerified) {
      this.showPasswordModal = true;
    }
  },
  
  methods: {
    // 密码验证
    validatePassword() {
      if (!this.password) {
        this.passwordError = true;
        return;
      }
      //密码设置位置sfs
      if (this.password === 'sfs') {
        this.passwordError = false;
        this.passwordVerified = true;
        this.showPasswordModal = false;
        
        // 将验证状态存储到localStorage缓存中
        localStorage.setItem('tui_password_verified', 'true');
      } else {
        this.passwordError = true;
      }
    },
    
    // 显示退号退费弹窗
    showRefundTicketDialog() {
      this.patientId = '';
      this.showRefundTicket = true;
    },
    
    // 显示门诊退费弹窗
    showRefundOutpatientDialog() {
      this.orderNumber = '';
      this.showRefundOutpatient = true;
    },
    
    // 显示门诊自费退费弹窗
    showRefundSelfDialog() {
      this.patientId = '';
      this.showRefundSelf = true;
    },
    
    // 显示加载提示
    showLoading(message = '加载中...') {
      this.loadingInstance = Toast.loading({
        message: message,
        forbidClick: true,
        duration: 0 // 0表示不自动关闭
      });
    },
    
    // 关闭加载提示
    hideLoading() {
      if (this.loadingInstance) {
        this.loadingInstance.clear();
        this.loadingInstance = null;
      }
    },
    
    // 根据就诊人ID查询挂号信息
    searchRegistrationInfo() {
      if (!this.patientId) {
        Toast.fail('请输入就诊人ID');
        return;
      }
      
      // 显示加载提示
      this.showLoading('查询中...');
      
      selectGuaHaoList({patientId: this.patientId}).then(res => {
        // 关闭加载提示
        this.hideLoading();
        
        if (res.code === 200) {
          console.log("此人的挂号记录为:", res.data);
          
          // 处理res.data可能是数组或单个对象的情况
          const rawData = res.data;
          const dataArray = Array.isArray(rawData) ? rawData : [rawData];
          
          // 提取用户需要的特定字段并转换为前端需要的格式
          this.registrationList = dataArray.map(item => ({
            // 保留原始数据中的所有必要字段用于后续退号操作
            id: item.id,
            patientid: item.patientid,
            reptnum: item.reptnum,
            orderno: item.orderno,
            zfamount: item.zfamount,
            hisopernum: item.hisopernum,
            paynature: item.paynature || 1, // 默认支付性质为1
            paytype: item.paytype || '微信', // 默认微信支付
            registerdate: item.registerdate, // 保留原始日期字段用于排序
            
            // 映射到前端显示字段
            patientName: item.name,
            registerTime: `${item.registerdate} ${item.timeinterval}`,
            department: item.ksmc,
            doctor: item.ysmc,
            refundAmount: `¥${item.zfamount.toFixed(2)}`,
            
            // 状态信息（4：已支付，1：已退号）
            status: item.appStatus,
            statusText: item.appStatus === 4 ? '已支付' : item.appStatus === 1 ? '已退号' : '未知状态'
          }))
          .filter(item => item.status === 4) // 只显示可退号的记录（已支付状态）
          .sort((a, b) => new Date(b.registerdate) - new Date(a.registerdate)); // 按照日期降序排序，最新日期在前
          
          // 如果有挂号记录，默认选中第一条
          if (this.registrationList.length > 0) {
            this.selectedIndex = 0;
            this.showRegistrationList = true;
          } else {
            Toast.info('未查询到可退号的挂号记录');
          }
        } else {
          Toast.fail("此人可能不是手机上挂号的，可能是自助机或者门诊处挂号");
        }
      }).catch(error => {
        // 关闭加载提示
        this.hideLoading();
        Toast.fail('查询失败，请稍后重试');
        console.error('查询挂号记录失败:', error);
      });
      
      // 移除模拟数据部分，只使用API返回的真实数据
      // 弹窗切换逻辑已在API回调中处理
    },
    // 日期格式化函数：将YYYYMMDD格式化为YYYY-MM-DD
    formatDate(dateStr) {
      if (!dateStr || dateStr.length !== 8) return '';
      // 将YYYYMMDD转换为YYYY-MM-DD
      return `${dateStr.substring(0, 4)}-${dateStr.substring(4, 6)}-${dateStr.substring(6, 8)}`;
    },
    
    //门诊医保查询退费
    searchRegistrationInfo2(){
      if (!this.patientId) {
        Toast.fail('请输入就诊人ID');
        return;
      }
      this.showLoading('查询医保信息中...');
      selectYbByPatientId({patientId: this.patientId}).then(res => {
        this.hideLoading();
        if (res.code === 200) {
          console.log("此人的医保缴费信息为:", res.data);
          
          // 处理res.data可能是数组或单个对象的情况
          const rawData = res.data;
          const dataArray = Array.isArray(rawData) ? rawData : [rawData];
          
          // 转换为表格所需的数据格式
          this.ybPaymentList = dataArray.map(item => {
            // 解析detail字段获取patId
            let patId = '';
            try {
              const detail = JSON.parse(item.detail);
              patId = detail.patid || '';
            } catch (e) {
              console.error('解析detail失败:', e);
            }
            
            // 获取flowNo的前8位作为订单日期
            let orderDate = '';
            if (item.flowNo && item.flowNo.length >= 8) {
              const flowNoDate = item.flowNo.substring(0, 8);
              orderDate = this.formatDate(flowNoDate);
            }
            
            return {
              patId: patId,
              hospOutTradeNo: item.hospOutTradeNo || '',
              orderDate: orderDate,
              feeSumamt: item.feeSumamt || 0,
              ownPayAmt: item.ownPayAmt || 0,
              psnAcctPay: item.psnAcctPay || 0,
              fundPay: item.fundPay || 0,
              // 保留原始数据供退费使用
              originalData: item
            };
          });
          
          // 显示医保缴费信息弹窗
          if (this.ybPaymentList.length > 0) {
            this.showYbPaymentList = true;
          } else {
            Toast.info('未查询到医保缴费信息');
          }
        } else {
          Toast.fail("查询医保信息失败");
        }
      }).catch(error => {
        this.hideLoading();
        Toast.fail('查询医保信息失败，请稍后重试');
        console.error('查询医保信息失败:', error);
      });

    },
    
    // 门诊自费退费查询
    searchRegistrationInfo3() {
      if (!this.patientId) {
        Toast.fail('请输入就诊人ID');
        return;
      }
      // 显示加载提示
      this.showLoading('查询中...');
      selectOrderList({patientId: this.patientId}).then(res=>{
        this.hideLoading();
        if (res.code === 200) {
          // 处理查询结果，显示缴费记录列表
          console.log("此人的门诊自费缴费信息为:", res.data);
          
          // 处理res.data可能是数组或单个对象的情况
          const rawData = res.data;
          const dataArray = Array.isArray(rawData) ? rawData : [rawData];
          
          // 转换为表格所需的数据格式
          this.selfPaymentList = dataArray
            .filter(item => item.appStatus === 4) // 只显示已支付状态的记录
            .map(item => {
              // 处理支付时间，只保留日期部分
              let payTime = '';
              if (item.billtime) {
                payTime = item.billtime.split(' ')[0]; // 只取日期部分
              }
              
              return {
                patientId: item.patientid,
                orderNo: item.orderno,
                department: item.setdepartname,
                doctor: item.doctorname,
                amount: item.zfamount,
                payTime: payTime,
                // 保留原始数据供退费使用
                originalData: item
              };
            })
            .sort((a, b) => new Date(b.payTime) - new Date(a.payTime)); // 按支付时间降序排序
          
          // 显示门诊自费退费记录弹窗
          if (this.selfPaymentList.length > 0) {
            this.showSelfPaymentList = true;
          } else {
            Toast.info('未查询到门诊自费缴费记录');
          }
        } else {
          Toast.fail("查询失败");
        }
      }).catch(error => {
        this.hideLoading();
        Toast.fail('查询失败，请稍后重试');
        console.error('查询失败:', error);
      });
 
    },
    
    // 选择挂号记录
    selectRegistration(index) {
      this.selectedIndex = index;
    },
    
    // 确认门诊自费退费
    confirmSelfRefund(index) {
      if (index < 0 || index >= this.selfPaymentList.length) {
        Toast.fail('请选择要退费的缴费记录');
        return;
      }
      
      const selectedItem = this.selfPaymentList[index];
      
      // TODO: 这里添加门诊自费退费逻辑
      // 示例：调用退费API
      // apiopBillsPayedRefund({orderNo: selectedItem.orderNo}).then(res => {
      //   if (res.code === 200) {
      //     Toast.success('退费成功');
      //     this.showSelfPaymentList = false;
      //   } else {
      //     Toast.fail('退费失败：' + res.message);
      //   }
      // }).catch(error => {
      //   Toast.fail('退费失败，请稍后重试');
      //   console.error('门诊自费退费失败:', error);
      // });
      
      // 显示退费提示
      Dialog.confirm({
        title: '确认退费',
        message: `确定要为订单号 ${selectedItem.orderNo} 退费吗？`,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        // 用户点击确定后的操作
        this.showLoading('退费处理中...');
        
        // TODO: 这里添加实际的退费API调用
        setTimeout(() => {
          this.hideLoading();
          Toast.success('退费成功');
          this.showSelfPaymentList = false;
        }, 1000);
      }).catch(() => {
        // 用户点击取消后的操作
        Toast.info('已取消退费');
      });
    },
    
    // 确认退号
    confirmRefund(index) {
      // 如果有传入index参数，则使用该参数，否则使用当前选中的索引
      const refundIndex = index !== undefined ? index : this.selectedIndex;
      
      if (refundIndex < 0 || refundIndex >= this.registrationList.length) {
        Toast.fail('请选择要退号的挂号记录');
        return;
      }
      
      const selectedItem = this.registrationList[refundIndex];
      
      // 限制退号时间：8:30 - 23:00
      const now = new Date();
      const hour = now.getHours();
      const minute = now.getMinutes();

      if (hour < 8 || (hour === 8 && minute < 30) || hour >= 23) {
        Toast("当前暂无法退号，请于每日8:30-23:00期间进行退号退费操作\n或到线下缴费处进行退费退号");
        return;
      }

      Dialog.confirm({
        title: '退号确认',
        message: `确定要退${selectedItem.department}${selectedItem.doctor}的号吗？\n注：退号需在挂号当天或次日9点后办理，超过就诊时间无法退费退号。\n退号后将无法恢复。`,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        // 真实退号操作
        this.showLoading('退号处理中...');
        
        // 从选中的挂号记录中获取formData所需的所有参数
        const formData = {
          patientid: selectedItem.patientid,
          billsmsg: selectedItem.reptnum,
          paynature: selectedItem.paynature,
          paytype: selectedItem.paytype,
          powertranid: selectedItem.orderno,
          zfamount: selectedItem.zfamount,
          ybzhamount: '',
          ybtcamount: '',
          yboutmsg: '',
          hisopernum: selectedItem.hisopernum,
          txsend: '退号'
        };
        console.log("formData",formData)
        apiopBillsPayedRefund(formData)
          .then((res) => {
            if (res && (res.code === 200 || res.code === "200")) {
              Toast("退号成功");
              
              // 退号成功后，从列表中移除该记录
              this.registrationList.splice(refundIndex, 1);
              
              // 如果还有记录，保持弹窗打开并重新选择第一条
              if (this.registrationList.length > 0) {
                this.selectedIndex = 0;
              } else {
                // 如果没有记录了，显示提示后关闭弹窗
                setTimeout(() => {
                  this.showRegistrationList = false;
                }, 1500);
              }
            } else {
              Toast({
                message: res.data?.message || res.message || "操作失败",
                duration: 6000,
                type: 'fail'
              });
            }
          })
          .catch((error) => {
            console.error("退号接口异常:", error);
            Toast({
              message: "退号失败: " + (error.message || "网络异常"),
              duration: 6000,
              type: 'fail'
            });
          })
          .finally(() => {
            this.hideLoading();
          });
      }).catch(() => {
        // 用户取消退号
      });
    },
    
    // 确认门诊退费
    confirmRefundOutpatient() {
      if (!this.orderNumber || !/^yb/i.test(this.orderNumber)) {
        Toast.fail('请输入有效的yb开头订单号');
        return;
      }
      
      this.showRefundOutpatient = false;
      Toast('门诊退费操作已确认，订单号已保留');
      console.log('门诊退费确认，订单号:', this.orderNumber);
      // 这里可以将订单号保存到全局状态或本地存储供后续操作使用
    },
    
    // 确认医保退费
    confirmYbRefund(index) {
      if (index < 0 || index >= this.ybPaymentList.length) {
        Toast.fail('请选择有效的医保缴费记录');
        return;
      }
      
      const selectedItem = this.ybPaymentList[index];
      
      // 限制退费时间：8:30 - 23:00
      const now = new Date();
      const hour = now.getHours();
      const minute = now.getMinutes();

      if (hour < 8 || (hour === 8 && minute < 30) || hour >= 23) {
        Toast("当前暂无法退费，请于每日8:30-23:00期间进行退费操作\n或到线下缴费处进行退费");
        return;
      }

      Dialog.confirm({
        title: '退费确认',
        message: `确定要退医保订单${selectedItem.hospOutTradeNo}的费用吗？\n退费金额：¥${selectedItem.feeSumamt}\n退费后将无法恢复。`,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        // 真实退费操作
       console.log("yb订单号是",selectedItem.hospOutTradeNo)
       refundOrderOnline({hosp_out_trade_no:selectedItem.hospOutTradeNo,refdType:"ALL"}).then(res=>{
        if(res.code === 200){
          Toast({
            message: "退费退款成功",
            duration: 5000
          })
          // 退费成功后，从列表中移除该记录
          this.ybPaymentList.splice(index, 1);
          
          // 如果还有记录，保持弹窗打开
          if (this.ybPaymentList.length === 0) {
            setTimeout(() => {
              this.showYbPaymentList = false;
            }, 1500);
          }
        }else{
          Toast({
            message: "授权码超时，请让用户扫码授权退款",
            duration: 5000
          })
        }
       }
       )
      }).catch(() => {
        // 用户取消退费
      });
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 1rem;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding-top: 2rem;
}

.action-button {
  width: 80%;
  height: 1.5rem;
  font-size: 0.45rem;
  background: linear-gradient(135deg, #3B71E8 0%, #2A57C4 100%);
  border: none;
}

/* 弹窗样式 */
.popup-content {
  padding: 1.2rem;
  text-align: center;
  background-color: white;
  border-radius: 10px;
}

.popup-title {
  font-size: 0.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.8rem;
}

.popup-description {
  font-size: 0.4rem;
  color: #666;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}

/* 扫码区域样式 */
.scan-container {
  margin-bottom: 1.2rem;
}

.scan-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.scan-image {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.scan-button {
  width: 60%;
  height: 1.2rem;
  font-size: 0.4rem;
}

.scan-result {
  margin-top: 1rem;
  padding: 0.6rem;
  background-color: #f0f9ff;
  border-radius: 8px;
  font-size: 0.38rem;
  color: #333;
}

.result-value {
  font-weight: bold;
  color: #3B71E8;
}

/* 输入框样式 */
.input-container {
  margin-bottom: 1.2rem;
}

.order-input {
  width: 100%;
  font-size: 0.4rem;
}

.patient-id-input {
  width: 100%;
  font-size: 0.4rem;
}

/* 可滑动弹窗样式 */
.registration-popup {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid #eee;
}

.registration-list-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0.5rem 0.8rem;
  scrollbar-width: thin;
}

/* 表格样式 */
.registration-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.4rem;
}

.registration-table th,
.registration-table td {
  padding: 0.5rem;
  text-align: center;
  border: 1px solid #e5e5e5;
}

.registration-table th {
  background-color: #f5f5f5;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}

.registration-table td {
  color: #666;
  white-space: nowrap;
}

.registration-table tbody tr {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.registration-table tbody tr:hover {
  background-color: #f9f9f9;
}

.registration-table tbody tr.selected {
  background-color: #f0f9ff;
}

.registration-table .refund-amount {
  color: #ee0a24;
  font-weight: bold;
}

/* 隐藏旧的卡片样式 */
.registration-card,
.registration-item,
.item-label,
.item-value {
  display: none;
}

/* 密码输入框样式 */
.password-input {
  width: 100%;
  font-size: 0.4rem;
}

.error-message {
  color: #ee0a24;
  font-size: 0.38rem;
  text-align: center;
  margin-top: 0.3rem;
}

/* 弹窗按钮样式 */
.popup-buttons {
  display: flex;
  justify-content: space-around;
  gap: 0.8rem;
}

.popup-button {
  flex: 1;
  height: 1.2rem;
  font-size: 0.4rem;
}

.popup-button.cancel {
  border: 1px solid #dcdfe6;
  color: #606266;
}

.popup-button.confirm {
  background: linear-gradient(135deg, #3B71E8 0%, #2A57C4 100%);
  border: none;
}

.popup-button.confirm:disabled {
  background: #a6c1ff;
  border: none;
}
</style>