<template>
  <view class='apply'>
    <view class="apply-item apply-section-01">
      <view class="apply-item-header">
        <image class="header-label" src="/static/img/index/title_01.png" mode="" />
      </view>
      <view class="apply-item-wrapper apply-item-01 flex justify-between">
        <view class="apply-left flex">
          <view class="user-avatar">
            <image class="avatar-img" v-if="baby" :src="baby.headImg" mode="aspectFill" />
            <image class="avatar-img" v-else :src="avatarImg" mode="aspectFill" />
          </view>
          <view class="user-info" v-if="!baby" @tap.stap="navTo('/pages/index/applyInfo?type=user&action=save')">
            <view class="empty-title">参赛孩子信息</view>
            <view class="empty-desc">请输入孩子参赛信息</view>
          </view>
          <view class="user-info" v-else @tap.stap="navTo('/pages/index/applyInfo?type=user&action=save')">
            <view class="flex align-center">
              <!-- <view class="label required">选手姓名:</view>
              <view class="info">{{ baby.babyName }}</view> -->
              <view class="padding-bottom-xs">
                <text class="label required">选手姓名:</text>
                <text class="info">
                  {{ baby.babyName }}
                </text>
                <image class="gender" :src="baby.sex | imgUrlFilter" mode="" />
              </view>
              <!-- <view class="gender">
              </view> -->
            </view>
            <view class="flex align-center">
              <view class="label required">出生日期:</view>
              <view class="info">{{ baby.babyBirthday | dateFormat('YYYY-MM-DD') }}</view>
            </view>
          </view>
        </view>
        <view class="apply-right flex align-center justify-center" @tap.stap="navTo('/pages/index/applyInfo?type=user&action=save')">
          <view class="user-file">
            <image class="file-img" src="/static/img/index/file1.png" mode="" />
          </view>
          <image class="light" src="/static/img/index/light.png" mode="" />
        </view>
        <image class="lock lock-left" src="/static/img/index/lock.png" mode="" />
        <image class="lock lock-right" src="/static/img/index/lock.png" mode="" />
      </view>
    </view>
    <view class="apply-item  apply-section-02">
      <view class="apply-item-header">
        <image class="header-label" src="/static/img/index/title_02.png" mode="" />
      </view>
      <view class="apply-item-wrapper apply-item-02 flex justify-between">
        <view class="apply-left flex">
          <view class="user-avatar user-avatar-02">
            <image v-if="user" class="avatar-img " :src="user.avatarUrl" mode="" />
            <image v-else class="avatar-img " :src="avatarImg" mode="" />
          </view>
          <view class="user-info user-info-02" v-if="!parent" @tap.stap="navTo('/pages/index/applyInfo?type=parent')">
            <view class="empty-title">家长信息</view>
            <view class="empty-desc">请输入家长信息</view>
          </view>
          <view class="user-info user-info-02" v-else @tap.stap="navTo('/pages/index/applyInfo?type=parent')">
            <view class="flex align-center">
              <!-- <view class="label required">家长姓名:</view>
              <view class="info">{{ parent.parentName }}</view> -->
              <view class="padding-bottom-xs">
                <text class="label required">家长姓名:</text>
                <text class="info">{{ parent.parentName }}</text>
                <text class="relation">{{ parent.parentBabyRelation }}</text>
              </view>
              <!-- <view class="relataion">{{ parent.parentBabyRelation }}</view> -->
            </view>
            <view class="flex align-center padding-bottom-xs">
              <view class="label required">联系电话:</view>
              <view class="info">{{ parent.parentPhone }}</view>
            </view>
            <view class="flex">
              <view class="label"><text class="label">家庭住址:</text><text class="address">{{ parent.regionCity | regionCityFilter }}{{ parent.address }}</text>
              </view>
              <!-- <view class="info">{{ parent.regionCity }}{{ parent.address }}</view> -->
            </view>
          </view>
        </view>
        <view class="apply-right flex align-center justify-center" @tap.stap="navTo('/pages/index/applyInfo?type=parent')">
          <view class="user-file user-file-02">
            <image class="file-img" src="/static/img/index/file2.png" mode="" />
          </view>
          <image class="light" src="/static/img/index/light.png" mode="" />
        </view>
        <image class="lock lock-left" src="/static/img/index/lock.png" mode="" />
        <image class="lock lock-right" src="/static/img/index/lock.png" mode="" />
      </view>
    </view>
    <view class="apply-item apply-section-03" v-if="signUpType == 0">
      <view class="apply-item-header">
        <image class="header-label" src="/static/img/index/title_03.png" mode="" />
      </view>
      <view class="apply-item-wrapper apply-item-03">
        <view class="garden">
          <view class="form-item flex align-center justify-between">
            <view class="label required city">省·市·区：</view>
            <view class="flex align-center regionCode">
              <pick-regions name="regionCode" :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
                <text :class="['regions', regionName ? '' : 'empty']" >{{ regionName || '请选择' }}</text>
              </pick-regions>
              <text class="input-icon cuIcon-right"></text>
            </view>
          </view>
          <view class="form-item flex align-center justify-between">
            <view class="label required">所在园所：</view>
            <view class="flex align-center">
              <view v-for="(item, index) in selectTypeList" :class="['select-btn', 'block', selectType === item.value ? 'checked' : '']" :key="index" @tap.stop="selectChange(item)">
                {{ item.label }}
              </view>
              <!-- <radio-group class="block" v-model="selectType"  @change="selectChange">
                <radio class='radio' color="#FFF699" :value="item.value" :checked="selectType === item.value" v-for="(item, index) in selectTypeList" :key="index">{{ item.label }}</radio>
              </radio-group> -->
            </view>
          </view>
          <view class="form-item flex align-center justify-end">
            <!-- <view class="label required">所在园所：</view> -->
            <view class="flex align-center justify-end" v-if="selectType == 0">
              <picker mode="selector" @change="bindPickerChange" :value="gradenIndex" :range="gradenList" range-key="schoolName">
                <view v-if="gradenList && gradenList.length > 0 && gradenIndex != -1">{{ gradenList[gradenIndex].schoolName || '请选择' }}</view>
                <view class="empty" v-else>{{ '请选择' }}</view>
              </picker>
              <!-- <input placeholder="未填写"></input> -->
              <text class="input-icon cuIcon-right"></text>
            </view>
            <view class="flex align-center justify-end" v-else>
              <input placeholder="请填写" v-model="schoolName"></input>
              <text class="input-icon cuIcon-right"></text>
            </view>
          </view>
          <view class="form-item flex align-center justify-between">
            <view class="label required">组别：</view>
            <view class="flex justify-end level">
              <view v-for="(item, index) in typeList" :class="['select-btn', 'block', classLevel === item.value ? 'checked' : '']" :key="index" @tap.stop="radioChange(item)">
                {{ item.label }}
              </view>
              <!-- <radio-group class="block" v-model="classLevel"  @change="radioChange">
                <radio class='radio' color="#FFF699" :value="item.value" :checked="classLevel === item.value" v-for="(item, index) in typeList" :key="index">{{ item.label }}</radio>
              </radio-group> -->
            </view>
          </view>
        </view>
        <image class="lock lock-left" src="/static/img/index/lock.png" mode="" />
        <image class="lock lock-right" src="/static/img/index/lock.png" mode="" />
      </view>
    </view>
    <view class="apply-item apply-section-03" v-else>
      <view class="apply-item-header">
        <image class="header-label" src="/static/img/index/title_03_01.png" mode="" />
      </view>
      <view class="apply-item-wrapper apply-item-03">
        <view class="counter">
          <view class="form-item flex align-center justify-between">
            <view class="label required city">省·市·区：</view>
            <view class="flex align-center regionCode">
              <pick-regions name="regionCode" :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
                <text :class="['regions', regionName ? '' : 'empty']" >{{ regionName || '请选择' }}</text>
              </pick-regions>
              <text class="input-icon cuIcon-right"></text>
            </view>
          </view>
          <view class="form-item flex align-center justify-between">
            <view class="label required">所在专柜：</view>
            <view class="flex align-center">
              <input v-model="shoppeName" name="shoppeName" placeholder="请输入专柜名称"></input>
              <text class="input-icon cuIcon-right"></text>
            </view>
          </view>
          <view class="form-item flex align-center justify-between">
            <view class="label required">组别：</view>
            <view class="flex justify-end level">
              <view v-for="(item, index) in typeList" :class="['select-btn', 'block', classLevel === item.value ? 'checked' : '']" :key="index" @tap.stop="radioChange(item)">
                {{ item.label }}
              </view>
              <!-- <radio-group class="block" v-model="classLevel"  @change="radioChange">
                <radio class='radio' color="#FFF699" :value="item.value" :checked="classLevel === item.value" v-for="(item, index) in typeList" :key="index">{{ item.label }}</radio>
              </radio-group> -->
            </view>
          </view>
        </view>
        <image class="lock lock-left" src="/static/img/index/lock.png" mode="" />
        <image class="lock lock-right" src="/static/img/index/lock.png" mode="" />
      </view>
    </view>
    <view class="apply-item apply-section-04">
      <view class="apply-item-wrapper apply-item-04">
        <view class="rule">
          <view class="title">
            <image src="/static/img/index/rule_title.png" mode="" />
          </view>
          <view class="rule-item" v-for="(item, index) in ruleList" :key="index">
            {{item.id}}.{{item.title}}
          </view>
        </view>
        <view class="apply-submit">
          <image @tap.stop="handleSubmit" class="apply-btn-img" src="/static/img/index/apply_btn_03.png" mode="" />
        </view>
      </view>
    </view>

    <!-- 报名失败弹窗 -->
    <zd-modal-fail @emitClose="failModelClose" :route="'/pages/apply/list'" :failModel="failModel"></zd-modal-fail>
    <!-- <view :class="['cu-modal', failModel ? 'show': '']"  @touchmove.stop.prevent="clear">
      <view class="open-bg">
        <view class="open-wrap">
          <image class="close" src="/static/img/common/model_close.png" mode="" @tap.stop="failModel=false" />
          <view class="img-box">
            <image src="/static/img/common/model_bg.png" mode="" />
          </view>
          <view class="footer flex align-center">
            <view class="btn" @tap.stop="failModel=false">
              <image src="/static/img/common/cancel.png" mode="" />
            </view>
            <view class="btn" @tap.stop="navTo('/pages/apply/list')">
              <image src="/static/img/common/comfirm.png" mode="" />
            </view>
          </view>
        </view>
      </view>
    </view> -->
    

    <!-- 报名成功弹窗 -->
    <view :class="['cu-modal', successModel ? 'show': '']" >
      <view class="open-bg">
        <view class="open-wrap">
          <image class="close" src="/static/img/common/model_close.png" mode="" @tap.stop="successModel=false" />
          <view class="img-box success">
            <image src="/static/img/common/model_sucess_bg.png" mode="" />
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { userInfo } from '@/api/userInfo';
import { schoolList, saveApply } from '@/api/apply';
import { mapState, mapActions } from 'vuex';
import pickRegions from '@/components/pick-regions/pick-regions.vue';
import zdModalFail from '@/components/zd-modal-fail';

