<template>
  <view class="profile-page">
    <!-- 顶部导航栏 -->
    <custom-navbar title="个人资料"
    			   :showBack="true"></custom-navbar>
    <!-- 内容区域 -->
    <view class="content">
      <!-- 表单列表 -->
      <view class="form-list">
        <!-- 头像 -->
        <view class="form-item" @click="chooseAvatar('avatar')">
          <text class="label required">头像</text>
          <view class="avatar-right">
            <image
				class="avatar"
				v-if="userInfo.head_photo"
				:src="userInfo.head_photo"
				mode="aspectFill"></image>
          </view>
        </view>
        
        <!-- 昵称 -->
        <view class="form-item">
          <text class="label required">{{identity == '1' ? '真实姓名' : '店铺名称'}}</text>
          <view class="value-right">
			<input
			  type="text"
			  v-model="userInfo.name"
			  :placeholder="identity == '1' ? '请输入真实姓名' : '请输入店铺名称'"
			  placeholder-class="placeholder"
			  class="value inp-value"
			/>
            <!-- <text class="value">{{userInfo.name}}</text> -->
          </view>
        </view>
        
        <!-- 性别 -->
        <!-- <view class="form-item" @click="openPicker('gender')">
          <text class="label">性别</text>
          <view class="value-right">
            <text class="value">{{userInfo.sex}}</text>
          </view>
        </view> -->
        
        <!-- 生日 -->
        <!-- <view class="form-item" @click="openPicker('birthday')">
          <text class="label">生日</text>
          <view class="value-right">
            <text class="value">{{userInfo.birthday}}</text>
          </view>
        </view> -->
        
        <!-- 所在地 -->
        <view class="form-item" @click="openPicker('dependency')">
          <text class="label required">所在地</text>
          <view class="value-right">
            <text class="value">{{userInfo.dependency}}</text>
          </view>
        </view>
		
		<!-- 详细地址 -->
		<view class="form-item" @click="getAddressInfo">
		  <text class="label required">详细地址</text>
		  <view class="value-right">
		    <text class="value">{{userInfo.address}}</text>
		  </view>
		</view>
        
		<!-- 详细地址 -->
		<view class="form-item" v-if="identity == '1'">
		  <text class="label required">所属店铺</text>
		  <view class="value-right">
			<input
			  type="text"
			  v-model="userInfo.for_shop"
			  placeholder="请输入所属店铺"
			  placeholder-class="placeholder"
			  class="value inp-value"
			/>
		  </view>
		</view>
		
        <!-- 服务技能 -->
        <view class="form-item" @click="showServicePopup">
          <text class="label required">服务技能</text>
          <view class="value-right">
            <view class="skills-wrapper">
              <text class="value"
					v-for="(item,i) in userInfo.servers_kill_arr"
					:key="i">{{item}}、</text>
            </view>
            <text class="tag">新增</text>
          </view>
        </view>
        
        <!-- 服务区域   -->
        <view class="form-item" @click="showRegionPopup" v-if="identity == '1'">
          <text class="label required">服务区域</text>
          <view class="value-right">
            <view class="skills-wrapper">
              <text class="value"
					v-for="(item,i) in userInfo.servers_region"
					:key="i">{{item}}</text>
            </view>
            <text class="tag">变更</text>
          </view>
        </view>
		
		
		<!-- 服务时间 -->
		<view class="form-item" v-if="identity == '1'" @click="openPicker('default_times')">
		  <text class="label required">服务时间</text>
		  <view class="value-right">
		    <view class="skills-wrapper">
		      <text class="value">{{userInfo.default_times}}</text>
		    </view>
		    <text class="tag">变更</text>
		  </view>
		</view>
		<view class="form-item" v-else @click="openPicker('default_times')">
		  <text class="label required">营业时间</text>
		  <view class="value-right">
		    <view class="skills-wrapper">
		      <text class="value">{{userInfo.business_time}}</text>
		    </view>
		    <text class="tag">变更</text>
		  </view>
		</view>
		
		<!-- 经验 -->
		<view class="form-item" @click="openPicker('major')">
		  <text class="label required">专业经验</text>
		  <view class="value-right">
		    <view class="skills-wrapper">
		      <text class="value">{{userInfo.major == 1 ? '实习' : userInfo.major == 2 ? '1-3年' : userInfo.major == 3 ? '3-5年' : userInfo.major == 4 ? '5-10年' : userInfo.major == 5 ? '10年以上' : ''}}</text>
		    </view>
		    <text class="tag">变更</text>
		  </view>
		</view>
		<!-- 工作状态 v-if="identity == '1'"-->
		<view class="form-item"
			  @click="openPicker('work_state')"
			  v-if="identity == '1'">
		  <text class="label required">目前工作状态</text>
		  <view class="value-right">
		    <view class="skills-wrapper">
		      <text class="value">{{userInfo.work_state == 1 ? '有工作' : userInfo.work_state == 2 ? '无工作' : ''}}</text>
		    </view>
		    <text class="tag">变更</text>
		  </view>
		</view>
      </view>

      <!-- 个人介绍 -->
      <view class="section-card" v-if="identity == 1">
        <text class="section-title required">个人介绍</text>
        <view class="section-content">
          <textarea
            type="text"
            v-model="userInfo.detail"
            placeholder="请输入个人介绍"
            placeholder-class="placeholder"
            class="textarea"
          />
        </view>
      </view>

      <!-- 个人介绍 -->
      <!-- <view class="section-card">
        <text class="section-title">个人爱好</text>
        <view class="section-content">
          <textarea
            type="text"
            v-model="userInfo.detail"
            placeholder="请输入个人爱好"
            placeholder-class="placeholder"
            class="textarea"
          />
        </view>
      </view> -->
	  
      <!-- 资质证书 -->
      <view class="section-card" v-if="identity == 1">
        <text class="section-title">请上传资质证书</text>
        <view class="upload-grid" v-if="userInfo.qualifications">
		  <!-- <upload-img
			:photo="userInfo.qualifications"
			:maxNum="9"
			:width="'726rpx'"
        	@addImg="addImg"
        	@deleteImage="deleteImage"></upload-img>
		  -->
		  <ali-oss-uploader
		    v-model="userInfo.qualifications"
		    :max-count="9"
		    :max-size="5"
		    :width="'726rpx'"
		    :type="artisanType+1"
		    :user-id="userInfo.id"
		    button-text="上传图片"
		    tips="最多上传3张图片，每张不超过5MB"
		    @success="onUploadSuccess"
		    @error="onUploadError"
		    @delete="onFileDelete"
		    @ckeckisShowPer="ckeckisShowPer"
		    @ckecknowQer="ckecknowQer"
		  >
		  </ali-oss-uploader>
		  <!-- <view
		    v-for="(item, index) in userInfo.qualifications" 
		    :key="index"
		    class="image-preview"
		  >
		    <image
		      :src="item"
		      class="upload-image"
		      mode="aspectFill"
		      @click="previewImage(item, userInfo.qualifications)"
		    ></image>
		    <view class="delete-btn" @click="deleteImage(index)">×</view>
		  </view>
          <view 
            class="upload-item" 
            @click="chooseImage('qualifications')"
            v-if="userInfo.qualifications.length < 9"
          >
            <image src="/static/images/upload-img.png" class="upload-icon" mode="aspectFit"></image>
          </view> -->
        </view>
      </view>

      <!-- 营业执照 -->
      <view class="section-card" v-if="identity == 1">
        <text class="section-title required">请上传营业执照</text>
        <view class="upload-grid">
		  <view class="image-preview" v-if="userInfo.uscc_photo" >
		    <image
		      :src="userInfo.uscc_photo"
		      class="upload-image"
		      mode="aspectFill"
		      @click="previewUscc(userInfo.uscc_photo)"
		    ></image>
		    <view class="delete-btn" @click="deleteImage('uscc_photo')">×</view>
		  </view>
          <view 
            class="upload-uscc" 
            @click="chooseUsccPhoto"
			v-else
          >
            <text class="plus-icon">+</text>
          </view>
        </view>
      </view>

      <!-- 健康证 -->
      <view class="section-card" v-if="identity == 1">
        <text class="section-title required">请上传健康证</text>
        <view class="upload-grid">
		  <view class="image-preview" v-if="userInfo.health_card" >
		    <image
		      :src="userInfo.health_card"
		      class="upload-image"
		      mode="aspectFill"
		      @click="previewUscc(userInfo.health_card)"
		    ></image>
		    <view class="delete-btn" @click="deleteImage('health_card')">×</view>
		  </view>
          <view 
            class="upload-uscc" 
            @click="chooseHealthPhoto"
			v-else
          >
            <text class="plus-icon">+</text>
          </view>
        </view>
      </view>

      <!-- 门头照片 -->
      <view class="section-card" v-if="identity == 1">
        <text class="section-title required">请上传门头照片</text>
        <view class="upload-grid">
		  <view class="image-preview" v-if="userInfo.shop_photo" >
		    <image
		      :src="userInfo.shop_photo"
		      class="upload-image"
		      mode="aspectFill"
		      @click="previewUscc(userInfo.shop_photo)"
		    ></image>
		    <view class="delete-btn" @click="deleteImage('shop_photo')">×</view>
		  </view>
          <view 
            class="upload-uscc" 
            @click="chooseShopPhoto"
			v-else
          >
            <text class="plus-icon">+</text>
          </view>
        </view>
      </view>
	  
      <!-- 个人视频 -->
      <view class="section-card">
        <text class="section-title">请上传{{identity == '1' ? '个人' : identity == '2' ? '店铺' : ''}}视频</text>
        <text class="section-subtitle">（仅可上传1个视频，最大可上传100M）</text>
		
		<ali-oss-uploader
		  :max-count="1"
		  :max-size="100"
		  :type="artisanType+1"
		  :user-id="userInfo.id"
		  :width="'726rpx'"
		  :kind="2"
		  :file-string="userInfo.video"
		  accept="video/*"
		  button-text="上传视频"
		  @success="uploadVideoSuc"
		  @error="uploadVideoErr"
		  @delete="uploadVideoDel"
		  @ckeckisShowPer="ckeckisShowPer"
		  @ckecknowQer="ckecknowQer"
		  class="upload-video"
		>
		</ali-oss-uploader>
        <!-- <view class="upload-grid">
          <view class="upload-video" v-if="userInfo.video">
            <video :src="$baseUrl+userInfo.video" class="video-preview"></video>
            <view class="delete-btn" @click.stop="deleteVideo">×</view>
          </view>
          <view 
            class="upload-item" 
            @click="chooseVideo"
            v-else
          >
            <image src="/static/images/upload-img.png" class="upload-icon" mode="aspectFit"></image>
          </view>
        </view> -->
      </view>

      <!-- 个人照片 -->
      <!-- <view class="section-card">
        <text class="section-title">个人照片</text>
        <text class="section-subtitle">（请上传形象照，最多9张照片）</text>
        <view class="upload-grid">
          <image 
            v-for="(item, index) in userInfo.photos" 
            :key="index"
            :src="item"
            class="upload-image"
            mode="aspectFill"
            @click="previewImage(item, userInfo.photos)"
          >
            <view class="delete-btn" @click.stop="deletePhoto(index)">×</view>
          </image>
          <view 
            class="upload-item" 
            @click="chooseImage('photos')"
            v-if="userInfo.photos.length < 9"
          >
            <image src="/static/images/upload-img.png" class="upload-icon" mode="aspectFit"></image>
          </view>
        </view>
      </view> -->

		<!-- 弹框区域 -->
	  
	    <!-- 服务技能弹出框 -->
	    <view class="popup" :class="{ show: showServicePopupFlag }">
	  	<view class="popup-mask" @click="hideServicePopup"></view>
	  	<view class="popup-content">
	  	  <view class="popup-header">
	  		<text class="popup-title">选择服务技能</text>
	  		<text class="popup-close" @click="hideServicePopup">×</text>
	  </view>
	  	  <view class="popup-body">
	  		<view class="checkbox-list">
	  		  <view 
	  			class="checkbox-item" 
	  			v-for="(item, index) in serviceList" 
	  			:key="index"
	  			@click="toggleServiceSelect(index)"
	  		  >
	  			<view class="checkbox" :class="{ checked: item.checked }">
	  			  <text class="check-icon" v-if="item.checked">✓</text>
	  			</view>
	  			<text class="checkbox-label">{{item.title}}</text>
	  		  </view>
	  		</view>
	  	  </view>
	  	  <view class="popup-footer">
	  		<view class="popup-btn cancel" @click="hideServicePopup">
	  		  <text class="btn-text">取消</text>
	  		</view>
	  		<view class="popup-btn confirm" @click="confirmServiceSelect">
	  		  <text class="btn-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 src="/static/images/arrow_right.png" class="arrow-right" 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 src="/static/images/arrow_right.png" class="arrow-right" 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 }">
	                <text class="check-icon" v-if="district.checked">✓</text>
	              </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="popup" :class="{ show: showLocationPopupFlag }">
	  	<view class="popup-mask" @click="hideLocationPopup"></view>
	  	<view class="popup-content">
	  	  <view class="popup-header">
	  		<text class="popup-title">选择所在地</text>
	  		<text class="popup-close" @click="hideLocationPopup">×</text>
	  	  </view>
	  	  <view class="region-body">
	  		<picker-view @change="bindChangeLocation"
	  					 class="picker-scroll"
						 :indicator-style="indicatorStyle"
	  					 :value="locationValue">
	  			<picker-view-column>
	  				<view class="picker-item" v-for="(item,index) in ChinaCitys" :key="index">{{item.province}}</view>
	  			</picker-view-column>
	  			<picker-view-column>
	  				<view class="picker-item" v-for="(item,index) in locatinCitys" :key="index">{{item.city}}</view>
	  			</picker-view-column>
	  			<picker-view-column>
	  				<view class="picker-item" v-for="(item,index) in locationAreas" :key="index">{{item.area}}</view>
	  			</picker-view-column>
	  		</picker-view>
	  	  </view>
	  	  <view class="popup-footer">
	  		<view class="popup-btn cancel" @click="hideLocationPopup">
	  		  <text class="btn-text">取消</text>
	  		</view>
	  		<view class="popup-btn confirm" @click="confirmLocationSelect">
	  		  <text class="btn-text">确定</text>
	  		</view>
	  	  </view>
	  	</view>
	    </view>
	    
	    <!-- 服务时间选择器弹框 -->
	    <view class="popup" :class="{ show: showTimePicker }">
	  	<view class="popup-mask" @click="hideTimePopup"></view>
	  	<view class="popup-content">
	  		<view class="popup-header">
	  		  <text class="cancel-text" @click="hideTimePopup">取消</text>
	  		  <text class="title">选择时间</text>
	  		  <text class="confirm-text" @click="confirmTime">确定</text>
	  		</view>
	  		<view class="time-range">
	  		  <view class="time-block" :class="{ active: timeType === 'start' }" @click="switchTimeType('start')">
	  			<text class="time-value">{{formatTime(startTime)}}</text>
	  			<text class="time-label">开始时间</text>
	  		  </view>
	  		  <text class="time-separator">至</text>
	  		  <view class="time-block" :class="{ active: timeType === 'end' }" @click="switchTimeType('end')">
	  			<text class="time-value">{{formatTime(endTime)}}</text>
	  			<text class="time-label">结束时间</text>
	  		  </view>
	  		</view>
	  		<view class="region-body">
	  		  <picker-view
	  			:value="pickerValue"
	  			@change="handleTimeChange"
	  			class="picker-scroll"
				:indicator-style="indicatorStyle"
	  		  >
	  			<picker-view-column>
	  			  <view class="picker-item" v-for="(hour, index) in hours" :key="index">
	  				{{hour}}
	  			  </view>
	  			</picker-view-column>
	  			<picker-view-column>
	  			  <view class="picker-item" v-for="(minute, index) in minutes" :key="index">
	  				{{minute}}
	  			  </view>
	  			</picker-view-column>
	  		  <picker-view-column>
	  			<view class="picker-item">
	  			  -
	  			</view>
	  		  </picker-view-column>
	  			<picker-view-column>
	  			  <view class="picker-item" v-for="(hour, index) in hours" :key="index">
	  				{{hour}}
	  			  </view>
	  			</picker-view-column>
	  			<picker-view-column>
	  			  <view class="picker-item" v-for="(minute, index) in minutes" :key="index">
	  				{{minute}}
	  			  </view>
	  			</picker-view-column>
	  		  </picker-view>
	  		</view>
	  	</view>
	    </view>
	    


      <!-- 保存按钮 -->
	  <view class="save-fixed">
		<view class="save-btn" @click="saveProfile">
		  <text class="btn-text">保存</text>
		</view>
	  </view>
      <view class="save-kong"></view>
	  
	  <!-- 获取权限提示匡内容 -->
	  <view class="permission"
	  	  :class="{ transform: isShowPer && nowQer === 'xc' }">
	  	<view class="per-tit">美融融plus 对储存空间/照片权限申请说明</view>
	  	<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中读取相册和文件内容。</view>
	  </view>
	  <view class="permission"
	  	  :class="{ transform: isShowPer && nowQer === 'xj' }">
	  	<view class="per-tit">美融融plus 对相机拍摄权限申请说明</view>
	  	<view class="per-cont">便于您使用该功能上传您的照片/图片/视频以及用于更换头像、发布商品等场景中所需内容。</view>
	  </view>
    </view>
  </view>
