<template>
  <div id="signup" v-loading="loading" element-loading-background="rgba(43, 48, 67, 0.65)">
    <div class="logo">
      <!-- <img width="160px" :src="img_logo" /> -->
    </div>

    <div class="title">
      <p class="tit1">{{ $t('newSignup.item1') }}</p>
      <p class="tit2">{{ $t('newSignup.item2') }}</p>
    </div>

    <el-form
      :model="params"
      :rules="rules"
      ref="formRef"
      label-width="0"
      class="form"
      label-position="top"
    >
      <el-row :gutter="10">
        <!-- 国家选择 -->
        <el-col :span="24" :md="12">
          <el-form-item prop="country" :label="$t('newSignup.item3')">
            <el-select
              class="country"
              v-model="params.country"
              :placeholder="$t('newSignup.item4')"
              filterable
              style="height: 40px"
            >
              <el-option
                v-for="item in countryOptions"
                :key="item.id"
                :label="item.enName"
                :value="item.code"
                :disabled="!(item.isOpenAccount == 1)"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 电话号码 -->
        <el-col :span="24" :md="12">
          <el-form-item prop="phone" :label="$t('newSignup.item5')">
            <el-input
              class="m-input"
              v-model.trim="params.phone"
              :placeholder="$t('newSignup.item6')"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <!-- 出生日期 -->
        <el-col :span="24" :md="12">
          <el-form-item prop="birthDate" :label="$t('newSignup.item18')">
            <el-date-picker
              class="m-input"
              v-model="params.birthDate"
              type="date"
              :placeholder="$t('newSignup.item19')"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              :disabled-date="disabledDate"
              style="width: 100%"
              @change="checkAge"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <!-- 邮箱和验证码 -->
        <el-col :span="24">
          <el-row :gutter="10">
            <el-col :span="24" :md="12">
              <el-form-item prop="email" :label="$t('newSignup.item7')">
                <el-input
                  class="m-input"
                  v-model.trim="params.email"
                  :placeholder="$t('newSignup.item8')"
                >
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24" :md="12">
              <el-form-item prop="emailCode" :label="$t('newSignup.item9')">
                <el-row>
                  <el-col :span="24" class="myCode">
                    <el-input
                      class="code"
                      v-model.trim="params.emailCode"
                      :placeholder="$t('newSignup.item10')"
                      :disabled="!isAgeValid || !params.birthDate"
                    >
                    </el-input>

                    <span
                      @click="handleGetCode"
                      class="getCode"
                      :class="{
                        disabled: !isAgeValid || !params.birthDate || isCodeSending,
                      }"
                    >
                      {{getCodeString}}
                    </span>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="24">
          <el-form-item>
            <p class="agreemnet9">*{{ $t('signup.agreemnet9') }}</p>
          </el-form-item>
        </el-col>

        <!-- 密码 -->
        <el-col :span="24" :md="12">
          <el-form-item prop="password" :label="$t('newSignup.item12')">
            <el-input
              class="m-input"
              v-model.trim="params.password"
              type="password"
              show-password
              autocomplete="off"
              :placeholder="$t('newSignup.item13')"
              :disabled="!isAgeValid || !params.birthDate"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <!-- 代理ID -->
        <el-col :span="24" :md="12" v-if="!route.params.id">
          <el-form-item :label="$t('newSignup.item14')">
            <el-input
              class="m-input"
              v-model.trim="params.agentId"
              :placeholder="$t('newSignup.item15')"
              type="number"
              :controls="false"
              :disabled="!isAgeValid || !params.birthDate"
              @input="limitAgentIdLength"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <!-- 密码规则提示 -->
          <el-form-item>
            <ul class="pwd">
              <li :class="{ fit: rule1 }">{{ $t('signup.form.rules.1st') }}</li>
              <li :class="{ fit: rule2 }">{{ $t('signup.form.rules.2nd') }}</li>
              <li :class="{ fit: rule3 }">{{ $t('signup.form.rules.3rd') }}</li>
            </ul>
          </el-form-item>

          <!-- 协议条款 -->
          <el-form-item class="agree" prop="agree">
            <el-checkbox v-model="params.agree" />
            <p>{{ $t('signup.agree') }}</p>
          </el-form-item>

          <el-form-item class="agree" prop="agree">
            <el-checkbox v-model="params.isSubscribeEmail" />
            <p>{{ $t('signup.agree1') }}</p>
          </el-form-item>

          <!-- 注册按钮 -->
          <el-form-item>
            <a
              class="rbt-btn btn-gradient hover-icon-reverse btn-sm w-100"
              href="javascript:void(0)"
              @click="register"
            >
              <div class="icon-reverse-wrapper">
                <span class="btn-text">{{ $t('signup.button') }}</span>
                <el-icon class="btn-icon">
                  <Right />
                </el-icon>
                <el-icon class="btn-icon">
                  <Right />
                </el-icon>
              </div>
            </a>
          </el-form-item>

          <!-- 登录链接 -->
          <el-form-item>
            <div class="signin words">
              <span>{{ $t('newSignup.item16') }}</span>
              <router-link to="/signin">{{ $t('newSignup.item17') }}</router-link>
            </div>
          </el-form-item>

          <!-- 协议链接 -->
          <el-form-item>
            <div class="des">
              <span>{{ $t('signup.agreemnet1') }}</span>
              <a href="pdf/Client_Agreement.pdf" target="_blank">
                {{ $t('signup.agreemnet2') }}
              </a>
              <span>{{ $t('signup.agreemnet3') }}</span>
              <a href="pdf/Terms&Conditions.pdf" target="_blank">
                {{ $t('signup.agreemnet4') }}
              </a>
              <span>{{ $t('signup.agreemnet5') }}</span>
              <a href="pdf/Privacy_Policy.pdf" target="_blank">
                {{ $t('signup.agreemnet6') }}
              </a>
              <span>{{ $t('signup.agreemnet7') }}</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!--    <import-model-->
    <!--      v-if="showImportModel"-->
    <!--      ref="importModelRef"-->
    <!--      :country-code="countryCode"-->
    <!--    />-->
  </div>
