dev/dcp-web-gate/src_old/views/conferenceServices/MeetingApplyForm.vue

<template>
  <div class="container-box">
    <div class="bread-crumb">
      <el-breadcrumb separator="/" style="float: left; margin: 15px">
        <el-breadcrumb-item :to="{ path: 'home' }">{{
          lang == "en" ? "Home" : "首页"
        }}</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: 'ConferenceServices' }">{{
          lang == "en" ? "Conferences" : "会议"
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          lang == "en" ? "The information provided" : "信息填报"
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content-box-en" v-if="lang == 'en'">
      <el-form
        :model="meetingApply"
        :rules="rulesEn"
        ref="meetingApplyen"
        v-show="infoSwitch"
        label-width="250px"
      >
        <div class="content-item">
          <div class="category-title">The basic information</div>
          <div class="category-body">
            <!-- 邀请码 -->
            <el-form-item label="Invitation Code" prop="invitationCode">
              <el-input
                v-model="meetingApply.invitationCode"
                placeholder="Please enter Invitation Code,If not, please enter 000000."
              ></el-input>
            </el-form-item>
            <!-- 名 -->
            <el-form-item label="Given Name" prop="givenName">
              <el-input
                v-model="meetingApply.givenName"
                placeholder=""
              ></el-input>
            </el-form-item>
            <!-- 中间名 -->
            <el-form-item label="Middle Name">
              <el-input
                v-model="meetingApply.middleName"
                placeholder=""
              ></el-input>
            </el-form-item>
            <!-- 姓 -->
            <el-form-item label="Surname" prop="surname">
              <el-input
                v-model="meetingApply.surname"
                placeholder=""
              ></el-input>
            </el-form-item>
            <!-- 性别 -->
            <el-form-item label="Gender" prop="genderDictEn">
              <el-radio-group v-model="meetingApply.genderDictEn">
                <el-radio label="M">Male</el-radio>
                <el-radio label="F">Female</el-radio>
                <el-radio label="O">Other</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 邮箱 -->
            <el-form-item label="E-mail" prop="email">
              <el-input v-model="meetingApply.email" placeholder=""></el-input>
            </el-form-item>
            <!-- 区号 -->
            <el-form-item label="Mobile Area Code" prop="tel">
              <GlobalRoaming
                :size="{ width: '398px' }"
                @getAreaCode="getGobileAreaCodeDictEn"
                v-model="meetingApply.tel"
                :language="lang"
                :code="meetingApply.mobileAreaCodeDictEn"
                :mobile="meetingApply.tel"
              ></GlobalRoaming>
              <el-input
                v-model="meetingApply.tel"
                placeholder=""
                v-show="false"
              ></el-input>
            </el-form-item>
            <!-- 手机号 -->
            <!-- <el-form-item label="Tel." prop="tel">
                <el-input v-model="meetingApply.tel" placeholder=""></el-input>
              </el-form-item> -->
            <!-- 所在国家 -->
            <el-form-item label="Country/Region" prop="unitCountryDictEn">
              <el-select
                v-model="meetingApply.unitCountryDictEn"
                filterable
                placeholder=""
                style="width: 100%"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in unitCountryDictEns"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 语言 -->
            <el-form-item label="Language" prop="languageDictEn">
              <el-select
                v-model="meetingApply.languageDictEn"
                placeholder=""
                style="width: 100%"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in languageDictEns"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 照片 -->
            <el-form-item label="Photo">
              <div class="photo-uploader-container">
                <el-upload
                  name="upload"
                  class="avatar-uploader"
                  action="/api/meeting/upload/file/"
                  :headers="Authorization"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  drag
                  multiple
                >
                  <img
                    v-if="meetingApply.photoUrl"
                    :src="'./api/file/pub/' + meetingApply.photoUrl"
                    class="avatar"
                    width="120"
                    height="168"
                  />
                  <div v-else>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">Drag/<em>Upload</em></div>
                  </div>
                  <div class="el-upload__tip" slot="tip">
                    Note: In PNG, JPEG or JPG format; maximally 2M.
                  </div>
                </el-upload>
              </div>
              <!-- <div class="border-custom" style="width: 100%; height: 300px">
                  <UpLoad @getphotoUrl="getphotoUrl"></UpLoad>
                </div> -->
            </el-form-item>
            <!-- 护照号 -->
            <el-form-item label="Passport Number" prop="passportNumber">
              <el-input
                v-model="meetingApply.passportNumber"
                placeholder=""
              ></el-input>
            </el-form-item>
            <!-- 是否需要来华签证邀请函 -->
            <!-- <el-form-item label="Need to apply an invitation letter" prop="isNeedLetter">
                <el-radio-group v-model="meetingApply.isNeedLetter">
                  <el-radio label="Yes">Yes</el-radio>
                  <el-radio label="No">No</el-radio>
                </el-radio-group>
              </el-form-item> -->
          </div>
        </div>
        <div class="content-item" v-show="infoSwitch">
          <div class="category-title">Position and Employer</div>
          <div class="category-body">
            <!-- 所在单位 -->
            <el-form-item
              label="Name of Company/Organization"
              prop="unitNameEn"
            >
              <el-input
                v-model="meetingApply.unitNameEn"
                placeholder=""
              ></el-input>
            </el-form-item>
            <!-- 单位类型 -->
            <el-form-item
              label="Company/Organization Type"
              prop="meetingUnitTypeDictEn"
            >
              <el-select
                v-model="meetingApply.meetingUnitTypeDictEn"
                placeholder=""
                style="width: 100%"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in meetingUnitTypeDictEns"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 职务 -->
            <el-form-item label="Title" prop="positionNameEn">
              <el-input
                v-model="meetingApply.positionNameEn"
                placeholder=""
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="content-item" v-show="infoSwitch">
          <div class="category-title">
            Contacts<span>
              (The default contact is basic information, if necessary, please
              change manually)</span
            >
          </div>
          <div class="category-body">
            <!-- 联系人 -->
            <el-form-item label="Contact Person" prop="contactPersonName">
              <el-input
                v-model="meetingApply.contactPersonName"
                placeholder=""
              ></el-input>
            </el-form-item>
            <!-- 区号 -->
            <el-form-item label="Mobile Area Code" prop="contactCellphone">
              <GlobalRoaming
                :size="{ width: '398px' }"
                @getAreaCode="getContactMobileAreacodeDictEn"
                :language="lang"
                :code="meetingApply.contactMobileAreacodeDictEn"
                v-model="meetingApply.contactCellphone"
                :mobile="meetingApply.contactCellphone"
              ></GlobalRoaming>
              <el-input
                v-model="meetingApply.contactCellphone"
                placeholder=""
                v-show="false"
              ></el-input>
            </el-form-item>
            <!-- 手机号 -->
            <!-- <el-form-item label="Contact Cellphone" prop="contactCellphone">
                <el-input v-model="meetingApply.contactCellphone" placeholder=""></el-input>
              </el-form-item> -->
            <!-- 邮箱 -->
            <el-form-item label="Contact E-mail" prop="contactEmail">
              <el-input
                v-model="meetingApply.contactEmail"
                placeholder=""
              ></el-input>
            </el-form-item>
            <!-- 参会意向 -->
            <el-form-item
              v-if="
                gridData.length && intentions.isShowEnOnsiteIntention == 'Yes'
              "
            >
              <p style="font-size: 16px">
                Among multiple events of our conference, please kindly choose
                your preferable events to attend to（Multiple choice）.
              </p>
              <el-table
                :data="gridData"
                :border="false"
                @selection-change="checkRow"
                @row-click="setSelectEn"
                size="small"
                ref="multipleTableEn"
                :empty-text="'Sorry no date.'"
                class="active-grid"
              >
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column property="activityName" label="ALL">
                  <template slot-scope="scope">
                    <p style="font-weight: bold">
                      {{ momentDate(scope.row.activityStartTime) }} ~
                      {{ momentDate(scope.row.activityEndTime) }}
                    </p>
                    <p>{{ scope.row.activityNameEn }}</p>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item style="text-align: center">
              <el-button
                type="primary"
                v-if="meetingApply.isNeedLetter == 'Yes'"
                @click="infoSwitch = false"
                >Next Visa</el-button
              >
              <el-button type="primary" @click="submitFormEn('meetingApplyen')"
                >Submit</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-form
        :model="meetingApply"
        :rules="rulesEnNext"
        ref="meetingApplyenNext"
        label-width="250px"
      >
        <div class="content-item" v-show="!infoSwitch">
          <div class="category-title">Visa Application information</div>
          <div class="category-body">
            <!-- 访问地点 -->
            <el-form-item label="Places to Visit" prop="visitPlace">
              <el-input
                v-model="meetingApply.visitPlace"
                placeholder="e.g. Beijing"
              ></el-input>
            </el-form-item>
            <!-- 拟前往办理签证的中国使/领馆名称 -->
            <el-form-item
              label="Embassy/Consulate to apply visa"
              prop="embassyName"
            >
              <el-input
                v-model="meetingApply.embassyName"
                placeholder="Accuracy of the Embassy is very important for visa application"
              ></el-input>
            </el-form-item>
            <!-- 邀请种类 -->
            <el-form-item label="Purpose of visit" prop="visitTypeEn">
              <el-input
                v-model="meetingApply.visitTypeEn"
                placeholder="e.g. Communication"
              ></el-input>
            </el-form-item>
            <!-- 申请人是否为副部长及以上级别 -->
            <el-form-item
              label="Vice Ministerial level or above"
              prop="isAboveMinisterial"
            >
              <el-radio-group v-model="meetingApply.isAboveMinisterial">
                <el-radio label="Yes">Yes</el-radio>
                <el-radio label="No">No</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 拟申请签证有效次数 -->
            <el-form-item label="Number of entries" prop="numberOfEntries">
              <el-input
                v-model="meetingApply.numberOfEntries"
                placeholder=""
              ></el-input>
              <div class="tip">
                (Multiple entry visa application should be well illustratied
                with reasons)
              </div>
            </el-form-item>
            <!-- 拟入境日期 -->
            <el-form-item label="Date of First Entry" prop="firstEntryDate">
              <el-date-picker
                v-model="meetingApply.firstEntryDate"
                type="date"
                placeholder="YYYY-MM-DD"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
            <!-- 最长停留天数 -->
            <el-form-item label="Longest Stay (days)" prop="longestStayDays">
              <el-input
                v-model="meetingApply.longestStayDays"
                placeholder=""
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="content-item" v-show="!infoSwitch">
          <div class="category-title">Guest's Personal Information</div>
          <div class="category-body">
            <!-- 名 -->
            <el-form-item label="Given Name" prop="givenName">
              <el-input
                v-model="meetingApply.givenName"
                placeholder=""
                :disabled="true"
              ></el-input>
              <div class="tip">(Type in Engllis.In line with Passport)</div>
            </el-form-item>
            <!-- 中间名 -->
            <el-form-item label="Middle Name">
              <el-input
                v-model="meetingApply.middleName"
                placeholder=""
                :disabled="true"
              ></el-input>
              <div class="tip">(Type in Engllis.In line with Passport)</div>
            </el-form-item>
            <!-- 姓 -->
            <el-form-item label="Surname" prop="surname">
              <el-input
                v-model="meetingApply.surname"
                placeholder=""
                :disabled="true"
              ></el-input>
              <div class="tip">(Type in Engllis.In line with Passport)</div>
            </el-form-item>
            <!-- 出生日期 -->
            <el-form-item label="Date of Birth" prop="birthDate">
              <el-date-picker
                v-model="meetingApply.birthDate"
                type="date"
                placeholder="YYYY-MM-DD"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
            <!-- 性别 -->
            <el-form-item label="Gender" prop="genderDictEn">
              <el-radio-group
                v-model="meetingApply.genderDictEn"
                :disabled="true"
              >
                <el-radio label="M">Male</el-radio>
                <el-radio label="F">Female</el-radio>
                <el-radio label="O">Other</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 国籍 -->
            <el-form-item label="Nationality" prop="nationalityDict">
              <el-select
                v-model="meetingApply.nationalityDict"
                filterable
                placeholder=""
                style="width: 100%"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in unitCountryDictEns"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 护照号 -->
            <el-form-item label="Passport Number" prop="passportNumber">
              <el-input
                v-model="meetingApply.passportNumber"
                placeholder=""
                :disabled="true"
              ></el-input>
            </el-form-item>
            <!-- 护照有效期 -->
            <el-form-item
              label="Passport Validity Date"
              prop="passportValidityDate"
            >
              <el-date-picker
                v-model="meetingApply.passportValidityDate"
                type="date"
                placeholder="YYYY-MM-DD"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
            <!-- 工作单位 -->
            <el-form-item label="Affiliation" prop="unitNameEn">
              <el-input
                v-model="meetingApply.unitNameEn"
                placeholder=""
                :disabled="true"
              ></el-input>
            </el-form-item>
            <!-- 职务 -->
            <el-form-item label="Possition" prop="positionName">
              <el-input
                v-model="meetingApply.positionName"
                placeholder=""
                :disabled="true"
              ></el-input>
            </el-form-item>
            <!-- 电子邮件 -->
            <el-form-item label="E-mail" prop="email">
              <el-input
                v-model="meetingApply.email"
                placeholder=""
                :disabled="true"
              ></el-input>
            </el-form-item>
            <!-- 护照首页复印件 -->
            <el-form-item label>
              <div
                class="border-custom"
                style="width: 48%; height: 360px; float: left"
              >
                <p class="title-custom">
                  Photocopy of the Passport's front page
                </p>
                <UpLoad @getphotoUrl="getPassportFristPageUrl"></UpLoad>
              </div>
              <!-- 任职经历 -->
              <div
                class="border-custom"
                style="width: 48%; height: 360px; float: left; margin-left: 4%"
              >
                <p class="title-custom">Previous Positions</p>
                <UpLoadFile @getFileUrl="getPreviousPositions"></UpLoadFile>
              </div>
            </el-form-item>
            <!-- 教育经历 -->
            <el-form-item label>
              <div class="border-custom" style="width: 100%; height: 360px">
                <p class="title-custom">Education Background</p>
                <UpLoadFile @getFileUrl="getEducationBackground"></UpLoadFile>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="content-item" v-show="!infoSwitch">
          <div class="category-title">
            Relevant information during my stay in China
          </div>
          <div class="category-body">
            <!-- 航班信息 -->
            <el-form-item label="Flight Information" prop="flightInformation">
              <el-input
                v-model="meetingApply.flightInformation"
                placeholder=""
              ></el-input>
            </el-form-item>
            <!-- 在华行程 -->
            <el-form-item label="Intinerary in China" prop="intineraryInChina">
              <el-input
                type="textarea"
                :rows="4"
                placeholder="eg.day by day schedule"
                v-model="meetingApply.intineraryInChina"
              ></el-input>
            </el-form-item>
            <el-form-item style="text-align: center">
              <el-button type="primary" @click="infoSwitch = true"
                >Back</el-button
              >
              <el-button
                type="primary"
                @click="submitFormEnNext('meetingApplyenNext')"
                >Submit</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="content-box-zh" v-else>
      <el-form
        :model="meetingApply"
        :rules="rulesZh"
        ref="meetingApplyzh"
        label-width="100px"
      >
        <div class="content-item">
          <div class="category-title">基本信息</div>
          <el-form-item label="邀请码" prop="invitationCode">
            <el-input
              v-model="meetingApply.invitationCode"
              placeholder="请输入邀请码，如果没有，请输入000000。"
            ></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="meetingApply.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="英文姓名">
            <el-input
              v-model="meetingApply.nameEn"
              placeholder="请输入英文姓名"
            ></el-input>
            <p
              v-py.upperfirst="meetingApply.name"
              id="pinyin"
              v-show="false"
            ></p>
          </el-form-item>
          <el-form-item label="性别" prop="genderDict">
            <el-radio-group v-model="meetingApply.genderDict">
              <el-radio label="M">男</el-radio>
              <el-radio label="F">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="meetingApply.email"
              placeholder="请输入邮箱"
            ></el-input>
            <div class="tip">
              输入您始终可以访问的电子邮箱。该邮箱用于接收邮件通知。
            </div>
          </el-form-item>
          <el-form-item label="手机" prop="tel">
            <GlobalRoaming
              :size="{ width: '398px' }"
              @getAreaCode="getGobileAreaCodeDictEn"
              v-model="meetingApply.tel"
              :language="lang"
              :code="meetingApply.mobileAreaCodeDictEn"
              :mobile="meetingApply.tel"
            ></GlobalRoaming>
            <div class="tip">
              输入您始终可以访问的电话号码。该号码用于接收短信通知。
            </div>
          </el-form-item>
          <el-form-item label="国家" prop="unitCountryDict">
            <el-select
              v-model="meetingApply.unitCountryDict"
              filterable
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in unitCountryDicts"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传照片">
            <div class="photo-uploader-container">
              <el-upload
                name="upload"
                class="avatar-uploader"
                action="/api/meeting/upload/file/"
                :headers="Authorization"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                drag
                multiple
              >
                <img
                  v-if="meetingApply.photoUrl"
                  :src="'./api/file/pub/' + meetingApply.photoUrl"
                  class="avatar"
                  width="120"
                  height="168"
                />
                <div v-else>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">拖拽/<em>点击上传</em></div>
                </div>
                <div class="el-upload__tip" slot="tip">
                  注：请上传个人一寸证件照片，图片大小不能超过2M，且只允许上传格式为PNG、JPEG、JPG。
                </div>
              </el-upload>
            </div>
          </el-form-item>
        </div>
        <div class="content-item">
          <div class="category-title">单位信息</div>
          <el-form-item label="所在单位" prop="unitName">
            <el-input
              v-model="meetingApply.unitName"
              placeholder="请输入所在单位"
            ></el-input>
          </el-form-item>
          <el-form-item label="英文单位">
            <el-input
              v-model="meetingApply.unitNameEn"
              placeholder="请输入英文单位"
            ></el-input>
          </el-form-item>
          <el-form-item label="单位类型" prop="meetingUnitTypeDict">
            <el-select
              v-model="meetingApply.meetingUnitTypeDict"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in meetingUnitTypeDicts"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职务" prop="positionName">
            <el-input
              v-model="meetingApply.positionName"
              placeholder="请输入职务"
            ></el-input>
          </el-form-item>
          <el-form-item label="英文职务">
            <el-input
              v-model="meetingApply.positionNameEn"
              placeholder="请输入英文"
            ></el-input>
          </el-form-item>
        </div>
        <div class="content-item">
          <div class="category-title">
            联系人信息<span>（默认本人为联系人，如有需要请手动修改）</span>
          </div>
          <el-form-item label="联系人" prop="contactPersonName">
            <el-input
              v-model="meetingApply.contactPersonName"
              placeholder="请输入联系人"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人手机" prop="contactCellphone">
            <GlobalRoaming
              :size="{ width: '398px' }"
              @getAreaCode="getContactMobileAreacodeDictEn"
              v-model="meetingApply.contactCellphone"
              :language="lang"
              :code="meetingApply.contactMobileAreacodeDictEn"
              :mobile="meetingApply.contactCellphone"
            ></GlobalRoaming>
          </el-form-item>
          <el-form-item label="邮箱" prop="contactEmail">
            <el-input
              v-model="meetingApply.contactEmail"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="
              gridData.length && intentions.isShowZhOnsiteIntention == 'Yes'
            "
          >
            <p style="font-size: 16px">
              此次大会包括多场会议活动，请勾选您希望参加的场次（可多选）。
            </p>
            <el-table
              :data="gridData"
              :border="false"
              @selection-change="checkRow"
              @row-click="setSelect"
              size="small"
              ref="multipleTable"
              class="active-grid"
            >
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column property="activityName">
                <template slot-scope="scope">
                  <p style="font-weight: bold">
                    {{ momentDate(scope.row.activityStartTime) }} ~
                    {{ momentDate(scope.row.activityEndTime) }}
                  </p>
                  <p>{{ scope.row.activityName }}</p>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('meetingApplyzh')"
              style="width: 100%"
              >提交</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-dialog :show-close="false" :visible.sync="dialogVisible" width="600px">
      <div class="category-body submit-success">
        <p>
          <img
            src="@/assets/img/conference/submit-success.png"
            alt=""
            width="200"
          />
        </p>
        <p style="font-size: 24px; color: #666; margin-bottom: 20px">
          {{ lang == "en" ? "Registered!" : "报名成功！" }}
        </p>
        <p>
          <el-button
            style="background: #2c558a; color: #fff"
            @click="toView('ConferenceDetail', $route.query.key)"
            >{{ lang == "en" ? "Back" : "返回" }}（{{ num }}s）</el-button
          >
          <el-button @click="ContinueRegister">{{
            lang == "en" ? "Continue" : "继续报名"
          }}</el-button>
        </p>
      </div>
    </el-dialog>
    <div class="apply-history" v-if="applyHistoryInfo.length">
      <span style="font-size: 14px; margin-right: 20px">{{
        $i18n.locale == "en" ? "Registration History" : "报名历史"
      }}</span>
      <el-select
        v-model="applyHistorySelected"
        @change="applyHistoryChanged"
        :placeholder="$i18n.locale == 'en' ? 'Please Select' : '请选择'"
      >
        <el-option
          v-for="(item, i) in applyHistoryInfo"
          :key="i"
          :label="$i18n.locale == 'en' ? item.nameEn : item.name"
          :value="i"
        >
          <span style="float: left">{{
            $i18n.locale == "en" ? item.nameEn : item.name
          }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{
            $i18n.locale == "en" ? item.unitNameEn : item.unitName
          }}</span>
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import { getDicts } from "@/api/dict";
import {
  saveOrUpdate,
  get,
  getApproverId,
  getMeetingApplyActivityInfos,
  getApplyHistoryInfosByLoginAccount,
  getApplyField,
} from "@/api/meeting/meetingApply";
import { getConfrenceDetail } from "@/api/meeting/meetingOutInfo";
import Base from "@/views/base/Base";
import UpLoad from "@/views/conferenceServices/UpLoad";
import UpLoadFile from "@/views/conferenceServices/UpLoadFile";
import GlobalRoaming from "@/components/GlobalRoaming";
import { getToken } from "@/utils/auth";
import moment from "moment-timezone";
import { addIntegral, addGrowth } from "@/utils/toCompleteTask";
export default {
  name: "MeetingApplyForm",
  extends: Base,
  components: { UpLoad, UpLoadFile, GlobalRoaming },
  data() {
    var checkInvitationCode = (rule, value, callback) => {
      if (!value) {
        let errorTxt =
          this.lang == "en" ? "Please enter Invitation Code.If not, please enter 000000." : "请输入邀请码，如果没有，请输入000000。";
        callback(new Error(errorTxt));
      } else if (!this.invitationCodeArr.includes(value)) {
        let errorTxt =
          this.lang == "en"
            ? "Please enter the correct Invitation Code. If not, please enter 000000."
            : "请输入正确的邀请码。如果没有，请输入000000";
        callback(new Error(errorTxt));
      } else {
        callback();
      }
    };
    var checkTel = (rule, value, callback) => {
      if (!value) {
        let errorTxt =
          this.lang == "en" ? "Please enter Cellphone Number." : "请输入手机号";
        callback(new Error(errorTxt));
      } else if (this.meetingApply.mobileAreaCodeDictEn == "0086") {
        let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!reg.test(value)) {
          let errorTxt =
            this.lang == "en"
              ? "The  Cellphone Number is not correct."
              : "请输入正确的11位手机号";
          callback(new Error(errorTxt));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    var checkContactCellphone = (rule, value, callback) => {
      if (!value) {
        let errorTxt =
          this.lang == "en"
            ? "Please enter Cellphone Number."
            : "请输入联系人手机号";
        return callback(new Error(errorTxt));
      } else if (this.meetingApply.contactMobileAreacodeDictEn == "0086") {
        let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!reg.test(value)) {
          let errorTxt =
            this.lang == "en"
              ? "The Cellphone Number is not correct."
              : "请输入正确的11位手机号";
          callback(new Error(errorTxt));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      let reg = /^\w+.*\w+@[a-zA-Z0-9]+.*[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/gm;
      if (!value) {
        let errorTxt =
          this.lang == "en" ? "Please enter E-mail." : "请输入邮箱";
        return callback(new Error(errorTxt));
      } else if (!reg.test(value)) {
        let errorTxt =
          this.lang == "en"
            ? "Please enter the correct E-mail address."
            : "邮箱格式不正确";
        callback(new Error(errorTxt));
      } else {
        callback();
      }
    };
    var checkContactEmail = (rule, value, callback) => {
      let reg = /^\w+.*\w+@[a-zA-Z0-9]+.*[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/gm;
      if (!value) {
        let errorTxt =
          this.lang == "en"
            ? "Please enter Contact E-mail."
            : "请输入联系人邮箱";
        return callback(new Error(errorTxt));
      } else if (!reg.test(value)) {
        let errorTxt =
          this.lang == "en"
            ? "Please enter the correct E-mail address."
            : "邮箱格式不正确";
        callback(new Error(errorTxt));
      } else {
        callback();
      }
    };
    return {
      applyHistorySelected: "", //被选择的报名历史
      applyHistoryInfo: [], //报名历史信息
      dialogVisible: false,
      num: 5,
      timer: "",
      baseInfo: {},
      infoSwitch: true,
      // imageUrl: "",
      fileUrl: "",
      lang: "",
      pinyin: "",

      //流程改造4
      // processKey: "MEETING_APPROVE",
      Authorization: {},
      // meetingenableFlow: null,
      approverId: "",
      genderDicts: [],
      meetingUnitTypeDicts: [],
      meetingUnitTypeDictEns: [],
      unitCountryDicts: [],
      unitCountryDictEns: [],
      languageDictEns: [],
      invitationCodePrefix: [],
      invitationCodeArr: ["000000"],
      gridData: [],
      checkedIds: [],
      intentions: {},
      meetingApply: {
        // id: this.$route.params.key,
        meetingYearplanTypeDict: "main_meeting",
        photoUrl: "",
        meetingId: this.$route.query.key,
        // meetingId: window.localStorage.getItem('conferenceId'),
        invitationCode: "",
        name: "",
        nameEn: "",
        givenName: "",
        middleName: "",
        surname: "",
        genderDict: "",
        genderDictEn: "",
        email: "",
        mobileAreaCodeDictEn: "",
        tel: "",
        unitName: "",
        unitNameEn: "",
        meetingUnitTypeDict: "",
        meetingUnitTypeDictEn: "",
        positionName: "",
        positionNameEn: "",
        unitCountryDict:
          window.localStorage.getItem("locale") == "zh" ? "china" : "",
        unitCountryDictEn: "",
        languageDictEn: "",
        contactPersonName: "",
        contactMobileAreacodeDictEn: "",
        contactCellphone: "",
        contactEmail: "",
        isNeedLetter: "No",
        applyWay: window.localStorage.getItem("locale"), //报名方式
        passportNumber: "",
        visitPlace: "",
        embassyName: "",
        visitTypeEn: "",
        isAboveMinisterial: "",
        numberOfEntries: "",
        firstEntryDate: "",
        longestStayDays: "",
        birthDate: "",
        nationalityDict: "",
        passportValidityDate: "",
        passportFristPageUrl: "",
        previousPositions: "",
        educationBackground: "",
        flightInformation: "",
        intineraryInChina: "",
        auditStatusDict: "",
      },
      rulesEnNext: {
        visitPlace: [
          {
            required: true,
            message: "Please enter Places to Visit.",
            trigger: "blur",
          },
        ],
        embassyName: [
          {
            required: true,
            message: "Please enter Embassy/Consulate to apply visa.",
            trigger: "blur",
          },
        ],
        visitTypeEn: [
          {
            required: true,
            message: "Please specify Purpose of Visit.",
            trigger: "blur",
          },
        ],
        isAboveMinisterial: [
          {
            required: true,
            message: "Please select Vice Ministerial level or above.",
            trigger: "change",
          },
        ],
        numberOfEntries: [
          {
            required: true,
            message: "Please enter Number of entries.",
            trigger: "blur",
          },
        ],
        firstEntryDate: [
          {
            required: true,
            message: "Please select Date of First Entry.",
            trigger: "change",
          },
        ],
        longestStayDays: [
          {
            required: true,
            message: "Please enter Longest Stay (days).",
            trigger: "change",
          },
        ],
        // givenName: [
        //   { required: true, message: 'Please enter Given Name.', trigger: 'blur' },
        // ],
        // surname: [
        //   { required: true, message: 'Please enter Surname.', trigger: 'blur' },
        // ],
        birthDate: [
          {
            required: true,
            message: "Please enter Date of Birth.",
            trigger: "change",
          },
        ],
        genderDictEn: [
          {
            required: true,
            message: "Please select Gender.",
            trigger: "change",
          },
        ],
        nationalityDict: [
          {
            required: true,
            message: "Please select Nationality.",
            trigger: "change",
          },
        ],
        // passportNumber: [
        //   { required: true, message: 'Please enter Passport Number.', trigger: 'change' },
        // ],
        passportValidityDate: [
          {
            required: true,
            message: "Please select Passport Validity Date.",
            trigger: "change",
          },
        ],
        // unitNameEn: [
        //   { required: true, message: 'Please enter Affiliation.', trigger: 'blur' }
        // ],
        // positionName: [
        //   { required: true, message: 'Please enter Possition.', trigger: 'blur' }
        // ],
        // email: [
        //   { required: true, validator: checkEmail, trigger: 'blur'}
        // ],
        flightInformation: [
          {
            required: true,
            message: "Please enter Flight Information.",
            trigger: "blur",
          },
        ],
        intineraryInChina: [
          {
            required: true,
            message: "Please enter Intinerary in China.",
            trigger: "blur",
          },
        ],
      },
      rulesEn: {
        invitationCode: [
          { required: true, validator: checkInvitationCode, trigger: "blur" },
          // { required: true, message: 'Please enter Invitation Code. If not, please enter 000000.', trigger: 'blur' },
          // { min: 6, max: 6, message: 'Please enter Invitation Code. If not, please enter 000000.', trigger: 'blur' }
        ],
        givenName: [
          {
            required: true,
            message: "Please enter Given Name.",
            trigger: "blur",
          },
        ],
        surname: [
          { required: true, message: "Please enter Surname.", trigger: "blur" },
        ],
        genderDictEn: [
          {
            required: true,
            message: "Please select Gender.",
            trigger: "change",
          },
        ],
        email: [{ required: true, validator: checkEmail, trigger: "blur" }],
        tel: [{ required: true, validator: checkTel, trigger: "blur" }],
        unitNameEn: [
          {
            required: true,
            message: "Please select company/Organization.",
            trigger: "blur",
          },
        ],
        meetingUnitTypeDictEn: [
          {
            required: true,
            message: "Please select Company/Organization Type.",
            trigger: "change",
          },
        ],
        positionNameEn: [
          { required: true, message: "Please enter Title.", trigger: "blur" },
        ],
        unitCountryDictEn: [
          {
            required: true,
            message: "Please select Country/Region.",
            trigger: "change",
          },
        ],
        languageDictEn: [
          {
            required: true,
            message: "Please select Language.",
            trigger: "change",
          },
        ],
        passportNumber: [
          {
            required: true,
            message: "Please enter Passport Number.",
            trigger: "blur",
          },
        ],
        contactPersonName: [
          {
            required: true,
            message: "Please enter Contact Person.",
            trigger: "blur",
          },
        ],
        contactCellphone: [
          { required: true, validator: checkContactCellphone, trigger: "blur" },
        ],
        contactEmail: [
          { required: true, validator: checkContactEmail, trigger: "blur" },
        ],
        isNeedLetter: [
          {
            required: true,
            message: "Need to apply an invitation letter",
            trigger: "change",
          },
        ],
      },
      rulesZh: {
        invitationCode: [
          { required: true, validator: checkInvitationCode, trigger: "blur" },
          // { required: true, message: '请输入6位会议邀请码，如果没有请输入00000', trigger: 'blur' },
          // { min: 6, max: 6, message: '请输入6位会议邀请码，如果没有请输入00000', trigger: 'blur' }
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        genderDict: [
          { required: true, message: "请选择性别", trigger: "change" },
        ],
        email: [{ required: true, validator: checkEmail, trigger: "blur" }],
        tel: [{ required: true, validator: checkTel, trigger: "blur" }],
        unitCountryDict: [
          { required: true, message: "请选择国家", trigger: "change" },
        ],
        unitName: [
          { required: true, message: "请输入所在单位", trigger: "blur" },
        ],
        meetingUnitTypeDict: [
          { required: true, message: "请选择单位类型", trigger: "change" },
        ],
        positionName: [
          { required: true, message: "请输入职务", trigger: "blur" },
        ],
        contactPersonName: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        contactCellphone: [
          { required: true, validator: checkContactCellphone, trigger: "blur" },
        ],
        contactEmail: [
          { required: true, validator: checkContactEmail, trigger: "blur" },
        ],
      },
    };
  },
  props: {},
  watch: {
    "$i18n.locale"(val) {
      this.lang = val;
      this.meetingApply.applyWay = val;
      this.getApplyHistoryInfos();
    },
    dialogVisible() {
      if (this.dialogVisible == true) {
        this.loginTipsChange();
      }
    },
    "meetingApply.name"(val) {
      this.meetingApply.contactPersonName = val;
      setTimeout(() => {
        let p = document.getElementById("pinyin").innerText;
        this.meetingApply.nameEn = p;
      });
    },
    "meetingApply.email"(val) {
      this.meetingApply.contactEmail = val;
    },
    "meetingApply.tel"(val) {
      this.meetingApply.contactCellphone = val;
    },
    "meetingApply.givenName"(val) {
      this.meetingApply.contactPersonName = `${this.meetingApply.givenName} ${this.meetingApply.middleName} ${this.meetingApply.surname}`;
    },
    "meetingApply.middleName"(val) {
      this.meetingApply.contactPersonName = `${this.meetingApply.givenName} ${this.meetingApply.middleName} ${this.meetingApply.surname}`;
    },
    "meetingApply.surname"(val) {
      this.meetingApply.contactPersonName = `${this.meetingApply.givenName} ${this.meetingApply.middleName} ${this.meetingApply.surname}`;
    },
  },
  created() {
    this.lang = this.$i18n.locale;
    this.meetingApply.applyWay = this.lang;
  },
  mounted() {
    if (this.$route.query) {
      localStorage.setItem("conferenceId", this.$route.query.key);
    }
    this.initData1()
    this.getIntentions();
    this.initData();
    this.getApplyHistoryInfos();
    this.getApplyField();
  },
  methods: {
    initData1() {
      this.user = JSON.parse(window.localStorage.getItem("user"));
    },
    getApplyField() {
      getApplyField("1427433328149434368").then((result) => {
        console.log("result::::", result);
      });
    },
    applyHistoryChanged(i) {
      Object.keys(this.applyHistoryInfo[i]).forEach((key) => {
        this.meetingApply[key] = this.applyHistoryInfo[i][key];
      });
    },
    //获取报名历史信息
    getApplyHistoryInfos() {
      this.applyHistorySelected = "";
      getApplyHistoryInfosByLoginAccount(this.$i18n.locale).then((res) => {
        this.applyHistoryInfo = res.data.applyHistoryInfos;
        // console.log('ApplyHistoryInfos',res)
      });
    },
    getIntentions() {
      this.intentions = JSON.parse(
        sessionStorage.getItem("pathReminder")
      ).query.intentions;
      // console.log('66666666',this.intentions)
    },
    momentDate(date) {
      if (this.$i18n.locale == "zh") {
        moment.locale("zh-cn");
        return moment(date).format("YYYY MM DD, H:mm");
      } else {
        moment.locale("en");
        return moment(date).format("lll");
      }
    },
    setSelect(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    setSelectEn(row) {
      this.$refs.multipleTableEn.toggleRowSelection(row);
    },
    checkRow(checkedData) {
      this.checkedIds = [];
      this.newChecked = [];
      const date = []
      checkedData.forEach((item) => {
        date.find(i=>{
          if(i===this.momentDate(item.activityStartTime)){
            let msgTxt = this.$i18n.locale=='en'? 'Kind Reminder: participants can only register for one parallel session. Hope you enjoy the conference.': '温馨提示：同一时段平行召开的会议仅限选择一场参加，祝您参会愉快！';
            this.$message({
                message: msgTxt,
                type:'error'
              })
            }
          })
          date.push(this.momentDate(item.activityStartTime))
          this.checkedIds.push(item.id)
          this.newChecked.push(item.activityStartTime)
      });
    },
    ContinueRegister() {
      clearInterval(this.timer);
      this.dialogVisible = false;
    },
    loginTipsChange() {
      const that = this;
      this.num = 5;

      this.timer = setInterval(function () {
        if (that.num > 0) {
          that.num--;
        } else {
          clearInterval(that.timer);
          that.dialogVisible = false;
          that.toView("ConferenceDetail", that.$route.query.key);
        }
      }, 1000);
    },
    toView(router, json) {
      this.$router.push({ path: router, query: { key: json } });
    },
    formatDate(t) {
      if (!t) {
        return "";
      } else {
        var original = new Date(t);
        var year = original.getFullYear();
        var month = original.getMonth() + 1;
        var date = original.getDate();
        return year + "-" + month + "-" + date;
      }
    },
    getEducationBackground(file) {
      this.meetingApply.educationBackground = file.path;
    },
    getPreviousPositions(file) {
      this.meetingApply.previousPositions = file.path;
    },
    getPassportFristPageUrl(file) {
      this.meetingApply.passportFristPageUrl = file.path;
    },
    getphotoUrl(file) {
      this.meetingApply.photoUrl = file.path;
    },
    submitFormEnNext(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          this.$message.error("Please fill in the complete information");
          return false;
        }
        this.$refs["meetingApplyen"].validate((validNext) => {
          if (!validNext) {
            this.$message.error("Please fill in the complete information");
            return false;
          }
          // if(!this.meetingApply.passportFristPageUrl){
          //   this.$message.error('Please upload a copy of the front page of your passport');
          //   return false;
          // }
          // if(!this.meetingApply.previousPositions){
          //   this.$message.error('Please upload your experience');
          //   return false;
          // }
          // if(!this.meetingApply.educationBackground){
          //   this.$message.error('Please upload education experience');
          //   return false;
          // }
          // if(!this.meetingApply.photoUrl){
          //   this.$message.error('Please upload your picture');
          //   return false;
          // }
          this.meetingApply.nameEn = `${this.meetingApply.givenName}${this.meetingApply.middleName}${this.meetingApply.surname}`;
          this.save();
        });
      });
    },
    submitFormEn(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          this.$message.error("Please fill in the complete information");
          return false;
        }
        // if(!this.meetingApply.photoUrl){
        //   this.$message.error('Please upload Photo');
        //   return false;
        // }
        this.meetingApply.nameEn = `${this.meetingApply.givenName} ${this.meetingApply.middleName} ${this.meetingApply.surname}`;
        this.save();
      });
    },
    //提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          this.$message.error("请填写完整信息");
          return false;
        }
        // if(!this.meetingApply.photoUrl){
        //   this.$message.error('请上传头像');
        //   return false;
        // }
        this.save();
      });
    },
    //获取区号
    getGobileAreaCodeDictEn(code) {
      this.meetingApply.mobileAreaCodeDictEn = code;
      this.meetingApply.contactMobileAreacodeDictEn = code;
    },
    getContactMobileAreacodeDictEn(code) {
      this.meetingApply.contactMobileAreacodeDictEn = code;
    },
    handleAvatarSuccess(res, file) {
      // console.log('上传成功',res)
      // console.log('上传成功',file)
      this.meetingApply.photoUrl = res.data.path;
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      this.Authorization.Authorization = "Bearer " + getToken();
      this.loading = true;
      const isJPG = file.type === "image/jpeg" || file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        let erroerTxt =
          this.lang == "en"
            ? "Upload images can only be in JPG/JPEG or PNG format!"
            : "上传图片只能是 JPG/JPEG 或者 PNG 格式!";
        this.$message.error(erroerTxt);
      }
      if (!isLt2M) {
        let erroerTxt =
          this.lang == "en"
            ? "The size of the uploaded image cannot exceed 2MB!"
            : "上传图片大小不能超过 2MB!";
        this.$message.error(erroerTxt);
      }
      return (isJPG || isPNG) && isLt2M;
    },
    save: function () {
      var arr1=this.newChecked
        var arr2=arr1.sort()
        for(var i=0;i<arr2.length-1;i++){
          if(arr2[i]==arr2[i+1]){
            let msgTxt = this.$i18n.locale=='en'? 'Kind Reminder: participants can only register for one parallel session. Hope you enjoy the conference.': '温馨提示：同一时段平行召开的会议仅限选择一场参加，祝您参会愉快！';
            this.$message.error(msgTxt)
            return false
          }else{
            console.log('hello');
        }
      }
      //流程改造6
      if (this.meetingApply.auditStatusDict === "") {
        this.meetingApply.auditStatusDict = "4";
      } else {
        this.meetingApply.auditStatusDict = this.meetingApply.auditStatusDict;
      }

      this.submitHandler((token) => {
        //流程改造7
        getApproverId(this.meetingApply.invitationCode).then((result) => {
          result = result.data;
          var str = "";
          for (var i = 0; i < result.length; i++) {
            str += result[i].userId + ",";
          }
          if (str.length > 0) {
            str = str.substr(0, str.length - 1);
          }
          this.approverId = str;
          saveOrUpdate(
            JSON.stringify(this.meetingApply),
            this.approverId,
            this.taskComment,
            token,
            this.checkedIds.join(",")
          )
            .then((result) => {
              console.log("result", result);
              if (result.status == "200") {
                if (this.user.umsUser.userUsertypeDict !== "2") {
                  addIntegral("meeting_registration_successful", "10");
                  addGrowth("meeting_registration_successful");
                }
                if (result.data.isRepeat) {
                  let errorMsg =
                    this.$i18n.locale == "en"
                      ? "The guest has registered, please do not fill in again."
                      : "该嘉宾已报名，请勿重复填写!";
                  this.$message.error(errorMsg);
                  this.resetToken();
                } else {
                  this.dialogVisible = true;
                  this.resetToken();
                }
              }
              this.backListView(this.meetingApply.id == null);
            })
            .catch((error) => {
              this.resetToken();
            });
        });
      });
    },
    initData: function () {
      // console.log('this.$route.params.key',this.$route.params.key)
      if (this.$route.params.key) {
        this.meetingApply = this.$route.params.key;
      }

      getDicts(
        "gender_dict,unit_country_dict,meeting_unit_type_dict, meeting_unit_type_dict_en, unit_country_dict_en, language_dict_en, geidco_dept_dict"
      )
        .then((result) => {
          var data = result.data;
          if (data) {
            this.genderDicts = result.data[0] || [];
            this.unitCountryDicts = result.data[1] || [];
            this.meetingUnitTypeDicts = result.data[2] || [];
            this.meetingUnitTypeDictEns = result.data[3] || [];
            this.unitCountryDictEns = result.data[4] || [];
            this.languageDictEns = result.data[5] || [];
            this.invitationCodePrefix = result.data[6] || [];
            if (this.unitCountryDictEns.length) {
              this.unitCountryDictEns.sort(function (a, b) {
                return a.value.charCodeAt() - b.value.charCodeAt();
              });
            }
          }
        })
        .then((res) => {
          let meetingId;
          if (this.$route.params.key) {
            meetingId = this.$route.params.key.meetingId;
          } else {
            meetingId = this.$route.query.key;
          }
          getConfrenceDetail(meetingId).then((res) => {
            this.baseInfo = res.data.basicInfo;
            // console.log('会议数据', res)
            // 邀请码集合
            this.invitationCodePrefix.forEach((item) => {
              // console.log('item', item)
              this.invitationCodeArr.push(
                `${item.value}${res.data.basicInfo.meetingRand}`
              );
            });
            // console.log('邀请码集合', this.invitationCodeArr)
          });
          //参会意向
          getMeetingApplyActivityInfos(localStorage.getItem("conferenceId"))
            .then((_res) => {
              console.log("_res", _res);
              this.gridData = _res.data.allMeetingActivitys || [];
            })
            .catch((err) => {
              this.gridData = [];
            });
        });
    },
  },
};
</script>

