<template>
  <view class="service-area-page">
    <!-- 顶部导航栏 -->
    <custom-navbar :title="navTitle" :showBack="true"></custom-navbar>

    <!-- 页面内容容器 -->
    <view class="page-content" :style="{ paddingBottom: buttonAreaHeight + 'px' }">
      <!-- 服务区域选择区域 -->
      <view class="area-container box-cont">
        <view class="area-header">
          <view class="title-bar"></view>
          <text class="area-title">服务区域</text>
        </view>
        
        

        <!-- 显示当前生效的服务区域 -->
        <view class="current-area" v-if="!showPendingArea">
          <view class="area-display">
            <text class="area-value">{{ currentAreasText || '暂未设置服务区域' }}</text>
          </view>
        </view>
        
        <!-- 显示待审核的服务区域 -->
        <view class="pending-area" v-else>
          <!-- 只有在编辑模式下才显示"请选择服务区域"提示 -->
          <view class="area-selection" @click="editable ? showRegionPopup() : null">
            <text class="area-label" v-if="editable">请选择服务区域</text>
            <view class="area-picker-trigger">
              <text class="selected-area">{{ selectedAreasText || '请选择' }}</text>
              <image class="arrow-down" v-if="editable" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3" mode="aspectFit"></image>
            </view>
          </view>
          
          <!-- 区域限制提示，只在编辑模式下显示 -->
          <view class="area-limit-tip" v-if="editable">
            <text class="limit-text">* 可以更换区域，但不能跨城市</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 服务区域选择弹出框 -->
    <view class="popup" :class="{ show: showRegionPopupFlag }">
      <view class="popup-mask" @click="hideRegionPopup"></view>
      <view class="popup-content region-popup">
        <view class="popup-header">
          <text class="popup-title">选择服务区域</text>
          <text class="popup-close" @click="hideRegionPopup">×</text>
        </view>
        <view class="region-tabs">
          <view 
            v-for="(tab, index) in regionTabs" 
            :key="index"
            class="region-tab"
            :class="{ active: currentTab === index }"
            @click="switchTab(index)"
          >
            {{tab}}
          </view>
        </view>
        <view class="region-body">
          <scroll-view 
            scroll-y 
            class="region-scroll"
            v-if="currentTab === 0"
          >
            <view 
              class="region-item"
              v-for="(province, index) in ChinaCitys"
              :key="index"
              @click="selectProvince(province,index)"
            >
              <text>{{province.province}}</text>
              <image class="arrow-right" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3" mode="aspectFit"></image>
            </view>
          </scroll-view>
          
          <scroll-view 
            scroll-y 
            class="region-scroll"
            v-if="currentTab === 1"
          >
            <view 
              class="region-item"
              v-for="(city, index) in cityList"
              :key="index"
              @click="selectCity(city,index)"
            >
              <text>{{city.city}}</text>
              <image class="arrow-right" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3" mode="aspectFit"></image>
            </view>
          </scroll-view>
          
          <scroll-view 
            scroll-y 
            class="region-scroll"
            v-if="currentTab === 2"
          >
            <view 
              class="region-item checkbox-item"
              v-for="(district, index) in districtList"
              :key="index"
              @click="toggleDistrictSelect(index)"
            >
              <view class="checkbox" :class="{ checked: district.checked }">
                <image v-if="district.checked" class="check-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/66325904-4603-48fd-b03b-90c684af96e9" mode="aspectFit"></image>
              </view>
              <text class="checkbox-label">{{district.area}}</text>
            </view>
          </scroll-view>
        </view>
        <view class="popup-footer">
          <view class="popup-btn cancel" @click="hideRegionPopup">
            <text class="btn-text">取消</text>
          </view>
          <view class="popup-btn confirm" @click="confirmRegionSelect">
            <text class="btn-text">确定</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-actions" ref="buttonArea">
      <!-- 驳回原因提示 -->
        <view class="reject-reason" v-if="shouldShowRejectReason">
          <view class="reject-title">您的提交已驳回</view>
          <view class="reject-detail">驳回原因：{{ backText }}</view>
        </view>
      <!-- 审核中提示 -->
      <view class="audit-tip" v-if="showAuditTip && !showPendingArea">
        <text class="audit-text">您的提交变更正在审核中...</text>
      </view>

      <!-- 去变更信息按钮 -->
      <view class="action-btn change-info-btn" v-if="buttonType === 'change'" @click="startChange">
        <text class="btn-text">去变更信息</text>
      </view>

      <!-- 取消和提交按钮 -->
      <view class="action-buttons-row" v-if="buttonType === 'edit'">
        <view class="action-btn cancel-btn" @click="cancelChange">
          <text class="btn-text cancel-text">取消</text>
        </view>
        <view class="action-btn submit-btn" @click="submitChange">
          <text class="btn-text">提交</text>
        </view>
      </view>

      <!-- 查看我的变更按钮 -->
      <view class="action-btn view-change-btn" v-if="buttonType === 'view'" @click="togglePendingArea">
        <text class="btn-text">{{ showPendingArea ? '返回' : '查看我的变更' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js';
import ChinaCitys from '@/static/data/ChinaCitys.json';

export default {
  data() {
    return {
      currentAreas: [], // 当前服务区域数组
      selectedAreas: [], // 选中的服务区域数组（待审核的）
      originalAreas: [], // 原始服务区域数组（当前生效的）
      editable: false, // 是否可编辑
      buttonType: 'change', // 按钮类型: change-去变更信息, edit-取消/提交, view-查看我的变更
      showAuditTip: false, // 是否显示审核中提示
      auditStatus: null, // 审核状态
      applyId: null, // 申请ID
      isLoading: true, // 加载状态
      showPendingArea: false, // 是否显示待审核的区域
      navTitle: '服务区域', // 导航栏标题
      buttonAreaHeight: 120, // 按钮区域高度
      backText: '', // 驳回原因
      
      // 区域选择器相关数据
      showRegionPopupFlag: false,
      currentTab: 0,
      regionTabs: ['省', '市', '区'],
      ChinaCitys: [],
      cityList: [],
      districtList: [],
      selectedProvince: null,
      selectedCity: null,
      
      // 原始城市信息（用于限制不能跨城市）
      originalCity: '',
      
      // 当前选择的城市信息
      currentSelectedCity: '',
      
      // 数据加载完成标记
      dataLoaded: false,

      preventStatusOverride: false, // 防止状态被覆盖
    }
  },
  computed: {
    // 当前区域显示文本
    currentAreasText() {
      return this.currentAreas.join('、');
    },
    // 选中区域显示文本
    selectedAreasText() {
      return this.selectedAreas.join('、');
    },
    // 检查是否有变更
    hasChanges() {
      const currentSorted = [...this.currentAreas].sort().join(',');
      const selectedSorted = [...this.selectedAreas].sort().join(',');
      return currentSorted !== selectedSorted;
    },
    // 控制驳回提示是否显示
    shouldShowRejectReason() {
      // 驳回状态下，只要不显示待审核区域，且有驳回原因，就显示
      const shouldShow = this.auditStatus === 3 && 
                      !this.showPendingArea && 
                      this.backText && 
                      this.backText.trim().length > 0;
      
      console.log('是否显示驳回原因:', {
        shouldShow,
        auditStatus: this.auditStatus,
        showPendingArea: this.showPendingArea,
        backText: this.backText
      });
      
      return shouldShow;
    }
    },
  onLoad() {
    this.initPage();
  },
  onReady() {
    this.getButtonAreaHeight();
  },
  methods: {
    // 初始化页面
    async initPage() {
      this.isLoading = true;
      try {
        await this.initAreaData();
        
        // 先加载当前生效的区域
        await this.loadCurrentEffectiveAreas();
        
        // 再加载申请详情
        await this.loadApplyDetails();
        
        // 最后更新页面状态
        this.updatePageStatus();
        
      } catch (error) {
        console.error('初始化页面失败:', error);
      } finally {
        this.isLoading = false;
      }
    },

    // 初始化地区数据
    initAreaData() {
      return new Promise((resolve) => {
        if (ChinaCitys && ChinaCitys.length > 0) {
          this.ChinaCitys = ChinaCitys;
        }
        resolve();
      });
    },

    // 获取按钮区域高度
    getButtonAreaHeight() {
      setTimeout(() => {
        const query = uni.createSelectorQuery().in(this);
        query.select('.bottom-actions').boundingClientRect(data => {
          if (data) {
            this.buttonAreaHeight = data.height + 20;
          }
        }).exec();
      }, 100);
    },

    // 更新导航栏标题
    updateNavTitle() {
      if (this.editable || this.showPendingArea) {
        this.navTitle = '服务区域变更';
      } else {
        this.navTitle = '服务区域';
      }
    },

    // 加载申请详情
    async loadApplyDetails() {
      try {
        console.log('开始加载申请详情...');
        const res = await request.post('/syr/userSyrAuth/details', {
          apply_type: 3 // 服务区域变更
        });

        console.log('完整的申请详情返回:', JSON.stringify(res, null, 2));
        
        if (res.code === 200 && res.data) {
          const detail = res.data;
          this.applyId = detail.id;
          this.auditStatus = detail.apply_state;
          this.backText = detail.back_text || '';

          console.log('审核状态:', this.auditStatus);
          console.log('servers_region字段:', detail.servers_region);
          console.log('servers_region类型:', typeof detail.servers_region);
          console.log('servers_region长度:', detail.servers_region?.length);
          
          // 处理服务区域数据
          if (detail.servers_region && detail.servers_region.length > 0) {
            console.log('申请详情中的服务区域:', detail.servers_region);
            if (this.auditStatus === 1) { // 审核中
              this.selectedAreas = [...detail.servers_region];
              console.log('审核中，待审核区域:', this.selectedAreas);
            } else if (this.auditStatus === 3) { // 审核驳回
              this.selectedAreas = [...detail.servers_region];
              console.log('审核驳回，被驳回区域:', this.selectedAreas);
            }
          } else {
            console.log('接口返回的服务区域为空');
            // 检查是否有其他字段包含服务区域数据
        if (detail.service_area) {
          console.log('从service_area字段获取数据:', detail.service_area);
          const areas = Array.isArray(detail.service_area) ? detail.service_area : [detail.service_area];
          if (this.auditStatus === 1 || this.auditStatus === 3) {
            this.selectedAreas = areas;
          }
        } else {
          console.log('所有服务区域字段都为空');
          // 如果审核中状态但没有待审核区域数据，可能是数据异常
          if (this.auditStatus === 1) {
            console.warn('审核中状态但无待审核区域数据，这可能是数据异常');
          }
        }
          }
          
          // 加载当前生效的区域
          await this.loadCurrentEffectiveAreas();
          
        } else {
          console.log('申请详情返回数据为空或code不为200:', res);
          await this.loadCurrentEffectiveAreas();
        }
        
      } catch (error) {
        console.error('加载申请详情失败:', error);
        await this.loadCurrentEffectiveAreas();
      }
    },

    // 加载当前生效的服务区域
    async loadCurrentEffectiveAreas() {
      try {
        console.log('开始加载当前生效的服务区域...');
        const res = await request.post('/user/getuser', {
          type: 2 // 手艺人类型
        });

        if (res.state === 1 && res.data) {
          // 检查服务区域字段
          if (res.data.servers_region && res.data.servers_region.length > 0) {
            this.currentAreas = [...res.data.servers_region];
            this.originalAreas = [...res.data.servers_region];
          } else if (res.data.service_area) {
            // 兼容旧数据，如果是字符串格式
            this.currentAreas = [res.data.service_area];
            this.originalAreas = [res.data.service_area];
          } else {
            this.currentAreas = [];
            this.originalAreas = [];
          }
          
          console.log('当前生效的区域:', this.currentAreas);
          
          // 解析原始城市信息
          this.parseOriginalCity();
          
          // 只有在无申请状态或审核通过状态时，才用当前区域更新选中区域
          if (this.auditStatus === null || this.auditStatus === 2) {
            this.selectedAreas = [...this.currentAreas];
            console.log('无申请或审核通过，同步选中区域:', this.selectedAreas);
          } else {
            console.log('审核中或审核驳回状态，保持选中区域不变:', this.selectedAreas);
          }
          
          this.updatePageStatus();
          
        }
      } catch (error) {
        console.error('加载当前生效区域失败:', error);
        this.currentAreas = [];
        this.originalAreas = [];
        if (this.auditStatus !== 1 && this.auditStatus !== 3) {
          this.selectedAreas = [];
        }
        this.updatePageStatus();
      }
    },

    // 解析原始城市信息
    parseOriginalCity() {
      if (this.currentAreas.length > 0) {
        const firstArea = this.currentAreas[0];
        const parts = firstArea.split('-');
        if (parts.length >= 2) {
          this.originalCity = parts[1]; // 格式：省-市-区，取第二部分就是市
          console.log('原始城市:', this.originalCity);
        }
      }
    },

    // 根据审核状态更新页面状态
    updatePageStatus() {
      console.log('更新页面状态，审核状态:', this.auditStatus);
      
      // 重置状态
      this.showAuditTip = false;
      this.showPendingArea = false;
      this.editable = false;
      
      // 根据审核状态设置页面
      if (this.auditStatus === 1) { // 审核中
        this.showAuditTip = true;
        this.buttonType = 'view';
        // 审核中时不默认显示待审核区域
        this.showPendingArea = false;
        
      } else if (this.auditStatus === 3) { // 审核驳回
        this.showAuditTip = false;
        this.buttonType = 'change';
        // 驳回状态默认显示当前生效区域
        this.showPendingArea = false;
        
        console.log('驳回原因:', this.backText);
        console.log('当前selectedAreas:', this.selectedAreas);
        
      } else { // 无申请或审核通过
        this.showAuditTip = false;
        this.buttonType = 'change';
        this.showPendingArea = false;
      }
      
      this.updateNavTitle();
      
      console.log('最终页面状态:', {
        showAuditTip: this.showAuditTip,
        buttonType: this.buttonType,
        editable: this.editable,
        showPendingArea: this.showPendingArea,
        auditStatus: this.auditStatus,
        backText: this.backText
      });
    },

    // 切换显示待审核的区域
    togglePendingArea() {
      this.preventStatusOverride = true;
      this.showPendingArea = !this.showPendingArea;

      console.log('切换待审核区域显示:', this.showPendingArea, '审核状态:', this.auditStatus);
      console.log('当前selectedAreas:', this.selectedAreas);
      console.log('当前selectedAreas长度:', this.selectedAreas.length);
      
      if (this.showPendingArea && this.auditStatus === 1 && this.selectedAreas.length === 0) {
        console.warn('审核中状态但选中区域为空，重新加载数据');
        console.log('重新加载前的数据状态:', {
          auditStatus: this.auditStatus,
          selectedAreas: this.selectedAreas,
          currentAreas: this.currentAreas
      });
        this.loadApplyDetails().finally(() => {
          console.log('重新加载后的数据状态:', {
            auditStatus: this.auditStatus,
            selectedAreas: this.selectedAreas,
            currentAreas: this.currentAreas
          });
          setTimeout(() => {
            this.preventStatusOverride = false;
          }, 100);
        });
      } else {
        setTimeout(() => {
          this.preventStatusOverride = false;
        }, 100);
      }
      
      this.updateNavTitle();
    },

    // 开始变更
    startChange() {
      this.editable = true;
      this.buttonType = 'edit';
      this.showPendingArea = true;
      this.updateNavTitle();
    },

    // 显示区域选择器
    showRegionPopup() {
      if (!this.editable) return;
      
      // 重置选择器状态
      this.currentTab = 0;
      this.cityList = [];
      this.districtList = [];
      this.selectedProvince = null;
      this.selectedCity = null;
      this.currentSelectedCity = '';
      
      this.showRegionPopupFlag = true;
    },

    // 隐藏区域选择器
    hideRegionPopup() {
      this.showRegionPopupFlag = false;
    },

    // 切换标签页
    switchTab(index) {
      if (index < this.currentTab) {
        this.currentTab = index;
      }
    },

    // 选择省份
    selectProvince(province, index) {
      this.selectedProvince = province.province;
      this.currentTab = 1;
      // 获取城市列表
      this.cityList = this.ChinaCitys[index].citys || [];
      // 重置当前选择的城市
      this.currentSelectedCity = '';
    },

    // 选择城市
    selectCity(city, index) {
      // 检查是否已经有选中的城市
      if (this.currentSelectedCity && city.city !== this.currentSelectedCity) {
        // 如果切换城市，需要清空已选区域
        uni.showModal({
          title: '提示',
          content: '切换城市将清空已选区域，是否继续？',
          success: (res) => {
            if (res.confirm) {
              // 清空已选区域
              this.selectedAreas = [];
              this.currentSelectedCity = city.city;
              this.selectedCity = city.city;
              this.currentTab = 2;
              // 获取区县列表并初始化选中状态
              this.districtList = (city.areas || []).map(item => ({
                ...item,
                checked: false
              }));
            }
          }
        });
      } else {
        // 第一次选择城市或选择同一城市
        this.currentSelectedCity = city.city;
        this.selectedCity = city.city;
        this.currentTab = 2;
        // 获取区县列表并初始化选中状态
        this.districtList = (city.areas || []).map(item => ({
          ...item,
          checked: this.selectedAreas.includes(`${this.selectedProvince}-${this.selectedCity}-${item.area}`)
        }));
      }
    },

    // 切换区县选择状态
    toggleDistrictSelect(index) {
      this.$set(this.districtList[index], 'checked', !this.districtList[index].checked);
    },

    // 确认地区选择
    confirmRegionSelect() {
      const selectedDistricts = this.districtList
        .filter(item => item.checked)
        .map(item => `${this.selectedProvince}-${this.selectedCity}-${item.area}`);

      if (selectedDistricts.length === 0) {
        uni.showToast({
          title: '请至少选择一个区县',
          icon: 'none'
        });
        return;
      }

      // 更新选中的区域
      this.selectedAreas = selectedDistricts;
      this.hideRegionPopup();

      console.log('选中的区域:', this.selectedAreas);
    },

    // 取消变更
    cancelChange() {
      // 恢复原始选择
      this.selectedAreas = [...this.originalAreas];
      
      this.editable = false;
      this.buttonType = 'change';
      this.showPendingArea = false;
      this.updateNavTitle();
    },

    // 提交变更
    async submitChange() {
      if (this.selectedAreas.length === 0) {
        uni.showToast({
          title: '请先选择服务区域',
          icon: 'none'
        });
        return;
      }
      
      if (!this.hasChanges) {
        uni.showToast({
          title: '未检测到变更',
          icon: 'none'
        });
        return;
      }
      
      try {
        uni.showLoading({
          title: '提交中...'
        });

        const params = {
          apply_type: 3, // 服务区域变更
          servers_region: this.selectedAreas // 数组格式
        };
        
        console.log('提交参数:', params);
        console.log('请求URL:', '/syr/userSyrAuth/apply');

        const res = await request.post('/syr/userSyrAuth/apply', params);
        
        uni.hideLoading();

        if (res.code === 200) {
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          });

          // 更新页面状态为审核中
          this.showAuditTip = true;
          this.editable = false;
          this.buttonType = 'view';
          this.auditStatus = 1; // 审核中
          this.showPendingArea = false;
          this.updateNavTitle();
          
          // 重新加载申请详情获取最新状态
          setTimeout(() => {
            this.loadApplyDetails();
          }, 1000);
        } else {
          uni.showToast({
            title: res.msg || '提交失败',
            icon: 'none'
          });
        }
      } catch (error) {
        uni.hideLoading();
        console.error('提交变更失败:', error);
        uni.showToast({
          title: '提交失败',
          icon: 'none'
        });
      }
    }
  }
}
</script>

