<template>
  <div>


    <common @asynCallBack="asynCallBack"></common>
    <top-header :pageTitle="pageTitle" v-if="step=='1'"   ></top-header>
    <div class="mui-content margin60 "  v-if="step=='1'"   >
      <div class="mui-content-padded 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>
            <span>{{detail.idCard}}</span>
          </div>
          <div class="mui-input-row" v-if="detail.isUpPhoto">
            <label style="width: 50%">人脸识别照片</label>

            <span  style="width: 50%" v-if="!detail.photo" >未上传</span>
            <span class="vongi-qingjiadt-photo"  v-if="detail.photo" >
               <img  :src="detail.photo">
            </span>
          </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" v-if="detail.expirationTime">
            <label>结束时间</label>
            <span>{{detail.expirationTime}}</span>
          </div>
          <div class="mui-input-row">
            <label style="width: 50%">同行人员</label>
            <span class="vongi-fkdat-name" style="width: 50%" >
              <a class="flew mui-navigate-right vongi-padright"   v-if="list.length"  @click="switchstep(2)" >
                   <h5 v-for="mod in getFellow()">{{mod}}</h5>
              </a>
            </span>
          </div>
          <div class="mui-input-row">
            <label>车牌号</label>
            <span>{{detail.numberPlate}}</span>
          </div>
        </form>
      </div>
      <div class="mui-content-padded vongi-qingjiadt vongi-editme">
        <form class="mui-input-group vongi-login-form">
          <div class="mui-input-row">
            <label>邀请单状态</label>
            <span :class="statusColor[detail.status]" v-text="status[detail.status]"></span>
            <!--<span class="colorf8b155">待确认</span>
						<span class="color999">已过期</span>-->
          </div>
          <div class="mui-input-row">
            <label>发送时间</label>
            <span>{{detail.createTime}}</span>
          </div>
          <div class="mui-input-row">
            <label>确认时间</label>
            <span>{{detail.confirmationTime}} </span>
          </div>
        </form>
      </div>




    </div>
    <div class="fyy-footer" v-if="!detail.outTime&&(detail.status=='1'||detail.status=='3')&&step=='1'">
      <div class="bindfyy-btn">
        <button type="button" class="mui-btn mui-btn-primary " @click="out"  >
          确认访客已离开
        </button>
      </div>
    </div>

    <div class="fyy-footer" v-if="detail.status=='0'&&step=='1'">
      <div class="bindfyy-btn">
        <button type="button" class="mui-btn mui-active  "   >
          等待受邀者确认...
        </button>
      </div>
    </div>
    <div class="fyy-footer" v-if="detail.outTime!=null&&step=='1'">
      <div class="bindfyy-btn">
        <button type="button" class="mui-btn  mui-active "   >
          访客已离开
        </button>
      </div>
    </div>

    <header class="mui-bar mui-bar-nav"  v-if="step=='2'">
      <h1 class="mui-title">同行人员</h1>
      <a   class="mui-icon mui-icon-left-nav mui-pull-left"  @click="switchstep(1)"></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 list" style="padding-top: 10px">
          <div class="mui-input-row">
            <label>姓名<i class="colorfe616c"></i></label>
            <span>{{item.name}}</span>

          </div>
          <div class="mui-input-row">
            <label>手机号码</label>
            <span>{{item.mobilePhone}}</span>

          </div>
          <div class="mui-input-row">
            <label>身份证号</label>
            <span>{{item.idCard}}</span>

          </div>

        </form>
      </div>

    </div>
    <loading :visible="isLoading"></loading>

  </div>
</template>


<script>

  import * as API_From from '@/apis/Guest/from'
  import Common from '$project/components/Common.vue'
  import Loading from '$project/components/Loading.vue'
  import TopHeader from '$project/components/TopHeader.vue'
  import {
    mapGetters,
    mapMutations
  } from 'vuex'
  import {
    currentTimeStamp,
    parseUnixTime
  } from '$project/utils'
  export default {
    name: 'GuestFromInfo',
    components: {
      Common,
      Loading,
      TopHeader
    },
    data() {
      return {
        pageTitle: '邀请函详情',
        step:'1',
        id: '',
        detail: {
          id:'',
          name:'',
          mobilePhone:'',
          unit:'',
          visitReasons:'',

          visitDate: '请选择',
          expirationTime: '请选择',
          issueDevice: '',
          isUpPhoto:1,
        },
        list:[],
        isLoading: false,

          status: ['待确认', '已确认', '待确认','已过期','已拒绝'],
          statusColor: ['colorf8b155', 'color55f868','colorf8b155','color999', 'colorfe616c'],
      }
    },
    created() {
      this.id = this.$route.query.id;
    },
    methods:  {
      switchstep(num){

        this.step=num;
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      },
      getFellow(){
        var sz=[];
        if(this.list){
          for(var  m in this.list){
            var mod =this.list[m];
            if(mod.name){
              sz.push(mod.name.substring(0,1))
            }
          }
        }
        return sz;
      },
      out(){
        this.isLoading = true;
        var sub={
          id:this.id,
          outTime:parseUnixTime(currentTimeStamp()),
        }
        API_From.out(sub ).then(response => {
          this.isLoading = false;

          this.detail.outTime = true;

        }).catch(error => {
          this.isLoading = false;
          mui.toast(error);
        })
      },
      //获取详情
      getDetail() {
        this.isLoading = true;

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

          this.detail = response.info;
          this.list=response.list;
        }).catch(error => {
          this.isLoading = false;
          mui.toast(error);
        })
      },asynCallBack(){},
    },
    mounted() {
      if(this.id){
        this.detail.id=this.id;
        this.getDetail();
      }


    },


    destroyed() {

    },
    computed: {
      ...mapGetters({
        openId: 'wx_openid',
        token: 'token',
        person_data: 'person_data',
        person_popedom: 'person_popedom',
      })
    }
  }
</script>

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