<template>
  <view style="background-color: rgb(246, 247, 250); height: 100%">
    <u-navbar :title="title"></u-navbar>
    <view class="form">
      <view class="flex-col group">
        <view class="flex-col section_2">
          <!-- 教职工 -->
          <view class="flex-col group-box" v-if="roleId === '2'">
            <view class="flex-row group-box-item">
              <text class="text_15">申请人姓名</text>
              <u-input
                class="input"
                :custom-style="inputStyle"
                :type="'text'"
                :border="false"
                v-model="form.name"
                placeholder="请输入"
                disabled
                inputAlign="right"
              />
            </view>
            <view class="flex-row group-box-item">
              <text class="text_15">联系方式</text>
              <u-input
                class="input"
                :custom-style="inputStyle"
                :type="'number'"
                :border="false"
                v-model="form.phone"
                placeholder="请输入"
                disabled
                inputAlign="right"
              />
            </view>
            <!-- 任职学校 -->
            <view class="justify-between group_7" @click="shoolShow = true">
              <view class="flex-row group-box-item">
                <text class="text_15">任职学校</text>
                <view v-if="shoolName">{{ shoolName }}</view>
                <view v-else style="color: #cbcacd">请选择任职学校</view>
              </view>
              <image
                class="image_3 image_5"
                src="/static/common/img/row_right.png"
              />
            </view>
            <view class="justify-between group_7" @click="schoolPost = true">
              <view class="flex-row u-col-center">
                <text class="text_15">校内职务</text>
                <view v-if="form.schoolJob">{{ form.schoolJob }}</view>
                <view v-else style="color: #cbcacd">请选择校内职务</view>
              </view>
              <image
                class="image_3 image_5"
                src="/static/common/img/row_right.png"
              />
            </view>
            <view
              v-if="isDisabled"
              class="justify-between group_13"
              @click="college = true"
            >
              <view class="flex-row u-col-center">
                <text class="text_15">所属院系</text>
                <view v-if="form.faculty">{{ form.faculty }}</view>
                <view v-else style="color: #cbcacd">请选择所属院系</view>
              </view>
              <image
                class="image_3 image_8"
                src="/static/common/img/row_right.png"
              />
            </view>

            <view
              v-if="isDisabled"
              class="justify-between group_13"
              style="border: none"
              @click="job = true"
            >
              <view class="flex-row u-col-center">
                <text class="text_15">具体职位</text>
                <view v-if="form.job">{{ form.job }}</view>
                <view v-else style="color: #cbcacd">请选择具体职位</view>
              </view>
              <image
                class="image_3 image_8"
                src="/static/common/img/row_right.png"
              />
            </view>
          </view>
          <!-- 企业 -->
          <view class="flex-col group-box" v-if="roleId === '0'">
            <view class="flex-row group-box-item">
              <text class="text_15">企业名称</text>
              <u-input
                class="input"
                :custom-style="inputStyle"
                :type="'text'"
                :border="false"
                v-model="form.businessName"
                placeholder="请输入"
                inputAlign="right"
              />
            </view>
            <view class="flex-row group-box-item">
              <text class="text_15">企业地址</text>
              <view class="item-wrapper">
                <view class="input-cover" @click="address = true"></view>
                <u-input
                  class="input"
                  :custom-style="inputStyle"
                  :type="'text'"
                  :border="false"
                  placeholder="请选择"
                  v-model="form.businessAddress"
                  inputAlign="right"
                  disabled
                />
              </view>
            </view>

            <view class="flex-row group-box-item">
              <view class="flex-row">
                <text class="text_15">企业申请人姓名</text>
                <u-input
                  class="input"
                  :custom-style="inputStyle"
                  :type="'text'"
                  :border="false"
                  v-model="form.businessUser"
                  disabled
                  inputAlign="right"
                />
              </view>
            </view>
            <view class="group-box-item flex-row">
              <text class="text_15">联系方式</text>
              <u-input
                class="input"
                :custom-style="inputStyle"
                :type="'number'"
                :border="false"
                v-model="form.phone"
                placeholder="请输入"
                disabled
                inputAlign="right"
              />
            </view>
            <view class="flex-row group-box-item" style="border: none">
              <view class="flex-row">
                <text class="text_15">申请人职务</text>
                <u-input
                  class="input"
                  :custom-style="inputStyle"
                  :type="'text'"
                  :border="false"
                  placeholder="请输入"
                  v-model="form.job"
                  inputAlign="right"
                />
              </view>
            </view>
          </view>
          <!-- 管理员 -->
          <view class="flex-col group-box" v-if="roleId === '1'">
            <view class="flex-row group-box-item">
              <text class="text_15">申请人姓名</text>
              <u-input
                class="input"
                :custom-style="inputStyle"
                :type="'text'"
                :border="false"
                v-model="form.name"
                placeholder="请输入"
                disabled
                inputAlign="right"
              />
            </view>
            <view class="group-box-item flex-row">
              <text class="text_15">联系方式</text>
              <u-input
                class="input"
                :custom-style="inputStyle"
                :type="'number'"
                :border="false"
                v-model="form.phone"
                placeholder="请输入"
                disabled
                inputAlign="right"
              />
            </view>
            <view class="justify-between group-box-item">
              <!-- {{form.schoolName}} -->
              <view class="flex-row">
                <text class="text_15">学校</text>
                <u-input
                  class="input"
                  :custom-style="inputStyle"
                  :type="'text'"
                  :border="false"
                  v-model="shoolName"
                  placeholder="请输入"
                  disabled
                  inputAlign="right"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="file">
      <view class="flex-col section_4">
        <text class="text_11">申请人身份证</text>
        <text class="text_tip">请规范上传身份正面，方便快速通过审核</text>
        <view class="equal-division">
          <view class="flex-col equal-division-item">
            <u-upload
              max-count="1"
              :header="header"
              :action="action"
              @on-success="onSuccess"
              index="0"
              ref="uUpload1"
              width="640"
              height="396"
            >
              <template #addBtn>
                <image :src="idcardPositive" mode="widthFix"></image>
              </template>
            </u-upload>
          </view>
          <view class="flex-col equal-division-item">
            <u-upload
              max-count="1"
              :header="header"
              :action="action"
              @on-success="onSuccess"
              index="1"
              ref="uUpload2"
              width="640"
              height="396"
            >
              <template #addBtn>
                <image :src="idcardBack" mode="widthFix"></image>
              </template>
            </u-upload>
          </view>
        </view>
      </view>
      <view class="flex-col section_4">
        <text class="text_11">个人工作证</text>
        <view class="equal-division">
          <view class="flex-col equal-division-item">
            <u-upload
              max-count="1"
              :header="header"
              :action="action"
              @on-success="onSuccess"
              index="2"
              ref="uUpload3"
              width="640"
              height="396"
            >
              <template #addBtn>
                <image :src="workCard" mode="widthFix"></image>
              </template>
            </u-upload>
          </view>
          <view class="flex-col " v-if="roleId == 0">
            <text class="text_11">企业营业执照</text>
            <view class="equal-division">
              <view class="flex-col equal-division-item">
                <u-upload
                  max-count="1"
                  :header="header"
                  :action="action"
                  @on-success="onSuccess"
                  index="3"
                  ref="uUpload4"
                  width="640"
                  height="396"
                >
                <template #addBtn>
                  <image :src="enterprisesImg" mode="widthFix"></image>
                </template>
              </u-upload>
            </view>
          </view>
          </view>
        </view>
      </view>
      <view class="flex-col group_9">
        <text class="text_23">*所有上传信息仅供身份的认证</text>
        <u-button
          class="button"
          type="primary"
          :disabled="!state"
          :plain="!state"
          @click="save"
          :throttle-time="1000"
          >{{ state ? "提交认证" : "提交中" }}</u-button
        >
        <!-- <view class="flex-col items-center button" @click="save">
					<text>提交认证</text>
				</view> -->
        <text class="text_25">示例</text>
        <view class="grid">
          <view class="grid-item flex-col items-center">
            <image src="/static/common/img/身份证正面.png" class="image_14" />
            <text style="color: #fff">身份证正面</text>
          </view>
          <view class="flex-col items-center grid-item">
            <image src="/static/common/img/身份证反面.png" class="image_14" />
            <text style="color: #fff">身份证反面</text>
          </view>
          <view class="grid-item flex-col items-center">
            <image src="/static/common/img/个人工作证.png" class="image_14" />
            <text style="color: #fff">个人工作证</text>
          </view>
          <view class="grid-item flex-col items-center" v-if="roleId == 0">
            <image src="/static/common/img/企业营业执照.png" class="image_14" />
            <text style="color: #fff">企业营业执照</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 地址 -->
    <u-picker
      mode="region"
      v-model="address"
      :area-code="addressId"
      @confirm="selectAddress"
    ></u-picker>
    <!-- 性别 -->
    <u-select
      v-model="sex"
      mode="single-column"
      :default-value="sexId"
      :list="sexList"
      @confirm="selectSex"
    >
    </u-select>
    <!--校内职务-->
    <u-select
      v-model="schoolPost"
      mode="single-column"
      :default-value="schoolPostId"
      :list="schoolPostList"
      @confirm="selectScpost"
    ></u-select>
    <!--所属院系-->
    <u-select
      v-model="college"
      mode="single-column"
      :default-value="collegeId"
      :list="CollegeList"
      @confirm="selectCpllege"
    ></u-select>
    <!--具体职位-->
    <u-select
      v-model="job"
      mode="single-column"
      :default-value="jobId"
      :list="jobList"
      @confirm="selectJob"
    >
    </u-select>
    <!-- 学校 -->
    <u-select
      v-model="shoolShow"
      :default-value="shoolId"
      mode="single-column"
      title="学校选择"
      :list="shoolList"
      @confirm="shoolSelect"
    >
    </u-select>
    <!-- 出生日期 -->
    <u-picker
      mode="time"
      v-model="birthdays"
      :end-year="EndYear"
      :default-time="birthdaysId"
      @confirm="selectBirthdays"
    ></u-picker>
    <!-- 籍贯 -->
    <u-picker
      mode="region"
      v-model="NativePlace"
      :area-code="NativePlaceId"
      @confirm="selectNativePlace"
    >
    </u-picker>
    <!-- 工作领域 -->
    <u-select
      v-model="WorkArea"
      mode="single-column"
      :default-value="WorkAreaId"
      :list="WorkAreaList"
      @confirm="selectWorkArea"
    ></u-select>
    <!-- 提示 -->
    <u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { Debounce } from "../../../common/utils.js";
