<template>
    <div class="main_box">
        <navbar title="历史走访记录"></navbar>
        <div class="wrapper">
            <div class="title">
                <span>共有</span>
                <span class="num">{{ list.length }}</span>
                <span>条走访记录</span>
            </div>
            <div class="item" v-for="(item,index) in list">
                <div class="item_top" @click="handleGoHistoryDetail(item)">
                    <div class="item_top_left">
                        <div :class="custGender == '男' ? 'userMan_box' : 'userWoMan_box'" v-if="custType == '0'">
                            <van-icon name="manager item_user"></van-icon>
                        </div>
                        <div class="icon_box" v-if="custType == '1'">
                            <img src="../../images/home/sh.png" alt="" style="width: 20px;height: 20px;">
                        </div>
                        <div class="userMan_box" v-if="custType == '2'">
                            <img src="../../images/part_one/icon_company.png" alt="" style="width: 15px;height: 15px;">
                        </div>
                        <div class="item_name">{{ item.custName }}</div>
                    </div>
                    <div class="zfr">{{ (item.duration).toFixed(2 ) }}h</div>
                </div>
                <div class="zfr">走访人：<span class="khjl">{{ item.userName }}</span></div>
                <div class="main">
                    <div class="main_item">
                        <div class="main_item_top">
                            <div>打卡签到</div>
                          
                        </div>
                        <div class="zfr">{{ item.signInTime }}</div>
                    </div>
                    <div class="main_item">
                        <div class="main_item_top">
                            <div>结束签退</div>
                            
                        </div>
                        <div class="zfr">{{ item.signOutTime }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import navbar from '../../components/navbar/navbar.vue';
import { getRecordtList } from "@/service/api/visiting";
import {
    Tab,
    Icon,
    Button,
    Uploader,
    
} from 'vant';
export default {
    data() {
        return {
            custType: '',
            custGender:"",
            list:[
                
            ],
            baseInfo:{},
        }
    },
    components: {
        navbar: navbar,
        VanTab: Tab,
        VanIcon: Icon,
        VanButton: Button,
        VanUploader: Uploader,
       
    },
    mounted() {
        this.custType = sessionStorage.getItem('custType')
        this.baseInfo = JSON.parse(sessionStorage.getItem('baseInfo'))
        this.custGender = this.baseInfo.custGender
        this.initGetRecordtList()
    },
    methods:{
        initGetRecordtList(){
            const custId=this.baseInfo.custId
           
            getRecordtList(custId).then(res=>{ 
                if(res.code == 200){
                    this.list = res.data
                }
            })
        },
        handleGoHistoryDetail(item){
            sessionStorage.setItem("historyDetaiObj", JSON.stringify({
                recordId:item.recordId
            }));
            this.$router.push('/historyDetail')
        },
    }
}
</script>
<style lang="less" scoped>
.wrapper {
    padding-top: 46px;
    min-height: 100vh;
    font-size: 16px;
    padding-bottom: 60px;

}

.title {
    font-size: 12px;
    color: rgb(140, 140, 140);
    padding: 15px;
}

.num {
    color: red;
}

.item {
    background-color: #fff;
    padding: 15px;
    margin-top: 3px;
}
.item_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item_top_left{
    display: flex;

}
.item_name{
    margin-left: 10px;
}
.zfr{
    margin-top: 10px;
    color: rgb(140, 140, 140);
    font-size: 12px;
}
.khjl{
    color: black;
}
.main{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
.main_item{
    background-color: rgb(249, 249, 250);
    width: 46%;
    padding: 15px;
}
.main_item_top{
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.zc_tag{
    border: 1px solid rgb(70, 130, 255);
    color: rgb(70, 130, 255);
    font-size: 12px;
    padding: 3px 8px;
    margin-left: 10px;
    border-radius: 4px;
}
.userMan_box {
    background-color: rgb(35, 114, 235);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    color: #fff;
}

.userWoMan_box {
    background-color: rgb(252, 123, 80);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    color: #fff;
}
</style>