<template>
  <div class="home">
    <nav-bar url="/Member_wdzd"></nav-bar>
    <div class="bj"></div>
    <div class="app-container">
      <!-- 缴费信息 -->
      <div class="left-label">
        <div class="label-color"></div>
        <div class="label-text">缴费信息</div>
      </div>
      <div class="card">
        <div class="cell">
          <div class="cell_title">缴费金额</div>
          <div class="cell_value">￥{{ parseFloat(params.BillMoney).toFixed(2) }}</div>
        </div>
        <div class="cell">
          <div class="cell_title">缴费单号</div>
          <div class="cell_value">{{ params.SerialFlowNo }}</div>
        </div>
        <div class="cell">
          <div class="cell_title">开单时间</div>
          <div class="cell_value">{{ params.BillTime }}</div>
        </div>
        <div class="cell">
          <div class="cell_title">执行科室</div>
          <div class="cell_value">{{ params.DoDepartName }}</div>
        </div>
      </div>

      <!-- 缴费项目 -->
      <div class="left-label">
        <div class="label-color"></div>
        <div class="label-text">缴费项目</div>
      </div>
      <div class="card">
        <div v-for="item in payDetail" class="cell">
          <div class="cell_title">{{ item.COSTNAME }}</div>
          <div class="cell_value">￥{{ item.AMOUNT }}×{{ item.COSTSUM }} {{ item.UNIT }}</div>
        </div>
      </div>

      <!-- 选择支付方式 -->
      <div class="left-label">
        <div class="label-color"></div>
        <div class="label-text">支付方式</div>
      </div>
      <div class="card">
        <!-- 微信支付选项 -->
        <div v-if="provider == 'wxpay'" class="cell">
          <label class="pay-item-label">
            <div class="pay_type_list">
              <div>
                <img class="medical-insurance-image"
                  src="https://hnwjyy.oss-cn-shanghai.aliyuncs.com/%E5%8C%BB%E4%BF%9D%E6%B7%B7%E5%90%88%E6%94%AF%E4%BB%98%402x.png" />
              </div>
              <div>医保支付</div>
            </div>
            <input type="radio" name="payType" value="微信医保支付" v-model="radiovalue1" />
          </label>
        </div>
        <div v-if="provider == 'wxpay'" class="cell">
          <label class="pay-item-label">
            <div class="pay_type_list">
              <div>
                <img class="pay-image"
                  src="https://open.weixin.qq.com/zh_CN/htmledition/res/assets/res-design-download/icon64_appwx_logo.png" />
              </div>
              <div>微信支付</div>
            </div>
            <input type="radio" name="payType" value="微信支付" v-model="radiovalue1" />
          </label>
        </div>
        <!-- 支付宝支付选项 -->
        <!-- <div v-if="provider=='alipay'" class="cell">
                <div class="pay_type_list">
                    <div><img class="pay-image" src="../../static/icon/alipay.svg" /></div>
                    <div>支付宝支付</div>
                </div>
                <input type="radio" name="payType" value="支付宝支付" v-model="radiovalue1" />
            </div> -->
      </div>

      <button class="btn" @click="generateOrder" :disabled="isPaying">
        {{ isPaying ? '支付处理中...' : '支付' }}
      </button>
    </div>
  </div>
</template>

<script>
import {
  preCheck, apiUnifiedOrder,
  apiopDjcx, apiopLBQuery,
  apiOpWxQuery, getPayAuthCode,
  prePay, getAccessToken
} from "@/request/api.js";
import { Dialog, Toast } from "vant";