<style scoped>
.service-area-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* 页面内容区域 */
.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx 0;
  box-sizing: border-box;
}

/* 审核中提示 */
.audit-tip {
  margin: 20rpx 24rpx 20rpx 24rpx;
  border-radius: 12rpx;
}

.audit-text {
  font-weight: 400;
  font-size: 32rpx;
  color: #333333;
  text-align: center;
  display: block;
}

/* 驳回原因样式 */
.reject-reason {
  background: transparent;
  padding: 24rpx;
}

.reject-title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
  line-height: 45rpx;
  text-align: center;
  font-style: normal;
}

.reject-detail {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #999999;
  line-height: 40rpx;
  text-align: center;
  font-style: normal;
  margin-top: 12rpx;

}

.area-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.title-bar {
  width: 6rpx;
  height: 30rpx;
  background-color: #E8101E;
  margin-right: 10rpx;
  border-radius: 5rpx;
}

.area-title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #1D2129;
  line-height: 48rpx;
  text-align: left;
  font-style: normal;
}

.box-cont {
  background: #ffffff;
  border-radius: 20rpx;
  margin: 0 24rpx 24rpx 24rpx;
  box-shadow: none;
}

.area-container {
  padding: 32rpx;
}

/* 当前区域显示 */
.current-area {
  padding: 20rpx 0;
}