export default {
  data() {
    return {
      avatarImg: '/static/img/common/empty_avatar.png',
      failModel: false,
      successModel: false,
      selectType: '0', // 0. 选择园所 1.输入园所
      signUpType: 0, // 0学校 1专柜
      classLevel: '-1',
      shoppeName: '',
      schoolName: '',
      region:[],
      defaultRegion:['北京市','市辖区','东城区'],
      defaultRegionCode: '110101',
      gradenIndex: 0,
      typeList: [
        {
          label: '托班',
          value: '-1'
        },
        {
          label: '小班',
          value: '0'
        },
        {
          label: '中班',
          value: '1'
        },
        {
          label: '大班',
          value: '2'
        },
      ],
      selectTypeList: [
        {
          label: '选择园所',
          value: '0'
        },
        {
          label: '填写园所',
          value: '1'
        },
      ],
      gradenList: [],
      ruleList: [
        {
          id: '1',
          title: '请留下准确联系方式，用以通知赛事时间，决赛地址等相关赛事信息；'
        },
        {
          id: '2',
          title: '请准备宝宝1寸近照两张；'
        },
        {
          id: '3',
          title: '报名成功后，【用户中心】-【全国海选赛】可查看选手报名参赛信息；'
        },
        {
          id: '4',
          title: '收费详情，请咨询全国各地大赛举办方；'
        },
        {
          id: '5',
          title: '咨询电话：010 59626411-837/821/835'
        },
        {
          id: '6',
          title: '传真电话：010-59626419'
        }
      ],
      baby: null,
      parent: null,
      signUp: null
    }
  },

  onLoad(options) {
    if(options) {
      this.signUpType = options.type; 
    }
		this.initData();
  },

  onShow() {},

  filters: {
    imgUrlFilter(val) {
      switch (val){
        case 1:
          return require('static/img/index/male.png')
        case 2:
          return require('static/img/index/female.png')
        default:
          return require('static/img/index/female.png')
      }
    },
    regionCityFilter(val) {
      if(val) {
        let regionCity;
        try {
          regionCity = JSON.parse(val) || [];
        } catch (error) {
          regionCity = val;
        }
        if(!Array.isArray(regionCity)) {
          return regionCity;
        } else {
          return regionCity.join('');
        }
      }
    }
  },

  computed: {
    ...mapState({
      user: 'user',
      parentForm: 'parent',
      onlineId: 'onlineId',
      offlineId: 'offlineId'
    }),
    regionName: {
      get: function() {
        return this.region.map(item=>item.name).join('/')
      },
      set: function(val) {
        if(val) {
          this.region = val.map(item => {
            return {
              name: item
            }
          })
        }
        return val;
      }
    },
    schoolRegionCode() {

    }
  },

  watch: {
    parentForm(val, oldVal) {
      if(val) {
        this.parent = val;
      }
    }
  },

  components: {
    pickRegions,
    zdModalFail
  },
  methods: {
    async initData() {
      if (this.parentForm) {
        this.parent = this.parentForm;
      }
      await this.getUserInfo();
    },
    async getUserInfo() {
      this.$mStore.dispatch('getUserInfo',{
        competitionChildId: this.offlineId
      }).then(async res => {
          const { baby, signUp } = res.data;
          this.baby = baby;
          this.signUp = signUp;
          if(signUp) {
            this.parent = {
              parentName: signUp.parentName,
              parentBabyRelation: signUp.parentBabyRelation,
              parentPhone: signUp.parentPhone,
              regionCity: signUp.regionCity,
              regionCode: signUp.regionCode,
              address: signUp.address
            }
            if (!signUp.school) {
              this.selectType = '1';
              this.schoolName = signUp.schoolName;
            }
            if (signUp.signUpType == 0) {
              this.classLevel = signUp.classLevel + '';
              try{
                this.regionName = JSON.parse(signUp.schoolRegionName);
              }catch(e){
                this.regionName = '';
              }
              try{
                const code = JSON.parse(signUp.schoolRegionCode);
                code.map((item, index) => {
                  this.region[index].code = item;
                })
                if (code && code.length > 0) {
                  this.defaultRegionCode = code[code.length - 1];
                }
                if (code) {
                  await this.getRegion(this.defaultRegionCode);
                }

              }catch(e){
                console.log(e);
              }
              // const code = JSON.parse(signUp.schoolRegionCode);
              // if (code && code.length > 0) {
              //   this.defaultRegionCode = code[code.length - 1];
              // }
              // if (code) {
              //   await this.getRegion(this.defaultRegionCode);
              // }
            } else if (signUp.signUpType == 1) {
              this.shoppeName = signUp.shoppeName;
              try{
                this.regionName = JSON.parse(signUp.schoolRegionName);
              }catch(e){
                this.regionName = '';
              }
              try{
                const schoolRegionCode = JSON.parse(signUp.schoolRegionCode);
                schoolRegionCode.map((item, index) => {
                  this.region[index].code = item;
                })
              }catch(e){
              }
            } else {
              this.$mHelper.toast('报名方式出错');
            }
          }
      }).catch(() => {
        console.log('catch');
      })
    },
    getRegion(code) {
      this.$http
        .get(`${schoolList}`, {
          isPage: 0,
          code
        })
        .then(res => {
          this.gradenList = res.data || [];
          // 获取园所所在列表的下标
          this.getGradenIndex()
        })
        .catch(() => {
        })
    },
    getGradenIndex() {
      this.gradenIndex = this.gradenList.findIndex(item => item.id === this.signUp.schoolId);
    },
    // 获取选择的地区
    handleGetRegion(region){
      this.region = region;
      const code = region[region.length -1].code;
      this.gradenIndex = 0;
      // 根据省市区获取园所地址
      this.getRegion(code);
    },
    // 
    bindPickerChange(e) {
      const index = e.detail.value;
      this.gradenIndex = index;
      // this.schoolId = this.gradenList[index].id;
      // this.schoolName = this.gradenList[index].schoolName;
    },
    handleSubmit() {
      // 
      let formData = {
        ...this.baby,
        ...this.parent,
        competitionChildId: this.offlineId,
        signUpType: this.signUpType,
      };
      if (this.signUpType == 0) { // 园所报名
        if (this.region && this.region.length <=0 ) {
          this.$mHelper.toast('请选择省市区');
          return false;
        }
        // if (this.gradenList && this.gradenList.length <=0 ) {
        //   this.$mHelper.toast('未选择/输入园所名称');
        //   return false;
        // }
        if(this.selectType == 0) {
          if (this.gradenList[this.gradenIndex]) {
            formData['schoolName'] = this.gradenList[this.gradenIndex].schoolName || '';
            formData['schoolId'] = this.gradenList[this.gradenIndex].id || '';
          } else {
            this.$mHelper.toast('未选择/输入园所名称');
            return false;
          }
        } else {
          if (!this.schoolName) {
            this.$mHelper.toast('未选择/输入园所名称');
            return false;
          }
          formData['schoolName'] = this.schoolName || '';
        }
        formData['schoolRegionCode'] = JSON.stringify(this.region.map(item => item.code));
        formData['schoolRegionName'] = JSON.stringify(this.region.map(item => item.name));
        formData['classLevel'] = this.classLevel;
      }
      if (this.signUpType == 1) { // 专柜报名
        if (this.region && this.region.length <=0 ) {
          this.$mHelper.toast('请选择省市区');
          return false;
        }
        formData['schoolRegionCode'] = JSON.stringify(this.region.map(item => item.code));
        formData['schoolRegionName'] = JSON.stringify(this.region.map(item => item.name));
        formData['classLevel'] = this.classLevel;
        formData['shoppeName'] = this.shoppeName;
      }
      if(!this.baby) {
        this.$mHelper.toast('请填写选手信息');
        return false;
      }
      if(!this.parent) {
        this.$mHelper.toast('请填写家长信息');
        return false;
      }
      let rules = [
        { name: 'headImg', checkType: 'notnull', checkRule: '', errorMsg: '头像不能为空' },
        { name: 'babyName', checkType: 'notnull', checkRule: '', errorMsg: '选手姓名不能为空' },
        { name: 'sex', checkType: 'in', checkRule: '1,2', errorMsg: '性别不能为空' },
        { name: 'babyBirthday', checkType: 'notnull', checkRule: '', errorMsg: '出生日期不能为空' },
        { name: 'parentName', checkType: 'notnull', checkRule: '', errorMsg: '请填写家长姓名' },
        { name: 'parentBabyRelation', checkType: 'notnull', checkRule: '', errorMsg: '请选择关系' },
        { name: 'parentPhone', checkType: 'notnull', checkRule: '', errorMsg: '请填写联系方式'},
        { name: 'parentPhone', checkType: 'phoneno', checkRule: '', errorMsg: '联系方式不正确'},
        // { name: 'address', checkType: 'notnull', checkRule: '', errorMsg: '请填写详细地址'},
        { name: 'signUpType', checkType: 'in', checkRule: '0,1', errorMsg: '报名方式错误'},
      ];
      if (this.signUpType == 0) {
        rules.push(
          { name: 'schoolRegionCode', checkType: 'notnull', checkRule: '', errorMsg: '请选择省市区地区'},
          { name: 'schoolRegionName', checkType: 'notnull', checkRule: '', errorMsg: '请选择省市区地区'},
          { name: 'schoolName', checkType: 'notnull', checkRule: '', errorMsg: '未选择/输入园所名称'},
          { name: 'classLevel', checkType: 'in', checkRule: '-1,0,1,2', errorMsg: '请选择组别'},
        )
      }
      if (this.signUpType == 1) { // 专柜报名
        rules.push(
          { name: 'schoolRegionCode', checkType: 'notnull', checkRule: '', errorMsg: '请选择省市区地区'},
          { name: 'schoolRegionName', checkType: 'notnull', checkRule: '', errorMsg: '请选择省市区地区'},
          { name: 'classLevel', checkType: 'in', checkRule: '-1,0,1,2', errorMsg: '请选择组别'},
          { name: 'shoppeName', checkType: 'notnull', checkRule: '', errorMsg: '专柜名称不能为空' }
        )
      }
      let checkRes = this.$mGraceChecker.check(formData, rules);
      if (checkRes) {
        this.$http
          .post(saveApply,{
            ...formData
          })
          .then(res => {
            if (res.data == 0) {
              this.failModel = true;
            } else {
              this.successModel = true;
              setTimeout(() => {
                this.$mRouter.push({
                  route: '/pages/apply/result'
                })
              }, 1500);
            }
            this.$mStore.dispatch('getUserInfo',{
              competitionChildId: this.offlineId
            })
          })
          .catch((err) => {
            console.log('err', err)
          })
      } else {
        this.$mHelper.toast(this.$mGraceChecker.error)
      }
    },
    radioChange(evt) {
      console.log(evt);
      this.classLevel = evt.value;
    },
    selectChange(evt) {
      this.selectType = evt.value;
    },
    navTo(route) {
      this.$mRouter.push({route})
    },
    failModelClose() {
      this.failModel = false;
    },
    clear() {

    }
  }

}
</script>

