<template>
  <div>
    <header class="mui-bar mui-bar-nav" v-if="step=='1'" >
      <h1 class="mui-title">访问邀请函</h1>
      <a v-if="toList" class=" mui-icon mui-icon-left-nav mui-pull-left" @click="back"></a>
    </header>
    <share-server ref="shareServer" :id="1"  ></share-server>

    <div   v-if="step=='1'" class="mui-content margin60">
      <div class="mui-content-padded vongi-qingjiadt">
        <form class="mui-input-group">
          <div class="mui-input-row">
            <label>邀请单位</label>
            <span>{{detail.intervieweeUnit}}</span>
          </div>
          <div class="mui-input-row">
            <label>邀请人</label>
            <span>{{detail.intervieweeName}}</span>
          </div>
          <div class="mui-input-row">
            <label>联系方式</label>
            <span ><a class="color4fc5f7" :href="'tel:'+detail.intervieweePhone">{{detail.intervieweePhone}}</a></span>
          </div>
        </form>
      </div>
      <div class="mui-content-padded vongi-editme vongi-qingjiadt">
        <form class="mui-input-group">
          <div class="mui-input-row">
            <label>受邀人</label>
            <span>{{detail.name}}</span>
          </div>
          <div class="mui-input-row">
            <label>联系方式</label>
            <span>{{detail.mobilePhone}}</span>
          </div>
          <div class="mui-input-row">
            <label>身份证号</label>
            <input
              type="text"
              class="mui-input-clear"
              v-model="subForm.idCard"
              placeholder="请输入身份证号"
            />
          </div>
          <div class="mui-input-row" v-if="detail.isUpPhoto">
            <label style="width: 50%"
              >人脸识别照片<i class="iconfont icon-tishi color4fc5f7"  @click="valert"></i
            ></label>



            <button
                    class="mui-btn mui-btn-block mui-navigate-right"
                    type="button"
                    style="width: 50%"

                    @click="clickMyFile(subForm)"
            >
            <div  v-if="!subForm.photo">请上传</div>
            <img     v-if="subForm.photo" :src="subForm.photo">
            </button>
            <!--请上传-->
          </div>
          <div class="mui-input-row">
            <label>来访单位</label>
            <span>{{detail.unit}}</span>
          </div>
          <div class="mui-input-row">
            <label>来访事由</label>
            <span>{{detail.visitReasons}}</span>
          </div>
          <div class="mui-input-row">
            <label>邀访时间</label>
            <span>{{detail.visitDate}}</span>
          </div>
          <div class="mui-input-row">
            <label>同行人员</label>
            <button
              class="mui-btn mui-btn-block color4fc5f7 vongi-fkdat-name"
              type="button"
              style="width: 65%; padding-right: 15px"

            >
              <div class="flew">
                <h5 v-for="mod in getFellow()">{{mod}}</h5>

                <span   @click="step='2'">添加  <i class="iconfont icon-zhuce"></i></span>

              </div>
            </button>
          </div>
          <div class="mui-input-row">
            <label>车牌号</label>
            <input
              type="text"
              v-model="subForm.numberPlate"
              class="mui-input-clear"
              placeholder="请输入车牌号码"
            />
          </div>
        </form>
      </div>
    </div>
    <div class="fyy-footer" v-if="step=='1'">
      <div class="bindfyy-btn">
        <button type="submit" class="mui-btn mui-btn-success" @click="submit()">确认受邀</button>
      </div>
    </div>

    <header class="mui-bar mui-bar-nav"  v-if="step=='2'">
      <h1 class="mui-title">添加同行人员</h1>
      <a class="mui-pull-right color4fc5f7" @click="save()">保存</a>
    </header>
    <div   v-if="step=='2'" class="mui-content margin60">
      <div class="mui-content-padded vongi-editme vongi-qingjiadt">
        <form class="mui-input-group" v-for="(item,index) in subForm.list" style="padding-top: 10px">
          <div class="mui-input-row">
            <label>姓名<i class="colorfe616c">*</i></label>
            <input
                    type="text"
                    class="mui-input-clear"
                    v-model="item.name"
                    placeholder="请输入姓名"
            />
          </div>
          <div class="mui-input-row">
            <label>手机号码</label>
            <input
                    type="text"
                    v-model="item.mobilePhone"
                    class="mui-input-clear"
                    placeholder="请输入手机号码"
            />
          </div>
          <div class="mui-input-row">
            <label>身份证号</label>
            <input
                    type="text"
                    v-model="item.idCard"
                    class="mui-input-clear"
                    placeholder="请输入身份证号"
            />
          </div>

          <div class="mui-input-row" v-if="false" >
            <label style="width: 50%"
            >人脸识别照片<i class="iconfont icon-tishi color4fc5f7" @click="valert"></i
            ></label>
            <button
                    class="mui-btn mui-btn-block mui-navigate-right"
                    type="button"
                    style="width: 50%"
                    @click="clickMyFile(item)"
            >
              <div  v-if="!item.photo">请上传</div>
              <img     v-if="item.photo" :src="item.photo">
            </button>
          </div>
          <div class="mui-input-row"   @click="del(index)" style="text-align: center;color: red">
             删除
          </div>
        </form>
      </div>
      <div class="vongi-btn vongi-yj-btn">
        <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" @click="add()" >
          <i class="iconfont icon-zhuce"></i>添加同行人员
        </button>
      </div>
    </div>

    <header class="mui-bar mui-bar-nav" v-if="step=='3'" >
      <h1 class="mui-title">访客邀请码</h1>
    </header>
    <div class="mui-content vongi-yqma" v-if="step=='3'">
      <div class="mui-content-padded">
        <ul class="mui-table-view fyy-view">
          <li class="mui-table-view-cell">
            <label>受邀单位：</label>
            <span>{{detail.unit}}</span>
          </li>
          <li class="mui-table-view-cell">
            <label>受  邀 人：</label>
            <span>{{detail.name}}</span>
          </li>
          <li class="mui-table-view-cell">
            <label>访问单位：</label>
            <span>{{detail.intervieweeUnit}}</span>
          </li>
          <li class="mui-table-view-cell">
            <label>邀请时间：</label>
            <span>{{detail.visitDate}}</span>
          </li>
          <li class="mui-table-view-cell">
            <label>结束时间：</label>
            <span>{{detail.expirationTime}}</span>
          </li>
          <li class="mui-table-view-cell">
            <div class="vongi-yqma-ma">
              <img :src="qrCodeImg" id="qrcode">
            </div>
            <p>已生成访客邀请码</p>
          </li>
          <li class="mui-table-view-cell">
            <p class="color4fc5f7">可通过收藏页面或截图保存二维码，<br/>如已上传人脸照片，进门时可通过设备识别</p>
          </li>
        </ul>
      </div>
      <div class="vongi-yqma-logo">
        <img src="~$project/assets/img/logo_02.png" width="100"/>
      </div>
    </div>
    <!--图片裁剪-->
    <cropper :cwidth="cropperWidth" :cheight="cropperHeight" :visible="cropperVisible" :field="cropperField" :cropper="cropper"
             @cropperFinish="cropperFinish" @cropperCancel="cropperCancel"></cropper>
    <loading :visible="isLoading"></loading>
    <input type="file" ref="myFile"  style="display: none" class="mui-btn mui-btn-block mui-navigate-right" accept="image/*" @change="uploadPicture($event)"/>
    <loading :visible="isLoading"></loading>

    <div>
      <div :class="visible?'mui-loading z-loading2':'mui-loading'">
        <div v-show="visible" style="　text-align:center;">
          <img src="~$project/assets/img/guide_point.png" style="width: 100%;" />
          <button type="submit" class="mui-btn mui-btn-blue" @click="back()">返回列表</button>
        </div>
      </div>
    </div>

  </div>
