<template>
  <div class="page_addPatients">
    <div>
    <el-form ref="patientForm" :model="patientForm" :rules="rules"  @submit.native.prevent>
      <div class="basicInformation">

        <h2>基本信息</h2>
        <div class="basic">
             <el-form-item  required prop="name">
                  <div class="row">
                    <p><span class="xing">*</span>姓名</p>
                    <el-input v-model="patientForm.name" placeholder="请输入"></el-input>
                  </div>
             </el-form-item>
             <el-form-item required prop="sex">
                    <div class="row">
                      <p><span class="xing">*</span>性别</p>
                      <van-cell is-link @click="showPopup(1)">{{ patientForm.sex }}</van-cell>
                      <van-popup v-model="show1" position="bottom" :style="{ height: '50%' }">
                         <van-picker
                           show-toolbar
                           :columns="columns1"
                           @cancel="show1=false"
                            @confirm="chooseSex"
                          />
                       </van-popup>
                    </div>
             </el-form-item>
             <el-form-item required prop="idCard">
                     <div class="row">
                       <p><span class="xing">*</span>身份证号</p>
                        <el-input v-model="patientForm.idCard" placeholder="请输入" @blur="checkIdCardNo"></el-input>
                     </div>
             </el-form-item>
             <el-form-item required prop="birthday">
                    <div class="row">
                     <p><span class="xing">*</span>出生日期</p>
                   <el-date-picker
                       v-model="patientForm.birthday"
                       prefix-icon="none"
                       type="date"
                       placeholder="请选择"
                       format="yyyy-MM-dd"
                       value-format="yyyy-MM-dd">
                  </el-date-picker>
                      </div>
             </el-form-item>
             <el-form-item required prop="phone">

        
                 <div class="row">
                    <p><span class="xing">*</span>手机号</p>
                   <el-input v-model="patientForm.phone" placeholder="请输入" :maxlength="11"></el-input>
                  </div>
             </el-form-item>
             <el-form-item required prop="patient_type">
                 <div class="row none">
                     <p><span class="xing">*</span>病人类型</p>
                 <el-checkbox-group v-model="patientForm.patient_type" @change="handleChangePatientType">
                    <el-checkbox-button v-for="item in patientType" :label="item.id" :key="item.id">{{item.name}}</el-checkbox-button>
                  </el-checkbox-group>
               </div>
             </el-form-item>
        </div>

      </div>
      <div class="basicInformation" v-show="bloodshow">
        <h2>血透信息</h2>
        <div class="basic">
          <el-form-item required prop="dialysis">
             <div class="row">
               <p><span class="xing">*</span>透析号</p>
               <el-input v-model="patientForm.dialysis" class="dialysis" placeholder="请输入"></el-input>
               <p class="automatic" @click="generatedialysisno">自动生成</p>
            </div>
          </el-form-item>
           <el-form-item required prop="admissionNumber">
             <div class="row another">
              <p><span class="xing">*</span>住院(门诊)号</p>
              <el-input class="dialysis" placeholder="请输入" v-model="patientForm.admissionNumber"></el-input>          
             </div>
           </el-form-item>
           <el-form-item required prop="patientsoure">
              <div class="row">
               <p><span class="xing">*</span>患者来源</p>
               <van-cell is-link @click="showPopup(3)">{{ patientForm.patientsoure }}</van-cell>
               <van-popup v-model="show3" position="bottom" :style="{ height: '50%' }">
                 <van-picker
                  show-toolbar
                  :columns="columns3"
                  @cancel="show3=false"
                  @confirm="chooseSource"
              />
              </van-popup>
             </div>
           </el-form-item>
           <el-form-item>
              <div class="row">
              <p>留治状态</p>
              <van-cell is-link @click="showPopup(4)">{{ patientForm.lapseto }}</van-cell>
              <van-popup v-model="show4" position="bottom" :style="{ height: '50%' }">
               <van-picker
                 show-toolbar
                 :columns="columns4"
                 @cancel="show4=false"
                 @confirm="chooseState"
                />
              </van-popup>
             </div>
           </el-form-item>
          <el-form-item>
          <div class="row" id="special">
            <p>传染病</p>
            <el-checkbox-group v-model="patientForm.contagions">
              <el-checkbox v-for="item in contagionList" v-if="item.type==2" :label="item.id" :key="item.id"
                      :value="item.id">{{item.name}}
               </el-checkbox>
            </el-checkbox-group>
          </div>
         </el-form-item>
         <el-form-item>
            <div class="row another">
            <p>首次透析日期</p>
            <van-cell is-link @click="showPopup(5)">{{ patientForm.fistDate }}</van-cell>
            <van-popup v-model="show5" position="bottom" :style="{ height: '50%' }">
              <van-datetime-picker
                v-model="currentDate1"
                type="date"
                @cancel="show5=false"
                @confirm="chooseDate"
              />
            </van-popup>
           </div>
         </el-form-item>
         <el-form-item>
          <div class="row none">
            <p>诊断</p>
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 10}"
              placeholder="请输入内容"
              v-model="patientForm.diagnose"
            ></el-input>
          </div>
          </el-form-item>
        </div>
      </div>

      <div class="basicInformation" v-show="slowDiseaseShow">
        <h2>慢病资料</h2>
        <div class="basic">
          <el-form-item>
            <div class="row">
              <p>设备ID</p>
              <el-input v-model="patientForm.requipmentId" placeholder="请输入"></el-input>
            </div>
          </el-form-item>
          <el-form-item>
          <div class="row" id="special">
            <p>传染病</p>
            <el-checkbox-group v-model="patientForm.slowcontagions">
               <el-checkbox v-for="item in contagionList" v-if="item.type==2" :label="item.id" :key="item.id"
                      :value="item.id">{{item.name}}
               </el-checkbox>
            </el-checkbox-group>
          </div>
          </el-form-item>
          <el-form-item>
           <div class="row minHeight" id="special1">
            <p>慢性病</p>
            <el-checkbox-group v-model="patientForm.slowPatients">
                <el-checkbox v-for="item in checkDisease" :label="item.id" :key="item.id" :value="item.id">
                  {{item.name}}
                </el-checkbox>
            </el-checkbox-group>
           </div>
          </el-form-item>
        </div>
      </div>
      <div class="basicInformation" v-show="memberShow">
        <h2>会员资料</h2>
        <div class="basic">
          <el-form-item>
           <div class="row another">
            <p>患病时间</p>
            <van-cell is-link @click="showPopup(6)">{{ sickTime }}</van-cell>
            <van-popup v-model="show6" position="bottom" :style="{ height: '50%' }">
              <van-datetime-picker
                v-model="patientForm.memberIllnessTime"
                type="date"
                @cancel="show6=false"
                @confirm="chooseTime"
              />
            </van-popup>
          </div>
         </el-form-item>
         <el-form-item>
          <div class="row">
            <p>留治状态</p>
            <van-cell is-link @click="showPopup(7)">{{ patientForm.memberlapseto }}</van-cell>
            <van-popup v-model="show7" position="bottom" :style="{ height: '50%' }">
              <van-picker
                show-toolbar
                :columns="columns5"
                @cancel="show7=false"
                @confirm="chooseState2"
              />
            </van-popup>
          </div>
          </el-form-item>
          <el-form-item>
          <div class="row">
            <p>治疗方式</p>
            <van-cell is-link @click="showPopup(8)">{{ patientForm.TreatmentMethod }}</van-cell>
            <van-popup v-model="show8" position="bottom" :style="{ height: '50%' }">
              <van-picker
                show-toolbar
                :columns="columns6"
                @cancel="show8=false"
                @confirm="chooseWay"
              />
            </van-popup>
          </div>
          </el-form-item>
        </div>
      </div>
      <div class="basicInformation">
        <el-form-item>
        <p class="photoText">患者头像</p>
        <el-upload
          class="avatar-uploader"
          action="https://upload.qiniup.com"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
           :data="uploadData"
        >
          <img v-if="patientForm.patientHead" :src="patientForm.patientHead" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!-- <el-button type="primary">上传头像</el-button> -->
        <el-upload
           class="upload-demo"
           action="https://upload.qiniup.com"
           :on-success="handleAvatarSuccess"
           :before-upload="beforeAvatarUpload"
           :data="uploadData"
            multiple
            :limit="3">
            <el-button size="small" type="primary">点击上传</el-button>
         </el-upload>
         </el-form-item>
        </div>
       </el-form> 
     </div>
    <div class="save" @click="savePatient('patientForm')">保存</div>
  </div>
