<template>
  <sail-page type="applyUpload" title="申请入住(证件上传)" isHead>
    <div slot="content">
        <statusModal type="apply" title="申请入住" isButton isHead desc="提交成功" @jumpCallback="jumpCallback" btxt="查看申请">
           <div slot="up-content">
              <p>提交申请成功后，我们会在7个工作日内进行审核 并联系您，请您耐心等待。 </p>
              <p>如有疑问，请致电 {{telephone}} </p>
           </div>
           <div slot="down-content">
              <!-- <p>订单编号：29389173918273 </p>
              <p>报名人数：2人 金额：200.00元</p> -->
           </div>
        </statusModal>
        <div class="apply-upload-wrapper">
            <div class="upload-part">
               <p class="upload-part__title">
                  <span>身份证正反面：</span>
                  <svg @click="alertSampleImg(1)" class="icon icon-help" aria-hidden="true">
                      <use xlink:href="#icon-bangzhu"/>
                  </svg>
               </p>
               <div class="upload-pane">
                  <div class="upload-item item-space img_positive_test">
                     <UploadImg imgType="2" @updateFiles="positiveUpdateFiles"/>
                  </div>
                  <div class="upload-item img_revetive_test">
                     <UploadImg imgType="2" @updateFiles="reverseUpdateFiles"/>
                  </div>
               </div>
            </div>
            <div class="upload-part" v-if="applyInfo.marryStatus === 1">
               <p class="upload-part__title">
                  <span>配偶身份证正反面：</span>
                  <svg @click="alertSampleImg(1)" class="icon icon-help" aria-hidden="true">
                      <use xlink:href="#icon-bangzhu"/>
                  </svg>
               </p>
               <div class="upload-pane">
                  <div class="upload-item item-space img_positive_test">
                     <UploadImg imgType="11" @updateFiles="spousePositiveUpdateFiles"/>
                  </div>
                  <div class="upload-item img_revetive_test">
                     <UploadImg imgType="11" @updateFiles="spouseReverseUpdateFiles"/>
                  </div>
               </div>
            </div>
            <div class="upload-part" v-if="applyInfo.marryStatus === 1">
               <p class="upload-part__title">
               <span>结婚证：</span>
                  <svg @click="alertSampleImg(5)" class="icon icon-help" aria-hidden="true">
                      <use xlink:href="#icon-bangzhu"/>
                  </svg></p>
               <div class="upload-pane">
                  <div class="upload-item item-space">
                     <UploadImg imgType="12" @updateFiles="marryCardUpdateFiles"/>
                  </div>
               </div>
            </div>
            <div class="upload-part">
               <p class="upload-part__title">
                  <span>毕业证书：</span>
                  <svg @click="alertSampleImg(2)" class="icon icon-help" aria-hidden="true">
                      <use xlink:href="#icon-bangzhu"/>
                  </svg>
                </p>
               <div class="upload-pane">
                  <div class="upload-item item-space">
                     <UploadImg imgType="7" @updateFiles="graduationUpdateFiles"/>
                  </div>
               </div>
            </div>
            <div class="upload-part">
               <p class="upload-part__title">
               <span>学信网教育部学历证书电子注册备案表(海外留学生可不提供此项，非必传)：</span>
                  <svg @click="alertSampleImg(3)" class="icon icon-help" aria-hidden="true">
                      <use xlink:href="#icon-bangzhu"/>
                  </svg></p>
               <div class="upload-pane">
                  <div class="upload-item item-space">
                     <UploadImg imgType="8" @updateFiles="learnLetterUpdateFiles"/>
                  </div>
               </div>
            </div>
            <div class="upload-part">
               <p class="upload-part__title">
                  <span>就业证明：</span>
                  <svg @click="alertSampleImg(4)" class="icon icon-help" aria-hidden="true">
                      <use xlink:href="#icon-bangzhu"/>
                  </svg></p>
               <div class="upload-pane">
                  <div class="upload-item item-space">
                     <UploadImg imgType="9" @updateFiles="worksUpdateFiles"/>
                  </div>
               </div>
            </div>           
            <div class="upload-part">
               <p class="upload-part__title">
                  <span>其他要件(非必传)：</span>
                  <svg @click="alertOtherCards" class="icon icon-help" aria-hidden="true">
                      <use xlink:href="#icon-bangzhu"/>
                  </svg>
                </p>
               <div class="upload-pane">
                  <div class="upload-item item-space" v-for="(item, index) in otherCount" :key="index">
                     <UploadImg imgType="3" @updateFiles="otherUpdateFiles"/>
                  </div>
               </div>
            </div>
            <van-button size="large" :loading="loading" class="submit-btn" @click="commitApply">确定</van-button>
        </div>
    </div>
  </sail-page>
