<template>
  <div class="enterpriseCertification_wrap">
    <div class="enterpriseCertification_info">
      <el-row>
        <el-col>
          <h1>{{ companyName }}企业节点管理平台</h1>
        </el-col>
        <el-col>
          <div class="text_div">
            <span>{{enterpriseStatusInfo}}</span>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="14" :offset="5">
          <el-form :model="enterpriseCertificationForm" :rules="rules" ref="enterpriseCertificationForm" label-width="180px">
            <div class="linkage">
              <el-form-item label="企业注册地：" class="is-required"></el-form-item>
              <el-form-item prop="provinceCode" class="linkageItem">
                <el-select v-model="enterpriseCertificationForm.provinceCode" placeholder="请选择省"
                           @change="changeArea(enterpriseCertificationForm.provinceCode,'city')">
                  <el-option
                    v-for="item in provinceOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="cityCode" class="linkageItem">
                <el-select v-model="enterpriseCertificationForm.cityCode" placeholder="请选择市"
                           @change="changeArea(enterpriseCertificationForm.cityCode,'area')">
                  <el-option
                    v-for="item in cityOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="areaCode" class="linkageItem">
                <el-select v-model="enterpriseCertificationForm.areaCode" placeholder="请选择地区">
                  <el-option
                    v-for="item in areaOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="linkage">
              <el-form-item label="行业类型：" class="is-required"></el-form-item>
              <el-form-item prop="enterpriseIndustryBigType" class="linkageItem">
                <el-select v-model="enterpriseCertificationForm.enterpriseIndustryBigType" placeholder="请选择大类"
                           @change="getIndustryType(enterpriseCertificationForm.enterpriseIndustryBigType)">
                  <el-option
                    v-for="item in bigTypeOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.enumeration">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="enterpriseIndustrySmallType" class="linkageItem">
                <el-select v-model="enterpriseCertificationForm.enterpriseIndustrySmallType" placeholder="请选择小类">
                  <el-option
                    v-for="item in smallTypeOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.enumeration">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- <el-form-item label="信用代码类型：" prop="corporateUnifiedSocialCreditType">
              <el-select v-model="enterpriseCertificationForm.corporateUnifiedSocialCreditType" placeholder="请选择信用代码类型">
                <el-option
                  v-for="item in creditCodeOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.enumeration">
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="信用代码：" prop="corporateUnifiedSocialCreditCode" >
              <el-input v-model="enterpriseCertificationForm.corporateUnifiedSocialCreditCode"></el-input>
            </el-form-item>
            <el-form-item label="责任主体名称：" prop="nameLegalPersonLiabilitySubject">
              <el-input v-model="enterpriseCertificationForm.nameLegalPersonLiabilitySubject"></el-input>
            </el-form-item>
            <el-form-item label="法人或代表人姓名：" prop="nameLegalRepresentative">
              <el-input v-model="enterpriseCertificationForm.nameLegalRepresentative"></el-input>
            </el-form-item>
            <el-form-item label="法人或代表人证件类型：" prop="typeLegalRepresentative">
              <el-select v-model="enterpriseCertificationForm.typeLegalRepresentative" placeholder="请选择">
                <el-option
                  v-for="item in legalPersonOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.enumeration">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="法人或代表人证件号码：" prop="certificateNumberLegalRepresentative">
              <el-input v-model="enterpriseCertificationForm.certificateNumberLegalRepresentative"></el-input>
            </el-form-item>
            <el-form-item label="证件照正面：" prop="faceId">
              <el-row>
                <el-col :span="8">
                  <el-upload
                    ref="faceIDFileRef"
                    :class="{hide:hideUploadF}"
                    :action=action
                    :data="faceId"
                    list-type="picture-card"
                    :limit=limitCount
                    :file-list="enterpriseCertificationForm.faceId"
                    :headers="headers"
                    :on-change="handleChangeId"
                    :on-exceed="handleExceedId"
                    :on-preview="handlePictureCardPreviewId"
                    :on-success="handSuccessId"
                    :before-upload="beforePictureUploadId"
                    :on-remove="handleRemoveId">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrlFace" alt="">
                  </el-dialog>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="证件照反面：" prop="rearId">
              <el-row>
                <el-col :span="8">
                  <el-upload
                    ref="rearIDRef"
                    :class="{hide:hideUploadR}"
                    :action=action
                    :data="rearId"
                    list-type="picture-card"
                    :limit=limitCount
                    :file-list="enterpriseCertificationForm.rearId"
                    :headers="headers"
                    :on-change="handleChangeRearID"
                    :on-exceed="handleExceedRearID"
                    :on-preview="handlePictureCardPreviewRearID"
                    :on-success="handSuccessRearID"
                    :before-upload="beforePictureUploadRearID"
                    :on-remove="handleRemoveRearID">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrlRear" alt="">
                  </el-dialog>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="联系人姓名：" prop="duty">
              <el-input v-model="enterpriseCertificationForm.duty"></el-input>
            </el-form-item>
            <el-form-item label="联系电话：" prop="mobile">
              <el-input v-model="enterpriseCertificationForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="详细地址：" prop="address">
              <el-input v-model="enterpriseCertificationForm.address"></el-input>
            </el-form-item>
            <el-form-item label="企业类型：" prop="enterpriseType">
              <el-select v-model="enterpriseCertificationForm.enterpriseType" placeholder="请选择">
                <el-option
                  v-for="item in enterpriseTypeOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.enumeration">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="认证资料类型：" prop="certificatedInformationType">
              <el-select v-model="enterpriseCertificationForm.certificatedInformationType" placeholder="请选择">
                <el-option
                  v-for="item in certificationInformationOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.enumeration">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="认证资料：" prop="company">
              <el-upload
                ref="companyFileRef"
                :class="{hide:hideUpCompany}"
                :action=action
                :data="company"
                list-type="picture-card"
                :limit=limitCount
                :file-list="enterpriseCertificationForm.company"
                :headers="headers"
                :on-change="handleChangeCompany"
                :on-exceed="handleExceedCompany"
                :on-preview="handlePictureCardPreviewCompany"
                :on-success="handSuccessCompany"
                :before-upload="beforePictureUploadCompany"
                :on-remove="handleRemoveCompany">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
            <el-form-item>
              <div class="btn_group">
                <el-button size="medium" type="primary" @click="submitForm">提交</el-button>
                <el-button size="medium" @click="goBack()">返回</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import {enterpriseAuth, registerArea, selectType, industryType,enterpriseInfo, informationModify} from "@/api/enterpriseManagement";
