<template>
<div>
    <common @asynCallBack="asynCallBack"></common>
    <top-header :pageTitle="pageTitle"></top-header>

    <div class="mui-content vongi-qingjiadt margin60">
        <div class="vongi-qingjiadt-head flew-sp">
            <div class="flew-items">
                <div class="flew"><img :src="detail.picUrl" width="50" /></div>
                <h4 v-text="detail.name+' 申请请假 '+detail.leaveTypeN"></h4>
            </div>
            <button class="mui-btn   mui-btn-outlined" :class="statusColor[detail.status]" v-text="status[detail.status]">已批准</button>
            <!-- <div class="examine-refuse">已拒绝</div> -->
        </div>
        <form class="mui-input-group margin10">
            <!--<div class="mui-input-row">-->
                <!--<label>身份证号</label>-->
                <!--<span v-text="detail.idCard">420400200002020101</span>-->
            <!--</div>-->

            <div class="mui-input-row">
                <label>请假时间</label>

                <span v-if="detail.startTime==detail.endTime&&detail.startTimeQuantum=='0'&&detail.endTimeQuantum=='1'">自{{detail.startTime}}</span>
                <span v-else-if="detail.startTime==detail.endTime">自{{detail.startTime}}{{(detail.startTimeQuantum!=''?(detail.startTimeQuantum=='1'?'下午':'上午'):'')}}</span>
                <span  v-else >自{{detail.startTime}}{{(detail.startTimeQuantum!=''?(detail.startTimeQuantum=='1'?'下午':'上午'):'')}}
                    <br />至{{detail.endTime}}{{(detail.endTimeQuantum!=''?(detail.endTimeQuantum=='1'?'下午':'上午'):'')}}</span>
            </div>
            <div class="mui-input-row">
                <label>请假时长</label>
                <span v-text="daytime"></span>
            </div>
            <div class="mui-input-row">
                <label>请假事由</label>
                <span v-text="detail.reason">家中有事，需要会老家一趟家中有事，需要会老家一趟家中有事，需要会老家一趟家中有事，需要会老家一趟。</span>
            </div>
            <div class="mui-input-row">
                <label>上传图片</label>
                <span class="vongi-qingjiadt-photo">
                    <template v-for="(item,index) in picList">
                        <img :src="item" v-viewer />
                    </template>
                </span>
            </div>
            <div class="mui-input-row">
                <label>申请时间</label>
                <span v-text="detail.createTime">2020-04-27 12:00:00</span>
            </div>


        </form>
        <div class="vongi-slot">
            <div v-for="(item,index) in detail.list" class="vongi-slot-block">
                <div class="vongi-slot-img"><img :src="item.faceImageUrl"></div>
                <div class="vongi-slot-content">
                    <h4>审批人{{index+1}}<span class="mui-pull-right mui-h5 color999" v-text="item.time"></span></h4>
                    <p>{{item.name}} <span class="color55f868" :style="getColor(item.status)" v-text="item.statusN"></span></p>
                </div>
            </div>
        </div>
    </div>


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

</div>
</template>

<script>
import * as API_Leave from '@/apis/Master/leave'
import Common from '$project/components/Common.vue'
import Loading from '$project/components/Loading.vue'
import TopHeader from '$project/components/TopHeader.vue'
import isReachBottom from '$project/utils/isReachBottom'
import {
    mapGetters,
    mapMutations
} from 'vuex'
import {
    daysDistance
} from '$project/utils'
export default {
    name: 'MasterAttendanceLeaveInfo',
    components: {
        Common,
        Loading,
        TopHeader
    },
    data() {
        return {
            pageTitle: '请假详情',
            daytime:'',
            isLoading: false,
            id: this.$route.query.id,
            detail: {},
            status: ['待审核', '已批准', '已拒绝'],
            statusColor: ['', 'mui-btn-success', 'mui-btn-danger'],
        }
    },
    created() {

    },
    methods: {
        //获取状态颜色
        getColor(status) {
            var color = '';
            if (status == '0') {
                color = '#4fc5f7';
            } else if (status == '1') {
                color = '#55f868';
            } else if (status == '2') {
                color = '#fe616c';
            }
            return 'color:' + color + ';border-color:' + color + ';';
        },
        //info
        getDetail() {
            this.isLoading = true;
            API_Leave.detail({
                id: this.id
            }).then(response => {
                this.detail = response;
                var startTime=this.detail.startTime.replace('年','/').replace('月','/').replace('日','');
                var endTime=this.detail.endTime.replace('年','/').replace('月','/').replace('日','');

                var i=  daysDistance(startTime,endTime);
                var day=i+(this.detail.endTimeQuantum-this.detail.startTimeQuantum)*0.5+0.5
                this.daytime=day+'天';

                this.isLoading = false;
            }).catch(error => {
                this.isLoading = false;
                mui.toast(error);
            })
        },

        asynCallBack() {

        },
    },
    mounted() {
        this.getDetail();

    },
    destroyed() {},
    computed: {
        picList: {
            // getter
            get: function () {
                if (this.detail && this.detail.imageUrl) {
                    return this.detail.imageUrl.split(',');
                } else {
                    return [];
                }
            },
            // setter
            set: function (newValue) {
                console.log(newValue)
            }
        },
        ...mapGetters({
            openId: 'wx_openid',
            token: 'token',
        })
    },

}
</script>

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