</template>

<script setup>
  import { ref, reactive, computed, onMounted, onUnmounted, inject } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useI18n } from 'vue-i18n'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Right } from '@element-plus/icons-vue'
  import axios from 'axios'
  // import ImportModel from "@/components/importModel.vue"
  import Service from '@/service/login'
  import Service1 from '@/service/country'
  import Config from '@/config/index'
  import { useStore } from 'vuex'

  // Composition API
  const { t, locale } = useI18n()
  const router = useRouter()
  const route = useRoute()
  const { Code, Pattern } = Config
  const pigeon = inject('pigeon')
  const Session = inject('session')
  const store = useStore()

  // 响应式数据
  const loading = ref(false)
  const showImportModel = ref(false)
  const countryCode = ref('')
  const formRef = ref(null)
  const importModelRef = ref(null)
  const timer = ref(59)
  const interval = ref(null)
  const getCodeString = ref('')
  const isCodeSending = ref(false)

  // 禁止注册的国家列表
  const notCountry = ref([
    'AF',
    'AI',
    'AG',
    'BM',
    'BS',
    'BY',
    'BE',
    'BZ',
    'BA',
    'BI',
    'CF',
    'CD',
    'CU',
    'ET',
    'FJ',
    'PS',
    'GN',
    'GW',
    'HT',
    'ID',
    'IR',
    'IQ',
    'LB',
    'LY',
    'MY',
    'ML',
    'MM',
    'NI',
    'KP',
    'PW',
    'RU',
    'SO',
    'SS',
    'SD',
    'SY',
    'UA',
    'US',
    'VE',
    'YE',
    'ZW',
    'MY',
    'ID',
    'IL',
  ])

  // 国家选项
  const countryOptions = ref([
    { label: 'china', value: 'cn' },
    { label: 'england', value: 'en' },
  ])

  // 表单数据
  const params = reactive({
    agentId: null,
    comPoint: null,
    sourceCode: null,
    subId: '',
    email: '',
    password: '',
    phone: '',
    country: '',
    emailCode: '',
    birthDate: null,
    w: '',
    oc: '',
    agree: false,
    isSubscribeEmail: false,
    ibInvalid: 0,
    linkValue: null,
  })

  // 计算属性
  const rule1 = computed(() => {
    if (!params.password) return false
    return /^.{8,16}$/.test(params.password)
  })

  const rule2 = computed(() => {
    return /^(?=.*?[a-z])(?=.*?[A-Z]).*$/.test(params.password)
  })

  const rule3 = computed(() => {
    return /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?!.*([~!@&%$^\\(\\)#_]).*\\1.*\\1)[A-Za-z0-9~!@&%$^\\(\\)#_]{8,16}$/.test(
      params.password
    )
  })

  const isAgeValid = computed(() => {
    if (!params.birthDate) return false
    const today = new Date()
    const birthDate = new Date(params.birthDate)
    let age = today.getFullYear() - birthDate.getFullYear()
    const monthDiff = today.getMonth() - birthDate.getMonth()
    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
      age--
    }
    return age >= 18
  })

  const subscribeEmailValue = computed(() => {
    return params.isSubscribeEmail ? 0 : 1
  })

  // 验证规则
  const rules = {
    country: [
      {
        validator: (rule, value, callback) => {
          if (value && value.trim()) {
            callback()
          } else {
            callback(new Error(t('vaildate.country.empty')))
          }
        },
        trigger: 'blur',
      },
    ],
    email: [
      {
        validator: (rule, value, callback) => {
          if (Pattern.Email.test(value)) {
            callback()
          } else {
            callback(new Error(t('vaildate.email.format')))
          }
        },
        trigger: 'blur',
      },
    ],
    emailCode: [
      {
        validator: (rule, value, callback) => {
          if (value && value.trim()) {
            callback()
          } else {
            callback(new Error(t('vaildate.code.empty')))
          }
        },
        trigger: 'blur',
      },
    ],
    password: [
      {
        validator: (rule, value, callback) => {
          if (Pattern.Password.test(value)) {
            callback()
          } else {
            callback(new Error(t('vaildate.password.format')))
          }
        },
        trigger: 'blur',
      },
    ],
    agree: [
      {
        validator: (rule, value, callback) => {
          console.log(value)
          if (value) {
            callback()
          } else {
            callback(new Error(t('vaildate.agree.empty')))
          }
        },
        trigger: 'change',
      },
    ],
    phone: [
      {
        validator: (rule, value, callback) => {
          if (Pattern.Number.test(value)) {
            callback()
          } else {
            callback(new Error(t('vaildate.phone.format')))
          }
        },
        trigger: 'blur',
      },
    ],
    birthDate: [
      {
        validator: (rule, value, callback) => {
          if (!value) {
            callback(new Error(t('vaildate.birthDate.empty')))
          } else {
            callback()
          }
        },
        trigger: 'change',
      },
    ],
  }

  // 方法
  const getCountry = async () => {
    try {
      const res = await Service1.Country({})
      if (res.code === Code.StatusOK) {
        countryOptions.value = res.data
      } else {
        pigeon.error(res.msg)
      }
    } catch (error) {
      console.error('获取国家列表失败:', error)
    }
  }

  const getCountryCode = async () => {
    try {
      const res = await Service.CodeById({})
      if (res.code === Code.StatusOK) {
        let countryCodeValue = res.msg
        // 如果不在禁止列表中，则设置默认国家
        if (!notCountry.value.includes(countryCodeValue)) {
          Object.assign(params, {
            country: countryCodeValue,
          })
        }

        // 处理语言和会话存储
        handleSessionStorage(countryCodeValue)
      }
    } catch (error) {
      console.error('获取国家代码失败:', error)
    }
  }

  const handleSessionStorage = (countryCode) => {
    let rememberList = '' //Session.Get('rememberList')
    if (Session.Get('remember') == 1 && Session.Get('rememberList')) {
      rememberList = Session.Get('rememberList')
    }
    if (!Session.Get('timer')) {
      let lang = Session.Get('lang') ? Session.Get('lang') : params.country == 'CN' ? 'cn' : 'en'
      if (Session.Get('isPopup') && Session.Get('isPopup') == 'true') {
        sessionStorage.clear()
        Session.Set('isPopup', true)
      } else {
        sessionStorage.clear()
      }
      Session.Set('lang', lang)
    } else {
      let timer = Session.Get('timer')
      let lang = Session.Get('lang') ? Session.Get('lang') : params.country == 'CN' ? 'cn' : 'en'
      if (Session.Get('isPopup') && Session.Get('isPopup') == 'true') {
        sessionStorage.clear()
        Session.Set('isPopup', true)
      } else {
        sessionStorage.clear()
      }
      Session.Set('lang', lang)
      Session.Set('timer', timer)
    }
    if (rememberList) {
      Session.Set('rememberList', rememberList)
      Session.Set('remember', '1')
    }
  }

  const getCountryMsg = async () => {
    try {
      const res = await Service1.CountryGet({})
      if (res.code === Code.StatusOK) {
        countryCode.value = res.msg
      }
    } catch (error) {
      console.error('获取国家信息失败:', error)
    }
  }

  const register = async () => {
    if (!formRef.value) return

    try {
      const valid = await formRef.value.validate()
      if (!valid) return

      if (countryCode.value === 'MY' || countryCode.value === 'ID') {
        showImportModel.value = true
        return
      }

      loading.value = true
      const formData = {
        ...params,
        isSubscribeEmail: subscribeEmailValue.value,
      }

      const res = await Service.Register(formData)
      if (res.code === Code.StatusOK) {
        pigeon.success(t('Msg.registerSuc'))
        await login()
      } else {
        pigeon.error(res.msg)
      }
    } catch (error) {
      console.error('注册失败:', error)
    } finally {
      loading.value = false
    }
  }

  const login = async () => {
    try {
      const res = await Service.Login({
        loginName: params.email,
        password: params.password,
      })

      if (res.code === Code.StatusOK) {
        sessionStorage.setItem('access_token', res.data)
        axios.defaults.headers.common['Access-Token'] = res.data
        await getLoginInfo()
      } else {
        pigeon.error(res.msg)
      }
    } catch (error) {
      console.error('登录失败:', error)
    }
  }

  const getLoginInfo = async () => {
    try {
      const res = await Service.CustomLoginInfo()
      if (res.code === Code.StatusOK) {
        store.commit('InitInfo', res.data)
        ElMessage.success(t('Msg.LoginSuccess'))
        setTimeout(() => {
          router.push('/').catch((arr) => arr)
          store.commit('isActiveTab', '0')
        }, 1000)
      } else {
        pigeon.error(t('Msg.SystemError'))
      }
    } catch (error) {
      console.error('获取登录信息失败:', error)
      pigeon.error(t('Msg.SystemError'))
    }
  }

  const handleGetCode = async () => {
    if (isCodeSending.value) return

    if (!params.birthDate) {
      pigeon.warning(t('vaildate.birthDate.empty'))
      return
    }

    if (!isAgeValid.value) {
      pigeon.error(t('signup.ageRestriction'))
      return
    }

    if (!params.country) {
      pigeon.warning(t('vaildate.country.empty'))
      return
    }

    if (!params.email) {
      pigeon.warning(t('vaildate.email.empty'))
      return
    }

    if (!Pattern.Email.test(params.email)) {
      pigeon.warning(t('vaildate.email.format'))
      return
    }

    isCodeSending.value = true
    await getCode(1)
  }

  const getCode = async (val) => {
    if (val) {
      try {
        if (interval.value) {
          return
        }
        const res = await Service.Code(params)
        if (res.code === Code.StatusOK) {
          pigeon.success(t('Msg.CodeSuccess'))
          startCountdown()
        } else {
          const errorMsg =
            res.msg === '邮箱已存在' || res.msg === 'Mailbox already exists'
              ? t('signup.agreemnet8')
              : res.msg
          pigeon.error(errorMsg)
        }
      } catch (error) {
        console.error('获取验证码失败:', error)
      } finally {
        isCodeSending.value = false
      }
    }
  }

  const startCountdown = () => {
    getCodeString.value = t('signup.form.waitCode1') + timer.value + t('signup.form.waitCode2')



    interval.value = setInterval(() => {
      timer.value--
      Session.Set('timer', timer.value)
      getCodeString.value = t('signup.form.waitCode1') + timer.value + t('signup.form.waitCode2')

      if (timer.value <= 0) {
        clearInterval(interval.value)
        interval.value = null
        timer.value = 59
        getCodeString.value = t('newSignup.item11')
        Session.Set('timer', timer.value)
      }
    }, 1000)
  }

  const initTimer = () => {
    const savedTimer = Session.Get('timer') || timer.value
    if (savedTimer == 59) {
      getCodeString.value = t('newSignup.item11')
    } else {
      timer.value = Session.Get('timer')
      startCountdown()
    }
  }

  const limitAgentIdLength = (value) => {
    if (value && value.toString().length > 10) {
      Object.assign(params, {
        agentId: value.toString().slice(0, 10),
      })
    }
  }

  const checkAge = () => {
    if (params.birthDate && !isAgeValid.value) {
      ElMessageBox.alert(t('signup.ageRestriction'), t('Msg.SystemPrompt'), {
        confirmButtonText: t('Btn.Confirm'),
        type: 'warning',
      })
    }
  }

  const disabledDate = (time) => {
    return time.getTime() > Date.now()
  }

  // 生命周期
  onMounted(() => {
    getCountryCode()
    getCountry()
    getCountryMsg()
    // initTimer()

    // 处理URL参数
    Object.assign(params, {
      sourceCode: route.query.ex || null,
      w:route.query.w || '',
      subId: route.query.SUBID || '',
      oc : route.query.oc || '',
      email: route.query.emailAdvertisement || ''
    })

    if (route.params.id) {
      Object.assign(params, {
        agentId: Number(route.params.id),
        linkValue:route.params.commission,
        ibInvalid: route.params.ibInvalid === 'B1' ? 1 : 0
      })
    }
    initTimer()
  })

  onUnmounted(() => {
    if (interval.value) {
      clearInterval(interval.value)
    }
  })