</template>

<script>
let imgDescMap = {
  // 1 合同， 2 证件 3 其他
  "1": "合同",
  "2": "证件",
  "3": "其他",
  "4": "缴费",
  "5": "退租",
  "6": "补充附件",
  "7": "毕业证书",
  "8": "学信网教育部学历证书电子注册备案表",
  "9": "就业证明",
  "10": "单身（离异）证明",
  "11": "配偶身份证正反面",
  "12":"结婚证"
};
import { Toast } from "vant";
import { Dialog } from "vant";
import { mapState } from "vuex";
import statusModal from "@/components/statusModal.vue";
import sailPage from "@/components/sail-page.vue";
import UploadImg from "@/common/widget/uploadImg/uploadImg.vue";
import locStore from "@/utils/store";
import positiveCardImg from "@/assets/img/uploadImg/card.jpg";
import reverseCardImg from "@/assets/img/uploadImg/card1.png";
import workProveCardImg from "@/assets/img/uploadImg/job.png";
import learnProveImg from "@/assets/img/uploadImg/learn.jpg";
import graduationImg from "@/assets/img/uploadImg/study.jpg";
import marrayImg from "@/assets/img/uploadImg/marray.jpg";
export default {
  components: {
    sailPage,
    statusModal,
    UploadImg
  },
  initData({store, route}) {
    let applyInfo = locStore("applyInfo");
    //
    store.commit("applyModule/SET_APPLY_INFO", applyInfo);
  },
  computed: {
    ...mapState({
      applyInfo: state => state.applyModule.applyInfo
    })
  },
  data: function(){
    return {
      // action: '//jsonplaceholder.typicode.com/photos/',
      // files: []
      singleCount: 1,
      otherCount: 1,
      telephone: "",
      loading: false,
      applyId: null,
      cardCodePositiveSelect:false,
      cardCodeReverseSelect:false,
      spousePositiveCardCodeSelect:false,
      spouseReverseCardCodeSelect:false,
      marryCardSelect:false,
      graduationCardSelect:false,
      learnLetterCardSelect:false,
      worksCardSelect:false,
      positiveCardImg:positiveCardImg,
      reverseCardImg:reverseCardImg,
      workProveCardImg:workProveCardImg,
      learnProveImg:learnProveImg,
      graduationImg:graduationImg,
      marrayImg:marrayImg,
      messages:{
        1:{
          title:"身份证正反面样图",
          img:`<img style="width:240px;height:120px;margin:10px auto;display:block;" src="${positiveCardImg}"/>
          <img style="width:240px;height:120px;margin:20px auto;display:block;" src="${reverseCardImg}"/>`
        },
        2:{
          title:"毕业证样图",
          img:`<img style="width:280px;height:150px;margin:10px auto;display:block;" src="${graduationImg}"/>`
        },
        3:{
          title:"学信网教育部学历证书电子注册备案表样图",
          img:`<img style="width:280px;height:400px;margin:10px auto;display:block;" src="${learnProveImg}"/>`
        },
        4:{
          title:"工作证明样图",
          img:`<img style="width:280px;height:150px;margin:10px auto;display:block;" src=" ${workProveCardImg}"/>`
        },
        5:{
          title:"结婚证样图",
          img:`<img style="width:310px;height:350px;margin:10px auto;display:block;" src=" ${marrayImg}"/>`
        }
      }
    };
  },
  mounted() {
    this.$store.dispatch("selectServiceTel").then(res=>{
      this.telephone = res.data.data.phone;
    });
  },
  methods: {
    alertSampleImg(item){        
      this.$dialog.alert({
        title: this.messages[item].title,
        message: this.messages[item].img,
        closeOnClickOverlay: true
      });
    },
    alertOtherCards(){
      let messages = `
          1、申请人及共同申请成员具有贵阳市中心城区户籍的需提供户口簿；
          2、贵阳市非城镇户籍需提供户籍所辖乡、镇人民政府出具的无住房和无享受住房保障证明；
          3、集体户口无法提供户口簿需提供集体户籍所在地或单位出具的证明；
          4、若已离婚请提供离异证明。    
        `;
      this.$dialog.alert({
        title: "其他要件",
        message: messages,
        closeOnClickOverlay: true
      });
    },
    jumpCallback() {
      this.$router.push({path: `/applyDetail/${this.applyId}`});
    },
    commitApply() {
      if(this.cardCodePositiveSelect === false) {
        Toast.fail({
          duration: 1000,
          message: "请上传身份证正面！"
        });
        return false; 
      }
      if(this.cardCodeReverseSelect === false) {
        Toast.fail({
          duration: 1000,
          message: "请上传身份证反面！"
        });
        return false; 
      }
      if(this.applyInfo.marryStatus === 1) {
        if(this.spousePositiveCardCodeSelect === false) {
          Toast.fail({
            duration: 1000,
            message: "请上传配偶身份证正面！"
          });
          return false; 
        } 
        if(this.spouseReverseCardCodeSelect === false) {
          Toast.fail({
            duration: 1000,
            message: "请上传配偶身份证反面！"
          });
          return false; 
        }
        if(this.marryCardSelect === false) {
          Toast.fail({
            duration: 1000,
            message: "请上传结婚证！"
          });
          return false; 
        }  
      }
      if(this.graduationCardSelect === false) {
        Toast.fail({
          duration: 1000,
          message: "请上传毕业证！"
        });
        return false; 
      }
      // if(this.learnLetterCardSelect === false) {
      //    Toast.fail({
      //       duration: 1000,
      //       message: "请上传学信网备案表！"
      //     })
      //     return false 
      // }
      if(this.worksCardSelect === false) {
         Toast.fail({
            duration: 1000,
            message: "请上传就业证明！"
          })
          return false 
      }

      this.loading = true;
      Toast.loading("正在提交申请");
      this.$store.dispatch("applyModule/commitApply").then(res => {
        if(res) {
          this.applyId = res.data.data;
          Toast.clear();
          this.$store.commit("UPDATE_STATUS_VISIBLE", "apply");
        }
        this.loading = false;
        this.visible = true;
      });
    },
    otherUpdateFiles(files, type, flag) {
      //
      if(flag) {
        this.otherCount++;
        this.$store.commit("applyModule/ADD_IMG_INFO", {
          "propCode": type, // 1 合同， 2 证件 3 其他
          "propName": imgDescMap[type],
          "propValue": files.response.data, //img url
          "propValueDesc": imgDescMap[type],
          "propValueInt": 0
        });
      }else {
        this.otherCount--;
        this.$store.commit("applyModule/REMOVE_IMG_INFO", files.response.data);
      }
    },
    positiveUpdateFiles(files, type, flag) {
      //
      if(flag) {
        this.cardCodePositiveSelect = true;
        this.$store.commit("applyModule/ADD_IMG_INFO", {
          "propCode": type, // 1 合同， 2 证件 3 其他
          "propName": imgDescMap[type],
          "propValue": files.response.data, //img url
          "propValueDesc": imgDescMap[type],
          "propValueInt": 0
        });
      }else {
        this.cardCodePositiveSelect = false;
        this.$store.commit("applyModule/REMOVE_IMG_INFO", files.response.data);
      }
    },
    reverseUpdateFiles(files, type, flag) {
      // 
      if(flag) {
        this.cardCodeReverseSelect = true;
        this.$store.commit("applyModule/ADD_IMG_INFO", {
          "propCode": type, // 1 合同， 2 证件 3 其他
          "propName": imgDescMap[type],
          "propValue": files.response.data, //img url
          "propValueDesc": imgDescMap[type],
          "propValueInt": 0
        });
      }else {
        this.cardCodeReverseSelect = false;
        this.$store.commit("applyModule/REMOVE_IMG_INFO", files.response.data);
      }
    },     
    spousePositiveUpdateFiles(files, type, flag) {
      //
      if(flag) {
        this.spousePositiveCardCodeSelect = true;
        this.$store.commit("applyModule/ADD_IMG_INFO", {
          "propCode": type, // 1 合同， 2 证件 3 其他
          "propName": imgDescMap[type],
          "propValue": files.response.data, //img url
          "propValueDesc": imgDescMap[type],
          "propValueInt": 0
        });
      }else {
        this.spousePositiveCardCodeSelect = false;
        this.$store.commit("applyModule/REMOVE_IMG_INFO", files.response.data);
      }
    },
    spouseReverseUpdateFiles(files, type, flag) {
      //
      if(flag) {
        this.spouseReverseCardCodeSelect = true;
        this.$store.commit("applyModule/ADD_IMG_INFO", {
          "propCode": type, // 1 合同， 2 证件 3 其他
          "propName": imgDescMap[type],
          "propValue": files.response.data, //img url
          "propValueDesc": imgDescMap[type],
          "propValueInt": 0
        });
      }else {
        this.spouseReverseCardCodeSelect = false;
        this.$store.commit("applyModule/REMOVE_IMG_INFO", files.response.data);
      }
    },
    marryCardUpdateFiles(files, type, flag) {
      //
      if(flag) {
        this.marryCardSelect = true;
        this.$store.commit("applyModule/ADD_IMG_INFO", {
          "propCode": type, // 1 合同， 2 证件 3 其他
          "propName": imgDescMap[type],
          "propValue": files.response.data, //img url
          "propValueDesc": imgDescMap[type],
          "propValueInt": 0
        });
      }else {
        this.marryCardSelect = false;
        this.$store.commit("applyModule/REMOVE_IMG_INFO", files.response.data);
      }
    },
    graduationUpdateFiles(files, type, flag) {
      //
      if(flag) {
        this.graduationCardSelect = true;
        this.$store.commit("applyModule/ADD_IMG_INFO", {
          "propCode": type, // 1 合同， 2 证件 3 其他
          "propName": imgDescMap[type],
          "propValue": files.response.data, //img url
          "propValueDesc": imgDescMap[type],
          "propValueInt": 0
        });
      }else {
        this.graduationCardSelect = false;
        this.$store.commit("applyModule/REMOVE_IMG_INFO", files.response.data);
      }
    },
    learnLetterUpdateFiles(files, type, flag) {
      //
      if(flag) {
        this.learnLetterCardSelect = true;
        this.$store.commit("applyModule/ADD_IMG_INFO", {
          "propCode": type, // 1 合同， 2 证件 3 其他
          "propName": imgDescMap[type],
          "propValue": files.response.data, //img url
          "propValueDesc": imgDescMap[type],
          "propValueInt": 0
        });
      }else {
        this.learnLetterCardSelect = false;
        this.$store.commit("applyModule/REMOVE_IMG_INFO", files.response.data);
      }
    },
    worksUpdateFiles(files, type, flag) {
      //
      if(flag) {
        this.worksCardSelect = true;
        this.$store.commit("applyModule/ADD_IMG_INFO", {
          "propCode": type, // 1 合同， 2 证件 3 其他
          "propName": imgDescMap[type],
          "propValue": files.response.data, //img url
          "propValueDesc": imgDescMap[type],
          "propValueInt": 0
        });
      }else {
        this.worksCardSelect = false;
        this.$store.commit("applyModule/REMOVE_IMG_INFO", files.response.data);
      }
    },
    // addedHandler() {
    //   const file = this.files[0]
    //   file && this.$refs.upload.removeFile(file)
    // },
    // errHandler(file) {
    //   // const msg = file.response.message
    //   this.$createToast({
    //     type: 'warn',
    //     txt: 'Upload fail',
    //     time: 100000
    //   }).show()
    // }
  }
};
</script>
<style lang="less">
   .cube-toast-icon {
       width: 24px;
       height: 24px;
       font-size: 24px;
       top: -7px;
       position: relative;
   }
   .apply-upload-wrapper {
      .cube-tip-close {
        top: 9px;
      }
      .cube-upload-file-def {
          position: relative;
          width: 100%;
          height: 100%;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          background: #fff no-repeat 50%;
          background-size: contain;
          border-radius: 2px;
      }
      .cube-upload {
        width: 100%;
        height: 100%;
        overflow: hidden;
        .clear-fix {
          width: 100%;
          height: 100%;
        }
        .cube-upload-file {
          width: 100%;
          height: 100%;
        }
        .cube-upload-btn {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          > div {
            text-align: center;
          }
        }
      }        
    }
</style>
<style lang="less" scoped>
    @import "~@/common/less/variable.less";
    @nice-gray: #C4C4C4;
    @nice-black: #222222;
    .apply-upload-wrapper {
      margin-top: 11px;
      min-height: 90vh;
      .icon-help {
         color: @nice-green;
         font-size: 20px;
         display: inline-block;
         vertical-align: top;
         margin-left: 5px;
      }
      .upload-part {
        background: white;
        color: @nice-gray;
        margin-bottom: 12px;
        padding-bottom: 22px;
      }
      .upload-part__title {
        position: relative;
        text-align: left;
        margin-left: 18px;
        padding-top: 11.5px;
        font-size: 14px;
        color: @nice-black;
      }
      .upload-pane {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
        margin-left: 27px;
      }
      .item-space {
        margin-right: 19px;
      }
      .upload-item {
        width: 151px;
        height: 97px;
        margin-bottom: 10px;
        border: 1px solid @nice-gray;
      }
      .img_positive_test {
        background: url(~@/assets/img/applyupload_bg1@3x.png) no-repeat center;
        background-size: cover;
      }
      .img_revetive_test {
        background: url(~@/assets/img/applyupload_bg2@3x.png) no-repeat center;
        background-size: cover;
      }
    }
</style>1