import idcardPositive from "@/static/common/img/上传身份证正面.png";
import idcardBack from "@/static/common/img/上传身份证反面.png";
import workCard from "@/static/common/img/上传个人工作证.png";
import enterprisesImg from "@/static/common/img/上传营业执照.png" 
export default {
  data() {
    return {
      state: true,
      title: "教职工认证",
      action: "/app/User/File",
      // input 样式
      inputStyle: {
        lineHeight: "0.5rem",
        height: "0.5rem",
        width: "1.8rem",
      },
      shoolName: "",
      sex: false, //性别选择框的显示/隐藏
      shoolShow: false, //学校选择框的显示/隐藏
      schoolPost: false, //校内职务选择框的显示/隐藏
      sexList: [
        //性别选择框内容
        {
          label: "男",
          value: "0",
        },
        {
          label: "女",
          value: "1",
        },
      ],
      schoolPostList: [
        //校内职务选择框内容
        {
          label: "教师",
          value: "0",
        },
        {
          label: "行政管理",
          value: "1",
        },
        {
          label: "后勤",
          value: "2",
        },
      ],
      jobList: [
        //具体职务
        {
          label: "助教",
          value: "0",
        },
        {
          label: "讲师",
          value: "1",
        },
        {
          label: "副教授",
          value: "2",
        },
        {
          label: "教授",
          value: "3",
        },
      ],
      header: {
        Authorization: "",
      },
      shoolList: [], //学校选择
      CollegeList: [], //院系选择,
      sexId: [0], //记录选择的性别进行数据复现
      shoolId: [0], //默认选择学校
      schoolPostId: [0], //默认选择的校内职务
      jobId: [0], //默认选择具体职务
      collegeId: [0], //默认选择所属院系
      address: false, //现居地址选择框的显示/隐藏
      addressId: [11, 1101, 110101], //记录选择的现居地址进行数据复现
      birthdays: false, //出生日期选择框的显示/隐藏
      birthdaysId: "", //记录选择的出生日期进行数据复现
      EndYear: 2022, //出生日期选择框的最大年份
      NativePlace: false, //籍贯选择框的显示/隐藏
      NativePlaceId: [11, 1101, 110101], //记录选择的籍贯进行数据复现
      WorkArea: false, //工作领域选择框的显示/隐藏
      WorkAreaId: [0], //记录选择的工作领域进行数据复现
      //工作领域选择框内容
      WorkAreaList: [],
      form: {
        name: "",
        realName: "",
        sex: "",
        birthdays: "",
        phone: "",
        NativePlace: "",
        address: "",
        DetailedAddress: "",
        WorkArea: "",
        schoolId: "",
        job: "",
        businessName: "",
        businessAddress: "",
        businessUser: "",
        businessLicense: "",
        schoolJob: "",
        faculty: "",
      },
      job: false,
      roleId: 0,
      college: false,
      isDisabled: false,
      route: "", //判断提交成功之后的页面
      idcardPositive: idcardPositive,
      idcardBack: idcardBack,
      workCard: workCard,
      enterprisesImg:enterprisesImg
    };
  },
  onLoad(e) {
    this.action = this.$u.http.config.baseUrl + this.action;
    this.header.Authorization = "Bearer " + this.vuex_token;
    this.roleId = e.id;
    console.log(this.roleId, "this.roleId---");
    this.route = e.route;
    let name = this.vuex_user.name;
    if (this.roleId == 0) {
      this.title = "企业认证";
      this.form.businessUser = name;
    } else if (this.roleId == 2) {
      this.title = "教职工认证";
      this.form.name = name;
    } else if (this.roleId == 1) {
      this.title = "管理员认证";
      this.form.name = name;
    }
    this.EndYear = new Date().getFullYear();
    this.form.phone = this.vuex_user.phone;
    this.getschoolId();
    this.getShool();
    this.getWorkFile();
  },
  created() {},
  methods: {
    //获取学校id
    getschoolId() {
      this.$u.apiList.GetUserSchool().then((res) => {
        // 学生时
        if ([0,2].includes(this.vuex_user.userType)) {
          this.form.schoolId = res.items.schoolId;
          this.shoolName = res.items.school.name;
        }
        // 教师时
        if (this.vuex_user.userType === 1) {
          this.form.schoolId = res.jzgItems.schoolId;
          this.shoolName = res.jzgItems.school.name;
        }
        this.getColleg();
      });
    },
    // 获取学校
    getShool() {
      this.$u.api.GetAllSchool().then((res) => {
        for (let i = 0; i < res.length; i++) {
          this.shoolList.push({
            label: res[i].schoolName + "",
            value: res[i].id + "",
          });
        }
      });
    },
    //获取学院
    getColleg() {
      const data = {
        schoolid: this.form.schoolId,
        // name:name
      };
      this.$u.apiList.GetCollegeList(data).then((res) => {
        for (let i = 0; i < res.length; i++) {
          this.CollegeList.push({
            label: res[i].name + "",
            value: res[i].id + "",
          });
        }
      });
    },
    //获取工作领域
    getWorkFile() {
      this.$u.apiList.GetWorkFile().then((res) => {
        this.WorkAreaList = res.map((item) => {
          return {
            label: item.workFieldName,
            value: item.id,
          };
        });
      });
    },
    // 提示
    tips(title, type, time) {
      this.$refs.uToast.show({
        title: title ? title : "",
        type: type ? type : "success",
        duration: time ? time + "" : "1000",
      });
    },
    // 保存
    save: Debounce(function (e) {
      console.log(this.roleId, "this.roleId-");
      // return
      // if (this.route == 'my') {
      // 		this.$refs.uToast.show({
      // 			title: '提交认证成功',
      // 			type: 'success',
      // 		})
      // 		setTimeout(() => {
      // 			uni.switchTab({
      // 				url: '../../my/my/my'
      // 			});
      // 		}, 2000)
      // 	}else{
      //     this.$refs.uToast.show({
      //       title: '提交认证成功',
      //       type: 'success',
      //       url: 'pages/my/authentication/authentication'
      //     })
      //   }
      // return
      var data = this.form;
      this.form.userId = this.vuex_user.id;
      if (this.roleId == 1) {
        if (data.name === "") {
          this.tips("请输入用户名", "error");
          return;
        }
        //  var reg = new RegExp("^[1][3,4,5,7,8,9][0-9]{9}$", "g"); //手机号
        //  if (data.phone === "" || !reg.test(data.phone)) {
        // this.tips("请输入正确的手机号码", "error");
        // return;
        //  }
        if (data.schoolId === "") {
          this.tips("请选择学校", "error");
        }
        // if(data.job === ""){
        //  this.tips("请选择职业","error")
        // }
        if (!this.filecheck()) {
          return;
        }
        this.SubmitAttestationGLY();
      } else if (this.roleId == 0) {
        if (data.businessName === "") {
          this.tips("请输入企业名称", "error");
          return;
        }
        if (data.businessAddress === "") {
          this.tips("请输入企业地址", "error");
          return;
        }
        // if(data.phone === ""){
        //  this.tips("请输入联系方式", "error");
        //  return;
        // }
        if (data.job === "") {
          this.tips("请输入申请人职务", "error");
          return;
        }
        if (!this.filecheck()) {
          return;
        }
        this.SubmitAttestationQY();
      } else if (this.roleId == 2) {
        var reg = new RegExp("^[\u4e00-\u9fa5]{0,}$", "g"); //真实姓名
        if (data.name === "" || !reg.test(data.name)) {
          this.tips("请输入正确的真实姓名", "error");
          return;
        }
        //  var reg1 = new RegExp("^[1][3,4,5,7,8,9][0-9]{9}$", "g"); //手机号
        //  if (data.phone === "" || !reg1.test(data.phone)) {
        // this.tips("请输入正确的手机号码", "error");
        // return;
        //  }
        if (data.schoolId === "") {
          this.tips("请选择入职学校", "error");
          return;
        }
        if (data.schoolJob === "") {
          this.tips("请选择校内职务", "error");
          return;
        }
        if (data.schoolJob === "教师") {
          if (data.faculty === "") {
            this.tips("请输入所属院系", "error");
            return;
          }
          if (data.job === "") {
            this.tips("请选择具体职位", "error");
            return;
          }
        }
        if (!this.filecheck()) {
          return;
        }
        this.SubmitAttestationJZG();
      }
    }, 1000),

    filecheck() {
      let file1 = this.$refs.uUpload1.lists[0];
      let file2 = this.$refs.uUpload2.lists[0];
      let file3 = this.$refs.uUpload3.lists[0];
      if (!file1) {
        this.tips("请上传身份证正面", "error");
        return false;
      }
      if (!file2) {
        this.tips("请上传身份证反面", "error");
        return false;
      }
      if (!file3) {
        this.tips("请上传个人工作证", "error");
        return false;
      }
      if (this.roleId == 0) {
        let file4 = this.$refs.uUpload4.lists[0];
        if (!file4) {
          this.tips("请上传企业营业执照", "error");
          return false;
        }
      }
      return true;
    },
    // 盘判断出生日期
    isBirthday(data) {
      return new Date(data) >= new Date();
    },
    // 选择工作领域
    selectWorkArea(e) {
      this.form.job = e[0].label;
      this.WorkAreaId = [parseInt(e[0].value)];
    },
    // 选择籍贯
    selectNativePlace(e) {
      this.form.NativePlace =
        e.province.label + "-" + e.city.label + "-" + e.area.label;
      var arr = [];
      //   - 0 是转化为隐式转换为数组类型
      arr.push(e.province.value - 0);
      arr.push(e.city.value - 0);
      arr.push(e.area.value - 0);
      this.NativePlaceId = arr;
    },
    // 选择出生日期
    selectBirthdays(e) {
      this.form.birthdays = e.year + "-" + e.month + "-" + e.day;
      this.birthdaysId = e.year + "-" + e.month + "-" + e.day;
    },
    //   选择性别
    selectSex(e) {
      this.form.sex = e[0].label;
      this.sexId = [parseInt(e[0].value)];
    },
    //   选择校内职务
    selectScpost(e) {
      if (e[0].label == "教师") {
        this.isDisabled = true;
      } else {
        this.form.faculty = "";
        this.form.job = "";
        this.isDisabled = false;
      }
      this.form.schoolJob = e[0].label;
      this.schoolPostId = [parseInt(e[0].value)];
    },
    //选择所属院系
    selectCpllege(e) {
      this.form.faculty = e[0].label;
      this.collegeId = [parseInt(e[0].value)];
    },
    //   选择具体职务
    selectJob(e) {
      this.form.job = e[0].label;
      this.jobId = [parseInt(e[0].value)];
    },
    //   选择地址
    selectAddress(e) {
      this.form.businessAddress =
        e.province.label + "-" + e.city.label + "-" + e.area.label;
      var arr = [];
      //   - 0 是转化为隐式转换为数组类型
      arr.push(e.province.value - 0);
      arr.push(e.city.value - 0);
      arr.push(e.area.value - 0);
      this.addressId = arr;
    },
    // 学校选择
    shoolSelect(e) {
      this.shoolName = e[0].label;
      this.form.schoolId = e[0].value;
      this.getColleg(this.form.schoolId, this.shoolName);
    },
    // 提交管理员认证
    SubmitAttestationGLY() {
      this.state = false;
      this.$u.apiList
        .SubmitAttestationGLY(this.form)
        .then((res) => {
          this.state = true;
          if (this.route == "my") {
            this.$refs.uToast.show({
              title: "提交认证成功",
              type: "success",
            });
            setTimeout(() => {
              uni.switchTab({
                url: "../../my/my/my",
              });
            }, 1000);
          } else {
            this.$refs.uToast.show({
              title: "提交认证成功",
              type: "success",
            });
          }
        })
        .catch((e) => {
          this.state = true;
          console.log(e, "e---");
          this.$refs.uToast.show({
            title: e.error || "提交失败",
            type: "error",
          });
        });
    },
    //提交企业认证
    SubmitAttestationQY() {
      this.state = false;
      setTimeout(() => {
        this.state = true;
        // uni.showToast({
        // 	title: '提交异常,请联系管理员',
        // 	icon: 'none'
        // })
      }, 5000);
      this.$u.apiList
        .SubmitAttestationQY(this.form)
        .then((res) => {
          this.state = true;
          this.$refs.uToast.show({
            title: "提交认证成功",
            type: "success",
          });
          // uni.showToast({
          // 	title: "提交认证成功",
          // 	duration: 2000,
          // });
          setTimeout(() => {
              uni.switchTab({
                url: "../../my/my/my",
              });
            }, 1000);
        })
        .catch((err) => {
          this.state = true;
          /* uni.showToast({
            title: err.error || "提交失败",
            icon: "none",
          }); */
          this.$refs.uToast.show({
            title: err.error || "提交失败",
            type: "error",
          });
        });
    },
    //提交教职工认证
    SubmitAttestationJZG() {
      this.state = false;
      this.$u.apiList
        .SubmitAttestationJZG(this.form)
        .then((res) => {
          this.state = true;
          if (this.route == "my") {
            this.$refs.uToast.show({
              title: "提交认证成功",
              type: "success",
            });
            setTimeout(() => {
              uni.switchTab({
                url: "../../my/my/my",
              });
            }, 2000);
          } else {
            this.$refs.uToast.show({
              title: "提交认证成功",
              type: "success",
              // url: 'pages/my/authentication/authentication'
            });
            setTimeout(() => {
              uni.redirectTo({
                url: "/pages/my/authentication/authentication",
              });
            }, 500);
          }
        })
        .catch((e) => {
          console.log(e, "e------");
          this.state = true;
          this.$refs.uToast.show({
            title: e.error || "提交失败",
            type: "error",
          });
        });
    },
    //图片上传成功
    onSuccess(data, index, lists, name) {
      if (name == 0) {
        this.form.imgFront = data.data;
      } else if (name == 1) {
        this.form.imgReverse = data.data;
      } else if (name == 2) {
        this.form.imgWork = data.data;
      } else if (name == 3) {
        this.form.businessLicense = data.data;
      }
    },
    //返回上一级
    router() {
      if (this.route == "my") {
        uni.switchTab({
          url: "../../my/my/my",
        });
      } else {
        this.$u.route({
          url: "pages/my/authentication/authentication",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.file {
  background: #f6f8f9;
  .group_9 {
    width: calc(100% - 60rpx);
    padding: 30rpx;
    margin: 0 auto;

    .text_23 {
      color: rgb(46, 155, 255);
      font-size: 0.12rem;
      line-height: 0.16rem;
      white-space: nowrap;
    }

    .button {
      margin: 0.14rem 0.07rem 0 0.08rem;
      padding: 0.12rem 0;
      color: rgb(255, 255, 255);
      font-size: 0.15rem;
      line-height: 0.16rem;
      letter-spacing: 0.03rem;
      white-space: nowrap;
      background-color: rgb(46, 155, 255);
      border-radius: 0.1rem;
    }

    .text_25 {
      margin-left: 0.025rem;
      margin-top: 0.21rem;
      color: rgb(164, 174, 183);
      font-size: 0.15rem;
      line-height: 0.14rem;
      letter-spacing: 0.03rem;
      white-space: nowrap;
    }

    .grid {
      margin: 0.1rem 0.03rem 0 0.02rem;
      height: 1.61rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-row-gap: 0.11rem;
      grid-column-gap: 0.11rem;

      .grid-item {
        background-color: rgb(176, 191, 205);
        border-radius: 0.05rem;
      }

      .grid-item_1 {
        padding: 0.23rem 0 0.29rem;
        background-color: rgb(176, 191, 205);
        border-radius: 0.05rem;
      }

      .image_14 {
        width: 100%;
        height: 0.8rem;
      }
    }
  }

  .section_4 {
    width: calc(100% - 60rpx);
    margin: 20rpx auto;
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;

    .text_11 {
      color: #191919;
      font-size: 32rpx;
      white-space: nowrap;
    }

    .equal-division {
      margin-top: 0.13rem;
      color: rgb(46, 155, 255);
      font-size: 0.12rem;
      line-height: 0.16rem;
      white-space: nowrap;

      .equal-division-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 20rpx;

        .text_11 {
          color: #191919;
          font-size: 32rpx;
          white-space: nowrap;
        }

        .section_5 {
          padding: 0.17rem 0.22rem 0.14rem 0.22rem;
          border-radius: 0.05rem;
          border: 1px dotted #66b5ff;
        }

        .text_16 {
          margin-top: 0.055rem;
          align-self: center;
        }
      }

      .equal-division-item_1 {
        max-width: 48.5%;
        margin-left: 0.14rem;
        flex: 1 1 1.6rem;

        .text_11 {
          color: #191919;
          font-size: 32rpx;
          white-space: nowrap;
        }

        .section_6 {
          padding: 0.17rem 0.22rem 0.14rem 0.22rem;
          border-radius: 0.05rem;
          border: 1px dotted #66b5ff;
        }

        .text_19 {
          margin-top: 0.05rem;
          align-self: center;
        }
      }

      .top-section {
        padding: 0.12rem 0 0.1rem;
        border-radius: 0.05rem;
        background: #eff7ff;

        .image_6 {
          width: 0.22rem;
          height: 0.17rem;
        }

        .text_12 {
          margin-left: 0.075rem;
          margin-top: 0.015rem;
        }
      }

      .bottom-section {
        margin-top: 0.1rem;
        padding: 0.09rem 0.17rem 0.13rem;
        border-radius: 0.05rem;
        background: #eff7ff;

        .image_8 {
          margin-right: 0.08rem;
          width: 0.23rem;
          height: 0.17rem;
        }

        .text_14 {
          margin-top: 0.015rem;
        }
      }
    }
  }
}

.form {
  .headerImg {
    padding-bottom: 0.05rem;
  }

  .section_2 > view > view {
    margin-left: 0.21rem;
    padding: 0 !important;
    border-bottom: 0.01rem solid #edeeef;
    position: relative;
  }

  .section_2 > view > view .input,
  .section_2 > view > view text {
    line-height: 0.5rem;
  }

  .section_2 > view > view .input {
    padding-right: 0.2rem !important;
  }

  .section_2 > view > view text {
    margin-right: 0.1rem;
    min-width: 0.91rem;
    white-space: nowrap;
  }

  .section_2 > view > view image {
    position: absolute;
    top: 50%;
    right: 0.14rem;
    transform: translateY(-50%);
  }

  .image_3 {
    width: 0.075rem;
    height: 0.13rem;
  }

  .group {
    flex: 1 1 auto;
    overflow-y: auto;
  }
  .group-box {
    width: calc(100% - 60rpx);
    margin: 0 30rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 0 30rpx;
  }
  .group-box-item {
    margin: 0 !important;
  }

  .item-wrapper {
    position: relative;
  }

  .input-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }

  .section_2 {
    padding: 0.055rem 0 0 0;
    background-color: #f6f8f9;
  }

  .group_16 {
    margin-top: 0.21rem;
    padding: 0 0.02rem;
  }

  .button_1,
  .button {
    padding: 0.13rem 0;
    color: rgb(255, 255, 255);
    font-size: 0.15rem;
    line-height: 0.14rem;
    letter-spacing: 0.03rem;
    white-space: nowrap;
    background-color: rgb(46, 155, 255);
    border-radius: 0.1rem;
    width: 3.1rem;
    margin: 0 auto;
  }

  .button_1 {
    margin-top: 0.1rem;
    color: rgb(55, 59, 72);
    background-color: rgb(255, 255, 255);
    border: solid 0.01rem rgba(160, 162, 172, 0.33);
    margin-bottom: 0.2rem;
  }

  .view_1 {
    margin-left: 0.02rem;
  }

  .text_15 {
    color: #191919;
    font-size: 28rpx;
    white-space: nowrap;
  }

  .image_2 {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    overflow: hidden;
  }

  .image_4 {
    margin-right: 0.15rem;
    margin-top: 0.28rem;
  }
}
.text_tip {
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.5);
}
::v-deep .u-add-wrap {
  display: none !important;
}
</style>
