<template>
  <view class="safe-area-inset-bottom">
    <u-navbar class="navbar" :is-back="true" title="转接方开方" :custom-back="customBack" title-color="#000">
    </u-navbar>
    
    <!-- 患者信息 -->
    <view class="patient-info white p-32 m-t-2" v-if="patientInfo">
      <view class="flex-row flex-jus-sp flex-ali-center">
        <d-text :text="patientInfo.name || '--'" className="fs-4 content-c" :bold="true"></d-text>
        <d-text :text="patientInfo.mobile || '--'" className="fs-3 tips-c"></d-text>
      </view>
    </view>

    <!-- 分类切换 -->
    <view class="tabs flex p-32 flex-ali-center flex-jus-sp">
      <u-button 
        :throttle-time="0" 
        :plain="true" 
        :type="activeCategory==1?'success':'default'"
        :custom-style="tabsBtnStyle" 
        @click="switchCategory(1)"
        :hairline="true">
        中药
      </u-button>
      <u-button 
        :throttle-time="0" 
        :plain="true" 
        :type="activeCategory==2?'success':'default'"
        :custom-style="tabsBtnStyle" 
        @click="switchCategory(2)"
        :hairline="true">
        西药
      </u-button>
    </view>

    <!-- 临床诊断 -->
    <view class="top white p-32 flex-col m-t-2">
      <view class="top_title flex-row flex-ali-center">
        <image :src="require('@/static/image/js.png')" class="size-32"></image>
        <d-text text="诊断" className="light-c fs-32 m-l-16"></d-text>
      </view>
      <view class="m-t-16 flex flex-wrap">
        <view class="m-r-2 m-t-16" v-for="(item,i) in diagnoses" :key="item.id ? item.id : `diag_${i}`">
          <u-tag 
            shape="circle" 
            :text="item.name" 
            bg-color="#6ACDBB" 
            color="#fff" 
            close-color="#fff"
            :closeable="true" 
            @close="removeDiagnosis(i)" />
        </view>
      </view>
      <view class="m-t-24">
        <u-input 
          placeholder="请输入疾病" 
          :custom-style="illnessStyle" 
          :value="diagnosisText"
          @click="openDiagnosisModal" />
      </view>
    </view>

    <!-- 药品列表 -->
    <scroll-view :style="scrollStyle" scroll-y="true">
      <!-- 西药 -->
      <view class="m-t-2 b-r-8 white p-32 flex-col" v-if="activeCategory==2">
        <view class="flex-row flex-jus-sp flex-ali-center">
          <d-text text="R：" className="main-c fs-4" :bold="true"></d-text>
          <view class="flex-row m-l-163" style="height: 50rpx;">
            <view class="m-l-16">
              <u-button 
                :throttle-time="0" 
                shape="circle" 
                size="mini"
                :custom-style="{ backgroundColor:'#6ACDBB',color:'#fff' }" 
                @click="goAddDrug">
                添加商品
              </u-button>
            </view>
          </view>
        </view>
        <view class="bottom-border p-col-32" v-for="(item,index) in currentDrugs" :key="index">
          <view class="drug-item-content flex-row">
            <image 
              v-if="item.image" 
              :src="item.image" 
              class="drug-image"
              mode="aspectFill"
            ></image>
            <view class="drug-info-wrapper flex-1">
              <view class="flex-row flex-jus-sp flex-ali-center">
                <d-text :text="`${index+1}、${item.drug_name}`" className="fs-3 content-c"></d-text>
                <d-text :text="`￥${parseFloat(item.price || 0).toFixed(2)}`" className="error-c fs-3"></d-text>
              </view>
              <view class="flex-row flex-ali-center flex-jus-sp m-t-16">
                <view class="flex-row flex-ali-center m-t-16">
                  <d-text text="规格：" color="#6C7380"></d-text>
                  <d-text :text="item.specification || '--'" color="#6C7380"></d-text>
                </view>
                <view class="flex-row flex-ali-center m-t-16">
                  <d-text :text="(item.select_number || item.number) + '盒'" color="#6C7380"></d-text>
                </view>
              </view>
              <view class="flex-row flex-ali-center">
                <d-text text="用法：" color="#6C7380"></d-text>
                <d-text :text="item.usage || '未设置用法用量'" color="#6C7380"></d-text>
              </view>
            </view>
          </view>
          <view class="m-t-24 flex-row flex-jus-sa btnBox">
            <view @click="changeInfo(item, index)" class="btn left">调整用量</view>
            <view class="btn right" @click="removeDrug(index)">删除</view>
          </view>
        </view>
        <view class="flex-row flex-jus-center" v-if="currentDrugs.length==0">
          <d-empty @click="goAddDrug"></d-empty>
        </view>
      </view>

      <!-- 中药 -->
      <view class="white b-r-8 p-32 p-b-0 m-t-2" v-if="activeCategory==1">
        <view class="flex-row flex-jus-sp flex-ali-center">
          <view class="flex-row flex-ali-end">
            <d-text text="R" className="main-c fs-4" :bold="true"></d-text>
            <d-text text="：" className="main-c fs-4" :bold="true"></d-text>
          </view>
          <view class="flex-row" style="height: 50rpx;">
            <view class="m-l-16">
              <u-button 
                :throttle-time="0" 
                :custom-style="{ backgroundColor:'#6ACDBB',color:'#fff' }"
                shape="circle" 
                size="mini" 
                @click="goAddDrug">
                添加商品
              </u-button>
            </view>
          </view>
        </view>
        <view class="p-col-32" v-if="currentDrugs.length>0">
          <view class="label">药材：</view>
          <view class="mBox">
            <view class="grid-tem-col-2 rp">
              <view class="" v-for="(it) in currentDrugs" :key="it.id">
                <view class="flex-row flex-jus-sp flex-ali-center m-t-12 delBox">
                  <d-text :text="it.drug_name||it.name" className="fs-3 content-c"></d-text>
                  <d-text :text="String(it.number)+(it.unit?it.unit.name:'g')" className="fs-3 tips-c"></d-text>
                </view>
              </view>
            </view>
          </view>
          <view class="m-t-24 flex-row flex-jus-sa btnBox">
            <view @click="goAddDrug" class="btn left">调整用量</view>
            <view class="btn right" @click="removeAllDrugs">删除</view>
          </view>
        </view>
        <view class="flex-row flex-jus-center" v-else>
          <d-empty @click="goAddDrug"></d-empty>
        </view>
      </view>

      <!-- 医嘱 -->
      <view class="flex-col b-r-8 white p-32 m-t-2">
        <view class="flex-jus-sp flex-row flex-ali-center">
          <d-text text="医嘱" color="#6C7380"></d-text>
          <d-text @click="openDoctorOrderModal" text="常用医嘱" color="#6ACDBB"></d-text>
        </view>
        <u-input 
          v-model="entrust" 
          placeholder="请输入" 
          :custom-style="entrustStyle" />
      </view>

      <!-- 诊疗费 -->
      <view class="flex-row p-2 flex-jus-end m-t-2">
        <view class="flex-row flex-ali-center" style="margin-right: 20rpx">
          <text>诊疗费：</text>
          <u-input 
            v-model="treatement_price" 
            placeholder="请输入" 
            :custom-style="entrustStyle2" 
            style="width: 200rpx" />
        </view>
        <view class="flex-row flex-ali-center">
          <d-text text="商品计费：" className="m-r-16 tips-c"></d-text>
          <d-text :text="`￥${totalProductCost.toFixed(2)}`" color="#F44336" :bold="true"></d-text>
        </view>
      </view>
      
      <!-- 总价显示 -->
      <view class="flex-row p-2 flex-jus-end m-t-2" v-if="currentDrugs.length > 0">
        <view class="flex-row flex-ali-center">
          <d-text text="总价：" className="m-r-16 tips-c fs-32"></d-text>
          <d-text :text="`￥${getSum}`" color="#F44336" :bold="true" className="fs-36"></d-text>
        </view>
      </view>
      
      <!-- 提示信息 -->
      <view class="ac m-t-2 p-32">
        <d-text text="请确认患者已在实体医院就诊，并有明确诊断" className="tips-c fs-24"></d-text>
      </view>
    </scroll-view>

    <!-- 底部按钮（另存常用方未对接保存接口，不展示） -->
    <view class="bottom flex-jus-sp flex-ali-center safe-area-inset-bottom">
      <u-button 
        :throttle-time="0" 
        @click="sendPrescription" 
        shape="circle"
        :custom-style="{backgroundColor:buttonLodging?'#A5DCD2':'#6ACDBB',color:'#fff',height:'86rpx', width: '686rpx'}"
        :disabled="buttonLodging">
        发送处方
      </u-button>
    </view>

    <!-- 常用诊断弹窗 -->
    <DiagnosisModal 
      v-model="showDiagnosisModal"
      :selectedDiagnosis="diagnosisText"
      @confirm="handleDiagnosisConfirm"
    />
    
    <!-- 常用医嘱弹窗 -->
    <DoctorOrderModal 
      v-model="showDoctorOrderModal"
      :selectedDoctorOrder="entrust"
      @confirm="handleDoctorOrderConfirm"
    />
    
    <!-- 西药用法用量设置弹窗 -->
    <WesternMedicineUsageModal 
      v-model="showWesternUsageModal"
      :drug="editingDrug"
      @confirm="handleConfirmWesternUsage"
    />
  </view>
