<template>
    <div>


        <common @asynCallBack="asynCallBack"></common>
        <header class="mui-bar mui-bar-nav" >
            <h1 class="mui-title">访客申请</h1>
        </header>
        <div 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.unit}}</span>
                    </div>
                    <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">
                        <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>
                        <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>

                    </div>

                    <div class="mui-input-row" v-if="detail.confirmationTime">
                        <label>审核时间</label>
                        <span>{{detail.confirmationTime}} </span>
                    </div>
                </form>
            </div>




        </div>


        <div v-if="detail.status=='2'" class="fyy-scon-botton">
            <div class="examine-btn examine-btn1" @click="openFrom('4')">拒绝</div>
            <div class="examine-btn examine-btn2" @click="openFrom('1')">通过</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:  {
            openFrom(status){

               var  _this=this;
                var btnArray = ['取消', '确认'];
                mui.confirm(status=='1'?'是否确认通过本次访客申请':'是否确认拒绝本次访客申请', '确认', btnArray, function(e) {
                        if (e.index == 1) {
                            _this.isLoading = true;

                            API_From.approval({id:_this.id,status:status}).then(response => {
                                _this.isLoading = false;

                                _this.detail=response ;

                            }).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>