</template>


<script>
const moment = require('moment')
import { GenerateDialysisNo, savePatient } from '@/api/patient/patient'
import { isCardNo, checkMobile, getFileExtension } from '@/utils/tools'
import { getToken } from '@/api/qiniu'
export default {
  data() {
    var checkMobileRule = (rule, value, callback) => {
      if (!checkMobile(value)) {
        callback(new Error('请填写正确的手机号'))
      } else {
        callback()
      }
    }

    return {
      ruleForm: {
        name: '',
        sex: '请选择性别',
        idCard: '',
        birthday: '',
        phone: '',
        patientNumber: ''
      },
      qiniuDomain: 'https://images.shengws.com/',
      uploadData: { token: '', key: '' },
      dialysis: '',
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      show7: false,
      show8: false,
      columns1: ['男', '女'],
      columns2: ['123', '456'],
      columns3: ['门诊', '住院'],
      columns4: ['留治', '转出'],
      columns5: ['留治', '转出'],
      columns6: [
        '西医治疗',
        '中医治疗',
        '血液透析',
        '腹膜透析',
        '肾移植',
        '其他'
      ],
      currentDate1: new Date(),
      currentDate2: new Date(),
      hemodialysisList: [],
      slowList: [],
      patientNumber: '',
      source: '',
      state: '',
      date: '',
      diagnose: '',
      requipment: '',
      sickTime: '',
      state2: '',
      way: '',
      patientHead: '',
      contagionList: [// 传染病
        { id: 2, name: '乙肝', type: 2 },
        { id: 3, name: '丙肝', type: 2 },
        { id: 4, name: '艾滋病', type: 2 },
        { id: 5, name: '肺结核', type: 2 },
        { id: 6, name: '梅毒', type: 2 }
      ],
      checkDisease: [// 慢性病
        { id: 1, name: '慢性病' },
        { id: 2, name: '神经病' },
        { id: 3, name: '抑郁症' }
      ],
      // patientType: ['血透病人', '慢病病人', '会员病人'],
      patientType: [
        { id: 1, name: '血透病人' },
        { id: 2, name: '慢病病人' },
        { id: 3, name: '会员病人' }
      ],
      checkboxGroup1: ['北京'],
      patientForm: {
        name: '',
        sex: '',
        idCard: '',
        birthday: '',
        phone: '',
        dialysis: '',
        patient_type: [1],
        admissionNumber: '',
        patientsoure: '',
        lapseto: '',
        contagions: [],
        fistDate: '',
        diagnose: '',
        requipmentId: '',
        slowcontagions: [],
        slowPatients: [],
        memberIllnessTime: '',
        memberlapseto: '',
        patientHead: '',
        TreatmentMethod: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名' }],
        sex: [{ required: true, message: '请选择性别' }],
        idCard: [{ required: true, message: '请输入身份证号' }],
        birthday: [{ required: true, message: '请填写出生日期' }],
        phone: [{ required: true, message: '请输入手机号' }, { validator: checkMobileRule }],
        dialysis: [{ required: true, message: '请输入透析号' }],
        patient_type: [{ required: true, message: '请选择病人类型' }],
        admissionNumber: [{ required: true, message: '请填写住院号' }],
        patientsoure: [{ required: true, message: '请选择患者来源' }]
      },
      slowDiseaseShow: false,
      memberShow: false,
      bloodshow: true
    }
  },
  methods: {
    showPopup(index) {
      if (index === 1) {
        this.show1 = true
      } else if (index === 2) {
        this.show2 = true
      } else if (index === 3) {
        this.show3 = true
      } else if (index === 4) {
        this.show4 = true
      } else if (index === 5) {
        this.show5 = true
      } else if (index === 6) {
        this.show6 = true
      } else if (index === 7) {
        this.show7 = true
      } else if (index === 8) {
        this.show8 = true
      }
    },
    // 性别
    chooseSex(value) {
      // console.log(value);
      this.patientForm.sex = value
      this.show1 = false
    },
    // 门诊号
    choosePatientNumber(value) {
      this.patientNumber = value
      this.show2 = false
    },
    // 来源
    chooseSource(value) {
      this.patientForm.patientsoure = value
      this.show3 = false
    },
    // 状态
    chooseState(value) {
      this.patientForm.lapseto = value
      this.show4 = false
    },
    // 首次透析日期
    chooseDate(value) {
      // console.log(moment(value).format("YYYY-MM-DD"));
      this.patientForm.fistDate = moment(value).format('YYYY-MM-DD')
      this.show5 = false
    },
    // 患病时间
    chooseTime(value) {
      this.sickTime = moment(value).format('YYYY-MM-DD')
      this.show6 = false
    },
    // 会员资料留治状态
    chooseState2(value) {
      this.patientForm.memberlapseto = value
      this.show7 = false
    },
    // 治疗方式
    chooseWay(value) {
      this.patientForm.TreatmentMethod = value
      this.show8 = false
    },
    savePatient(formName) {
      var telephone = this.$route.query.phone
      console.log('telephone', telephone)
      var sex = this.patientForm.sex
      console.log('sex是什么', sex)
      if (sex === '男') {
        this.patientForm.sex = 1
      }

      if (sex === '女') {
        this.patientForm.sex = 2
      }
      var patientsour = this.patientForm.patientsoure
      if (patientsour === '') {
        this.patientForm.patientsoure = 0
      }
      if (patientsour === '门诊') {
        this.patientForm.patientsoure = 1
      }

      if (patientsour === '住院') {
        this.patientForm.patientsour = 2
      }
      var lapseto = this.patientForm.lapseto
      console.log('lapseto是什么', lapseto)
      if (lapseto === '留治') {
        this.patientForm.lapseto = 1
      }
      if (lapseto === '转出') {
        this.patientForm.lapseto = 2
      }

      var memberlapseto = this.patientForm.memberlapseto
      console.log('会员患病时间', memberlapseto)
      if (memberlapseto === '留治') {
        this.patientForm.memberlapseto = 1
      }
      if (memberlapseto === '转出') {
        this.patientForm.memberlapseto = 2
      }

      var TreatmentMethod = this.patientForm.TreatmentMethod
      if (TreatmentMethod === '西医治疗') {
        this.patientForm.TreatmentMethod = 1
      }
      if (TreatmentMethod === '中医治疗') {
        this.patientForm.TreatmentMethod = 2
      }

      if (TreatmentMethod === '血液透析') {
        this.patientForm.TreatmentMethod = 3
      }

      if (TreatmentMethod === '腹膜透析') {
        this.patientForm.TreatmentMethod = 4
      }

      if (TreatmentMethod === '肾移植') {
        this.patientForm.TreatmentMethod = 5
      }

      if (TreatmentMethod === '其他') {
        this.patientForm.TreatmentMethod = 6
      }

      if (this.patientForm.dialysis === '') {
        this.patientForm.dialysis = 0
      }

      if (this.patientForm.admissionNumber === '') {
        this.patientForm.admissionNumber = 0
      }
      if (this.patientForm.memberlapseto === '') {
        this.patientForm.memberlapseto = 1
      }

      if (this.patientForm.TreatmentMethod === '') {
        this.patientForm.TreatmentMethod = 1
      }

      this.$refs[formName].validate((valid) => {
        if (valid) {
          savePatient(this.patientForm, telephone).then(response => {
            if (response.data.state === 1) {
              var patients = response.data.data.bloodPatients
              // console.log('patients', patients)
              var patientss = response.data.data.patientss
              console.log('paitentss', patientss)
              var phone = this.$route.query.phone
              this.$router.push('/patientmanagement?phone=' + phone)
            } else {
              this.$message.error('身份证号码或者手机号码重复')
            }
          })
        }
      })
    },
    generatedialysisno() {
      var phone = this.$route.query.phone
      console.log('phone的是什么', phone)
      GenerateDialysisNo(phone).then(response => {
        // eslint-disable-next-line eqeqeq
        if (response.data.state == 1) {
          var no = response.data.data.no + ''
          console.log('no', no)
          console.log('no是设么', response.data.data.no)
          this.patientForm.dialysis = no
        }
      })
    },
    checkIdCardNo() {
      if (!isCardNo(this.patientForm.idCard)) {
        this.$message.error('身份证号码信息有误!')
        this.patientForm.birthday = ''
        return false
      }
      var thisLen = this.patientForm.idCard.length
      var birth = ''
      if (thisLen === 15) {
        birth = '19' + this.patientForm.idCard.substr(6, 6)
      } else {
        birth = this.patientForm.idCard.substr(6, 8)
      }
      this.patientForm.birthday = birth.substr(0, 4) + '-' + birth.substr(4, 2) + '-' + birth.substr(6, 2)
      console.log('出生日期', this.patientForm.birthday)
    },

    handleChangePatientType(values) {
      console.log('values是设么', values)
      console.log('values', values[1])
      for (let index = 0; index < values.length; index++) {
        if (values[0] === 1) {
          this.bloodshow = true
          this.slowDiseaseShow = false
          this.memberShow = false
        }
        if (values[0] === 1 && values[1] === 2) {
          this.slowDiseaseShow = true
          this.bloodshow = true
          this.memberShow = false
        }
        if (values[0] === 1 && values[2] === 2) {
          this.bloodshow = true
          this.slowDiseaseShow = false
          this.memberShow = true
        }

        if (values[0] === 1 && values[1] === 2 && values[2] === 3) {
          this.bloodshow = true
          this.slowDiseaseShow = true
          this.memberShow = true
        }

        if (values[0] === 1 && values[1] === 3) {
          this.slowDiseaseShow = true
          this.memberShow = true
          this.bloodshow = false
        }

        if (values[0] === 2) {
          this.slowDiseaseShow = true
          this.bloodshow = false
          this.memberShow = false
        }

        if (values[0] === 3) {
          this.memberShow = true
          this.slowDiseaseShow = false
          this.bloodshow = false
        }
      }
    },
    changeSex(value) {
      console.log('value是什么', value)
    },
    // eslint-disable-next-line no-dupe-keys
    handleAvatarSuccess(res, file) {
      this.patientForm.patientHead = this.qiniuDomain + res.url
      this.uploading = false
    },

    // eslint-disable-next-line no-dupe-keys
    beforeAvatarUpload(file) {
      var fileType = file.type
      const isJPG = fileType.indexOf('image') > -1
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('只能上传图片')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }

      var date = new Date()
      // eslint-disable-next-line no-undef
      var ext = getFileExtension(file.name)
      var key =
        '' +
        date.getFullYear() +
        (date.getMonth() + 1) +
        date.getDate() +
        date.getHours() +
        date.getMinutes() +
        date.getSeconds() +
        '_o_' +
        file.uid +
        '.' +
        ext
      this.uploading = true
      this.loadingText = '机构头像上传中'

      const _self = this
      return new Promise((resolve, reject) => {
        getToken()
          .then(response => {
            const token = response.data.data.uptoken
            console.log('token是什么', token)
            _self._data.uploadData.token = token
            _self._data.uploadData.key = key
            resolve(true)
          })
          // eslint-disable-next-line handle-callback-err
          .catch(err => {
            reject(false)
            this.uploading = false
          })
      })
    }

  },
  created() {
    var phone = this.$route.query.phone
    console.log('phones是什么', phone)
  }
}
</script>


