<template>
  <d2-container class="page" id="stdInfoModiy">
    <el-tabs value="first">
      <el-tab-pane label="考生信息修改申请" name="first">
        <div role="alert" v-if="stdInfoModifyApplyControl" style="padding-top: 0px;padding-bottom: 0px;margin-top: 0px;margin-bottom: 0px;" class="el-alert el-alert--warning" >
            <div class="el-alert__content" style="padding-top: 0px;padding-bottom: 0px;margin-top: 0px;margin-bottom: 0px;">
              <span class="el-alert__title" style="padding-top: 0px;padding-bottom: 0px;margin-top: 0px;margin-bottom: 0px;">{{stdInfoModifyApplyControl}}</span>
            </div>
          </div>

        <el-button type="primary" v-if="!stdInfoModifyApplyControl" @click="goApply()">申请</el-button>

         <el-table
            v-loading="loading"
            :data="applyList"
            style="width: 100%">
            <el-table-column
              prop="std_name"
              label="申请变更姓名"
              width="120">
            </el-table-column>
            <el-table-column
              prop="cert_no"
              label="申请变更证件号"
              width="160">
            </el-table-column>
            <el-table-column
              width="120"
              label="申请类型">
              <template slot-scope="scope">
                <!-- <div v-if="scope.row.modify_content == 1"> 
                    考生图像
                </div>
                <div v-if="scope.row.modify_content == 2"> 
                    考生姓名,证件号
                </div>
                <div v-if="scope.row.modify_content == 3"> 
                    考生图像,考生姓名,证件号
                </div> -->

                <div v-if="scope.row.modify_content == '1'"> 
                    姓名
                </div>
                <div v-if="scope.row.modify_content == '2'"> 
                    身份证号
                </div>
                <div v-if="scope.row.modify_content == '3'"> 
                    照片
                </div>
                <div v-if="scope.row.modify_content == '4'"> 
                    身份证号，照片
                </div>
                <div v-if="scope.row.modify_content == '5'"> 
                    身份证号，姓名
                </div>
                 <div v-if="scope.row.modify_content == '6'"> 
                    姓名，照片
                </div>
                </template>
            </el-table-column>
            <el-table-column
              prop="apply_time"
              width="100"
              label="申请时间">
            </el-table-column>
             <el-table-column
              prop="status_text"
              width="80"
              label="状态">
            </el-table-column>
            <el-table-column
              prop="verify_time1"
              label="初审时间">
            </el-table-column>
            <el-table-column
              prop="verify_remark1"
              label="初审备注">
            </el-table-column>
            <el-table-column
              prop="verify_time2"
              label="终审时间">
            </el-table-column>
            <el-table-column
              prop="verify_remark2"
              label="终审备注">
            </el-table-column>
             <el-table-column
                prop=""
                label="操作"
                fixed="right"
                width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.status == 0"> 
                      <el-button @click="goEdit(scope.row)">修改</el-button>
                    </div>
                    <div v-if="scope.row.status == 1"> 
                      <el-button @click="del(scope.row)">删除</el-button>
                    </div>
                </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 考生携带有关证件到就近市考办或主考学校，现场填写考生信息变更表。<br>
                  有关证明材料：<br>
                （1）更改身份证号，应提供身份证复印件，如果新身份证号的出生日期与原来不一致的，考生应提交公安部门证明。<br>
                （2）更改姓名信息的，应提供身份证复印件，并分三种情况另增加提交其他材料：<br>
                考生已经正式更改本人姓名的，要提交公安部门证明，或户口本姓名变更登记页复印件；<br>
                考生填错报名登记表的，或者网上报名后签字确认失误的，必须在参加当次考试前填报本表；超过期限的当次考试成绩无效。<br>
                当地自考办或农行网点录入姓名错误的，由录入员提交书面情况说明，交当地自考办负责人签字、盖章，报区招生考试院。<br>
                （3）更改相片的，应提供身份证复印件。<br>
                以上所有的复印件必须由当地自考办核验原件，在复印件写上“原件已核”并由核验人签名。

                </p>
                <p class="el-alert__description">
                  3 市考办或主考学校现场审核，上报考试院。
                </p>
                <p class="el-alert__description">
                  4 考试院审核通过后，考生信息修改生效。
                </p>
              </div>
           
          

          

           <el-dialog title="考生信息变更申请" width="800px" :visible.sync="applyDialogVisible">
            <el-form ref="itemForm" :model="item" :rules="itemRules" label-width="200px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="变更类型" prop="modify_content">
                    <div style="width:200px">
                       <el-select size="medium" v-model="item.modify_content" clearable placeholder="请选择变更内容" >
                          <el-option  label="姓名" value="1"></el-option>
                          <el-option  label="身份证号" value="2"></el-option>
                          <el-option  label="照片" value="3"></el-option>
                          <el-option  label="身份证号，照片" value="4"></el-option>
                          <el-option  label="身份证号，姓名" value="5"></el-option>
                          <el-option  label="姓名，照片" value="6"></el-option>
                      </el-select>
                    </div>
                  </el-form-item>

                  <el-form-item label="原考生姓名" prop="old_std_name">
                    <div style="width:200px">
                      <el-input size="medium" v-model="item.old_std_name" disabled readonly></el-input>
                    </div>
                  </el-form-item>
                  <el-form-item label="原考生身份证号" prop="old_cert_no">
                    <div style="width:200px">
                      <el-input size="medium" v-model="item.old_cert_no" disabled readonly></el-input>
                    </div>
                  </el-form-item>
                  <el-form-item label="准考证号" prop="old_ticket_no">
                    <div style="width:200px">
                      <el-input size="medium" v-model="item.old_ticket_no" disabled readonly></el-input>
                    </div>
                  </el-form-item>
          

                  <el-form-item label="变更姓名" prop="std_name" v-if="stdNameShow()">
                    <div style="width:200px">
                      <el-input size="medium" v-model="item.std_name"></el-input>
                    </div>
                  </el-form-item>

                  <el-form-item label="变更身份证号" prop="cert_no" v-if="certNoShow()">
                    <div style="width:200px">
                      <el-input size="medium" v-model="item.cert_no"></el-input>
                    </div>
                  </el-form-item>

                  <el-form-item :label="uploadLimitText()" prop="files" v-if="uploadShow()">
                    <el-upload
                        :http-request = "customUpload"
                        class="upload-demo"
                        ref="upload"
                        action=""
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-upload="beforeUpload"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="uploadLimit()"
                        :on-exceed="handleExceed"
                        :on-change="handleChange"
                        :auto-upload="false"
                        list-type="picture"
                        :file-list="fileList"
                        accept="image/jpeg,image/jpg,image/png" 

                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip" style="color:red">
                            说明： <br>
                            <span v-if="item.modify_content == '1' || item.modify_content == '2' || item.modify_content == '5'">
                                上传【身份证】原件照片，
                            </span>
                            <span v-if="item.modify_content == '3'">
                                上传【考生头像照片】原件照片，
                                <br>
                            对于【考生头像照片】，请先下载【<a href="https://www.gxeea.cn/app/zp-zk.exe" target="new">照片合规检查工具</a>】，对照片进行处理后，再上传处理后的照片。
                           <br>
                            <font color="red">操作说明，请参考【<a href="https://zk1.gxeea.cn:8001/ses-upload/info/广西自考系统照片合规检查-操作说明.docx" target="new">广西自考系统照片合规检查操作说明</a>】。
                </font> 
                            </span>
                            <span v-if="item.modify_content == '4' || item.modify_content == '6'">
                                请先上传【考生头像照片】，后上传【身份证】原件照片，<font style="font-size:15px;font-weight:600">注意按顺序上传!</font>
                           <br>
                            对于【考生头像照片】，请先下载【<a href="https://www.gxeea.cn/app/zp-zk.exe" target="new">照片合规检查工具</a>】，对照片进行处理后，再上传处理后的照片。
                           <br>
                            <font color="red">操作说明，请参考【<a href="https://zk1.gxeea.cn:8001/ses-upload/info/广西自考系统照片合规-检查操作说明.docx" target="new">广西自考系统照片合规检查操作说明</a>】。
                </font> 
                            </span>
                            <br>只能上传jpg/jpeg/png文件，且不超过2MB
                        </div>
                    </el-upload>
                  </el-form-item>

                 <el-form-item label="备注" prop="modify_remark">
                   <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"
                      maxlength="100"
                      v-model="item.modify_remark">
                    </el-input>
                 </el-form-item>
                </el-col>
              </el-row>
            
            </el-form>
          
            <center>
              <br>
              <el-button type="primary" @click="submit()">提交</el-button> &nbsp; &nbsp; <el-button type="primary" @click="applyDialogVisible=false">关闭</el-button>
            </center>

        </el-dialog>

      </el-tab-pane>


    </el-tabs>

    
  </d2-container>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  computed: {
    ...mapState({
      StdReg: state => state.enrol.StdReg
    })
  },
  async mounted() {
    this.loading = true;
    this.init();
    this.loading = false;
  },
  data() {
    return {
      loading: false,
      applyList: [],
      applyDialogVisible: false,
      stdInfoModifyApplyControl: null,
      item: {
        std_name: "",
        cert_no: "",
        ticket_no: "",
        modify_content: "",
        face_file_path: "",
        cert_file_path: "",
        modify_remark: ""
      },
      itemRules: {
        old_std_name: [
          { required: true, message: "请填写原考生姓名", trigger: "blur" }
        ],
        //old_cert_no: [
        //  { required: true, message: "请填写原证件号", trigger: "blur" }
        //],
        old_ticket_no: [
          { required: true, message: "请原准考证号", trigger: "blur" }
        ],

        std_name: [{}],
        cert_no: [{}],
        ticket_no: [{}],

        files: [{}],
        modify_remark: [{}],
        modify_content: [
          { required: true, message: "请选择变更内容", trigger: "blur" }
        ]
      },
      fileList: [],
      uploaded: false
    };
  },
  methods: {
    stdNameShow() {
      let rtnBoolean = false;

      let modify_content = this.item.modify_content;
      if (modify_content == "1" || modify_content == "5" || modify_content == "6") {
        rtnBoolean = true;
      }
      return rtnBoolean;
    },
    certNoShow(){
      let rtnBoolean = false;
      let modify_content = this.item.modify_content;
      if (modify_content == "2" || modify_content == "4" || modify_content == "5") {
        rtnBoolean = true;
      }
      return rtnBoolean;
    },
    uploadShow(){
      // let rtnBoolean = false;
      // let modify_content = this.item.modify_content;
      // if (modify_content == "3" || modify_content == "4") {
      //   rtnBoolean = true;
      // }
      // return rtnBoolean;
      return true;
    },
    uploadLimit() {
      let modify_content = this.item.modify_content;
      if (modify_content == "4" || modify_content == "6") {
        return 2;
      } else {
        return 1;
      }
    },
    uploadLimitText() {
      return `附件(${this.uploadLimit()}张)`;
    },
    async init() {
      let res = await this.$http.post(
        "/std/stdInfoModifyApply/listByStd.htm",
        {},
        this.$http.headers.FORM
      );
      this.applyList = res.data.map.applyList;
      this.stdInfoModifyApplyControl =  res.data.map.stdInfoModifyApplyControl;
    },

    async goApply() {
      this.applyDialogVisible = true;
      this.item.old_std_name = this.StdReg.std_name;
      this.item.old_cert_no = this.StdReg.cert_no;
      this.item.old_ticket_no = this.StdReg.ticket_no;
    },

    async del(item){
      this.loading = true;
      let { data } = await this.$http.post(
        "std/stdInfoModifyApply/delete.htm",
        this.Qs.stringify({ ids: item.id }),
        this.$http.headers.FORM
      );
      if (data.success) {
        this.alert("删除成功!");
        this.init();
      }else {
        this.alert(data.errorMsg);
      }
      this.loading = false;
    },

    async goEdit(item) {
      this.loading = true;
      let { data } = await this.$http.post(
        "std/stdInfoModifyApply/gpEdit.htm",
        this.Qs.stringify({ id: item.id }),
        this.$http.headers.FORM
      );
      if (data.success) {

        // data.map.apply.face_file_path =
        //   data.map.url + data.map.apply.face_file_path;
        // data.map.apply.cert_file_path =
        //   data.map.url + data.map.apply.cert_file_path;

        this.item = data.map.apply;
        //旧用户信息初始化
        this.item.old_std_name = this.StdReg.std_name;
        this.item.old_cert_no = this.StdReg.cert_no;
        this.item.old_ticket_no = this.StdReg.ticket_no;

        this.item.modify_content = String(this.item.modify_content);

        //图片信息初始化
        this.fileList = [];
        if(this.item.face_file_path)
          this.fileList.push({name:`考生头像照片`,url:`${window.uploadServerUrl}${this.item.face_file_path}`});
        if(this.item.cert_file_path)
          this.fileList.push({name:`身份证件照片`,url:`${window.uploadServerUrl}${this.item.cert_file_path}`});

        this.loading = false;
        this.$nextTick(() => {
          this.applyDialogVisible = true;
        });
      } else {
        this.loading = false;
        this.alert(data.errorMsg);
      }
    },

    async submit() {
      if(this.item.std_name)
        this.item.std_name = this.item.std_name.trim();
      if(this.item.cert_no)
        this.item.cert_no = this.item.cert_no.trim();

      let modify_content = this.item.modify_content;
      //姓名
      if(modify_content == '1' || modify_content == '5'|| modify_content == '6'){
        //非空验证
        if(!this.item.std_name){
          this.alert("变更姓名不能为空!");
          return;
        }
        //姓名是否变更
        else if(this.item.std_name == this.item.old_std_name){
          this.alert("变更姓名和原姓名相同!");
          return;
        }
        
      }

      if(modify_content == '2' || modify_content == '4' || modify_content == '5'){
        if(!this.item.cert_no){
          this.alert("变更身份证号不能为空!");
          return;
        }else if(this.item.cert_no == this.item.old_cert_no){
          this.alert("变更身份证号和原身份证号相同!");
          return;
        }else if(this.item.cert_no.trim().length != 18){
          this.alert("变更证件号必须为18位!");
          return;
        }
   
        
      }
      
      if(this.uploadNeed){
        this.$refs.upload.submit();
      }else{
        if ((this.item.modify_content =='3'  || this.item.modify_content =='4'|| this.item.modify_content =='6') && !this.item.face_file_path) {
            this.alert("请上传图像文件");
            return;
        }

        if ( !this.item.cert_file_path) {
            this.alert("请上传身份证照片");
            return;
        }
        this.saveData();
      }
     
    },

    async saveData(){
      var cloneItem = JSON.parse(JSON.stringify(this.item));
      //   delete cloneItem['files'];
      let { data } = await this.$http.post(
        "std/stdInfoModifyApply/apply.htm",
        this.Qs.stringify(cloneItem),
        this.$http.headers.FORM
      );
      if (data.success) {
        this.alert("提交成功,请考生携带相关证件，到就近市考办或者助学机构进行现场审核");
        this.init();
        this.$nextTick(() => {
          this.applyDialogVisible = false;
        });
      } else {
        this.alert(data.errorMsg);
      }
    },

    customUpload(file) {
      let modify_content = this.item.modify_content;
      //  if ((this.item.modify_content =='3'  || this.item.modify_content =='4') && !this.item.face_file_path) {
      //       this.alert("请上传图像文件");
      //       return;
      //   }

      //   if ( !this.item.cert_file_path) {
      //       this.alert("请上传身份证照片");
      //       return;
      //   }
      let this_ = this;
      this.$refs["itemForm"].validate(valid => {
        if (valid) {
          this.fileUpload(file).then(response => {
            //上传成功提交表单
            if (response.data.success) {
              let filePath = response.data.entity;
              for (let i = 0; i < this_.files.length; i++) {
                const element = this_.files[i];
                if (element.uid == file.file.uid) {
                  if(modify_content =='3'|| modify_content =='4'|| modify_content =='6'){
                    if (i == 0) {
                      this_.item.face_file_path = filePath;
                    } else if (i == 1) {
                      this_.item.cert_file_path = filePath;
                    }
                  }else{
                    if (i == 0) {
                      this_.item.cert_file_path = filePath;
                    }
                  }
                  //最后一个图片
                  if (this_.files.length == i + 1) {
                    this_.uploaded = true;
                    setTimeout(() => {
                      this_.saveData(filePath);
                    }, 500);
                  }
                }
              }
            } else {
              this.alert(response.data.errorMsg);
            }
          });
          return true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    fileUpload(fileobj) {
      let param = new FormData();
      param.append("file", fileobj.file);
      return this.$http.request({
        method: "post",
        url: "std/stdInfoModifyApply/upload.htm",
        headers: { "Content-Type": "multipart/form-data" },
        data: param
      });
    },
    handleRemove(file, fileList) {
      if (fileList.length == 0) {
        this.files = null;
      }
      this.fileList = [];
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
       let modify_content = this.item.modify_content;
       let uploadCount = 0;
        if (modify_content == "4" || modify_content == "6") {
          uploadCount = 2;
        } else {
          uploadCount = 1;
        }


      this.$message.warning(
        `当前限制选择 ${uploadCount} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeUpload(file, fileList) {
      const isJPEG = file.type === "image/jpeg";
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isJPEG && !isPNG) {
        this.alert("上传图片必须是JPG/JPEG/PNG/格式!");
      }
      if (!isLt2M) {
        this.alert("上传图片大小不能超过 2MB!");
      }
      return (isJPG || isJPEG || isPNG) && isLt2M;
    },
    beforeRemove(file, fileList) {},
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.files = fileList;
        this.uploadNeed = true;
      } else {
        this.files = [];
        this.uploadNeed = false;
      }
    }
  }
};
</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;
      }
    }
  }
}
</style>
