<template>
  <div id="personalManagement">
    <search-box
      ref="search_box"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <table-list
      ref="tableListRefs"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      @addClick="addClick"
      :loading="loading"
      @getxq="getxq"
    >
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="xq(props.scope.row)">详情</el-button>
        <el-button type="text" @click="addClick(props.scope.row, 0)"
          >修改</el-button
        >
        <!-- <el-button type="text" @click="del(props.scope.row)">删除</el-button> -->
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize="pageSize"
      :currentPage="currentPage"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <user-info ref="child"></user-info>
    <user-study-info ref="studyInfo"></user-study-info>
    <el-dialog
      :visible.sync="dialogBox"
      width="780px"
      :show-close="false"
      :destroy-on-close="true"
      :fullscreen="fullscreen"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">
          {{ statusPop === 1 ? "添加" : statusPop === 0 ? "修改" : "详情" }}
        </div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Max@2x.png"
            alt=""
            @click="fullscreen = !fullscreen"
          />
          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
        </div>
      </div>
      <el-row class="contentBox" :span="24">
        <el-steps :active="activeIndex" finish-status="success" align-center>
          <el-step title="基础信息"></el-step>
          <el-step title="教育信息"></el-step>
        </el-steps>
        <el-form
          v-show="activeIndex === 0"
          label-position="right"
          label-width="120px"
          :model="poppleData1"
          :rules="rules"
          ref="poppleData1"
          style="max-height: 680px; overflow: auto; margin: 20px 0px"
        >
          <el-form-item label="姓名">
            <el-input
              :disabled="true"
              v-model="poppleData1.realname"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="poppleData1.sex">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="身份证">
            <el-input v-model="poppleData1.idCard" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="telphone">
            <el-input v-model="poppleData1.telphone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="poppleData1.email"></el-input>
          </el-form-item>
          <el-form-item label="政治面貌" prop="politic">
            <el-select v-model="poppleData1.politic" placeholder="请选择">
              <el-option
                v-for="item in UserDict['politic_status']"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="婚姻状况" prop="marry">
            <el-select v-model="poppleData1.marry" placeholder="请选择">
              <el-option
                v-for="item in UserDict['marry_status']"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="户籍/国籍">
            <v-distpicker
              @province="changeProvince"
              @city="changeCity"
              @area="changeArea"
              :province="poppleData1.province"
              :city="poppleData1.city"
              :area="poppleData1.district"
            ></v-distpicker>
          </el-form-item>
          <el-form-item label="所在城市">
            <v-distpicker
              @province="changehouseProvince"
              @city="changehouseCity"
              @area="changehouseDistrict"
              :province="poppleData1.houseProvince"
              :city="poppleData1.houseCity"
              :area="poppleData1.houseDistrict"
            ></v-distpicker>
          </el-form-item>
          <el-form-item label="出生日期" prop="userBirth">
            <el-date-picker
              v-model="poppleData1.userBirth"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="身份证人像面">
            <div class="imgBox">
              <label class="imgLabel" for="inputs">
                <div class="msPhoto" v-if="poppleData1.idCardImg1">
                  <img
                    :src="$methodsTools.splitImgHost(poppleData1.idCardImg1)"
                    alt="图片加载失败"
                  />
                </div>
                <div class="imgbbx" v-else>
                  <p style="margin-top: 49px">点击添加或将文件拖拽到这里上传</p>
                  <i class="el-icon-plus"></i>
                  <p style="margin-bottom: 37px">
                    图片格式：.jpg/.png/jpeg/bmp
                  </p>
                </div>
                <input
                  id="inputs"
                  type="file"
                  ref="file"
                  :disabled="true"
                  style="display: none"
                  @change="getImgFile"
                />
              </label>
              <!-- <p>请上传比例为16：9且小于2m的图片</p> -->
            </div>
          </el-form-item>
          <el-form-item label="身份证国徽面">
            <div class="imgBox">
              <label class="imgLabel" for="inputs2">
                <div class="msPhoto" v-if="poppleData1.idCardImg2">
                  <img
                    :src="$methodsTools.splitImgHost(poppleData1.idCardImg2)"
                    alt="图片加载失败"
                  />
                </div>
                <div class="imgbbx" v-else>
                  <p style="margin-top: 49px">点击添加或将文件拖拽到这里上传</p>
                  <i class="el-icon-plus"></i>
                  <p style="margin-bottom: 37px">
                    图片格式：.jpg/.png/jpeg/bmp
                  </p>
                </div>
                <input
                  id="inputs2"
                  type="file"
                  :disabled="true"
                  ref="file2"
                  style="display: none"
                  @change="getImgFile2"
                />
              </label>
              <!-- <p>请上传比例为16：9且小于2m的图片</p> -->
            </div>
          </el-form-item>
          <el-form-item label="启用状态">
            <el-radio-group v-model="poppleData1.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-form
          v-show="activeIndex === 1"
          label-position="right"
          label-width="120px"
          :model="poppleData2"
          :rules="rules2"
          ref="poppleData2"
          style="max-height: 680px; overflow: auto; margin: 20px 0px"
        >
          <el-form-item label="学校名称" prop="schoolName">
            <el-select
              v-model="poppleData2.schoolName"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in schoolNameList"
                :key="item.id"
                :label="item.schoolName"
                :value="item.schoolName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="全日制" prop="fullTimeSchool">
            <el-select
              v-model="poppleData2.fullTimeSchool"
              placeholder="请选择"
            >
              <el-option
                v-for="item in UserDict['full_time_school']"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入学时间" prop="admissionTime">
            <el-date-picker
              v-model="poppleData2.admissionTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="毕业时间" prop="graduationTime">
            <el-date-picker
              v-model="poppleData2.graduationTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="学历" prop="education">
            <el-select v-model="poppleData2.education" placeholder="请选择">
              <el-option
                v-for="item in UserDict['edu_level']"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学位" prop="academicDegree">
            <el-select
              v-model="poppleData2.academicDegree"
              placeholder="请选择"
            >
              <el-option
                v-for="item in UserDict['academic_degree']"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学制" prop="educationalSystem">
            <el-select
              v-model="poppleData2.educationalSystem"
              placeholder="请选择"
            >
              <el-option
                v-for="item in UserDict['educational_system']"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="院系" prop="department">
            <el-select
              v-model="poppleData2.department"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in UserDict['department']"
                :key="item.dictCode"
                :label="item.dictLabel"
                :value="item.dictLabel"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业" prop="major">
            <el-input v-model="poppleData2.major"></el-input>
          </el-form-item>
          <el-form-item label="班级" prop="grade">
            <el-input v-model="poppleData2.grade"></el-input>
          </el-form-item>
          <el-form-item label="学信网学籍证明">
            <div class="imgBox">
              <label class="imgLabel" for="inputsxj">
                <div class="msPhoto" v-if="poppleData2.studentStatusImg">
                  <img
                    :src="
                      $methodsTools.splitImgHost(poppleData2.studentStatusImg)
                    "
                    alt="图片加载失败"
                  />
                </div>
                <div class="imgbbx" v-else>
                  <p style="margin-top: 49px">点击添加或将文件拖拽到这里上传</p>
                  <i class="el-icon-plus"></i>
                  <p style="margin-bottom: 37px">
                    图片格式：.jpg/.png/jpeg/bmp
                  </p>
                </div>
                <input
                  id="inputsxj"
                  type="file"
                  ref="filexj"
                  style="display: none"
                  @change="getImgFilexj"
                />
              </label>
              <p>请上传比例为16：9且小于2m的图片</p>
            </div>
          </el-form-item>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upPage" v-if="activeIndex === 1">上一步</el-button>
        <el-button
          type="primary"
          @click="
            activeIndex === 0 ? nextPage('poppleData1') : submit('poppleData2')
          "
          >{{ activeIndex === 0 ? "下一步" : "提交" }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import searchBox from "@/components/searchBox";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
import userInfo from "@/components/userInfoS";
import userStudyInfo from "@/components/userStudyInfo";
import VDistpicker from "v-distpicker";
import { mapGetters } from "vuex";
export default {
  components: {
    searchBox,
    tableList,
    pagination,
    userInfo,
    userStudyInfo,
    VDistpicker,
  },
  data() {
    return {
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "个人管理",
        index: 0,
        ch: "条",
        num: true,
        choice: true,
        addHide: true,
        backFatherBtn: {
          status: false,
          title: "未定义",
        },
      },
      activeIndex: 0,
      tableSet: [
        {
          label: "姓名",
          prop: "realname",
          hidden: true,
        },
        {
          label: "用户手机号",
          prop: "telphone",
          hidden: true,
        },
        {
          label: "身份证号",
          prop: "idCard",
          hidden: true,
        },
        {
          label: "课程数量",
          prop: "courseNum",
          hidden: true,
        },
        {
          label: "学习时长(小时)",
          prop: "studyTime",
          hidden: true,
          scope: "timeBtn",
        },
        {
          label: "账号启用状态",
          prop: "status",
          hidden: true,
          scope: "status",
        },
      ], //表头信息
      tableData: [], //表单数据
      total: 0, //一共多少条
      pageSize: 10, //每页多少条数据
      currentPage: 1, //当前页码
      formList: [
        {
          label: "手机号",
          prop: "telphone",
          placeholder: "请输入手机号",
        },
        {
          label: "姓名",
          prop: "realname",
          placeholder: "请输入姓名",
        },
        // {
        //   label: "开通方式",
        //   prop: "examTypeId",
        //   placeholder: "请选择开通方式",
        //   scope: "select",
        // },
        {
          label: "身份证号",
          prop: "idCard",
          placeholder: "请输入身份证号",
        },
        {
          label: "状态",
          prop: "status",
          placeholder: "请选择身份",
          scope: "select",
          options: [
            {
              label: "启用",
              value: 1,
            },
            {
              label: "停用",
              value: 0,
            },
          ],
        },
        {
          label: "学校名称",
          prop: "schoolName",
          scope: "selects",
          options: [],
        },
      ], //搜索
      fullscreen: false,
      dialogBox: false,
      statusPop: 0,
      poppleData1: {},
      poppleData2: {},
      beif: {},
      psCity: {},
      hjCity: {},
      schoolList: [],
      rules: {
        telphone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        userBirth: [
          {
            type: "string",
            required: true,
            message: "请选择出生日期",
            trigger: "change",
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
      rules2: {
        schoolName: [
          { required: true, message: "请选择学校", trigger: "change" },
        ],
        fullTimeSchool: [
          { required: true, message: "请选择是否全日制", trigger: "change" },
        ],
        education: [
          { required: true, message: "请选择学历", trigger: "change" },
        ],
        academicDegree: [
          { required: true, message: "请选择学位", trigger: "change" },
        ],
        educationalSystem: [
          { required: true, message: "请选择学制", trigger: "change" },
        ],
        department: [
          { required: true, message: "请选择院系", trigger: "change" },
        ],
        major: [{ required: true, message: "请输入专业", trigger: "blur" }],
        grade: [{ required: true, message: "请输入班级", trigger: "blur" }],
        admissionTime: [
          {
            type: "string",
            required: true,
            message: "请选择出生日期",
            trigger: "change",
          },
        ],
        graduationTime: [
          {
            type: "string",
            required: true,
            message: "请选择出生日期",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: { ...mapGetters(["UserDict", "schoolNameList"]) },
  mounted() {
    if (this.$route.params) {
      this.search({ schoolName: this.$route.params.schoolName });
    } else {
      this.search();
    }
    this.getDictData();
  },
  methods: {
    search(v, os) {
      if (os) {
        this.currentPage = 1;
      }
      if (v === undefined) {
        v = {};
      }
      var data = {
        schoolName: v.schoolName,
        telphone: v.telphone,
        realname: v.realname,
        idCard: v.idCard,
        status: v.status === undefined ? "0,1" : v.status,
        pageSize: this.pageSize,
        pageNum: this.currentPage,
      };
      this.loading = true;
      this.$api
        .inquireappuserlists(data)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    init() {
      this.search();
    },
    // del() {},
    changeProvince(v) {
      this.psCity.province = v.value;
      this.psCity.city = "";
      this.psCity.district = "";
    },
    changeCity(v) {
      this.psCity.city = v.value;
      this.psCity.district = "";
    },
    changeArea(v) {
      this.psCity.district = v.value;
    },
    changehouseProvince(v) {
      this.hjCity.province = v.value;
      this.hjCity.city = "";
      this.hjCity.district = "";
    },
    changehouseCity(v) {
      this.hjCity.city = v.value;
      this.hjCity.district = "";
    },
    changehouseDistrict(v) {
      this.hjCity.district = v.value;
    },
    getDictData() {
      this.$api.inquireuserschoolList({ status: 1 }).then((res) => {
        this.formList.map((item) => {
          if (item.label === "学校名称") {
            item.options = res.rows;
          }
        });
      });
    },
    addClick(v, int) {
      this.statusPop = int;
      this.$api.obtainappuser(v.userId).then((res) => {
        if (res.code === 200) {
          this.poppleData1 = res.data;
        }
      });
      this.$api.obtainappuserschoolinfo(v.userId).then((res) => {
        if (res.code === 200) {
          this.poppleData2 = res.data;
          this.beif = JSON.parse(JSON.stringify(res.data));
        }
      });
      this.dialogBox = true;
      this.$nextTick(() => {
        this.$refs.poppleData1.clearValidate();
      });
    },
    async submit(formName) {
      var self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (
            self.psCity.province === "" ||
            self.psCity.province === "省" ||
            self.psCity.province === undefined
          ) {
            self.$message.error("请选择省份");
            return;
          }
          if (
            self.psCity.city === "" ||
            self.psCity.city === "市" ||
            self.psCity.city === undefined
          ) {
            self.$message.error("请选择城市");
            return;
          }
          if (
            self.psCity.district === "" ||
            self.psCity.district === "区" ||
            self.psCity.district === undefined
          ) {
            self.$message.error("请选择区域");
            return;
          }
          if (
            self.hjCity.province === "" ||
            self.hjCity.province === "省" ||
            self.hjCity.province === undefined
          ) {
            self.$message.error("请选择省份");
            return;
          }
          if (
            self.hjCity.city === "" ||
            self.hjCity.city === "市" ||
            self.hjCity.city === undefined
          ) {
            self.$message.error("请选择城市");
            return;
          }
          if (
            self.hjCity.district === "" ||
            self.hjCity.district === "区" ||
            self.hjCity.district === undefined
          ) {
            self.$message.error("请选择区域");
            return;
          }
          self.submitFormData();
        } else {
          self.$message.error("请检查教育信息是否填写完整");
          return false;
        }
      });
    },
    nextPage(formName) {
      var self = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          self.activeIndex = 1;
          self.$nextTick(() => {
            self.$refs.poppleData2.clearValidate();
          });
        } else {
          self.$message.error("请检查基础信息是否填写完整");
          return false;
        }
      });
    },
    async submitFormData() {
      var self = this;
      if (this.poppleData2.studentStatusImg !== this.beif.studentStatusImg) {
        const awtimg = await this.imgUploadxj(5);
      }
      var data1 = {
        userId: this.poppleData1.userId,
        sex: this.poppleData1.sex,
        telphone: this.poppleData1.telphone,
        email: this.poppleData1.email,
        politic: this.poppleData1.politic,
        marry: this.poppleData1.marry,
        politic: this.poppleData1.politic,
        userBirth: this.poppleData1.userBirth,
        houseProvince: self.hjCity.province,
        houseCity: self.hjCity.city,
        houseDistrict: self.hjCity.district,
        province: self.psCity.province,
        city: self.psCity.city,
        district: self.psCity.district,
        status: this.poppleData1.status,
      };
      var data2 = {
        userId: this.poppleData1.userId,
        schoolName: this.poppleData2.schoolName,
        fullTimeSchool: this.poppleData2.fullTimeSchool,
        admissionTime: this.poppleData2.admissionTime,
        graduationTime: this.poppleData2.graduationTime,
        education: this.poppleData2.education,
        academicDegree: this.poppleData2.academicDegree,
        educationalSystem: this.poppleData2.educationalSystem,
        department: this.poppleData2.department,
        major: this.poppleData2.major,
        grade: this.poppleData2.grade,
        studentStatusImg: this.poppleData2.studentStatusImg,
        userSchoolId: this.poppleData2.userSchoolId,
      };
      this.$api.editappuser(data1).then((res) => {
        if (res.code === 200) {
          self.$api.editappuserschoolinfo(data2).then((resb) => {
            if (resb.code === 200) {
              self.$message.success("修改成功");
              self.activeIndex = 0;
              self.dialogBox = false;
            } else {
              self.$message.warning("基本信息修改成功，教育信息修改失败");
            }
          });
        } else {
          self.$message.warning("修改失败");
        }
      });
    },
    upPage() {
      this.activeIndex = 0;
    },
    close() {
      this.poppleData1 = {};
      this.dialogBox = false;
      this.activeIndex = 0;
    },
    handleSizeChange(v) {
      this.pageSize = v;
      this.currentPage = 1;
      this.search(this.$refs.search_box.formData);
    },
    handleCurrentChange(v) {
      this.currentPage = v;
      this.search(this.$refs.search_box.formData);
    },
    xq(option) {
      this.$refs.child.getInfos(option.userId);
    },
    getxq(option) {
      this.$refs.studyInfo.getInfos(option);
    },
    //学籍照片上传
    imgUploadxj(int) {
      console.log(int);
      return new Promise((resolve, reject) => {
        this.$upload
          .upload(this.$refs.filexj.files[0], int)
          .then((res) => {
            this.$set(this.poppleData2, "studentStatusImg", res);
            resolve();
          })
          .catch((err) => {
            this.$message.error("图片上传错误");
          });
      });
    },
    getImgFilexj() {
      console.log(1);
      var self = this;
      var file = this.$refs.filexj.files[0];
      if (file === undefined) {
        self.$set(self.poppleData2, "studentStatusImg", "");
        return;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("图片不得大于2MB");
        return;
      }
      var type = this.$refs.filexj.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "bmp"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/bmp");
        this.$refs.filexj.value = "";
        return;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (ev) {
        self.$set(self.poppleData2, "studentStatusImg", ev.target.result);
      };
    },

    imgUpload(int) {
      return new Promise((resolve, reject) => {
        this.$upload
          .upload(this.$refs.file.files[0], int)
          .then((res) => {
            console.log(res);
            this.$set(this.poppleData2, "studentStatusImg", res);
            resolve();
          })
          .catch((err) => {
            this.$message.error("图片上传错误");
          });
      });
    },
    getImgFile() {
      console.log(1);
      var self = this;
      var file = this.$refs.file.files[0];
      if (file === undefined) {
        self.$set(self.poppleData2, "studentStatusImg", "");
        return;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("图片不得大于2MB");
        return;
      }
      var type = this.$refs.file.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "bmp"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/bmp");
        this.$refs.file.value = "";
        return;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (ev) {
        self.$set(self.poppleData2, "studentStatusImg", ev.target.result);
      };
    },
    //身份证国徽面
    imgUpload2(int) {
      return new Promise((resolve, reject) => {
        this.$upload
          .upload(this.$refs.file2.files[0], int)
          .then((res) => {
            console.log(res);
            this.$set(this.poppleData1, "idCardImg2", res);
            resolve();
          })
          .catch((err) => {
            this.$message.error("图片上传错误");
          });
      });
    },
    getImgFile2() {
      console.log(2);
      var self = this;
      var file = this.$refs.file2.files[0];
      if (file === undefined) {
        self.$set(self.poppleData1, "idCardImg2", "");
        return;
      }
      if (file.size > 2 * 1024 * 1024) {
        this.$message.error("图片不得大于2MB");
        return;
      }
      var type = this.$refs.file2.value.toLowerCase().split(".").splice(-1);
      if (
        type[0] != "jpg" &&
        type[0] != "png" &&
        type[0] != "jpeg" &&
        type[0] != "bmp"
      ) {
        this.$message.error("上传格式需为：.jpg/.png/.jpeg/bmp");
        this.$refs.file2.value = "";
        return;
      }
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (ev) {
        self.$set(self.poppleData1, "idCardImg2", ev.target.result);
      };
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 50%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    margin-bottom: 6px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
</style>