import {validatePhone, validateIDCard} from "@/utils/validate";
import {UPLOAD} from "@/api/api"

export default {
  name: "EnterpriseCertification",
  components: {},
  props: {},
  data() {
    const checkIDCard = (rule, value, callback) => {
      if (!validateIDCard(value)) {
        return callback(new Error("请输入正确的身份证"));
      } else {
        callback();
      }
    };
    const checkPhone = (rule, value, callback) => {
      // if (!validatePhone(value)) {
      //   return callback(new Error("请输入正确的手机号码"));
      // } else {
      //   callback();
      // }

      callback();
    };
    return {
      enterpriseStatusInfo: '',
      provinceOptions: [],//省份下拉框数据
      cityOptions: [],//市下拉框数据
      areaOptions: [],//区下拉框数据
      bigTypeOptions: [],//行业大类下拉框数据
      smallTypeOptions: [],//行业小类下拉框数据
      creditCodeOptions: [],//信用代码类型下拉框数据
      legalPersonOptions: [],//法人下拉框数据
      enterpriseTypeOptions: [],//企业类型下拉框数据
      certificationInformationOptions: [],//认证资料类型下拉框数据
      hideUploadF: false,
      hideUploadR: false,
      hideUpCompany: false,
      limitCount: 1,
      dialogVisible: false,
      dialogImageUrlFace: '',
      dialogImageUrlRear: '',
      dialogImageUrl: '',
      faceId: {
        bizType: 'FACE_ID',
        fileName: '',
        sequence: 0,
        url: ''
      },
      rearId: {
        bizType: 'REAR_ID',
        fileName: '',
        sequence: 0,
        url: ''
      },
      company: {
        bizType: 'COMPANY',
        fileName: '',
        sequence: 0,
        url: ''
      },
      action: UPLOAD,
      companyName: '',
      enterpriseCertificationForm: {
        code: "",//企业编码
        provinceCode: "",//省
        cityCode: "",//市
        areaCode: "",//区县
        enterpriseIndustryBigType: '', //行业类型大类
        enterpriseIndustrySmallType: '', //行业类型小类
        corporateUnifiedSocialCreditType: "",//信用代码类型
        corporateUnifiedSocialCreditCode: '',//信用代码
        nameLegalPersonLiabilitySubject: '',//责任主体名称
        nameLegalRepresentative: '',//法人或代表人姓名
        typeLegalRepresentative: '',//法人或代表人证件类型
        certificateNumberLegalRepresentative:"",//法人或代表人证件号码
        faceId: [], //证件照正面
        rearId: [], //证件照反面
        duty: '',//联系人姓名
        mobile: '',//联系电话
        address: '', //详细地址
        enterpriseType: '', //企业类型
        certificatedInformationType: '', //认证资料类型
        company: [], //认证资料
      },
      rules: {
        provinceCode: [
          {required: true, message: '请选择省', trigger: "change"},
        ],
        cityCode: [
          {required: true, message: '请选择市', trigger: "change"},
        ],
        areaCode: [
          {required: true, message: '请选择区县', trigger: "change"},
        ],
        enterpriseIndustryBigType: [
          {required: true, message: '请选择行业大类', trigger: 'change'}
        ],
        enterpriseIndustrySmallType: [
          {required: true, message: '请选择行业小类', trigger: 'change'}
        ],
        corporateUnifiedSocialCreditType: [
          {required: true, message: '请选择信用代码类型', trigger: 'change'}
        ],
        corporateUnifiedSocialCreditCode: [
          {required: true, message: '请输入信用代码', trigger: 'blur'},
        ],
        nameLegalPersonLiabilitySubject: [
          {required: true, message: '请输入责任主体名称', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        nameLegalRepresentative: [
          {required: true, message: '请输入法人或代表人姓名', trigger: 'blur'},
        ],
        typeLegalRepresentative: [
          {required: true, message: '请选择法人或代表人证件类型', trigger: 'change'}
        ],
        certificateNumberLegalRepresentative: [
          {required: true, message: "请输入法人或代表人证件号码", trigger: "blur"},
          {validator: checkIDCard, trigger: "blur"},
        ],
        faceId: [
          {required: true, message: '请上传证件照正面', trigger: 'blur'},
        ],
        rearId: [
          {required: true, message: '请上传证件照反面', trigger: 'blur'},
        ],
        duty: [
          {required: true, message: '请输入联系人姓名', trigger: 'blur'},
        ],
        mobile: [
          {required: true, message: '请输入联系电话'},
          {validator: checkPhone, trigger: "blur"}
        ],
        address: [
          {required: true, message: '请输入详细地址', trigger: 'blur'},
        ],

        enterpriseType: [
          {required: true, message: '请选择企业类型', trigger: 'change'}
        ],
        certificatedInformationType: [
          {required: true, message: '请选择认证资料类型', trigger: 'change'}
        ],
        company: [
          {required: true, message: '请上传认证资料', trigger: 'blur'},
        ],
      }
    };
  },
  beforeCreate() {
  },
  create() {
  },
  beforeMount() {
    this.enterpriseCertificationForm.code = `${this.$Base64.decode(this.$db.get('TENANT'))}`;
    this.$axios.all([enterpriseInfo(this.enterpriseCertificationForm.code), registerArea(0), selectType(0)])
      .then(this.$axios.spread((informationFormData, provinceOptionsData, selectData) => {
        this.provinceOptions = provinceOptionsData.data.data
        this.bigTypeOptions = selectData.data.data.INDUSTRY_TYPE
        this.creditCodeOptions = selectData.data.data.CREDIT_TYPE
        this.legalPersonOptions = selectData.data.data.REPRESENTATIVE_TYPE
        this.enterpriseTypeOptions = selectData.data.data.ENTERPRISE_TYPE
        this.certificationInformationOptions = selectData.data.data.CERTIFICATED_TYPE
        let informationForm = informationFormData.data.data
        if(informationForm){
          this.enterpriseStatusInfo = '企业前缀: ' + (this.$store.state.account.tenantPrefix ? this.$store.state.account.tenantPrefix : "暂未获得");
          this.enterpriseCertificationForm.provinceCode = informationForm.provinceCode;
          this.enterpriseCertificationForm.enterpriseIndustryBigType = informationForm.enterpriseIndustryBigType.code;
          this.$axios.all([registerArea(informationForm.provinceCode), registerArea(informationForm.cityCode), industryType(informationForm.enterpriseIndustryBigType.code)])
            .then(this.$axios.spread((cityOptionsData, areaOptionsData, smallTypeOptionsData) => {
            this.cityOptions = cityOptionsData.data.data;
            this.areaOptions = areaOptionsData.data.data;
            this.smallTypeOptions = smallTypeOptionsData.data.data;
            this.enterpriseCertificationForm.cityCode = informationForm.cityCode;
            this.enterpriseCertificationForm.areaCode = informationForm.areaCode;
            this.enterpriseCertificationForm.enterpriseIndustrySmallType = informationForm.enterpriseIndustrySmallType.code;
            // this.enterpriseCertificationForm.corporateUnifiedSocialCreditType = informationForm.corporateUnifiedSocialCreditType.code;
            this.enterpriseCertificationForm.typeLegalRepresentative = informationForm.typeLegalRepresentative.code;
            this.enterpriseCertificationForm.enterpriseType = informationForm.enterpriseType.code;
            this.enterpriseCertificationForm.certificatedInformationType = informationForm.certificatedInformationType.code;
            this.enterpriseCertificationForm.corporateUnifiedSocialCreditCode = informationForm.corporateUnifiedSocialCreditCode;
            this.enterpriseCertificationForm.nameLegalPersonLiabilitySubject = informationForm.nameLegalPersonLiabilitySubject;
            this.enterpriseCertificationForm.nameLegalRepresentative = informationForm.nameLegalRepresentative;
            this.enterpriseCertificationForm.certificateNumberLegalRepresentative = informationForm.certificateNumberLegalRepresentative;
            this.enterpriseCertificationForm.faceId = informationForm.faceId;
            this.enterpriseCertificationForm.rearId = informationForm.rearId;
            this.enterpriseCertificationForm.duty = informationForm.duty;
            this.enterpriseCertificationForm.mobile = informationForm.mobile;
            this.enterpriseCertificationForm.address = informationForm.address;
            this.enterpriseCertificationForm.company = informationForm.company;
            this.hideUploadF = true;
            this.hideUploadR = true;
            this.hideUpCompany = true;
          }))
        }else{
          this.enterpriseStatusInfo = '贵公司还没有填写认证信息或通过审核，请填写或修改以下信息并点击提交，工作人员会在<em>1-3</em>个工作日内完成审核，感谢您的理解。';
        }
      }))
  },
  mounted() {
    //this.getArea(0, "province")
    //this.getType(0);
  },
  beforeUpdate() {
  },
  updated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  computed: {
    headers() {
      return {
        token: 'Bearer ' + this.$db.get("TOKEN", ""),
        tenant: this.$db.get("TENANT", "") || "",
        Authorization: `Basic ${this.$Base64.encode(`${process.env.VUE_APP_CLIENT_ID}:${process.env.VUE_APP_CLIENT_SECRET}`)}`
      };
    },
  },
  watch: {},
  methods: {
    //获取省市区
    getArea(parentId, grad) {
      return registerArea(parentId).then((res) => {
        if (grad === "province") {
          this.provinceOptions = res.data.data
        } else if (grad === "city") {
          this.cityOptions = res.data.data
        } else if (grad === "area") {
          this.areaOptions = res.data.data
        }
      })
    },
    //选择省、市获取下一级市、区数据
    changeArea(parentId, grad) {
      if (grad === "city") {
        this.cityOptions = []
        this.areaOptions = [];
        this.enterpriseCertificationForm.cityCode = ""
        this.enterpriseCertificationForm.areaCode = ""
      } else if (grad === "area") {
        this.areaOptions = [];
        this.enterpriseCertificationForm.areaCode = ""
      }
      this.getArea(parentId, grad)
    },
    //获取省市区之外的下拉框数据
    getType(parentId) {
      selectType(parentId).then((res) => {
        this.bigTypeOptions = res.data.data.INDUSTRY_TYPE;
        this.creditCodeOptions = res.data.data.CREDIT_TYPE;
        this.legalPersonOptions = res.data.data.REPRESENTATIVE_TYPE;
        this.enterpriseTypeOptions = res.data.data.ENTERPRISE_TYPE;
        this.certificationInformationOptions = res.data.data.CERTIFICATED_TYPE;
      })
    },
    //获取行业小类
    getIndustryType(enumeration) {
      this.enterpriseCertificationForm.enterpriseIndustrySmallType = ""
      industryType(enumeration).then((res) => {
        this.smallTypeOptions = res.data.data
      })
    },
    //rearID 身份证反面图片
    handleExceedRearID(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handleChangeRearID(files, fileList) {
      this.hideUploadR = fileList.length >= this.limitCount;
    },
    handleRemoveRearID(file, fileList) {
      this.enterpriseCertificationForm.rearId = fileList
      this.$refs.enterpriseCertificationForm.validateField('rearId')
      this.hideUploadR = fileList.length >= this.limitCount;
    },
    handlePictureCardPreviewRearID(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handSuccessRearID(file) {
      this.enterpriseCertificationForm.rearId.push({name: file.data.filename, url: file.data.url, bizType: file.data.bizType})
      this.$refs.enterpriseCertificationForm.validateField('rearId')
    },
    beforePictureUploadRearID(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      const fileType = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/bmp']
      const isJPG = fileType.indexOf(file.type) != -1

      if (!fileType) {
        this.$message.error('上传图片只能是 JPEG、JPG、PNG、GIF、BMP 格式!');
      }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt1M;
    },
    //身份证上传正面图片
    handleExceedId(files, fileList) {
      this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handleChangeId(files, fileList) {
      this.hideUploadF = fileList.length >= this.limitCount;
    },
    handleRemoveId(file, fileList) {
      this.enterpriseCertificationForm.faceId = fileList
      this.$refs.enterpriseCertificationForm.validateField('faceId')
      this.hideUploadF = fileList.length >= this.limitCount;
    },
    handlePictureCardPreviewId(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handSuccessId(file) {
      this.enterpriseCertificationForm.faceId.push({name: file.data.filename, url: file.data.url, bizType: file.data.bizType})
      this.$refs.enterpriseCertificationForm.validateField('faceId')
    },
    beforePictureUploadId(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      const fileType = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/bmp']
      const isJPG = fileType.indexOf(file.type) != -1

      if (!fileType) {
        this.$message.error('上传图片只能是 JPEG、JPG、PNG、GIF、BMP 格式!');
      }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt1M;

    },
    //资料图片
    handleChangeCompany(files, fileList) {
      this.hideUpCompany = fileList.length >= this.limitCount;
    },
    handleExceedCompany(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handleRemoveCompany(file, fileList) {
      this.enterpriseCertificationForm.company = fileList
      this.$refs.enterpriseCertificationForm.validateField('company')
      this.hideUpCompany = fileList.length >= this.limitCount;
    },
    handlePictureCardPreviewCompany(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handSuccessCompany(file) {
      this.enterpriseCertificationForm.company.push({name: file.data.filename, url: file.data.url, bizType: file.data.bizType})
      this.$refs.enterpriseCertificationForm.validateField('company')
    },
    beforePictureUploadCompany(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      const fileType = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/bmp']
      const isJPG = fileType.indexOf(file.type) != -1

      if (!fileType) {
        this.$message.error('上传图片只能是 JPEG、JPG、PNG、GIF、BMP 格式!');
      }
      if (!isLt1M) {
        this.$message.error("上传图片大小不能超过 1MB!");
      }
      return isJPG && isLt1M;
    },
    submitForm() {
      this.$refs.enterpriseCertificationForm.validate((valid) => {
        if (valid) {
          this.saveSubmit();
        } else {
          return false;
        }
      });
    },
    //保存和提交
    saveSubmit() {
      this.enterpriseCertificationForm.code = `${this.$Base64.decode(this.$db.get('TENANT'))}`;
      enterpriseAuth(this.enterpriseCertificationForm).then(response => {
        const res = response.data;
        if (res.data) {
          this.$message({
            message: "企业认证成功",
            type: "success"
          });
          this.goBack()
        }
      })
    },
    //返回
    goBack() {
      this.$refs.enterpriseCertificationForm.resetFields();
      this.area = [];
      this.$router.push("/");
    }
  },
  directives: {}
}
</script>
<style lang="scss" scoped>
.enterpriseCertification_wrap {
  margin: 10px;

  .enterpriseCertification_info {
    padding: 20px;
    background: #fff;

    h1 {
      text-align: center;
    }

    .text_div {
      text-align: center;

      span {
        text-align: center;
        margin-bottom: 40px;
        background: #f9f0b3;
        line-height: 40px;
        padding: 0 100px;
        display: inline-block;

        em {
          color: #ff0000;
          display: inline-block;
          padding: 0 5px;
          font-size: 18px;
          font-style: normal;
        }
      }
    }

    .btn_group {
      text-align: center;

      button {
        margin-right: 20px;
      }
    }
  }
}
</style>
<style lang="scss">
.hide .el-upload--picture-card {
  display: none;
}

.linkage {
  display: flex;

  .el-form-item.linkageItem {
    min-width: 130px;

    .el-form-item__content {
      margin-left: 10px !important;
    }
  }

  .el-form-item.linkageItem:nth-child(2) {
    .el-form-item__content {
      margin-left: 0px !important;
    }
  }
}
</style>