<style scoped>
/deep/ .el-table thead{
  display: none;
}
.container-box {
  width: 1200px;
  margin: 10px auto;
  position: relative;
}
.bread-crumb {
  height: 40px;
  background: #fff;
  margin: 10px 0;
}
.content-box-en {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 150px;
  background: #fff;
}
.content-box-en .title-custom {
  color: #909399;
}
/* .content-box-en .border-custom{
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  padding: 0 20px;
  box-sizing: border-box;
} */
.tip {
  font-size: 12px;
  color: #888;
}
.content-box-zh {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 150px 0 150px;
  background: #fff;
}
.content-box-zh .content-item {
  padding-bottom: 20px;
}
.category-title {
  height: 20px;
  line-height: 20px;
  font-size: 18px;
  font-weight: bold;
  border-left: 4px solid #2c558a;
  padding-left: 10px;
  margin: 30px 0;
}
.category-title span {
  font-size: 12px;
  font-weight: bold;
  color: #666;
}
/deep/ .content-box-en .el-input__inner,
/deep/ .content-box-zh .el-input__inner {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
/deep/ .el-input-group__prepend {
  border-top: none;
  border-left: none;
  background: #fff;
  border-radius: 0;
}
/deep/ .el-select {
  width: 150px;
}
/deep/ .area-code .el-input-group__prepend {
  width: 150px;
  border: none;
}
.submit-success {
  text-align: center;
  font-size: 20px;
  color: #999;
}
.submit-success p {
  margin: 0;
}
.submit-success .el-button {
  width: 150px;
  font-size: 20px;
  margin: 10px;
}
.down-load a {
  font-size: 28px;
  color: #49a2f2;
  text-decoration: none;
}
.down-load a:hover {
  color: #de551a;
}
/deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
/deep/ .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
.photo-uploader-container /deep/ .el-upload-dragger {
  width: 140px;
  height: 188px;
  padding: 10px;
}
/deep/ .el-upload__tip {
  text-indent: 0;
  color: #de571a;
  margin-top: 0;
}
.apply-history {
  position: absolute;
  top: 60px;
  right: 20px;
}
.apply-history .el-select {
  width: 300px;
}
</style>