.area-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.area-value {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  flex: 1;
}

/* 待审核区域选择 */
.pending-area {
  padding: 20rpx 0;
}

.area-selection {
  margin-bottom: 20rpx;
}

.area-label {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  margin-bottom: 16rpx;
  display: block;
}

.area-picker-trigger {
  display: flex;
  align-items: flex-start; /* 改为顶部对齐，避免文本过长时挤压 */
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background: #F8F9FD;
  border-radius: 12rpx;
  border: 2rpx solid #E9E9E9;
  min-height: 40rpx; /* 设置最小高度 */
}

.selected-area {
  font-size: 28rpx;
  color: #333333;
  flex: 1; /* 让文本区域占据剩余空间 */
  min-width: 0; /* 重要：允许文本区域收缩 */
  word-wrap: break-word; /* 允许文本换行 */
  overflow-wrap: break-word; /* 兼容性更好的换行 */
  margin-right: 20rpx; /* 给箭头留出空间 */
}

.arrow-down {
  width: 14rpx !important; /* 固定宽度 */
  height: 26rpx !important; /* 固定高度 */
  flex-shrink: 0; /* 防止箭头被压缩 */
}

/* 区域限制提示 */
.area-limit-tip {
  margin-top: 16rpx;
}

.limit-text {
  font-size: 24rpx;
  color: #E8101E;
}