</template>


<script>
  import * as API_To from '@/apis/Guest/to'
  import Common from '$project/components/Common.vue'
  import Loading from '$project/components/Loading.vue'
  import TopHeader from '$project/components/TopHeader.vue'
  import QRCode from 'qrcodejs2'
  import Cropper from '$project/components/Cropper.vue'
  import ShareServer from '$project/components/ShareServer.vue'

  import {
    mapGetters,
    mapMutations
  } from 'vuex'
  import * as WxJsApi from '$project/utils/wxJsApi'

  import {
    convertCanvasToImage,
    currentTimeStamp,
    parseUnixTime
  } from '$project/utils'
  export default {
    name: 'GuestFromDeviceInfo',
    components: {
      Common,
      Loading,
      TopHeader,
      Cropper,
      ShareServer
    },
    data() {
      return {
        toList:null,
        pageTitle: '访问邀请函',
        id: '',
        step:'1',
        detail: {
          name:''
        },
        subForm:{
          id:'',
          idCard:'',
          photo:'',
          numberPlate:'',
          list:[],
        },
        indexModel:{
          photo:''
        },
        isLoading: false,
        visible: false,
        qrCodeImg: '',
        //隐藏裁剪图片
        cropperCancel() {
          this.cropperVisible = false;
        },
        cropperVisible: '',
        cropperField: '',
        cropperWidth: 250,
        cropperHeight: 350,
        cropper: {
          img: '',
          info: true,
          size: 1,
          outputType: 'jpeg',
          canScale: false,
          autoCrop: false,
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 250,
          autoCropHeight: 350,
          fixed: true,
          // 真实的输出宽高
          infoTrue: true,
          fixedNumber: [5, 7]
        },
      }
    },
    created() {
      this.id = this.$route.query.id;

      //直接访问本页面 ，直接添加  ，通过list 进来， 需要有返回， 有分享提示
      this.toList = this.$route.query.share;
      //
      if(this.toList){
        this.visible=true;
      }
      this.subForm.id=this.id;
    },
    methods:  {
      back(){
        this.$router.push({
          name: 'GuestFromList',
          query: {
          }
        })
      },
      valert(){
        mui.alert("该照片仅用于访客在访问期间，快速识别人脸进入时使用，访问结束后自动清除数据。",'   ',['知道了'])
      },
      clickMyFile(mod){
        this.indexModel=mod;
        this.$refs.myFile.click();
      },
      save(){
        if(this.subForm.list.length){
          for(var m in this.subForm.list){
              var mod =this.subForm.list[m]
              if(!mod.name){
                mui.toast("请填写同行人员的姓名")
                return false;
              }
          }
        }

        this.step='1';
      },
      del(index) {
        this.subForm.list.splice(index, 1);
      },
      add() {
        this.subForm.list.push({});
      },
      getFellow(){
        var sz=[];
        if(this.subForm.list){
          for(var  m in this.subForm.list){
            var mod =this.subForm.list[m];
            if(mod.name){
              sz.push(mod.name.substring(0,1))
            }
          }
        }
        return sz;
      },
      //选择图片
      uploadPicture(event) {


        var files =  event.target.files;
       var  reader = new FileReader();
       var _this=this;
        if(files && files[0]) {
          reader.onload = function (ev) {


            var localData=ev.target.result;
            if (localData.indexOf('data:image') != 0) {
              //判断是否有这样的头部
              localData = 'data:image/jpeg;base64,' + localData
            }
            localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
            _this.imgBase64 = localData;
            //显示裁剪图片
            _this.showCropper('photo');
          //  _this.uploadpic();
          }
          reader.readAsDataURL(files[0]);

        }

      },	//显示裁剪图片
      showCropper(field) {
        this.cropper.img = this.imgBase64;
        this.cropperField = field;
        this.cropperVisible = true;
      },
      //裁剪图片
      cropperFinish(obj) {
        console.log(obj);
        this.imgBase64 = obj.data;
        this.uploadpic(obj.field);
        this.cropperVisible = false;
      },

      //上传图片
      uploadpic() {
        this.isLoading = true;
        WxJsApi.uploadPic(this.imgBase64).then(response => {
          this.isLoading = false;
          this.indexModel.photo=response;

        }).catch(error => {
          this.isLoading = false;
          mui.toast(error);
        })
      },
      //生成二维码
      qrcode() {

        let qrcode = new QRCode('qrcode', {
          width: 200,
          height: 200,
          text: window.location.href,
          correctLevel: QRCode.CorrectLevel.M,
          // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          colorLight: '#FFFFFF' ,
          colorDark: '#33BB00'
        })
        var canvas = document.getElementsByTagName('canvas')[0];
        this.qrCodeImg = convertCanvasToImage(canvas);
      },
      //获取详情
      getDetail() {
        this.isLoading = true;

        API_To.getDetail(this.id ).then(response => {
          this.isLoading = false;

          this.detail = response;
          this.$refs.shareServer.setName('您有一封来自'+this.detail.intervieweeUnit+this.detail.intervieweeName+'的邀请函！');
          this.$refs.shareServer.setShare();

          if(this.detail.status!='0'){
            this.step='3'
            //生成二维码
            this.$nextTick(() => {
              this.qrcode();
            });
          }
        }).catch(error => {
          this.isLoading = false;
          mui.toast(error);
        })
      },asynCallBack(){},
      submit(){
        var btnArray = ['否', '是'];
        var _this = this;
        mui.confirm('确认当操作？', '提示', btnArray, function(e) {
          if (e.index == 1) {
            _this.isLoading = true;
            API_To.update(_this.subForm).then(response => {
              _this.step='3'
              _this.isLoading = false;
              //生成二维码
              _this.$nextTick(() => {
                _this.qrcode();
              });
              mui.toast("操作成功");
            }).catch(error => {
              _this.isLoading = false;
              mui.toast(error);
            })
          }
        });

      }
    },
    mounted() {
      //获取微信配置
       this.getDetail();

    },


    destroyed() {

    }

  }
</script>

<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>

<style scoped>
  .z-loading2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:  rgba(16, 14, 14, 0.9);
    z-index: 999;
  }

  .z-loading2 div {
    top: 0%;
    position: absolute;
    left: 0%
  }
</style>