</template>

<script>
import request from '../../utils/request'
import { debounce } from '@/utils/debounce.js'
import ChinaCitys from '../../static/data/ChinaCitys.json'
import uploadImg from '../../components/upload-img/upload-img.vue'
import uploadImage from '../../utils/uploadImage'
import permissionUtils from '../../utils/per'
import locationService from '../../utils/locationService';

export default {
  components: {
	uploadImg
  },
  data() {
    return {
	  isShowPer: false,
	  nowQer: 'xc',
	  identity: getApp().globalData.artisanType,
	  artisanType: getApp().globalData.artisanType,
	  indicatorStyle: 'height: 68rpx;',
      userInfo: {
		video: ''
      },
	  imagesList: [],
	  ChinaCitys: '',
	  showServicePopupFlag: false,
	  selectedServicesText: '',
	  serviceList: [],
	  showLocationPopupFlag: false,
      showRegionPopupFlag: false,
      currentTab: 0,
      regionTabs: ['省', '市', '区'],
      cityList: [],
      districtList: [],
      selectedProvince: null,
      selectedCity: null,
      selectedDistricts: [],
      selectedRegionText: '',
	  locatinCitys: [],
	  locationAreas: [],
	  locationValue: [0,0,0],
      showTimePicker: false,
      pickerValue: [8, 0, 0, 18, 0],
      hours: Array.from({length: 24}, (_, i) => i < 10 ? `0${i}` : `${i}`),
      minutes: Array.from({length: 60}, (_, i) => i < 10 ? `0${i}` : `${i}`),
      timeType: 'start',
	  showProgress: false,
	  checkedKill: [],
	  checkedKillArr: []
    }
  },
  async onLoad() {
	let that = this;
	await that.getUserInfo();
	that.ChinaCitys = ChinaCitys;
	that.locatinCitys = that.ChinaCitys[0].citys;
	that.locationAreas = that.locatinCitys[0].areas;
	
	// 请求服务技能列表接口
	request.post('/user/firstclass').then((res) => {
		// that.serviceList = res.data;
		// that.decideKill();
		let checkedKill = [...that.userInfo.servers_kill];
		that.checkedKill = checkedKill;
		that.checkedKillArr = [...that.userInfo.servers_kill_arr]
		that.serviceList = res.data.filter(item => !checkedKill.includes(item.id))
	})
	// 创建防抖处理后的提交函数
	that.debouncedSubmit = debounce(that.submit, 500)
  },
  computed: {
    startTime() {
      return {
        hour: this.hours[this.pickerValue[0]],
        minute: this.minutes[this.pickerValue[1]]
      }
    },
    endTime() {
      return {
        hour: this.hours[this.pickerValue[3]],
        minute: this.minutes[this.pickerValue[4]]
      }
    }
  },
  methods: {
	getUserInfo() {
	  const type = this.artisanType == 1 ? 2 : this.artisanType == 2 ? 3 : 1;
	  request.post('/user/getuser',{type: type}).then(result=>{
		console.log(result.data)
		this.userInfo = result.data;
		if(!result.data.qualifications) {
			this.userInfo.qualifications = []
		}
      })
    },
	// 判断技能选中状态
	// decideKill() {
	// 	let that = this;
	// 	that.serviceList.forEach((service,index)=>{
	// 		that.userInfo.servers_kill.forEach((kill,i)=>{
	// 			if(service.id == kill) {
	// 				that.$set(that.serviceList[index],'checked',true)
	// 			}
	// 		})
			
	// 	})
	// },
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
	addVideo(value) {
		this.$set(this.userInfo,'video',value)
	},
    addImg(arr) {
    	this.userInfo.qualifications = this.userInfo.qualifications.concat(arr);
    },
    // 删除图片
    deleteImage(type) {
      this.userInfo[type] = null;
    },
	
	// 显示权限说明弹窗
	showPermissionDialog(title, content) {
	  return new Promise((resolve) => {
		uni.showModal({
		  title,
		  content,
		  confirmText: '去开启',
		  success(res) {
			resolve(res.confirm);
		  }
		});
	  });
	},
	ckeckisShowPer(value) {
		console.log('this.isShowPer==========',value)
		this.isShowPer = value;
		console.log('this.isShowPer==========',this.isShowPer)
	},
	ckecknowQer(value) {
		this.nowQer = value;
	},
	// 打开相机
	async openCamera() {
	  this.isShowPer = false;
	  let that = this;
	  const res = await uploadImage.handleUpload(this.userInfo.id,this.artisanType+1);
	  uni.hideLoading();
	  this.userInfo.head_photo = res;
	},
	// 选择头像
	async chooseAvatar() {
	  try {
	  		const systemInfo = uni.getSystemInfoSync()
	  		if(systemInfo.platform === 'ios') {
	  			this.openCamera();
	  		}else {
	  			let xcpermission = '';
	  			let xjpermission = '';
	  			if(systemInfo.platform === 'ios') {
	  				xcpermission = 'photo_library',
	  				xjpermission = 'camera'
	  			}else {
	  				xcpermission = `android.permission.READ_EXTERNAL_STORAGE,android.permission.WRITE_EXTERNAL_STORAGE`
	  				xjpermission = 'android.permission.CAMERA'
	  			}
	  			const xcfirstRequest = !plus.storage.getItem(`perm_${xcpermission}`)
	  			const xjfirstRequest = !plus.storage.getItem(`perm_${xjpermission}`)
	  			if(xcfirstRequest || xjfirstRequest) {
	  				this.isShowPer = true;
	  			}
	  			
	  			// 1. 检查权限
	  			 // const { granted } = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
				this.nowQer = 'xc';
	  			 const xc = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
				this.nowQer = 'xj';
	  			 const xj = await permissionUtils.checkPermission('camera', '需要相机权限用于拍摄照片');
	  			this.isShowPer = false;
				this.nowQer = '';
	  			if (xc.granted && xj.granted) {
	  			  this.openCamera();
	  			  return;
	  			}
	  			
	  			// 2. 显示权限说明弹窗
	  			const confirm = await this.showPermissionDialog(
	  			  '相机相册权限申请',
	  			  '我们需要访问您的相机以及相册以完成更换头像功能'
	  			);
	  			
	  			if (!confirm) return;
	  			
	  			// 3. 请求权限
	  			const result1 = await permissionUtils.requestPermission('photo_library', '我们需要访问您的相册以上传图片/视频');
	  			const result2 = await permissionUtils.requestPermission('camera', '我们需要访问您的相机以上传图片/视频');
	  			if (result1 && result2) {
	  			  this.openCamera();
	  			} else {
	  			  locationService.openAppSettings();
	  			  // uni.showToast({ title: '相机权限被拒绝', icon: 'none' });
	  			}
	  		}
	  		
	  } catch (error) {
	  		console.error('权限处理出错:', error);
	  		uni.showToast({ title: '权限检查失败', icon: 'none' });
	  }
	  
	},
	// 上传营业执照
	async chooseUsccPhoto() {
	  try {
	  		const systemInfo = uni.getSystemInfoSync()
	  		if(systemInfo.platform === 'ios') {
				this.isShowPer = false;
				const res = await uploadImage.handleUpload(this.userInfo.id,this.artisanType+1);
				uni.hideLoading();
				this.userInfo.uscc_photo = res;
	  		}else {
	  			let xcpermission = '';
	  			let xjpermission = '';
	  			if(systemInfo.platform === 'ios') {
	  				xcpermission = 'photo_library',
	  				xjpermission = 'camera'
	  			}else {
	  				xcpermission = `android.permission.READ_EXTERNAL_STORAGE,android.permission.WRITE_EXTERNAL_STORAGE`
	  				xjpermission = 'android.permission.CAMERA'
	  			}
	  			const xcfirstRequest = !plus.storage.getItem(`perm_${xcpermission}`)
	  			const xjfirstRequest = !plus.storage.getItem(`perm_${xjpermission}`)
	  			if(xcfirstRequest || xjfirstRequest) {
	  				this.isShowPer = true;
	  			}
	  			
	  			// 1. 检查权限
	  			 // const { granted } = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
				this.nowQer = 'xc';
	  			 const xc = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
				this.nowQer = 'xj';
	  			 const xj = await permissionUtils.checkPermission('camera', '需要相机权限用于拍摄照片');
	  			this.isShowPer = false;
				this.nowQer = '';
	  			if (xc.granted && xj.granted) {
	  			  const res = await uploadImage.handleUpload(this.userInfo.id,this.artisanType+1);
	  			  uni.hideLoading();
	  			  this.userInfo.uscc_photo = res;
	  			  return;
	  			}
	  			
	  			// 2. 显示权限说明弹窗
	  			const confirm = await this.showPermissionDialog(
	  			  '相机相册权限申请',
	  			  '我们需要访问您的相机以及相册以完成更换头像功能'
	  			);
	  			
	  			if (!confirm) return;
	  			
	  			// 3. 请求权限
	  			const result1 = await permissionUtils.requestPermission('photo_library', '我们需要访问您的相册以上传图片/视频');
	  			const result2 = await permissionUtils.requestPermission('camera', '我们需要访问您的相机以上传图片/视频');
	  			if (result1 && result2) {
	  			  const res = await uploadImage.handleUpload(this.userInfo.id,this.artisanType+1);
	  			  uni.hideLoading();
	  			  this.userInfo.uscc_photo = res;
	  			} else {
	  			  locationService.openAppSettings();
	  			  // uni.showToast({ title: '相机权限被拒绝', icon: 'none' });
	  			}
	  		}
	  		
	  } catch (error) {
	  		console.error('权限处理出错:', error);
	  		uni.showToast({ title: '权限检查失败', icon: 'none' });
	  }
	  
	},
	// 上传健康证
	async chooseHealthPhoto() {
	  try {
	  		const systemInfo = uni.getSystemInfoSync()
	  		if(systemInfo.platform === 'ios') {
				this.isShowPer = false;
				const res = await uploadImage.handleUpload(this.userInfo.id,this.artisanType+1);
				uni.hideLoading();
				this.userInfo.health_card = res;
	  		}else {
	  			let xcpermission = '';
	  			let xjpermission = '';
	  			if(systemInfo.platform === 'ios') {
	  				xcpermission = 'photo_library',
	  				xjpermission = 'camera'
	  			}else {
	  				xcpermission = `android.permission.READ_EXTERNAL_STORAGE,android.permission.WRITE_EXTERNAL_STORAGE`
	  				xjpermission = 'android.permission.CAMERA'
	  			}
	  			const xcfirstRequest = !plus.storage.getItem(`perm_${xcpermission}`)
	  			const xjfirstRequest = !plus.storage.getItem(`perm_${xjpermission}`)
	  			if(xcfirstRequest || xjfirstRequest) {
	  				this.isShowPer = true;
	  			}
	  			
	  			// 1. 检查权限
	  			 // const { granted } = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
				this.nowQer = 'xc';
	  			 const xc = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
				this.nowQer = 'xj';
	  			 const xj = await permissionUtils.checkPermission('camera', '需要相机权限用于拍摄照片');
	  			this.isShowPer = false;
				this.nowQer = '';
	  			if (xc.granted && xj.granted) {
	  			  const res = await uploadImage.handleUpload(this.userInfo.id,this.artisanType+1);
	  			  uni.hideLoading();
	  			  this.userInfo.health_card = res;
	  			  return;
	  			}
	  			
	  			// 2. 显示权限说明弹窗
	  			const confirm = await this.showPermissionDialog(
	  			  '相机相册权限申请',
	  			  '我们需要访问您的相机以及相册以完成更换头像功能'
	  			);
	  			
	  			if (!confirm) return;
	  			
	  			// 3. 请求权限
	  			const result1 = await permissionUtils.requestPermission('photo_library', '我们需要访问您的相册以上传图片/视频');
	  			const result2 = await permissionUtils.requestPermission('camera', '我们需要访问您的相机以上传图片/视频');
	  			if (result1 && result2) {
	  			  const res = await uploadImage.handleUpload(this.userInfo.id,this.artisanType+1);
	  			  uni.hideLoading();
	  			  this.userInfo.health_card = res;
	  			} else {
	  			  locationService.openAppSettings();
	  			  // uni.showToast({ title: '相机权限被拒绝', icon: 'none' });
	  			}
	  		}
	  		
	  } catch (error) {
	  		console.error('权限处理出错:', error);
	  		uni.showToast({ title: '权限检查失败', icon: 'none' });
	  }
	  
	},
	// 上传门头照片
	async chooseShopPhoto() {
	  try {
	  		const systemInfo = uni.getSystemInfoSync()
	  		if(systemInfo.platform === 'ios') {
				this.isShowPer = false;
				const res = await uploadImage.handleUpload(this.userInfo.id,this.artisanType+1);
				uni.hideLoading();
				this.userInfo.shop_photo = res;
	  		}else {
	  			let xcpermission = '';
	  			let xjpermission = '';
	  			if(systemInfo.platform === 'ios') {
	  				xcpermission = 'photo_library',
	  				xjpermission = 'camera'
	  			}else {
	  				xcpermission = `android.permission.READ_EXTERNAL_STORAGE,android.permission.WRITE_EXTERNAL_STORAGE`
	  				xjpermission = 'android.permission.CAMERA'
	  			}
	  			const xcfirstRequest = !plus.storage.getItem(`perm_${xcpermission}`)
	  			const xjfirstRequest = !plus.storage.getItem(`perm_${xjpermission}`)
	  			if(xcfirstRequest || xjfirstRequest) {
	  				this.isShowPer = true;
	  			}
	  			
	  			// 1. 检查权限
	  			 // const { granted } = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
				this.nowQer = 'xc';
	  			 const xc = await permissionUtils.checkPermission('photo_library', '需要相册权限用于上传照片');
				this.nowQer = 'xj';
	  			 const xj = await permissionUtils.checkPermission('camera', '需要相机权限用于拍摄照片');
	  			this.isShowPer = false;
				this.nowQer = '';
	  			if (xc.granted && xj.granted) {
	  			  const res = await uploadImage.handleUpload(this.userInfo.id,this.artisanType+1);
	  			  uni.hideLoading();
	  			  this.userInfo.shop_photo = res;
	  			  return;
	  			}
	  			
	  			// 2. 显示权限说明弹窗
	  			const confirm = await this.showPermissionDialog(
	  			  '相机相册权限申请',
	  			  '我们需要访问您的相机以及相册以完成更换头像功能'
	  			);
	  			
	  			if (!confirm) return;
	  			
	  			// 3. 请求权限
	  			const result1 = await permissionUtils.requestPermission('photo_library', '我们需要访问您的相册以上传图片/视频');
	  			const result2 = await permissionUtils.requestPermission('camera', '我们需要访问您的相机以上传图片/视频');
	  			if (result1 && result2) {
	  			  const res = await uploadImage.handleUpload(this.userInfo.id,this.artisanType+1);
	  			  uni.hideLoading();
	  			  this.userInfo.shop_photo = res;
	  			} else {
	  			  locationService.openAppSettings();
	  			  // uni.showToast({ title: '相机权限被拒绝', icon: 'none' });
	  			}
	  		}
	  		
	  } catch (error) {
	  		console.error('权限处理出错:', error);
	  		uni.showToast({ title: '权限检查失败', icon: 'none' });
	  }
	  
	},
    // 选择图片
   //  chooseAvatar(type) {
   //    let that = this;
   //    uni.chooseImage({
   //  	count: 1,
   //  	sizeType: ['original', 'compressed'],
   //  	sourceType: ['album'],
   //  	success: (res) => {
   //  		// 处理文件大小限制
   //  		const validFiles = res.tempFiles.filter(file => {
   //  			const isValidSize = file.size < 10 * 1024 * 1024 // 10MB限制
   //  			if (!isValidSize) {
   //  			  uni.showToast({
   //  				title: '图片大小不能超过10MB',
   //  				icon: 'none'
   //  			  })
   //  			}
   //  			return isValidSize
   //  		})
    	  
   //  		// 添加到媒体列表
   //  		const newImages = validFiles.map(file => ({
   //  			type: 'image',
   //  			url: file.path,
   //  			size: file.size
   //  		}))
			// request.uploadImage('/user/uploadphoto',newImages[0].url,{type: newImages[0].type}).then(res=>{
			// 	if(res.message == '上传成功') {
			// 		uni.hideLoading();
			// 		this.userInfo.head_photo = res.path;
			// 	}
			// })
    		
   //  	},
   //  	fail(err) {
   //  		console.log(err)
   //  	}
    		
   //    })
   //   },

    // 预览图片
    previewImage(current, urls) {
      uni.previewImage({
        current,
        urls
      })
    },
	// 预览营业执照
	previewUscc(url) {
	  let urls = [];
	  urls[0] = url
      uni.previewImage({
        urls
      })
    },

    // 删除视频
    deleteVideo() {
      this.userInfo.video = ''
	  this.$forceUpdate()
    },

    // 删除照片
    deletePhoto(index) {
      this.userInfo.photos.splice(index, 1)
    },

    // 打开选择器
    openPicker(type) {
      // TODO: 实现选择器逻辑
	  if(type == 'major') {
		uni.showActionSheet({
		  itemList: ['实习','1-3年','3-5年','5-10年','10年以上'],
		  success: (res) => {
		    this.userInfo.major = [1,2,3,4,5][res.tapIndex]
		  }
		})
	  }else if(type == 'default_times') {
		this.showTimePicker = true;
	  }else if(type == 'dependency') {
		this.showLocationPopupFlag = true;
	  }else if(type == 'work_state') {
		uni.showActionSheet({
		  itemList: ['有工作','无工作'],
		  success: (res) => {
		    this.userInfo.work_state = [1,2][res.tapIndex]
		  }
		})
	  }
	  
    },
    
    // 显示服务技能弹出框
    showServicePopup() {
	  // this.decideKill();
      this.showServicePopupFlag = true;
    },
    
    // 隐藏服务技能弹出框
    hideServicePopup() {
      this.showServicePopupFlag = false
    },
	hideLocationPopup() {
      this.showLocationPopupFlag = false
	},
    
    // 切换服务技能选择状态
    toggleServiceSelect(index) {
      // this.serviceList[index].checked = !this.serviceList[index].checked;
	  this.$set(this.serviceList[index],'checked',!this.serviceList[index].checked)
	  // this.$forceUpdate()
    },
    
    // 确认服务技能选择
    confirmServiceSelect() {
      let selectedServices = this.serviceList
        .filter(item => item.checked)
        .map(item => item.title)
	  let selectedServicesId = this.serviceList
	    .filter(item => item.checked)
	    .map(item => item.id)
      let selectedServicesKill = this.serviceList
        .filter(item => item.checked)
        .map(item => item.title)
      
      // if (selectedServices.length === 0) {
      //   uni.showToast({
      //     title: '请至少选择一个服务技能',
      //     icon: 'none'
      //   })
      //   return
      // }
      // 更新表单数据
      this.userInfo.servers_kill = [...new Set([...this.checkedKill,...selectedServicesId])];
	  this.userInfo.servers_kill_arr = [...new Set([...this.checkedKillArr,...selectedServicesKill])];
      // this.userInfo.servers_kill = selectedServicesId;
      // this.userInfo.servers_kill_arr = selectedServicesKill;
      this.hideServicePopup();
    },
    
    // 显示地区选择弹出框
    showRegionPopup() {
      this.showRegionPopupFlag = true
      this.currentTab = 0
    },
    
    // 隐藏地区选择弹出框
    hideRegionPopup() {
      this.showRegionPopupFlag = false
      this.currentTab = 0
      this.cityList = []
      this.districtList = []
      this.selectedProvince = null
      this.selectedCity = null
      this.selectedDistricts = []
    },
    
    // 切换标签页
    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 || [];
    },
    
    // 选择城市
    selectCity(city,index) {
      this.selectedCity = city.city;
      this.currentTab = 2;
      // 获取区县列表
      this.districtList = this.cityList[index].areas || [];
    },
    
    // 切换区县选择状态
    toggleDistrictSelect(index) {
      this.$set(this.districtList[index], 'checked', !this.districtList[index].checked)
    },
    
    // 确认地区选择
    confirmRegionSelect() {
      const selectedDistricts = this.districtList
        .filter(item => item.checked)
        .map(item => item.area)
	  selectedDistricts.forEach((item,i)=>{
		  selectedDistricts[i] = this.selectedProvince + '-' + this.selectedCity + '-' + item;
	  })
      if (selectedDistricts.length === 0) {
        uni.showToast({
          title: '请至少选择一个区县',
          icon: 'none'
        })
        return
      }
      // 更新表单数据
      this.userInfo.servers_region = selectedDistricts;
      this.selectedRegionText = selectedDistricts.join('、');
	  this.districtList.forEach((item,i)=>{
	  	this.districtList[i].checked = false;
	  })
      this.hideRegionPopup()
    },
	bindChangeLocation(e) {
		
		this.locationValue = e.detail.value;
		let index1 = e.detail.value[0] || 0;
		let index2 = e.detail.value[1] || 0;
		this.locatinCitys = this.ChinaCitys[index1].citys;
		this.locationAreas = this.locatinCitys[index2].areas;
	},
	confirmLocationSelect() {
		let valueArr = this.locationValue;
		let index1 = valueArr[0] || 0;
		let index2 = valueArr[1] || 0;
		let index3 = valueArr[2] || 0;
		let province = this.ChinaCitys[index1].province;
		let city = this.locatinCitys[index2].city;
		let area = this.locationAreas[index3].area;
		this.userInfo.dependency = province + '-' + city + '-' + area;
		this.userInfo.dependency_code =  this.locationAreas[index3].code;
		this.showLocationPopupFlag = false;
	},
	
	
	
	// 打开时间选择器
	openTimePicker() {
	  this.showTimePicker = true;
	},
	// 切换时间类型（开始/结束）
	switchTimeType(type) {
	  this.timeType = type
	},
	// 处理时间变化
	handleTimeChange(e) {
	  const values = e.detail.value
	  // 检查开始时间是否大于结束时间
	  const startMinutes = parseInt(this.hours[values[0]]) * 60 + parseInt(this.minutes[values[1]])
	  const endMinutes = parseInt(this.hours[values[3]]) * 60 + parseInt(this.minutes[values[4]])
	  
	  if (startMinutes >= endMinutes) {
	    // 如果开始时间大于等于结束时间，将结束时间设置为开始时间后一小时
	    const newEndHour = (parseInt(this.hours[values[0]]) + 1) % 24
	    values[3] = newEndHour
	    values[4] = values[1]
	  }
	  
	  this.pickerValue = values
	},
	// 格式化时间显示
	formatTime(time) {
	  return `${time.hour}:${time.minute}`
	},
	// 确认选择
	confirmTime() {
	  if(this.identity == '1') {
		this.userInfo.default_times = this.formatTime(this.startTime) + '-' + this.formatTime(this.endTime);
	  }else {
		this.userInfo.business_time = this.formatTime(this.startTime) + '-' + this.formatTime(this.endTime);
	  }
	  this.hideTimePopup()
	},
	// 关闭timer弹框
	hideTimePopup() {
		this.showTimePicker = false;
	},
	// 详细地址
	getAddressInfo() {
	  uni.navigateTo({
	  	url: `/pages/address/search?dependency=${this.userInfo.dependency}&dependency_code=${this.userInfo.dependency_code}`
	  })
	},
	editAddress(item) {
	  let location = item.location.split(',');
	  this.$set(this.userInfo,'address',item.name);
	  this.$set(this.userInfo,'latitude',location[1]);
	  this.$set(this.userInfo,'longitude',location[0]);
	},
	onUploadSuccess(file) {
		console.log(this.userInfo.qualifications)
      console.log('上传成功:', file)
    },
    onUploadError(error) {
      console.error('上传失败:', error)
      uni.showToast({
        title: '上传失败',
        icon: 'none'
      })
    },
    onFileDelete(file, index) {
      console.log('删除文件:', file, index)
    },
	uploadVideoSuc(file) {
		this.userInfo.video = file;
		
	},
	uploadVideoErr() {},
	uploadVideoDel() {
		this.userInfo.video = null;
	},
    // 保存资料
    saveProfile() {
      // TODO: 实现保存逻辑
	  if(this.identity == '1') {
		  console.log('this.userInfo',this.userInfo)
		let {business_time, servers_kill_arr, ...formData} = this.userInfo;
		formData.apply_state = 2;
	  	if(!formData.name) {
	  		uni.showToast({
	  			title: '请输入真实姓名',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.detail) {
	  		uni.showToast({
	  			title: '请输入个人介绍',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.dependency) {
	  		uni.showToast({
	  			title: '请选择所在地',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.address) {
	  		uni.showToast({
	  			title: '请选择详细地址',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.uscc_photo) {
			uni.showToast({
				title: '请上传营业执照',
				icon: 'none'
			})
			return;
		}else if(!formData.health_card) {
			uni.showToast({
				title: '请上传健康证',
				icon: 'none'
			})
			return;
		}else if(!formData.shop_photo) {
			uni.showToast({
				title: '请上传门头照片',
				icon: 'none'
			})
			return;
		}else if(!formData.servers_kill || formData.servers_kill.length == 0) {
	  		uni.showToast({
	  			title: '请选择服务技能',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.servers_region || formData.servers_region.length == 0) {
	  		uni.showToast({
	  			title: '请选择服务区域',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.default_times) {
	  		uni.showToast({
	  			title: '请选择服务时间',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.major) {
	  		uni.showToast({
	  			title: '请选择专业经验',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.work_state) {
	  		uni.showToast({
	  			title: '请选择目前工作状态',
	  			icon: 'none'
	  		})
			return;
	  	}else {
	  		request.post('/user/usersyrupdate',formData).then(res=>{
	  			if(res.state == 1) {
					// uni.showToast({
					// 	title: '保存成功',
					// 	duration: 1000
					// });
					// 修改上一页页面信息
					const pages = getCurrentPages()
					const prevPage = pages[pages.length - 2]
					console.log(2222,prevPage)
					if (prevPage) {
					  // prevPage.$vm.getUserInfo()
					  prevPage.$vm.getProfileLoding()
	  				  uni.navigateBack()
					}
	  			}
	  		})
	  	}
	  }else {
		let {servers_kill_arr,...formData} = this.userInfo;
		formData.apply_state = 2;
	  	if(!formData.name) {
	  		uni.showToast({
	  			title: '请输入店铺名称',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.dependency) {
	  		uni.showToast({
	  			title: '请选择所在地',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.address) {
	  		uni.showToast({
	  			title: '请选择详细地址',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.servers_kill || formData.servers_kill.length == 0) {
	  		uni.showToast({
	  			title: '请选择服务技能',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.business_time) {
	  		uni.showToast({
	  			title: '请选择营业时间',
	  			icon: 'none'
	  		})
			return;
	  	}else if(!formData.major) {
	  		uni.showToast({
	  			title: '请选择专业经验',
	  			icon: 'none'
	  		})
			return;
	  	}
		console.log('formData',formData)
	
		request.post('/user/usersjupdate',formData).then(res=>{
			
			if(res.state == 1) {
				// 修改上一页页面信息
				const pages = getCurrentPages()
				const prevPage = pages[pages.length - 2]
				if (prevPage) {
				  prevPage.$vm.getProfileLoding()
				  // prevPage.$vm.getUserInfo()
				  uni.navigateBack()
				}
			}
		})
			
	  }
    }
  }
}
</script>

<style>
.form-list {
  background-color: #FFFFFF;
  overflow: hidden;
  border-top: 1rpx solid rgba(0, 0, 0, 0.05);
  padding: 0 32rpx;
}

.form-item {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32rpx 0;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  flex-shrink: 0;
  font-size: 28rpx;
  color: #333333;
}

.required::before {
  content: '*';
  color: #FF4D6B;
  margin-right: 4rpx;
}

.avatar-right {
  display: flex;
  align-items: center;
}

.avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 36rpx;
  background-color: #333333;
}

.value-right {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  align-items: center;
}

.value {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}
.inp-value {
	text-align: right;
}
.skills-wrapper {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
}

.tag {
  font-size: 24rpx;
  color: #E8101E;
  margin-left: 14rpx;
}
.textarea {
	height: 120rpx;
	font-size: 28rpx;
	color: #333333;
}

.section-card {
  background-color: #FFFFFF;
  padding: 32rpx;
  margin-top: 8rpx;
}

.section-title {
  display: inline-block;
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 16rpx;
}

.section-subtitle {
  display: inline-block;
  font-size: 20rpx;
  color: #999999;
  font-weight: 400;
  margin-bottom: 24rpx;
}

.upload-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -20rpx;
}

.image-preview{
  position: relative;
  margin: 20rpx;
}

.upload-uscc {
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #ddd;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin: 16rpx 16rpx 32rpx;
}

.plus-icon {
  font-size: 60rpx;
  color: #999;
  line-height: 1;
}
.upload-icon {
  width: 200rpx;
  height: 200rpx;
}

.upload-image {
  width: 200rpx;
  height: 200rpx;
  border: 20rpx;
  position: relative;
}

.upload-video {
  margin: -16rpx;
}

.video-preview {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
}

.delete-btn {
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 32rpx;
}
.save-fixed {
  height: 128rpx;
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.save-btn {
  width: 702rpx;
  height: 64rpx;
  background: #E8101E;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-text {
  font-size: 28rpx;
  color: #FFFFFF;
  font-weight: 500;
}
.save-kong {
  height: 128rpx;
  margin-top: 8rpx;
}

/* 弹出框样式 */

.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;
}

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

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

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

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

.popup-body {
  max-height: 600rpx;
  overflow-y: auto;
}

.checkbox-list {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-item {
  width: 50%;
  padding: 14rpx;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.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 {
  color: #FFFFFF;
  font-size: 24rpx;
}

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

.popup-footer {
  display: flex;
  margin-top: 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(90deg, #E8101E 0%, #FF618F 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;
}

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

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

.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%;
}
.picker-scroll {
  height: 400rpx;
}
.picker-item {
	height: 68rpx;
	line-height: 68rpx;
	text-align: center;
}

.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 !important;
  align-items: center !important;
}



/* .picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 110rpx;
  padding: 0 32rpx;
  background-color: #fff;
} */


.cancel-text {
  font-size: 32rpx;
  color: #666666;
}

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

.confirm-text {
  font-size: 32rpx;
  color: #E8101E;
  font-weight: 500;
}

/* 时间范围选择 */
.time-range {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32rpx;
  background: #F8F9FC;
}

.time-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: #FFFFFF;
  border-radius: 12rpx;
  padding: 24rpx 0;
  transition: all 0.3s ease;
}

.time-block.active {
  background: #ECF2FF;
}

.time-label {
  font-size: 26rpx;
  color: #999999;
  margin-top: 8rpx;
}

.time-value {
  font-size: 40rpx;
  color: #333333;
  font-weight: 500;
}

.time-block.active .time-value {
  color: #E8101E;
}

.time-separator {
  font-size: 28rpx;
  color: #999999;
  margin: 0 24rpx;
}

/* #ifdef APP-PLUS */
.permission.transform {
	top: calc(var(--status-bar-height) + 88rpx + 30rpx);
	opacity: 1;
	visibility: visible;
}
/* #endif */

/* 平台适配 */
/* #ifdef H5 */
.nav-bar {
  padding-top: 0 !important;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.nav-bar {
  padding-top: calc(var(--status-bar-height) + constant(safe-area-inset-top)) !important;
  padding-top: calc(var(--status-bar-height) + env(safe-area-inset-top)) !important;
}
/* #endif */

</style> 