export default {
  data() {
    return {
      PatientId: '',
      SerialFlowNo: '',
      payDetail: [],
      provider: 'wxpay', // 支付方式 wxpay 或 alipay
      radiovalue1: '', // 选择的支付方式
      isPaying: false, // 添加防止重复支付的状态
      returnUrl: 'https://nxwj.btlsoln.com/nxwj-gzh/#/JiaoFei_detail', // 回调地址
      params: {
        FlowNo: '',
        BillMoney: '',
        BillTime: '',
        BillType: '1',
        DiagnosisCode: '',
        DiagnosisName: '',
        DoDepartName: '',
        DoDepartCode: '',
        DoctorName: '',
        SerialFlowNo: '',
        SerialNo: '',
        SetDepartName: '',
        SetDepartCode: '',
        DoctorCode: '',
        BillName: '',
        PatientId: '',
      },
      globalData: {// 医保授权相关
        scene: 0,
        ghid: '', // 单据id
        jzrid: '',//病人id，就诊卡Id
        authCode: '',
        payAuthCode: '',
        userCardNo: '',
        userName: '',
        cityId: '',
        hosp_out_trade_no: '',
        userLongitudeLatitude: {},
        // 医保授权支付相关
        orderInfo: {},
        // 医保支付金额相关
        ybPayInfo: {},
      },
      accessToken: '',
      TuiFei: '',
    };
  },

  //  修改后的 mounted
  mounted() {
    // 优先从路由query获取（授权回调后参数在query中）
    this.PatientId = this.$route.query.PatientId || this.$route.params.PatientId || sessionStorage.getItem('cachedPatientId') || '';
    this.SerialFlowNo = this.$route.query.SerialFlowNo || this.$route.params.SerialFlowNo || sessionStorage.getItem('cachedSerialFlowNo') || '';
    this.TuiFei = this.$route.query.TuiFei || this.$route.params.TuiFei || '';
    // 重新缓存参数（确保后续使用）
    if (this.PatientId) sessionStorage.setItem('cachedPatientId', this.PatientId);
    if (this.SerialFlowNo) sessionStorage.setItem('cachedSerialFlowNo', this.SerialFlowNo);

    // 处理授权回调
    
    let authCode = this.$route.query.authCode;
    let retCode = this.$route.query.retCode;
// alert(`authCode: ${authCode}, retCode: ${retCode}, 地址：${window.location.href}`);
    if (retCode === '0' && authCode) {
    this.radiovalue1='微信医保支付';
      this.getPayAuth(authCode);
      // 不return，允许后续执行getData()（或在getPayAuth中调用）
    }

    // 确保数据加载（如果参数存在）
    if (this.PatientId && this.SerialFlowNo) {
      this.getData();
    } else {
      Toast('订单信息丢失，请重新选择订单');
      setTimeout(() => this.$router.push('/Member_wdzd'), 1500);
    }
  },


  methods: {
    getToken() {
      getAccessToken().then(res => {
        console.log(res)
        this.accessToken = res.data.accessToken
      }).catch(err => {
        Toast(err.message)
      })
    },
    getData() {
      let formdata = {
        PatientId: this.PatientId,
        QueryType: "0",
        OrderNo: this.SerialFlowNo,
      };
      let queryData = {
        FlowNo: this.SerialFlowNo,
        PatientId: this.PatientId,
        InsuranceType: '0'
      };

      // 并行执行两个异步请求
      Promise.all([
        apiopDjcx(formdata),
        apiopLBQuery(queryData)
      ]).then(([djcxRes, lbQueryRes]) => {
        // 处理 apiopDjcx 的响应
        console.log(djcxRes.data);
        let jsonObj = this.$x2js.xml2js(djcxRes.data);
        console.log(jsonObj);
        let jsonObj2 = jsonObj.Envelope.Body.MOP_OutpBillstoPayQueryResponse.request.request;

        if (jsonObj2.returnresult.returncode === "1") {
          // 设置参数
          this.params.BillMoney = jsonObj2.data.BillMoney;
          this.params.BillName = jsonObj2.data.BillName;
          this.params.BillTime = jsonObj2.data.BillTime;
          this.params.BillType = jsonObj2.data.BillType;
          this.params.DiagnosisCode = jsonObj2.data.DiagnosisCode;
          this.params.DiagnosisName = jsonObj2.data.DiagnosisName;
          this.params.DoDepartName = jsonObj2.data.DoDepartName;
          this.params.DoDepartCode = jsonObj2.data.DoDepartCode;
          this.params.DoctorName = jsonObj2.data.DoctorName;
          this.params.DoctorCode = jsonObj2.data.DoctorCode;
          this.params.FlowNo = jsonObj2.data.FlowNo;
          this.params.SerialFlowNo = jsonObj2.data.SerialFlowNo;
          this.params.SerialNo = jsonObj2.data.SerialNo;
          this.params.SetDepartName = jsonObj2.data.SetDepartName;
          this.params.SetDepartCode = jsonObj2.data.SetDepartCode;
          this.params.PatientId = this.PatientId;
        } else {
          Toast("获取缴费信息失败");
        }

        // 处理 apiopLBQuery 的响应
        console.log(lbQueryRes);
        let lbJsonObj = this.$x2js.xml2js(lbQueryRes.data);
        console.log(lbJsonObj);
        let lbJsonObj2 = this.$x2js.xml2js(
          lbJsonObj.Envelope.Body.MOP_OutpBillsDetailQueryResponse.MOP_OutpBillsDetailQueryResult
        );
        console.log(lbJsonObj2);

        if (Array.isArray(lbJsonObj2.response.data.data_row)) {
          this.payDetail = lbJsonObj2.response.data.data_row;
        } else {
          this.payDetail = lbJsonObj2.response.data;
        }
      }).catch(err => {
        Toast(err.message);
      });
    },
    generateOrder() {
      // 防止重复点击
      if (this.isPaying) {
        return;
      }
      if (!this.radiovalue1) {
        Toast('请选择支付方式');
        return;
      }
         // 检查当前时间是否在23:48-00:01之间，这个时间段内禁止充值
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      
      if ((hours === 23 && minutes >= 48) || (hours === 0 && minutes <= 1)) {
        Toast({
          message: '当前时间段(23:48-00:01)正在对账，暂不支持支付操作，请0点过后再试！',
          duration: 5000
        });
        return;
      }
      // 设置支付状态为进行中
      this.isPaying = true;

      // 根据选择的支付方式执行不同逻辑
      if (this.radiovalue1 === '微信医保支付') {

        //判断单价小数位是否只有2位，不是统一错误
        console.log(this.payDetail);
        if (Array.isArray(this.payDetail)) {
          this.payDetail.forEach(item => {
            const amountStr = item.AMOUNT.toString();
            if (amountStr.includes('.')) {
              const parts = amountStr.split('.');
              const decimalPart = parts[1];
              // 检查小数位数是否超过2位且末尾非0
              if (decimalPart.length > 2 && !decimalPart.endsWith('0')) {
                Toast("单价有误，暂不支持医保结账，请到门诊缴费");
                this.isPaying = false;
                return;
              }
              // 如果超过2位但末尾是0，需要进一步检查去除末尾0后是否超过2位
              if (decimalPart.length > 2) {
                const trimmedDecimal = decimalPart.replace(/0+$/, ''); // 去除末尾的0
                if (trimmedDecimal.length > 2) {
                  Toast("单价有误，暂不支持医保结账，请到门诊缴费");
                  this.isPaying = false;
                  return;
                }
              }
            }
          });
        } else {
          // console.log("不是数组");
          const amountStr = this.payDetail.data_row.AMOUNT.toString();
          if (amountStr.includes('.')) {
            const parts = amountStr.split('.');
            const decimalPart = parts[1];
            // 检查小数位数是否超过2位且末尾非0
            if (decimalPart.length > 2 && !decimalPart.endsWith('0')) {
              Toast("单价有误，暂不支持医保结账，请到门诊缴费");
              this.isPaying = false;
              return;
            }
            // 如果超过2位但末尾是0，需要进一步检查去除末尾0后是否超过2位
            if (decimalPart.length > 2) {
              const trimmedDecimal = decimalPart.replace(/0+$/, ''); // 去除末尾的0
              if (trimmedDecimal.length > 2) {
                Toast("单价有误，暂不支持医保结账，请到门诊缴费");
                this.isPaying = false;
                return;
              }
            }
          }
        }
          this.handleMedicalInsurancePay("");
      } else if (this.radiovalue1 === '微信支付') {
          this.handleWechatPay();
      }
    },
    handleMedicalInsurancePay(item) {
      preCheck().then(res => {
        if (res.code === 200) {
          // 生成带参数的returnUrl（关键！）
          const returnUrlWithParams = `${this.returnUrl}?PatientId=${this.PatientId}&SerialFlowNo=${this.SerialFlowNo}${item ? `&TuiFei=${item}` : ''}`;
          const encodedReturnUrl = encodeURIComponent(returnUrlWithParams);

          let authUrl = res.data;
          if (authUrl.includes('?')) {
            authUrl += '&redirectUrl=' + encodedReturnUrl;
          } else {
            authUrl += '?redirectUrl=' + encodedReturnUrl;
          }

          window.location.href = authUrl; // 跳转授权页
        }
      });
    },
    getPayAuth(code) {
  // 显示加载中Toast（回跳后立即显示）
  const loadingToast = Toast.loading({
    message: '加载中...',
    forbidClick: true, // 禁止点击背景
    duration: 0 // 不自动关闭
  });

  let params = {
    qrcode: code,
  }
  console.log(params);
  getPayAuthCode(params).then((res) => {
    console.log("授权流程完毕，授权结果！！！")
    console.log(res)
    if (res.code == 200) {
      // 解析内层JSON字符串
      let responseData;
      try {
        responseData = typeof res.data.json === 'string' ? JSON.parse(res.data.json) : res.data.json;
      } catch (e) {
        console.error("JSON解析错误", e);
        Toast.fail("数据解析异常，请稍后重试");
        loadingToast.clear(); // 解析错误时关闭加载
        this.isPaying = false;
        return;
      }
      if(this.TuiFei == "tuifei"){
        alert(responseData.pay_auth_no)
       return;
      }
      if (responseData.user_card_no == res.data.IdNo) {
        if (responseData.code === 0) {
          this.globalData.payAuthCode = responseData.pay_auth_no
          this.globalData.userCardNo = responseData.user_card_no
          this.globalData.userName = responseData.user_name
          this.globalData.cityId = responseData.city_id
          this.globalData.userLongitudeLatitude = responseData.user_longitude_latitude
          this.globalData.ghid = sessionStorage.getItem('cachedSerialFlowNo') || this.SerialFlowNo;
          this.globalData.jzrid = sessionStorage.getItem('cachedPatientId') || this.PatientId;
          
          let YbInfo = {
            "payAuthNo": responseData.pay_auth_no,
            "userLongitudeLatitude": responseData.user_longitude_latitude,
            "userCardNo": responseData.user_card_no,
            "userName": responseData.user_name,
            "jlid": "YBJF" + sessionStorage.getItem('cachedSerialFlowNo') || this.SerialFlowNo,
            "kdsj": this.params.BillTime,
            "ysje": this.params.BillMoney,
            "jzrid": sessionStorage.getItem('cachedPatientId') || this.PatientId
          }
          sessionStorage.setItem('YbInfo', JSON.stringify(YbInfo));

          // 预支付请求参数
        // 定义慢特病列表
          const chronicDiseases = ['高血压', '高血压及并发症', '冠心病', '糖尿病', '糖尿病伴有并发症', '糖尿病特殊治疗', '恶性肿瘤门诊治疗', '肾移植抗排异治疗', '骨髓移植抗排异治疗', '心移植抗排异治疗', '肝移植抗排异治疗', '肺移植抗排异治疗', '肝肾移植抗排异治疗', '慢性乙型肝炎', '慢性丙型肝炎', '肝硬化', '血液透析', '腹膜透析', '慢性肾脏病', '类风湿性关节炎', '精神病', '重症精神病', '小儿脑性瘫痪', '儿童支气管哮喘', '再生障碍性贫血', '阿尔茨海默病', '系统性红斑狼疮', '经典的苯丙酮尿症', '儿童苯丙酮尿症', '强直性脊柱炎', '干燥综合征', '慢性阻塞性肺疾病', '癫痫', '脑血管病后遗症', '慢性肺源性心脏病', '风湿性心脏病', '股骨头缺血性坏死', '重症肌无力', '血友病', '肺结核', '子宫内膜异位症', '青光眼', '心房颤动', '慢性心力衰竭（心功能不全）', '银屑病', '骨骼增生异常综合征', '肺动脉高压', '特发性肺纤维化', '特发性血小板减少性紫癜', '大动脉炎', '克罗恩病', '溃疡性结肠炎', '湿性年龄相关性黄斑变性', '多发性硬化', '不孕不育门诊辅助生殖技术治疗'];
          
          // 判断病种类型
          const diagnosisType = chronicDiseases.includes(this.params.DiagnosisName) ? "慢特病" : "普通门诊";
          
          let req = {
            "userCardNo": this.globalData.userCardNo,
            "userName": this.globalData.userName,
            "orderTitle": "门诊缴费",
            "openid": res.data.openid,
            "ghid": this.globalData.ghid,
            "cityId": this.globalData.cityId,
            "FlowNo":this.params.FlowNo,
            "payAuthNo": this.globalData.payAuthCode,
            "jzrid": this.globalData.jzrid,
            "userLongitudeLatitude": this.globalData.userLongitudeLatitude,
            "accessToken": res.data.accessToken,
            "DiagnosisName": diagnosisType
          }

this.retryPrePayWithDelay(req, 1)  // 1次重试
  .then(res => {
    console.log(res);
    if (res.code == 200) {
      loadingToast.clear();
      let data = encodeURIComponent(JSON.stringify(res.data));
      this.$router.push(`/yborder?data=${data}`);
    }
  })
  .catch(err => {
    Toast.fail('支付请求失败');
    // 错误时也清除loading提示
    loadingToast.clear();
  })
  .finally(() => {
    this.isPaying = false;
    // 移除此行，避免重复清除loadingToast
  });


        } else if (responseData.code < 0) {
          Toast.fail("系统繁忙，请稍后重试");
          this.getData();
          loadingToast.clear(); // 异常时关闭
          this.isPaying = false;
        } else if (responseData.code > 0) {
          Toast.fail(responseData.message);
          this.radiovalue1 = '';
          this.getData();
          loadingToast.clear(); // 异常时关闭
          this.isPaying = false;
        }
      } else {
        Toast.fail("不是本人医保,不予办理");
        this.getData();
        loadingToast.clear(); // 校验失败时关闭
        this.isPaying = false;
        return;
      }
    } else {
      Toast.fail(res.message || "授权失败");
      this.getData();
      loadingToast.clear(); // 接口失败时关闭
      this.isPaying = false;
    }
  }).catch((err) => {
    console.error("getPayAuthCode error", err);
    Toast.fail("获取用户信息异常，请稍后重试");
    this.getData();
    loadingToast.clear(); // 接口异常时关闭
    this.isPaying = false;
  });
},
 retryPrePayWithDelay(requestData, retries) {
    return new Promise((resolve, reject) => {
      const doRequest = (attempt) => {
        prePay(requestData)
          .then(response => {
            resolve(response);
          })
          .catch(error => {
            if (attempt < retries) {
              console.warn(`prePay请求失败，正在进行第${attempt}次重试`);
              setTimeout(() => doRequest(attempt + 1), 1000); // 1秒后重试
            } else {
              reject(error);
            }
          });
      };
      doRequest(0);
    });
  },
    // 清除 URL 中的 code
    clearCodeFromUrl() {
      const urlParams = new URLSearchParams(window.location.search);
      urlParams.delete('code');
      const newSearch = urlParams.toString() ? '?' + urlParams.toString() : '';
      const cleanUrl = window.location.origin + window.location.pathname + window.location.hash.split('?')[0] + newSearch;
      window.history.replaceState(null, '', cleanUrl);
    },
    handleWechatPay() {
      console.log("this.params", this.params);
      apiUnifiedOrder(this.params).then((ref) => {
        if (ref.code === 200) {
          //调用微信支付
          try {

            const data = ref.data;

            // 兼容不同字段名
            let payParams = {
              appId: data.appid || data.appId,
              timeStamp: data.timeStamp || data.timestamp,
              nonceStr: data.nonce_str || data.nonceStr,
              package: data.package || `prepay_id=${data.prepay_id || data.prepayId}`,
              signType: 'MD5',
              paySign: data.paySign
            };

            console.log('支付参数:', payParams);

            // 查询参数
            let queryParams = {
              outTradeNo: data.outTradeNo
            };
            console.log('订单号:', queryParams.outTradeNo);

            // 验证必要参数
            const requiredParams = ['appId', 'timeStamp', 'nonceStr', 'package', 'paySign'];
            for (let param of requiredParams) {
              if (!payParams[param]) {
                Toast(`缺少支付参数: ${param}`);
                this.loading = false;
                return;
              }
            }

            if (typeof WeixinJSBridge == "undefined") {
              Toast("请在微信中打开页面进行支付");
              this.loading = false;
              return;
            }

            // 调起微信支付
            WeixinJSBridge.invoke('getBrandWCPayRequest', payParams, (res) => {
              console.log('微信支付返回:', res);
              console.log("订单号：", queryParams.outTradeNo);

              if (res.err_msg && res.err_msg.indexOf('ok') > -1) {
                // ✅ 支付成功，启动轮询
                this.startPaymentPolling(queryParams); // 调用组件方法
              } else if (res.err_msg && res.err_msg.indexOf('cancel') > -1) {
                Toast("用户取消支付");
              } else {
                Toast("支付失败: " + (res.err_msg || '未知错误'));
              }

              this.loading = false;
            });

          } catch (error) {
            console.error('支付调用异常:', error);
            Toast("支付调用失败");
            this.loading = false;
          }
        }
      }).catch((err) => {
        Toast("通讯异常，请稍后重试");
      });
    },
    // 独立方法：启动轮询查询支付结果
    startPaymentPolling(queryParams) {
      // 防止重复启动
      if (this.pollTimer) {
        clearInterval(this.pollTimer);
        this.pollTimer = null;
      }

      const toast = Toast.loading({
        forbidClick: true,
        message: '正在查询支付结果...',
        loadingType: 'circular',
        duration: 0
      });

      let pollCount = 0;
      const maxPollCount = 15; // 最多 30 秒（15次 × 2秒）

      this.pollTimer = setInterval(() => {
        pollCount++;
        console.log(`第 ${pollCount} 次轮询查询支付状态...`);

        apiOpWxQuery(queryParams)
          .then((res) => {
            console.log('查询响应:', res);

            if (res.code === 200) {
              const data = res.data;
              const state = data.trade_state;

              if (state === 'SUCCESS') {
                // ✅ 支付成功
                clearInterval(this.pollTimer);
                this.pollTimer = null;
                toast.clear();
                Toast.success("支付成功");
                // 设置支付状态为完成
                this.isPaying = false;
                // 清理缓存
                sessionStorage.removeItem('cachedPatientId');
                sessionStorage.removeItem('cachedSerialFlowNo');

                // 先跳转再刷新
                this.$router.replace({ path: "/Member_wdzd" });

                // 确保路由跳转完成后刷新页面
                this.$nextTick(() => {
                  window.location.reload();
                });

                sessionStorage.removeItem("yuyue");
              } else if (state === 'NOTPAY') {
                // 继续等待
                console.log('用户尚未支付');
              } else {
                // 其他失败状态
                clearInterval(this.pollTimer);
                this.pollTimer = null;
                toast.clear();
                Toast.fail("支付失败：" + (data.trade_state_desc || state));
              }
            } else {
              console.warn('查询接口异常:', res);
            }
          })
          .catch((error) => {
            console.error('查询请求失败:', error);
          })
          .finally(() => {
            if (pollCount >= maxPollCount) {
              if (this.pollTimer) {
                clearInterval(this.pollTimer);
                this.pollTimer = null;
              }
              toast.clear();
              Toast.fail("支付超时，请稍后查看订单状态");
            }
          });
      }, 2000);

      // 总超时兜底（30秒）
      setTimeout(() => {
        if (this.pollTimer) {
          clearInterval(this.pollTimer);
          this.pollTimer = null;
        }
        if (toast) {
          toast.clear();
        }
      }, maxPollCount * 2000);
    },
  }
}
</script>