/* 区域选择器样式 */
.popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: relative;
  background-color: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  padding: 32rpx;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 70vh;
}

.popup.show .popup-content {
  transform: translateY(0);
}

.region-popup {
  height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding: 0 32rpx;
  padding-top: 32rpx;
}

.popup-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
}

.popup-close {
  font-size: 40rpx;
  color: #999999;
  padding: 16rpx;
}

.region-tabs {
  display: flex;
  border-bottom: 1rpx solid #EEEEEE;
  margin-bottom: 20rpx;
  padding: 0 32rpx;
}

.region-tab {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666666;
  position: relative;
}

.region-tab.active {
  color: #E8101E;
  font-weight: 500;
}

.region-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #E8101E;
  border-radius: 2rpx;
}

.region-body {
  flex: 1;
  overflow: hidden;
}

.region-scroll {
  height: 100%;
  padding: 0 32rpx;
}

.region-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #EEEEEE;
}

.region-item.checkbox-item {
  padding: 20rpx 0;
  width: 100%;
  justify-content: flex-start;
}

.checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #DDDDDD;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.checkbox.checked {
  background-color: #E8101E;
  border-color: #E8101E;
}

.check-icon {
  width: 42rpx;
  height: 42rpx;
}

.checkbox-label {
  font-size: 28rpx;
  color: #333333;
}

