<template>
    <div class="personnel_info">
        <md-scroll-view
                ref="scrollView"
                :bouncing="false"
                :scrolling-x="false"
                :auto-reflow="true"
                @end-reached="$_onEndReached"
                class="my-scroll-view"
        >
            <div class="top">
                <img :src="renyuanMsg.sysAccountPic" alt="">
                <span>{{renyuanMsg.sysAccountRealName}}</span>
            </div>

            <ul class="ulbox">
                <li class="list first">
                    <i class="iconfont iconbangong1"></i>
                    <div class="list-right">
                        <p>{{renyuanMsg.sGroupName}}/{{renyuanMsg.position}}</p>
                        <div class="time">入职时间：{{renyuanMsg.positionInTime}}</div>
                    </div>
                </li>
                <li class="list">
                    <i class="iconfont icondizhi" style="font-size: 0.42rem"></i>
                    <div class="list-right">
                        <p>{{renyuanMsg.address}}</p>
                    </div>
                </li>
                <li class="list">
                    <i class="iconfont iconxueli" style="font-size: 0.37rem"></i>
                    <div class="list-right">
                        <p>{{renyuanMsg.education}}</p>
                    </div>
                </li>
                <li class="list" v-if="renyuanMsg.idCard">
                    <i class="iconfont iconshenfenzheng-tianchong" style="font-size: 0.34rem;"></i>

                    <div class="list-right" v-if="!showNumber">
                        <p>{{renyuanMsg.idCard | strCenterHide(4, 3)}} <a @click="showIdcard()">显示</a></p>
                    </div>
                    <div class="list-right" v-else>
                        <p>{{renyuanMsg.idCard}} <a @click="hideIdcard()">隐藏</a></p>
                    </div>
                </li>
                <li class="list">
                    <i class="iconfont iconshouji" style="font-size: 0.4rem;"></i>
                    <div class="list-right">
                        <p>{{renyuanMsg.contactTel}}
                        <a :href="'tel:'+renyuanMsg.contactTel">拨打</a>
                        </p>
                    </div>
                </li>
            </ul>
            <div class="tabinfo">
                <md-tabs>
                    <md-tab-pane class="content" name="p1" label="相关证件">
                        <!--<waterFull></waterFull>-->
                        <div class="box1" >
                            <Waterfall :list="zhengjianList" :gutter="10" :width="200" :phoneCol="2" @handleClick="handleClick" ref="waterfall">
                                <template slot="item" scope="props">
                                    <div class="card">
                                        <div class="cover">
                                            <img :src="props.data.diplomaImg" alt="" @load="$refs.waterfall.refresh()">
                                        </div>
                                        <!--  <div class="name">
                                              <p>{{props.data.name}}</p>
                                          </div>-->
                                    </div>
                                </template>
                            </Waterfall>
                        </div>

                    </md-tab-pane>
                    <md-tab-pane class="content" name="p2" label="学习记录">
                        暂无
                    </md-tab-pane>
                    <md-tab-pane class="content" name="p3" label="考试记录">
                        暂无
                    </md-tab-pane>
                </md-tabs>
            </div>
        </md-scroll-view>

        <md-image-viewer
                v-model="isViewerShow"
                :list="zhengjianImgList"
                :has-dots="true"
                :initial-index="viewerIndex">
        </md-image-viewer>
    </div>
</template>