</script>

<style lang="scss" scoped>
  #signup {
    width: 100%;
    max-width: 640px;
    height: auto;
    box-sizing: border-box;
    background-color: #fff;


    .title {
      margin: 32px 35px 0;
      font-size: 24px;
      font-weight: bolder;
      color: #e4e4e4;
      text-align: start;

      i {
        margin-right: 10px;
      }

      .tit1 {
        font-size: 34px;
        line-height: 1.14;
        font-weight: bold;
        color: #000000;
      }

      .tit2 {
        font-size: 20px;
        line-height: 1.5;
        color: #000000;
        font-weight: 500;
      }
    }

    .form {
      padding: 20px 35px 35px;

      .getCode {
        box-sizing: border-box;
        margin-top: 15px;
        padding: 0 10px;
        border: 1px solid;
        border-radius: 50px;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        background-color: #e61f1e;
        color: #fff;
        line-height: 38px;

        &:hover {
          color: #fff;
          background-color: #ff0000;
        }

        &.disabled {
          opacity: 0.5;
          cursor: not-allowed;
          pointer-events: none;
        }
      }

      .country {
        width: 100%;
        height: 40px;
      }

      .country-option {
        display: flex;
        align-items: center;
        gap: 8px;

        .flag-icon {
          width: 20px;
          height: 15px;
          object-fit: cover;
          border-radius: 2px;
        }
      }

      .pwd {
        text-align: left;
        padding-left: 20px;

        li {
          list-style-type: disc;
          line-height: 20px;
          color: #979797;
        }

        .fit {
          color: #67c23a; /* 绿色表示符合规则 */
        }
      }

      .agree {
        position: relative;

        .el-checkbox {
          position: absolute;
          top: 3px;
          left: 0;
          align-items: flex-start;
        }

        p {
          padding-left: 30px;
          text-align: left;
          line-height: 20px;
        }
      }

      .myCode {
        position: relative;

        .getCode {
          position: absolute;
          top: 0;
          right: 3px;
          margin: 0;
          max-width: 100px;
          overflow: hidden;
          z-index: 1;
        }

        .el-input__wrapper {
          box-sizing: border-box;
          padding-right: 110px;
        }
      }

      .words {
        text-align: start;
        line-height: 24px;
        color: #000;
        font-size: 16px;
        line-height: 1.6;

        a {
          color: #e61f1e;
        }
      }

      .signin {
        text-align: start;

        a {
          color: #e61f1e;
        }
      }

      .des {
        text-align: start;
        line-height: 20px;
        color: #000;
        font-size: 12px;

        a {
          color: #e61f1e;
        }
      }

      .agreemnet9 {
        text-align: initial;
        color: #e61f1e;
        font-size: 12px;
        margin: 0;
      }

      .rbt-btn {
        width: 100%;
        padding: 0 22px;
        background: #e61f1e;
        height: 45px;
        line-height: 43px;
        color: #ffffff;
        font-size: 16px;
        letter-spacing: 0.5px;
        font-weight: 500;
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: all 0.4s ease-in-out;
        border-radius: 6px;
        border: 0 none;
        outline: none;
        background-size: 300% 100%;
        background-image: linear-gradient(to right, #0e2453, #0d2862, #0e2453, #0d2862);
        box-sizing: border-box;

        .icon-reverse-wrapper {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .btn-text {
          display: inline-block;
          transition: transform 0.6s 0.125s cubic-bezier(0.1, 0.75, 0.25, 1);
          margin-inline-start: -23px;
        }
        i {
          padding-left: 6px;
          display: inline-block;
          top: 2px;
          position: relative;
          font-size: 17px;
        }
        .btn-icon + .btn-icon {
          margin-inline-end: 0;
          margin-inline-start: 8px;
          display: inline-block;
          margin-inline-start: 0;
          margin-inline-end: 0;
          opacity: 0;
          transform: translateX(-10px);
          transition-delay: 0s;
          order: -2;
        }
        .rbt-btn.hover-icon-reverse .btn-icon {
          // display: inline-block;
          transition: opacity 0.4s 0.25s, transform 0.6s 0.25s;
          transition-timing-function: cubic-bezier(0.1, 0.75, 0.25, 1);
        }
        &:hover {
          background-color: inherit;
          background-position: 102% 0;
          transition: all 0.4s ease-in-out;
          background-image: linear-gradient(to right, #e61f1e, #fe5924, #fe5924, #e61f1e);
          color: #ffffff;
          transform: translate3d(0, -2px, 0);
        }
      }
      .rbt-btn:hover.hover-icon-reverse .btn-icon + .btn-icon {
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0.225s;
      }
      .rbt-btn:hover.hover-icon-reverse .btn-icon {
        opacity: 0;
        transition-delay: 0s;
        transform: translateX(10px);
      }
      .rbt-btn.hover-icon-reverse .btn-text {
        display: inline-block;
        transition: transform 0.6s 0.125s cubic-bezier(0.1, 0.75, 0.25, 1);
        margin-inline-start: -23px;
      }
      .rbt-btn:hover.hover-icon-reverse .btn-text {
        transition-delay: 0.1s;
        transform: translateX(23px);
      }
    }

    .el-icon {
      margin-right: 8px;
    }
  }

  @media screen and (max-width: 768px) {
    #signup {
      height: auto;
      overflow: hidden;

      .title {
        margin: 32px 20px;
        font-size: 24px;
        font-weight: bolder;
      }

      .form {
        padding: 10px 20px 30px;
      }
    }
  }
</style>

<style lang="scss">
  #signup {
    .el-input__inner {
      border-radius: 4px;
      color: #606266;

      &::placeholder {
        color: #c0c4cc;
      }

      &:disabled {
        border-color: #f5f7fa !important;
        color: #c0c4cc !important;
        cursor: not-allowed !important;
      }
    }
    .m-input {
      height: 40px;
    }

    .el-form-item {
      margin-bottom: 20px;
    }

    .el-form-item__content {
      //line-height: initial !important;
    }

    .el-input__prefix,
    .el-input__suffix {
      color: #c0c4cc;
    }

    .el-select {
      width: 100%;

      &.is-disabled .el-input__inner {
        background-color: #f5f7fa !important;
        //border-color: #e4e7ed !important;
        color: #c0c4cc !important;
        cursor: not-allowed !important;
      }
    }

    .el-date-editor.el-input {
      width: 100%;

      &.is-disabled .el-input__inner,
      .el-input__inner:disabled {
        background-color: #f5f7fa !important;
        //border-color: #e4e7ed !important;
        color: #c0c4cc !important;
        cursor: not-allowed !important;
      }
    }

    .el-form-item__label {
      float: none;
      font-size: 16px;
      line-height: 28px;
      color: #000;
      padding: 0;
      margin-bottom: 8px;
    }

    .code .el-input__inner {
      padding-right: 110px;
    }

    .el-checkbox__label {
      color: #606266;
    }
  }
</style>