.arrow-right {
  width: 14rpx;
  height: 26rpx;
}

.popup-footer {
  display: flex;
  margin-top: 32rpx;
  padding: 0 32rpx;
  padding-bottom: 32rpx;
}

.popup-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 16rpx;
}

.popup-btn.cancel {
  background-color: #F5F5F5;
}

.popup-btn.confirm {
  background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
}

.popup-btn .btn-text {
  font-size: 32rpx;
  font-weight: 500;
}

.popup-btn.cancel .btn-text {
  color: #666666;
}

.popup-btn.confirm .btn-text {
  color: #FFFFFF;
}

/* 底部按钮样式 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0rpx 24rpx 40rpx 24rpx;
  background: #ffffff;
  z-index: 100;
}

/* 单个按钮样式 */
.action-btn {
  height: 88rpx;
  border-radius: 43rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 400;
  margin-top: 20rpx;
}

.change-info-btn {
  background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
}

.view-change-btn {
  background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
}

/* 双按钮行样式 */
.action-buttons-row {
  display: flex;
  justify-content: space-between;
  margin: 0 30rpx;
}

.action-buttons-row .action-btn {
  width: 270rpx;
}

.cancel-btn {
  background: #E5E5E5;
  border-radius: 43rpx;
  padding: 0 15rpx;
}

.submit-btn {
  background: linear-gradient(180deg, #F52540 0%, #E8101E 100%, #E8101E 100%);
  border-radius: 43rpx;
  padding: 0 15rpx;
}

.btn-text {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 36rpx;
  color: #FFFFFF;
  line-height: 50rpx;
  text-align: left;
  font-style: normal;
}

.cancel-text {
  color: #666666;
}
</style>