<script>
    import {Tabs, TabPane, ScrollView, ImageViewer} from 'mand-mobile';
    import Waterfall from './waterfall2'
    import {personnelArchivesById} from '@/api/personnel_files';

    export default {
        name: "",
        components: {
            Waterfall,
            [Tabs.name]: Tabs,
            [TabPane.name]: TabPane,
            [ScrollView.name]: ScrollView,
            [ImageViewer.name]: ImageViewer,
        },
        data() {
            return {
                zhengjianList: [],
                zhengjianImgList: [],
                userId: 0,
                aId: 0,
                cId: 0,
                renyuanMsg: '',
                showNumber: false,

                isViewerShow: false,
                viewerIndex: 0,
            }
        },
        created() {
        },
        mounted(){
            this.userId = this.$route.query.id
            this.aId = this.$route.query.aId
            this.cId = this.$route.query.cId
            this.getUserList()

            /*this.list = [
                {
                    src: "http://p.ssl.qhimg.com/t01724724fc9caa94bf.jpg",
                    name: "场景一"
                },
                {
                    src: "http://cs-op.douyucdn.cn/vod-index/2018/01/22/e21ebad16025f747b8bc96091042c900.jpg",
                    name: "场景二"
                },
                {
                    src: "http://p9.qhimg.com/t01447c917234911cf2.jpg",
                    name: "场景三"
                },
                {
                    src: "http://05.imgmini.eastday.com/mobile/20180212/20180212201510_0e27ec86ed59034f300f4e1d4aee8fd4_1.jpeg",
                    name: "场景四"
                },

                {
                    src: "http://i5.hexun.com/2018-02-01/192378386.jpg",
                    name: "场景七"
                },
                {
                    src: "http://i-3.yiwan.com/2018/1/29/46593a88-631b-4c58-865e-237bdff3f29a.jpg",
                    name: "场景八"
                }
            ]*/
        },
        methods: {
            handleClick(item) {
                // alert()
                console.log(item)
                let index = item;
                this.viewerIndex = index
                this.isViewerShow = true
            },
            $_onEndReached(){
                console.log('di')
            },
            showIdcard(){
                this.showNumber = true
            },
            hideIdcard(){
                this.showNumber = false
            },
            getUserList(){
                personnelArchivesById({
                    aId: this.aId,
                    cId: this.cId,
                    id: this.userId
                }).then(res => {
                    const {code, data} = res;
                    if (code === 1) {
                        // this.deviceDataList = data;
                        console.log(res)
                        // this.msgData = data
                        this.renyuanMsg = data.personnelInfo[0];
                        this.zhengjianList = data.userDiploma;
                        for(var i=0; i<this.zhengjianList.length; i++){
                            this.zhengjianImgList.push(this.zhengjianList[i].diplomaImg)
                        }
                        /*this.smoothRecord = data.smoothRecord;*/
                    }
                }).catch(err => {
                })
            },
            // 隐藏身份证中间几位
            plusXing(str,frontLen,endLen) {
                var len = str.length-frontLen-endLen;
                var xing = '';
                for (var i=0;i<len;i++) {
                    xing+='*';
                }
                return str.substring(0,frontLen)+xing+str.substring(str.length-endLen);
            }
        }
    }
</script>

<style  lang="scss" type="text/scss">
.personnel_info{
    background: #F2F2F2;
    .my-scroll-view{
        height: 100vh;
    }
    .top{
        height: 3rem;
        width: 100%;
        background-image: url(~@/assets/personnel/personnel_bg@2x.png);
        background-size:100% 100%;
        background-repeat:no-repeat;
        background-position:center top;
        padding: 0.7rem 0 0 0.25rem;
        box-sizing: border-box;
        img{
            width: 1.14rem;
            height: 1.14rem;
            vertical-align: middle;
        }
        span{
            font-size: 0.4rem;
            color: #ffffff;
            margin-left: 0.26rem;
            display: inline-block;
            /*vertical-align: text-top;*/
            margin-top: 0.1rem;
        }
    }
    .ulbox{
        background: #ffffff;
        margin-top: -0.3rem;
        border-radius: 18px 18px 0 0;
        .list{
            height: 1.2rem;
            line-height: 1.2rem;
            /*overflow: hidden;*/
            padding-left: 0.15rem;
            i{
                font-size: 0.3rem;
                color: #2C2C2C;
                display:inline-block;
                float: left;
            }
            .list-right{
                float:right;
                width: 90%;
                border-bottom: 1px solid #cecece;
                color: #222222;
                p{
                    font-size: 0.32rem;
                    a{
                        display: inline-block;
                        font-size: 0.2rem;
                        color: #3494ff;
                        margin-left: 0.15rem;
                        text-decoration: none;
                    }
                }
                .time{
                    font-size: 0.22rem;
                    margin: 0.1rem 0 0.35rem 0;
                }
            }
        }
        .list:last-child{
            .list-right{
                border-bottom: none;
            }
        }
        .first{
            line-height: normal;
            padding-top: 0.3rem;
            i{
                margin-top: 0.07rem;
            }
        }
    }
    .tabinfo{
        margin-top: 0.2rem;
        .md-tabs{
            .md-tab-bar{
                background: #ffffff;
            }
            .md-tabs-content{
                min-height: 3rem;
                background: #FFF;
                font-size: 0.28rem;
                /*padding: 0.15rem;*/
                /*box-sizing: border-box;*/
            }
            .md-tab-bar .md-scroll-view {
                display: block;
                width: 100%;
            }
        }
    }

}
</style>