<style scoped lang="scss">
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

.app-container {
  padding-bottom: 100px;
}

/* 背景层 */
.bj {
  background: #f5f5f5;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

/* 标题样式 */
.left-label {
  display: flex;
  align-items: center;
  padding: 15px 15px 10px;
  font-size: 0.45rem;
  font-weight: bold;
}

.label-color {
  width: 4px;
  height: 16px;
  background-color: #166bcc;
  margin-right: 8px;
  border-radius: 2px;
}

/* 卡片样式 */
.card {
  background: #fff;
  border-radius: 8px;
  margin: 0 12px 15px;
  padding: 12px 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* 单元格样式 */
.cell {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.cell:last-child {
  border-bottom: none;
}

.cell_title {
  font-size: 0.35rem;
  color: #666;
}

.cell_value {
  font-size: 0.35rem;
  color: #333;
  text-align: right;
  font-weight: 500;
}

/* 支付方式样式 */
.pay_type_list {
  display: flex;
  align-items: center;
}

/* 统一图片容器宽度，确保图片和文字都左对齐 */
.pay_type_list>div:first-child {
  display: flex;
  justify-content: flex-start;
  width: 1.8rem;
  /* 调整为适应1.2rem图片的容器宽度 */
  margin-right: 0.3rem;
}

.pay_type_list>div:last-child {
  font-size: 0.4rem;
  font-weight: 500;
}

/* 进一步放大图片（扩大0.5倍，即原来的1.5倍） */
.pay-image {
  width: 0.9rem;
  height: 0.9rem;
}

.medical-insurance-image {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
}

.pay-item-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  width: 100%;
}

/* 按钮样式 */
.btn {
  position: static;
  // bottom: 30px;
 margin: 1rem auto 0; /* 上边距20px，左右自动居中 */
  display: block;
  // left: 5%;
  width: 90%;
  height: 1rem;
  background-color: #166bcc;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.4rem;
  text-align: center;
}
</style>