<style lang="scss">
.page_addPatients {
  overflow: hidden;
  height: 100%;
  background: rgba(246, 246, 246, 1);
  display: flex;
  flex-direction: column;
  height: 100%;
  > div:first-child {
    flex: 1;
    overflow: auto;
  }
  .basicInformation {
    margin-top: 0.9375rem;
    min-height: 6.25rem;
    width: 23.4375rem;
    background: #fff;
    padding-left: 1rem;
    box-sizing: border-box;
    h2 {
      width: 5rem;
      font-size: 1.125rem;
      color: rgba(155, 155, 155, 1);
      padding-top: 1.125rem;
    //   height: 1.0625rem;
    }
    .photoText {
      float: left;
      width: 5.625rem;
      height: 100%;
      font-size: 1rem;
      font-weight: 600;
      color: #000;
      margin-top: 1.25rem;
    }
    .row {
      width: 20.875rem;
      min-height: 3.75rem;
      border-bottom: 1px solid #e6e6e6;
      line-height: 3.75rem;
      p {
        float: left;
        width: 5.625rem;
        height: 100%;
        font-size: 1rem;
        font-weight: 600;
        color: #000;
      }

   .el-checkbox-group {
        float: left;
        width: 15.125rem;
        height: 1.875rem;
        margin: 0.9375rem 0;
        display: flex;
        justify-content: space-between;
        align-self: center;
        align-items: center;
      }

     .el-checkbox-button {
        width: 4.5625rem;
        height: 1.875rem;
        display: block;
        float: left;
        border-radius: 0.9375rem;
      }

       .el-checkbox-button__inner {
        display: block;
        border: none;
        width: 4.5625rem;
        height: 1.875rem;
        border-radius: 0.9375rem;
        color: #9b9b9b;
        line-height: 1.875rem;
        font-size: 0.8125rem;
        padding: 0;
        background: rgba(244, 244, 244, 1);
      }

     .el-checkbox-button.is-checked .el-checkbox-button__inner {
        background: rgba(81, 119, 238, 0.2);
        color: #5177ee;
        box-shadow: none;
      }
      .xing{
        color: red;
        margin-right: 6px;
      }
      .el-textarea {
        width: 15.125rem;
        min-height: 3.125rem;
      }
      .el-textarea__inner {
        border: none;
        font-size: 0.875rem;
      }
      .van-cell {
        width: 15.125rem;
        height: 3.75rem;
        padding: 0;
      }
      .van-cell__value {
        height: 3.75rem;
        line-height: 3.75rem;
        padding-left: 0.9375rem;
        box-sizing: border-box;
        font-size: 1rem;
        color: #9b9b9b;
      }
      .van-cell__right-icon {
        line-height: 3.625rem;
      }
      .van-cell:not(:last-child)::after {
        border: none;
      }
      .el-input {
        float: left;
        width: 15.125rem;
        height: 100%;
      }
      .el-input__inner {
        border: none;
        height: 1.75rem;
        line-height: 1.75rem;
        font-size: 1rem;
        color: rgba(155, 155, 155, 1);
      }
      .el-input--prefix .el-input__inner {
        padding-left: 15px;
      }

      .typelist {
        width: 15rem;
        height: 3.75rem;
        display: flex;
        justify-content: space-between;
        align-self: center;
        align-items: center;
        li {
          width: 4.5625rem;
          height: 1.875rem;
          background: rgba(244, 244, 244, 1);
          border-radius: 0.9375rem;
          color: #9b9b9b;
          line-height: 1.875rem;
          text-align: center;
          font-size: 0.8125rem;
        }
        .active {
          background: rgba(81, 119, 238, 0.2);
          color: #5177ee;
        }
      }
      .dialysis {
        float: left;
        width: 8.75rem;
        height: 3.75rem;
        // padding-left: 15px;
        box-sizing: border-box;
        color: #9b9b9b;
      }
      .automatic {
        float: right;
        width: 5.5625rem;
        height: 2.1875rem;
        background: rgba(81, 119, 238, 1);
        border-radius: 1.125rem;
        text-align: center;
        line-height: 2.1875rem;
        color: #fff;
        margin-top: 0.625rem;
        font-size: 0.875rem;
        font-weight: normal;
      }
    }

    .special {
      min-height: 5.375rem;
      .el-checkbox-group {
        width: 15.125rem;
        min-height: 5.375rem;
        // display: block;
        float: right;
        line-height: 2.6rem;
      }
      .el-checkbox {
        margin-right: 0.75rem;
      }
      .el-checkbox__label {
        padding-left: 6px;
        font-size: 0.875rem;
      }
    }
    .minHeight {
      min-height: 3.75rem;
      .el-checkbox-group {
        line-height: 2.6rem;
      }
    }

    .none {
      border: none;
    }
    .another {
      .van-cell {
        width: 14rem;
        height: 3.75rem;
        padding: 0;
      }
      .van-cell__value {
        padding-left: 0;
      }
      p {
        width: 6.625rem;
      }
      .el-input {
        float: left;
        width: 13.75rem;
        height: 100%;
      }
      .el-input__inner {
        padding-left: 0;
      }
    }
  }
  .save {
    width: 23.4375rem;
    height: 2.75rem;
    background: linear-gradient(
      -90deg,
      rgba(75, 102, 234, 1),
      rgba(81, 119, 238, 1),
      rgba(129, 159, 246, 1)
    );
    text-align: center;
    line-height: 2.75rem;
    color: #fff;
    font-size: 1.0625rem;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-top: 1.25rem;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 1.75rem;
    color: #8c939d;
    width: 6.25rem;
    height: 6.25rem;
    line-height: 6.25rem;
    text-align: center;
  }
  .avatar {
    width: 6.25rem;
    height: 6.25rem;
    display: block;
  }
  .el-button--primary {
    margin: 0.625rem 0 0.625rem 6.4rem;
  }
}

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

#special {
  min-height: 5.375rem;
  .el-checkbox-group {
    width: 15.125rem;
    min-height: 5.375rem;
    display: block;
    float: right;
    line-height: 2.6rem;
    margin: 0;
  }
  .el-checkbox {
    margin-right: 0.75rem;
  }
  .el-checkbox__label {
    padding-left: 6px;
    font-size: 0.875rem;
  }
}
#special1 {
  .el-checkbox-group {
    width: 15.125rem;
    // min-height: 5.375rem;
    display: block;
    float: right;
    line-height: 2.6rem;
    margin: 0;
  }
  .el-checkbox {
    margin-right: 0.75rem;
    margin-top: 0.5rem;
  }
  .el-checkbox__label {
    padding-left: 6px;
    font-size: 0.875rem;
  }
}
</style>
