<template>
  <d2-container class="page" id="certififcate">
    <el-tabs value="first">
      <el-tab-pane label="毕业证明书申请" name="first">
        <div style="margin-bottom: 8px; border-left: 3px solid; color: rgb(230, 162, 60);">
          <div role="alert" class="el-alert el-alert--warning" v-if="timeLimit">
            <div class="el-alert__content">
              <span
                class="el-alert__title"
              >毕业证明书在线申请时间：<font style="color:red;">{{timeLimit.certificate_start_time}} 到 {{timeLimit.certificate_end_time}}</font></span>
              <br>
              <div class="el-alert__title" v-if="ByCertificateControl" v-html="ByCertificateControl"></div>                
            </div>
          </div>
        </div>
        <!-- <div v-if="canApply"> -->
        <div v-if="canApply">
          <el-button type="primary" @click="goApply()">申请</el-button>
        </div>
        <el-table v-loading="loading" :data="applyList" style="width: 100%">
          <el-table-column prop="diaplma_no" label="毕业证书号" width="180"></el-table-column>
          <el-table-column prop="std_name" label="姓名" width="100"></el-table-column>
          <el-table-column prop="cert_no" label="证件号" width="160">
            <template slot-scope="scope">{{scope.row.cert_no? scope.row.cert_no.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2"):""}}</template>
          </el-table-column>
          <el-table-column prop="ticket_no" label="准考证号" width="120"></el-table-column>
          <el-table-column label="专业名称" width="180">
            <template slot-scope="scope">{{scope.row.major_name}}</template>
          </el-table-column>
          <el-table-column label="主考学校" width="180">
            <template slot-scope="scope">{{scope.row.school_name}}</template>
          </el-table-column>
           <el-table-column label="毕业时间" width="100">
            <template slot-scope="scope">{{scope.row.by_date}}</template>
          </el-table-column>
          <!-- <el-table-column label="受理单位" width="100">
            <template slot-scope="scope">{{scope.row.org_code}}-{{scope.row.org_name}}</template>
          </el-table-column>-->
          <!-- <el-table-column label="考生来源" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.std_source == 1">社会考生</div>
              <div v-if="scope.row.std_source == 3">助学考生</div>
            </template>
          </el-table-column>-->
          <el-table-column label="审核状态" width="130">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0">审核不通过</div>
              <div v-if="scope.row.status == 1">待现场审核</div>
              <div v-if="scope.row.status == 2">待考试院审核</div>
              <div v-if="scope.row.status == 3">审核通过</div>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="审核意见" width="160"></el-table-column>
          <el-table-column label="操作" fixed="right" width="280">
            <template slot-scope="scope" v-if="scope.row.status==0&&!scope.row.pro_id">
              <el-button @click="doReApply(scope.row)">重新申请</el-button>
              <el-button @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="el-alert__content" style="padding-top:10px">
          <span class="el-alert__title">毕业证明书申请步骤：</span>
          <p class="el-alert__description">1 已毕业考生在此页面填写毕业证明书申请。</p>
          <p class="el-alert__description">2 受理单位审核，区考试院审核后打印。</p>
          <p class="el-alert__description">3 2004年之前的考生,可能需要提交毕业相片。</p>
        </div>

        <el-dialog width="1100px" title="毕业证明书申请" :visible.sync="byDialogVisible">
          <el-row>
            <el-col :span="24">
              <!-- <el-table v-loading="loading" :data="byList" @current-change="handleSelectionChange">
               <el-table-column label="操作" width="55">
                  <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.checked"></el-checkbox>
                  </template>
              </el-table-column>-->
              <el-table v-loading="loading" :data="byList">
                <el-table-column prop="diaplma_no" label="毕业证书号" width="160"></el-table-column>
                <el-table-column prop="ticket_no" label="准考证" width="120"></el-table-column>
                <el-table-column prop="major_name" label="专业名称" width="260"></el-table-column>
                <el-table-column prop="major_level" label="专业层次" width="80"></el-table-column>
                <el-table-column prop="school_name" label="主考院校" width="150"></el-table-column>
                <el-table-column prop="by_date" label="毕业时间" width="100"></el-table-column>

                <el-table-column label="操作" width="160">
                  <template slot-scope="scope">
                    <!-- <el-button
                      @click="toUploadByImg(scope.row)"
                      v-if="needUpload(scope.row)"
                    >上传毕业照片并申请毕业证明书</el-button>
                    <el-button @click="doApply(scope.row)" v-if="!needUpload(scope.row)">申请毕业证明书</el-button>-->
                    <el-button @click="showApply(scope.row)">申请毕业证明书</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <!-- <el-button
            type="primary"
            @click="byDialogVisible=false;idisabled=false;byManuyVisible=true"
          >手动输入</el-button> 
          <el-button type="alert" style="margin-top:10px;" @click="byDialogVisible=false;">关闭</el-button>
        -->
        </el-dialog>
        <!-- 手工输入  -->
        <el-dialog width="900px" title="毕业证明书申请" :visible.sync="byManuyVisible">
          <el-row>
            <el-col :span="16">
              <el-form
                ref="byInfo"
                :model="byInfo"
                :rules="byInfoRule"
                label-width="120px"
                size="mini"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="证件号" prop="cert_no">
                      <el-input
                        size="mini"
                        v-bind:disabled="idisabled"
                        clearable
                        v-model="byInfo.cert_no"
                        maxlength="20"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="姓名" prop="std_name">
                      <el-input
                        size="mini"
                        v-bind:disabled="idisabled"
                        clearable
                        v-model="byInfo.std_name"
                        maxlength="111"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="准考证号">
                      <el-input
                        size="mini"
                        v-bind:disabled="idisabled"
                        clearable
                        v-model="byInfo.ticket_no"
                        maxlength="13"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="报考专业层次" prop="major_level">
                      <el-select
                        size="mini"
                        v-model="byInfo.major_level"
                        filterable
                        clearable
                        placeholder="请选择专业层次"
                        v-bind:disabled="idisabled"
                      >
                        <!-- <el-option
                          v-for="(item,index) in majorLevelArray"
                          :key="index"
                          :label="item.dict_value+' | '+item.dict_text"
                          :value="item.dict_value"
                        ></el-option>-->
                        <el-option value label="请选择"></el-option>
                        <el-option value="0" label="专科"></el-option>
                        <el-option value="1" label="本科"></el-option>
                        <el-option value="2" label="中等教育"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="报考专业" prop="major">
                      <el-input
                        size="mini"
                        v-bind:disabled="idisabled"
                        clearable
                        v-model="byInfo.major"
                        maxlength="150"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="主考院校" prop="school">
                      <el-input size="mini"  v-bind:disabled="idisabled" clearable v-model="byInfo.school" maxlength="150"></el-input>
                      <!-- <el-autocomplete
                        size="mini"
                        style=" width: 100%;"
                        v-model="byInfo.school"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入内容"
                        @select="handleSelect"
                        v-bind:disabled="idisabled"
                      >
                        <template slot-scope="{ item }">
                          <div class="org_name">{{ item.org_name }}</div>
                        </template>
                      </el-autocomplete> -->
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="毕业证书号" prop="diaplma_no">
                      <el-input
                        size="mini"
                        v-bind:disabled="idisabled"
                        clearable
                        v-model="byInfo.diaplma_no"
                        maxlength="20"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="毕业时间" prop="by_date">
                      <el-date-picker
                        size="mini"
                        value-format="yyyy-MM-dd"
                        type="date"
                        v-model="byInfo.by_date"
                        placeholder="选择毕业时间"
                        style="width: 100%;"
                        v-bind:disabled="idisabled"
                        :picker-options="pickerOptions1"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="联系方式" prop="phone">
                      <el-input size="mini" clearable v-model="byInfo.phone" maxlength="11"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="申请理由" prop="reason">
                      <el-input size="mini" clearable type="textarea"  v-model="byInfo.reason" maxlength="200"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
          </el-row>
          <el-button type="primary" @click="validateForm()">提交</el-button>
          <el-button type="alert" @click="byManuyVisible=false;">关闭</el-button>
        </el-dialog>
        <!-- 考生图片上传  -->
        <el-dialog
          id="imgUploadDiv"
          title="图片上传"
          :visible.sync="imgUploadDialogVisible"
          width="1200px"
          height="600px"
          center
        >
          <span>
            <el-row>
              <el-col
                :span="6"
                class="tip"
                style="margin:0px !important;height: 490px;font-size: 15px;"
              >
                <font style="font-weight:600">考生注意：</font>
                <font color="red">本照毕业证明书照片，最好使用毕业证一致照片,或者学信网的毕业照片。</font>
                <br />
                <font style="font-weight:600">位置要求：</font>高度，头上空1/10，头部占7/10，宽度；肩部占1/5，左右各空1/10
                <br />
                <font style="font-weight:600">背景要求：</font>蓝底或白底
                <br />
                <font style="font-weight:600">文件格式：</font>jpg格式
                <br />
                <font style="font-weight:600">像素要求：</font>288*384，300DPI，文件最大不超过1MB
                <br />
                <font style="font-weight:600">形象要求：</font>免冠证件照，着有领衣服，表情评和，正面直视，衣着整洁。
                <br />
                <font style="font-weight:600;">上传限制：</font>
                <font color="red">照片上传后，不允许再修改，请慎重点击上传图片。</font>
                <br />
              </el-col>
              <el-col :span="9">
                <center>
                  <vueCropper
                    ref="cropper"
                    :img="option.img"
                    :outputSize="option.size"
                    :outputType="option.outputType"
                    :info="false"
                    :full="option.full"
                    :canMove="option.canMove"
                    :canMoveBox="option.canMoveBox"
                    :canScale="option.canScale"
                    :fixedBox="option.fixedBox"
                    :original="option.original"
                    :autoCrop="option.autoCrop"
                    :autoCropWidth="option.autoCropWidth"
                    :autoCropHeight="option.autoCropHeight"
                    :centerBox="option.centerBox"
                    :high="option.high"
                    :infoTrue="option.infoTrue"
                    @realTime="realTime"
                    @imgLoad="imgLoad"
                    @cropMoving="cropMoving"
                    :enlarge="option.enlarge"
                  ></vueCropper>

                  <div style="margin-top:5px">
                    <el-button icon="el-icon-refresh" size="mini" @click="refreshCrop"></el-button>
                    <el-button icon="el-icon-download" size="mini" @click="down('blob')"></el-button>

                    <el-button icon="el-icon-zoom-in" size="mini" @click="changeScale(1)"></el-button>
                    <el-button icon="el-icon-zoom-out" size="mini" @click="changeScale(-1)"></el-button>
                    <el-button icon="fa fa-rotate-left" size="mini" @click="rotateLeft"></el-button>
                    <el-button icon="fa fa-rotate-right" size="mini" @click="rotateRight"></el-button>
                  </div>
                </center>
              </el-col>
              <el-col :span="9">
                <center>
                  <div
                    class="show-preview"
                    :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',}"
                  >
                    <div :style="previews.div">
                      <img :src="previews.url" :style="previews.img" />
                    </div>
                  </div>
                </center>
              </el-col>
            </el-row>
          </span>

          <span slot="footer" class="dialog-footer">
            <!-- image/png, image/jpeg, image/gif,  -->
            <input
              type="file"
              id="uploads"
              ref="uploadBtn"
              :value="imgFile"
              style="position:absolute; clip:rect(0 0 0 0);"
              accept="image/jpg"
              @change="uploadImg($event, 1)"
            />
            <el-button size="mini" @click="chooseFile()">选择本地图片</el-button>
            <el-button size="mini" type="primary" @click="finishUpload('blob')">上传毕业照片并申请毕业证明书</el-button>
            <el-button size="mini" @click="imgUploadDialogVisible = false">取消</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
    </el-tabs>
  </d2-container>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { VueCropper } from "vue-cropper";
import { log } from "util";

export default {
  components: { VueCropper },
  computed: {},
  async mounted() {
    this.loading = true;
    this.init();
    this.loading = false;
  },
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      byInfo: {
        std_name: "",
        cert_no: "",
        //std_source: "",
        school: "",
        major: "",
        major_level: "",
        ticket_no: "",
        diaplma_no: "",
        by_date: null,
        phone: "",
        reason: ""
      },
      byInfoRule: {
        cert_no: [{ required: true, message: "请输入证件号", trigger: "blur" }],
        std_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        diaplma_no: [
          { required: true, message: "请输入毕业证书号", trigger: "blur" }
        ],
        diaplma_no: [
          { required: true, message: "请输入毕业证书号", trigger: "blur" }
        ],
        // std_source: [
        //   { required: true, message: "请输入考生来源", trigger: "blur" }
        // ],
        major_level: [
          { required: true, message: "请输入专业层次", trigger: "blur" }
        ],
        major: [{ required: true, message: "请选择专业", trigger: "blur" }],
        school: [
          { required: true, message: "请输入主考院校", trigger: "blur" }
        ],
        by_date: [
          { required: true, message: "请输入毕业时间", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入联系手机号", trigger: "blur" }
        ],
        reason: [{ required: true, message: "请输入申请理由", trigger: "blur" }]
      },
      canApply: false,
      timeLimit: null,
      ByCertificateControl: null,
      imgUploadDialogVisible: false,
      byDialogVisible: false,
      byManuyVisible: false,
      loading: false,
      applyList: [],
      byList: [],
      crap: false,
      previews: {},
      reApply: false,
      option: {
        img: "",
        size: 0.9, //压缩质量
        full: false,
        outputType: "jpg",
        canMove: true,
        fixedBox: true,
        original: true,
        canMoveBox: true,
        canScale: true,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 320, //288 % 0.9 = 288
        autoCropHeight: 426.7, //384 % 0.9 = 384
        centerBox: false,
        high: true,
        cropData: {},
        enlarge: 0.9, //值为1时有bug
        infoTrue: false
      },
      imgFile: "",
      currentRow: {},
      restaurants: [],
      idisabled: false,
      needPhoto: true
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.org_name
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      this.byInfo.school = item.org_name;
    },
    // handleSelectionChange(row) {
    //   this.byList.forEach(item => {
    //     if (item.id !== row.id) {
    //       item.checked = false;
    //     }
    //   });
    //   if (row) {
    //     this.byInfo.school = row.school_name.split("-")[1];
    //     this.byInfo.major = row.major_name.split("-")[1];
    //     this.byInfo.diaplma_no = row.diaplma_no;
    //     this.byInfo.by_date = row.apply_date.split(" ")[0];
    //     this.byInfo.major_level = row.major_level == "本科" ? 1 : 0;
    //   }
    // },

    validateForm() {
      this.$refs["byInfo"].validate(valid => {
        if (valid) {
          if (this.needPhoto) {
            this.currentRow = this.byInfo;
            this.imgUploadDialogVisible = true;
            this.$forceUpdate();
            return true;
          } else {
            this.doApply(this.ccurrentRow);
          }
        } else {
          //console.log("error submit!!");
          return false;
        }
      });
    },
    needUpload(row) {
      return (
        // 200以前毕业或者考生和毕业表没有照片时，需要上传照片
        parseInt(row.apply_date.substr(0, 4)) <= 2004 ||
        (!row.by_photo && !row.uploadAready)
      );
    },
    //初始化列表查询
    async init() {
      let res = await this.$http.post(
        "/by/byCertificate/page.htm",
        {},
        this.$http.headers.FORM
      );
      this.canApply = res.data.map.canApply;
      this.timeLimit = res.data.map.byTimeConfig;
      this.applyList = res.data.map.applyList.records;

      this.ByCertificateControl = res.data.map.ByCertificateControl;
      
      //this.byInfo = res.data.map.StdRegInfo;
      this.byInfo.std_name = res.data.map.StdRegInfo.std_name;
      this.byInfo.cert_no = res.data.map.StdRegInfo.cert_no;
      this.byInfo.ticket_no = res.data.map.StdRegInfo.ticket_no;
      let dict = res.data.map.dictData;
      this.restaurants = dict["orgArray"];
    },
    async goApply() {
      this.byList = [];
      let tempBylist = [];
      let res = await this.$http.post(
        "/by/byApply/getAll.htm",
        {},
        this.$http.headers.FORM
      );
      res.data.map.applyList.forEach(element => {
        if (element.status == 3 || element.status == 5) {
          tempBylist.push(element);
        }
      });
      this.byList = this.newArr(tempBylist);
      if (this.byList.length > 0) {
        this.byDialogVisible = true;
      } else {
        this.byManuyVisible = true;
      }
    },
    newArr(arr) {
      // for (var i = 0; i < arr.length; i++) {
      // 	for (var j = i + 1; j < arr.length; j++) {
      // 		if (arr[i].diaplma_no == arr[j].diaplma_no) {
      // 			//如果第一个等于第二个，splice方法删除第二个
      // 			arr.splice(j, 1);
      // 			j--;
      // 		}
      // 	}
      // }
      return arr;
    },
    async del(item) {
      this.$confirm("确定删除申请", "信息提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let { data } = await this.$http.post(
            "/by/byCertificate/delete.htm",
            this.Qs.stringify({ ids: item.id })
          );
          if (data.success) {
            this.alert("删除成功", "信息提示");
          } else {
            this.alert(data.errorMsg, "信息提示");
          }
          this.init();
        })
        .catch(() => {});
    },
    async doApply(row) {
      let formData = {
        // app_id: row.id,
        // std_id: row.std_id,
        // by_photo: row.by_photo,
        exam_time_id: this.timeLimit.exam_time_id
      };
      formData = Object.assign(formData, this.byInfo);

      let res = await this.$http.post(
        "/by/byCertificate/add.htm",
        this.Qs.stringify(formData),
        this.$http.headers.FORM
      );
      if (!res.data.success) {
        this.alert(res.data.errorMsg);
      } else {
        await this.init();
        this.$nextTick(() => {
          this.alert("申请成功!");
          this.byDialogVisible = false;
          this.byManuyVisible = false;
        });
      }
    },
    doReApply(row) {
      if (row) {
        this.byInfo.id = row.id;
        this.byInfo.std_id = row.std_id;
        this.byInfo.std_name = row.std_name;
        this.byInfo.cert_no = row.cert_no;
        this.byInfo.ticket_no = row.ticket_no;
        this.byInfo.school = row.school_name;
        this.byInfo.major = row.major_name;
        this.byInfo.diaplma_no = row.diaplma_no;
        this.byInfo.by_date = row.by_date;
        this.byInfo.major_level = row.major_level+"";
        this.idisabled = false;
        this.byManuyVisible = true;
      }
    },
    showApply(row) {
      this.idisabled = true;
      // this.imgUploadDialogVisible = true;
      this.needPhoto = this.needUpload(row);
      this.byManuyVisible = true;
      this.byDialogVisible = false;
      this.currentRow = row;
      if (row) {
        this.byInfo.app_id = row.id;
        this.byInfo.std_id = row.std_id;
        this.byInfo.std_source = row.std_source;
        this.byInfo.school_id = row.school_id;
        this.byInfo.by_photo = row.by_photo;
        this.byInfo.by_photo_path = row.by_photo_path;
        this.byInfo.by_photo_id = row.by_photo_id;
        this.byInfo.school = row.school_name.split("-")[1];
        this.byInfo.major = row.major_name.split("-")[1];
        this.byInfo.diaplma_no = row.diaplma_no;
        this.byInfo.by_date = row.by_date?row.by_date.split(" ")[0]:null;
        this.byInfo.major_level = row.major_level == "本科" ? 1+"" : 0+"";
      }
      this.$forceUpdate();
    },
    // toUploadImgReapply(row) {
    //   this.imgUploadDialogVisible = true;
    //   this.currentRow = row;
    //   this.reApply = true;
    //   this.$forceUpdate();
    // },
    // 图片操作--------------------------------
    chooseFile() {
      this.$refs["uploadBtn"].click();
    },
    changeImg() {
      this.option.img = this.lists[~~(Math.random() * this.lists.length)].img;
    },
    startCrop() {
      // start
      this.crap = true;
      this.$refs.cropper.startCrop();
    },
    stopCrop() {
      //  stop
      this.crap = false;
      this.$refs.cropper.stopCrop();
    },
    clearCrop() {
      // clear
      this.$refs.cropper.clearCrop();
    },
    refreshCrop() {
      // clear
      this.$refs.cropper.refresh();
    },
    changeScale(num) {
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    rotateLeft() {
      this.$refs.cropper.rotateLeft();
    },
    rotateRight() {
      this.$refs.cropper.rotateRight();
    }, //下载图片
    down(type) {
      console.log("down");
      var aLink = document.createElement("a");
      aLink.download = "author-img";
      if (type === "blob") {
        this.$refs.cropper.getCropBlob(data => {
          this.downImg = window.URL.createObjectURL(data);
          aLink.href = window.URL.createObjectURL(data);
          aLink.click();
        });
      } else {
        this.$refs.cropper.getCropData(data => {
          this.downImg = data;
          aLink.href = data;
          aLink.click();
        });
      }
    },
    finish(type) {
      // 输出
      // var test = window.open('about:blank')
      // test.document.body.innerHTML = '图片生成中..'
      if (type === "blob") {
        this.$refs.cropper.getCropBlob(data => {
          var img = window.URL.createObjectURL(data);
          this.model = true;
          this.modelSrc = img;
        });
      } else {
        this.$refs.cropper.getCropData(data => {
          this.model = true;
          this.modelSrc = data;
        });
      }
    },
    //上传图片到剪切板
    uploadImg(e, num) {
      console.log("uploadImg");
      let _this = this;
      //上传图片
      let file = e.target.files[0];
      _this.fileName = file.name;
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        this.alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种", "信息提示");
        return false;
      }
      let reader = new FileReader();
      reader.onload = e => {
        let data;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        if (num === 1) {
          _this.option.img = data;
        } else if (num === 2) {
          _this.example2.img = data;
        }
      };
      // 转化为base64
      // reader.readAsDataURL(file)
      // 转化为blob
      reader.readAsArrayBuffer(file);
    },
    // 实时预览函数
    realTime(data) {
      var previews = data;
      var h = 0.5;
      var w = 0.2;

      this.previewStyle1 = {
        width: previews.w + "px",
        height: previews.h + "px",
        overflow: "hidden",
        margin: "0",
        zoom: h
      };

      this.previewStyle2 = {
        width: previews.w + "px",
        height: previews.h + "px",
        overflow: "hidden",
        margin: "0",
        zoom: w
      };
      if (data.url) {
        // data.img['position'] = 'absolute';
        data.img["left"] = "490px";
      }

      data.img["margin-right"] = "29px";
      this.previews = data;
    },
    cropMoving(data) {
      this.option.cropData = data;
    },
    imgLoad(msg) {
      console.log(msg);
    },
    //剪裁图片完成上传
    finishUpload(type) {
      console.log("finish");
      let _this = this;
      let formData = new FormData();
      // 输出
      if (!this.$refs.cropper.imgs) {
        this.alert("请选择图片再上传");
        return;
      }
      if (type === "blob") {
        this.$refs.cropper.getCropBlob(data => {
          let loading = this.showLoading();
          let img = window.URL.createObjectURL(data);
          _this.model = true;
          _this.modelSrc = img;
          formData.append("file", data, _this.fileName);
          _this.$http
            .post(`/by/byCertificate/upload.htm`, formData, {
              contentType: false,
              processData: false,
              headers: { "Content-Type": "application/x-www-form-urlencoded" }
            })
            .then(res => {
              _this.hideLoading(loading);

              if (res.data.success) {
                _this.currentRow.by_photo = res.data.map.file_path;
                _this.currentRow.uploadAready = true;
                
                 _this.currentRow.by_photo_path = res.data.map.by_photo_path;
                 _this.currentRow.by_photo_id = res.data.map.by_photo_id;
               

                if (_this.reApply) {
                  _this.doReApply(_this.currentRow);
                } else {
                  _this.doApply(_this.currentRow);
                }
                _this.byManuyVisible = false;
                _this.imgUploadDialogVisible = false;
                // _this.$message({
                //   type: "success",
                //   message: "上传成功"
                // });
              } else {
            
                _this.alert(res.data.errorMsg, "信息提示");
              }
            });
        });
      } else {
        this.$refs.cropper.getCropData(data => {
          this.model = true;
          this.modelSrc = data;
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/public.scss";

.page {
  .page__btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 20px;

    span {
      color: $color-text-sub;

      &:hover {
        color: $color-text-main;
      }
    }
  }
}

#imgUploadDiv {
  .vue-cropper {
    height: 490px;
    width: 400px;
  }
  .el-dialog {
    width: 500px;
    // height: 395px;
  }
  .show-preview {
    border: 1px solid #6fb8ff;
  }
  .el-dialog__body {
    padding-top: 5px !important;
    padding-bottom: 0px !important;
  }
}
</style>