<style lang="scss" scoped>
.apply {
  background: #4CD84A;
  .apply-item {
    padding: 0 28upx;
    position: relative;
    &.apply-section-01,&.apply-section-02 {
      // margin-bottom: 38upx;
      padding-bottom: 38upx;
    }
    &.apply-section-01 {
      padding-top: 36upx;
      background: url('@/static/img/index/ABC_G@3x.png') no-repeat;
      background-size: 60upx 60upx;
      background-position: 200upx 24upx;
    }
    &.apply-section-02 {
      padding-top: 38upx;
      background: url('@/static/img/index/ABC_B@3x.png') no-repeat;
      background-size: 60upx 60upx;
      background-position: 554upx 38upx;
    }
    &.apply-section-03 {
      padding-top: 38upx;
      background: url('@/static/img/index/ABC_A@3x.png') no-repeat;
      background-size: 60upx 60upx;
      background-position: 242upx 32upx;
    }
    &.apply-section-04 {
      padding-top: 84upx;
      background: url('@/static/img/index/ABC_M@3x.png') no-repeat;
      background-size: 82upx 88upx;
      background-position: top 32upx right 0upx;
      padding-bottom: 54upx;
    }
    .apply-item-header {
      font-size: 0;
      margin-bottom: 32upx;
      image {
        width: 154upx;
        height: 42upx;
      }
    }
    .apply-item-wrapper {
      position: relative;
      width: 694upx;
      background: #FFFFFF;
      border-radius: 40upx;
      border: 10upx solid #B6F9B6;
      .lock {
        position: absolute;
        top: -20upx;
        width: 36upx;
        height: 38upx;
      }
      .lock-left {
        left: 30upx;
      }
      .lock-right {
        right: 30upx;
      }
    }
    .apply-item-01,.apply-item-02 {
      // height: 326upx;
      padding-left: 36upx;
      .apply-left {
        flex: 1;
        margin: 36upx 0 56upx;
      }
      .apply-right {
        position: relative;
        text-align: center;
        width: 150upx;
        background: #FEEB56;
        box-shadow: 0upx 6upx 2upx 0upx #FDB035;
        border-radius: 0upx 24upx 24upx 0upx;
        // border: 4upx solid #FFFFFF;
        margin: 4upx 6upx 10upx 0;
        .light {
          position: absolute;
          width: 44upx;
          height: 6upx;
          left: 16upx;
          top: 12upx;
        }
      }
    }
    .apply-item-04 {
      padding: 44upx 24upx 42upx 38upx;
    }
    .user-avatar {
      // position: absolute;
      left: 64upx;
      bottom: 68upx;
      font-size: 0;
      margin-right: 30upx;
      border: 1upx solid #38D736;
      border-radius: 50%;
      width: 112upx;
      height: 112upx;
      .avatar-img {
        width: 112upx;
        height: 112upx;
        border-radius: 50%;
        background: #ffffff;
        transform: translate(-6upx, -8upx)
      }
    }
    .user-info {
      max-width: 336upx;
      .empty-title {
        height: 42upx;
        font-size: 28upx;
        line-height: 42upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      .empty-desc {
        height: 42upx;
        font-size: 24upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;
        line-height: 42upx;
      }
      .gender {
        font-size: 0;
        margin-left: 16upx;
        width: 28upx;
        height: 28upx;
        vertical-align: middle;
      }
    }
    .user-info-02 {
      // max-width: 364upx;
      .address {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #333333;
        max-width: 220upx;
        line-height: 42upx;
      }
      .relation {
        display: inline-block;
        width: 70upx;
        text-align: center;
        background: #E5F5FF;
        border-radius: 86rpx;
        height: 28rpx;
        line-height: 28rpx;
        font-size: 20rpx;
        font-family: YouSheBiaoTiHei;
        color: #00A0FF;
        margin-left: 20upx;
        vertical-align: middle;
      }
    }
    .user-file {
      // position: absolute;
      right: 58upx;
      bottom: 92upx;
      .file-img {
        width: 82upx;
        height: 54upx;
      }
    }
    .user-file-02 {
      bottom: 142upx;
    }
    .garden, .counter  {
      width: 100%;
      padding: 38upx 44upx 46upx 36upx;
      .form-item {
        margin-bottom: 36upx;
        &:last-child {
          margin-bottom: 0upx;
        }
        .city {
          width: 210upx;
        }
        input {
          font-size: 28upx;
          color: #333333;
        }
        ::v-deep .radio {
          .uni-radio-input {
            border: 2px solid #4CD84A;
            width: 30upx;
            height: 30upx;
            margin-right: 8upx;
            &.uni-radio-input-checked {
              background: #FFF699;
              border: 2px solid #4CD84A !important;
              &::after {
                border: none !important;
              }
            }
          }
          .uni-radio-wrapper {
            margin-right: 42upx;
          }
        }
        ::v-deep .uni-input-input {
          text-align: right;
        }
        .input-placeholder {
          text-align:right;
          font-size: 28upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 40upx;
        }
        .input-icon {
          color: #CACACA;
          line-height: 1;
        }
        .regions {
          max-width: 300upx;
          &.empty {
            font-size: 28upx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
        }
        .empty {
          font-size: 28upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
    }
    .counter {
      // padding-left: 64upx;
      // .form-item {
      //   .input-placeholder {
      //     text-align: right;
      //   }
      //   ::v-deep .uni-input-input {
      //     text-align: right;
      //   }
      // }
    }
    .rule {
      width: 600upx;
      font-size: 28upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      .title {
        font-size: 0;
        margin-bottom: 32upx;
        image {
          width: 236upx;
          height: 52upx;
        }
      }
      .rule-item {
        line-height: 44upx;
      }
    }
    .apply-submit {
      text-align: center;
      margin-top: 58upx;
      .apply-btn-img {
        width: 486upx;
        height: 124upx;
      }
    }
    .user-info {
      .label {
        margin-right: 12upx;
      }
      .info {
        font-size: 28upx;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #333333;
        max-width: 220upx;
      }
    }
    .label {
      position: relative;
      font-size: 28upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 28upx;
      &.required {
        &::before {
          position: absolute;
          top: 0;
          left: -14upx;
          display: inline-block;
          margin-right: 0px;
          color: #FF0000;
          font-size: 28upx;
          line-height: 1;
          content: "*";
        }
      }
    }

  }
  .open-bg {
    position: fixed;
    left: 50%;
    bottom: 30%;
    transform: translateX(-50%);
    .open-wrap {
      position: relative;
      width: 588upx;
      // height: 732upx;
      margin: 0 auto;
      border-radius: 24upx;
      .close {
        position: absolute;
        width: 64upx;
        height: 64upx;
        right: -12upx;
        top: 52upx;
        z-index: 11;
      }
      .img-box {
        font-size: 0;
        image {
          width: 588upx;
          height: 723upx;
          object-fit: cover;
          &.success {
            width: 588upx;
            height: 712upx;
            object-fit: cover;
          }
        }
      }
      .footer {
        position: absolute;
        bottom: 80upx;
        left: 50%;
        transform: translateX(-50%);
        .btn {
          font-size: 0;
          image {
            width: 206upx;
            height: 106upx;
          }
        }
      }
    }
  }
  .level {
    .select-btn {
      width: 100upx;
      margin-left: 16upx;
      &:first-child {
        margin-left: 0;
      }
    }
  }
  .select-btn {
    width: 152upx;
    height: 48upx;
    line-height: 44upx;
    border-radius: 24upx;
    border: 2upx solid rgba(153, 153, 153, 0.2);
    font-size: 28upx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    text-align: center;
    margin-left: 18upx;
    &.checked {
      line-height: 48upx;
      background-color: #FEEB56;
      box-shadow: 2upx 2upx 2upx 0px #FDB035;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #C24000;
      border: none;
      transition: all 0.3s;
    }
  }
}
</style>