</template>

<script>
import { req } from '@/common/js/index.js';
import { 
  addWestPrescription, 
  checkChineseMedicineConflictApi,
  getDiseaseList,
  getDrugUseList,
  getProductListDoctorReception,
  getPatientItem
} from '@/api/reception.js';
import DiagnosisModal from './components/DiagnosisModal.vue';
import DoctorOrderModal from './components/DoctorOrderModal.vue';
import WesternMedicineUsageModal from './components/WesternMedicineUsageModal.vue';

export default {
  components: {
    DiagnosisModal,
    DoctorOrderModal,
    WesternMedicineUsageModal
  },
  data() {
    return {
      registerId: '',
      patientId: '',
      patientInfo: null,
      activeCategory: 2, // 1=中药，2=西药
      diagnoses: [],
      diagnosisText: '', // 诊断文本（用于显示）
      currentDrugs: [],
      entrust: '',
      treatement_price: '',
      buttonLodging: false,
      // 用法用量弹窗
      showWesternUsageModal: false,
      editingDrug: null,
      editingDrugIndex: -1,
      showDiagnosisModal: false,
      showDoctorOrderModal: false,
      // 中药相关字段
      ruleType: 1, // 1=包法，2=制剂
      dosage: 7, // 剂数
      dayDosage: 2, // 每日次数
      packageMethodId: null, // 包法ID
      processRuleId: null, // 加工规则ID
      processRuleNoteId: null, // 加工规则备注ID
      childProcessRuleId: null, // 子加工规则ID
      illnessStyle: {
        fontSize: '28rpx',
        backgroundColor: '#F3F4F5',
        borderRadius: '66rpx',
        height: '66rpx',
        padding: '8rpx 32rpx'
      },
      entrustStyle: {
        fontSize: '30rpx',
        backgroundColor: '#F3F4F5',
        height: '74rpx',
        padding: '16rpx',
        borderRadius: '8rpx',
        marginTop: '16rpx'
      },
      entrustStyle2: {
        fontSize: '30rpx',
        backgroundColor: '#F3F4F5',
        height: '52rpx',
        padding: '0 16rpx',
        borderRadius: '8rpx',
      },
      tabsBtnStyle: {
        padding: '8rpx 16px',
        height: '58rpx',
        fontSize: '30rpx',
        width: '212rpx'
      },
      scrollStyle: {
        height: 'calc(100vh - 600rpx)',
        marginBottom: '200rpx'
      }
    };
  },
  computed: {
    // 商品总价（参考PC端计算逻辑）
    totalProductCost() {
      if (this.currentDrugs.length === 0) return 0;
      // 中药：药品价格 * 用量 * 剂数
      if (this.activeCategory === 1) {
        return this.currentDrugs.reduce((sum, drug) => {
          return sum + (parseFloat(drug.price || 0) * parseFloat(drug.number || 1) * parseFloat(this.dosage || 1));
        }, 0);
      }
      // 西药：药品价格 * 数量
      return this.currentDrugs.reduce((sum, drug) => {
        return sum + (parseFloat(drug.price || 0) * parseInt(drug.select_number || drug.number || 1));
      }, 0);
    },
    // 加工费（仅中药，参考PC端计算逻辑）
    processingFee() {
      if (this.activeCategory !== 1 || this.ruleType === 1) return 0;
      // TODO: 根据加工规则计算加工费
      return 0;
    },
    // 总价
    getSum() {
      return (this.totalProductCost + this.processingFee + parseFloat(this.treatement_price || 0)).toFixed(2);
    }
  },
  onLoad(options) {
    this.registerId = options.register_id || '';
    this.patientId = options.patient_id || '';
    
    // 从本地存储恢复数据
    this.restoreFromLocalStorage();
    
      // 获取患者信息
      this.getPatientInfo();
  },
  onShow() {
    // 从本地存储恢复当前分类的药品数据
    this.getCurrentDrugs();
  },
  methods: {
    /**
     * 获取存储key（完全参考PC端结构，添加doctorReceptionWx-前缀）
     */
    getStorageKey(category) {
      return `doctorReceptionWx-prescriptionData_${category}_${this.patientId}`;
    },
    
    /**
     * 从本地存储恢复数据
     */
    restoreFromLocalStorage() {
      // 恢复当前选中的患者ID
      const savedPatientId = uni.getStorageSync('doctorReceptionWx-id');
      if (savedPatientId) {
        this.patientId = savedPatientId;
      }
      
      // 恢复当前激活的分类
      const savedCategory = uni.getStorageSync(`doctorReceptionWx-activeCategory${this.patientId}`);
      if (savedCategory) {
        this.activeCategory = parseInt(savedCategory);
      } else {
        // 检查哪个分类有数据
        const chineseData = uni.getStorageSync(this.getStorageKey(1));
        const westData = uni.getStorageSync(this.getStorageKey(2));
        if (chineseData && JSON.parse(chineseData).length > 0) {
          this.activeCategory = 1;
        } else if (westData && JSON.parse(westData).length > 0) {
          this.activeCategory = 2;
        }
      }
    },
    
    /**
     * 获取当前药品数据
     */
    getCurrentDrugs() {
      const key = this.getStorageKey(this.activeCategory);
      const data = uni.getStorageSync(key);
      this.currentDrugs = data ? JSON.parse(data) : [];
    },
    
    /**
     * 保存到本地存储
     */
    saveToLocalStorage() {
      const key = this.getStorageKey(this.activeCategory);
      uni.setStorageSync(key, JSON.stringify(this.currentDrugs));
      // 保存当前激活的分类
      uni.setStorageSync(`doctorReceptionWx-activeCategory${this.patientId}`, this.activeCategory.toString());
      // 保存当前患者ID
      uni.setStorageSync('doctorReceptionWx-id', this.patientId);
    },
    
    /**
     * 切换分类
     */
    switchCategory(category) {
      this.activeCategory = category;
      this.getCurrentDrugs();
    },
    
    /**
     * 获取患者信息
     */
    async getPatientInfo() {
      if (!this.patientId) return;
      try {
        const res = await getPatientItem(this.patientId);
        this.patientInfo = res;
        if (res && res.user_patient) {
          this.patientInfo = {
            name: res.user_patient.name,
            mobile: res.user_patient.mobile
          };
        }
      } catch (error) {
        console.error('获取患者信息失败:', error);
      }
    },
    
    /**
     * 打开诊断弹窗
     */
    openDiagnosisModal() {
      this.showDiagnosisModal = true;
    },
    
    /**
     * 处理诊断确认
     */
    handleDiagnosisConfirm(diagnosisText) {
      this.diagnosisText = diagnosisText;
      // 将诊断文本转换为诊断数组
      if (diagnosisText) {
        const diagnosisNames = diagnosisText.split('，').filter(Boolean);
        this.diagnoses = diagnosisNames.map((name, index) => ({
          id: `temp_${index}`,
          name: name
        }));
      } else {
        this.diagnoses = [];
      }
    },
    
    /**
     * 打开医嘱弹窗
     */
    openDoctorOrderModal() {
      this.showDoctorOrderModal = true;
    },
    
    /**
     * 处理医嘱确认
     */
    handleDoctorOrderConfirm(doctorOrderText) {
      this.entrust = doctorOrderText;
    },
    
    /**
     * 删除诊断
     */
    removeDiagnosis(index) {
      this.diagnoses.splice(index, 1);
    },
    
    /**
     * 去添加药品
     */
    goAddDrug() {
      uni.navigateTo({
        url: `/subPackages/sub_reception/add_drug?category=${this.activeCategory}&patient_id=${this.patientId}&register_id=${this.registerId}`
      });
    },
    
    /**
     * 调整用量
     */
    changeInfo(item, index) {
      // 仅西药支持调整用量
      if (this.activeCategory !== 2) {
        this.$toast('当前仅支持西药用法用量设置');
        return;
      }
      this.editingDrug = JSON.parse(JSON.stringify(item));
      this.editingDrugIndex = index;
      this.showWesternUsageModal = true;
    },
    
    /**
     * 确认西药用法用量（接诊页）
     * @param {Object} usageData - 用法用量数据
     */
    handleConfirmWesternUsage(usageData) {
      if (this.editingDrugIndex >= 0) {
        const drug = this.currentDrugs[this.editingDrugIndex];
        drug.time_id = usageData.time_id;
        drug.type_id = usageData.type_id;
        drug.frequency_id = usageData.frequency_id;
        drug.unit_id = usageData.unit_id;
        drug.number = usageData.number;
        drug.select_number = usageData.select_number || drug.select_number || 1;
        drug.use_num = usageData.use_num;
        drug.use_type = usageData.use_type;
        drug.use_frequency = usageData.use_frequency;
        drug.unit = usageData.unit;
        // 同步显示字段
        if (usageData.use_type && usageData.use_num && usageData.unit) {
          drug.usage = `${usageData.use_type.name}，${usageData.use_num.name}，每次${usageData.number}${usageData.unit.name}`;
        }
        this.saveToLocalStorage();
      }
      this.editingDrug = null;
      this.editingDrugIndex = -1;
    },
    
    /**
     * 删除药品
     */
    removeDrug(index) {
      uni.showModal({
        title: '删除药品',
        content: '是否要删除？',
        success: ({ confirm }) => {
          if (confirm) {
            this.currentDrugs.splice(index, 1);
            this.saveToLocalStorage();
          }
        }
      });
    },
    
    /**
     * 删除所有药品（中药）
     */
    removeAllDrugs() {
      uni.showModal({
        title: '删除药品',
        content: '是否要删除所有药品？',
        success: ({ confirm }) => {
          if (confirm) {
            this.currentDrugs = [];
            this.saveToLocalStorage();
          }
        }
      });
    },
    
    
    /**
     * 发送处方
     */
    async sendPrescription() {
      if (this.buttonLodging) {
        this.$toast('正在处理中，请勿重复提交');
        return;
      }
      
      // 验证
      if (this.currentDrugs.length === 0) {
        this.$toast('请添加药品');
        return;
      }
      if (this.diagnoses.length === 0) {
        this.$toast('请添加诊断');
        return;
      }
      if (!this.entrust) {
        this.$toast('请输入医嘱');
        return;
      }
      
      this.buttonLodging = true;
      
      try {
        // 如果是中药，先检查相冲
        if (this.activeCategory === 1) {
          const names = this.currentDrugs.map((item) => item.drug_name || item.name);
          const checkRes = await checkChineseMedicineConflictApi({ names: names });
          if (checkRes && checkRes.is_exist === true) {
            uni.showModal({
              title: '药物相冲提示',
              content: checkRes.message || '检测到该处方内具有药物相冲，是否继续开方？',
              showCancel: true,
              success: ({ confirm }) => {
                if (confirm) {
                  this.doAddWestPrescription(1);
                } else {
                  this.buttonLodging = false;
                }
              }
            });
            return;
          }
        }
        
        // 发送处方
        await this.doAddWestPrescription(0);
      } catch (e) {
        console.error('发送处方失败:', e);
        this.$toast('发送处方失败，请重试');
        this.buttonLodging = false;
      }
    },
    
    /**
     * 执行发送处方（参考PC端参数结构）
     */
    async doAddWestPrescription(doctorSecondSign = 0) {
      const clinical_diagnose = this.diagnosisText || this.diagnoses.map((item) => item.name).join(',');
      
      // 发送前参数校验（仅西药相关）
      if (this.activeCategory === 2) {
        if (!this.patientInfo || !this.patientId) {
          this.$toast('患者信息缺失，无法发送处方');
          return;
        }
        const invalidDrug = this.currentDrugs.find((drug) => {
          return !(
            drug.id &&
            (drug.select_number || drug.number) &&
            drug.time_id &&
            drug.type_id &&
            drug.frequency_id &&
            drug.unit_id &&
            drug.use_type && drug.use_type.name &&
            drug.use_num && drug.use_num.name &&
            drug.unit && drug.unit.name
          );
        });
        if (invalidDrug) {
          this.$toast('请先为西药设置完整的用法用量');
          return;
        }
      }

      // 参考PC端的参数结构
      const params = {
        patient: this.patientInfo ? { id: this.patientId, ...this.patientInfo } : { id: this.patientId },
        drugs: this.currentDrugs,
        diagnosis: clinical_diagnose,
        medicalAdvice: this.entrust,
        total: parseFloat(this.getSum),
        category: 1, // 1-自费，2-医保，TODO: 从配置获取
        drug_type: 2, // TODO: 根据实际需求设置
        register_id: parseInt(this.registerId),
        treatment_price: parseFloat(this.treatement_price || 0),
        prescription_type: this.activeCategory, // 1=中药，2=西药
        doctor_second_sign: doctorSecondSign,
        // 中药特有字段
        package_method_id: this.activeCategory === 1 ? (this.packageMethodId || null) : null,
        process_rule_id: this.activeCategory === 1 ? (this.processRuleId || null) : null,
        process_rule_note_id: this.activeCategory === 1 ? (this.processRuleNoteId || null) : null,
        child_process_rule_id: this.activeCategory === 1 ? (this.childProcessRuleId || null) : null,
        process_rule_type: this.activeCategory === 1 ? (this.ruleType || 1) : null,
        processing_fee: this.activeCategory === 1 ? this.processingFee : 0,
        dosage: this.activeCategory === 1 ? (this.dosage || 7) : null,
        day_dosage: this.activeCategory === 1 ? (this.dayDosage || 2) : null
      };
      
      try {
        const res = await addWestPrescription(params);
        if (res && (res.code === 0 || res.errcode === 0)) {
          uni.showToast({ title: '发送成功', icon: 'success' });
          
          // 清空当前数据
          this.currentDrugs = [];
          this.diagnoses = [];
          this.diagnosisText = '';
          this.entrust = '';
          this.treatement_price = '';
          // 清空本地存储
          uni.removeStorageSync(this.getStorageKey(1));
          uni.removeStorageSync(this.getStorageKey(2));
          uni.removeStorageSync(`doctorReceptionWx-activeCategory${this.patientId}`);
          
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({ title: res.msg || res.message || '发送失败', icon: 'none' });
        }
      } catch (e) {
        console.error('发送处方失败:', e);
        uni.showToast({ title: '发送处方失败，请重试', icon: 'none' });
      } finally {
        this.buttonLodging = false;
      }
    },
    
    /**
     * 返回
     */
    customBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
.patient-info {
  border-radius: 8rpx;
}

.tabs {
  background: #fff;
}

.top {
  border-radius: 8rpx;
}

.top_title {
  margin-bottom: 16rpx;
}

.size-32 {
  width: 32rpx;
  height: 32rpx;
}

.m-t-2 {
  margin-top: 16rpx;
}

.p-32 {
  padding: 32rpx;
}

.m-t-16 {
  margin-top: 16rpx;
}

.m-t-24 {
  margin-top: 24rpx;
}

.m-r-2 {
  margin-right: 16rpx;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-jus-sp {
  justify-content: space-between;
}

.flex-ali-center {
  align-items: center;
}

.white {
  background: #fff;
}

.b-r-8 {
  border-radius: 8rpx;
}

.bottom-border {
  border-bottom: 1px solid #f0f0f0;
  padding: 32rpx 0;
}

.p-col-32 {
  padding: 0 32rpx;
}

.btnBox {
  display: flex;
  justify-content: space-around;
}

.btn {
  padding: 16rpx 32rpx;
  border-radius: 8rpx;
  border: 1px solid #6ACDBB;
  color: #6ACDBB;
  font-size: 28rpx;
}

.btn.left {
  border-color: #6ACDBB;
  color: #6ACDBB;
}

.btn.right {
  border-color: #FC3636;
  color: #FC3636;
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32rpx;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 9999;
}

.plr20 {
  padding: 0 40rpx;
}

.listBox {
  padding: 32rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.listItem {
  padding: 24rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 16rpx;
}

.btnBox2 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32rpx;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.commentModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.main {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 80vh;
}

.mainTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1px solid #f0f0f0;
}

.mainTop .l,
.mainTop .r {
  color: #6ACDBB;
  font-size: 32rpx;
}

.mainTop .c {
  font-size: 36rpx;
  font-weight: bold;
}

.body {
  padding: 32rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.item {
  padding: 24rpx;
  border-bottom: 1px solid #f0f0f0;
}

.item.act {
  background: #f0f9ff;
  color: #6ACDBB;
}

.label {
  font-size: 28rpx;
  color: #6C7380;
  margin-bottom: 16rpx;
}

.mBox {
  margin-top: 16rpx;
}

.grid-tem-col-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}

.rp {
  padding: 16rpx;
}

.delBox {
  padding: 16rpx;
  background: #f9f9f9;
  border-radius: 8rpx;
}
</style>
