<template>
    <lj-win-common title="人员档案">

        <div slot="body" style="padding:1px 0">
            <div class="mainClass">
                <div>
                    <span style="font-size:16px;">{{Emp.empname}}</span>
                    <van-tag type="primary" style="font-size:10px;">{{Emp.empcode}}</van-tag>
                    <van-tag type="success " style="font-size:10px;">{{Emp.scname}}</van-tag>
                </div>
                <mu-row>
                    <mu-col class="baseClass" span="9">职务：{{Emp.duty}}  工龄：{{Emp.rz_str}}</mu-col>
                </mu-row>
                <mu-row>
                    <mu-col class="baseClass" span="8">部门：{{Emp.departmentname}}</mu-col>
                </mu-row>
                <mu-row>
                    <mu-col class="baseClass" span="3" style="color:darkslateblue;">上司：{{Emp.Empname_p}}</mu-col>
                </mu-row>

                
                <div class="imgclass">
                    <div v-if="showImages" >
                        <lj-img-vant style="width: 20vw; height: 20vw;" :Round="true" fit="cover"
                                    :md5="Emp.filemd5" :src="Emp.base64" @click.native="photoBrowser(Emp.filemd5)" />		
                                    <!-- src="https://img01.yzcdn.cn/vant/cat.jpeg"			 -->
                    </div>
                    <div v-else>
                        <mu-avatar size="60">{{empnameLastone}}</mu-avatar>
                    </div>
                    <div style="text-align:center;color:#0099ff;" @click="handleAddFile">编辑头像</div>
                </div>     
            </div>

            <div class="tabsClass">
                <van-tabs v-model="activeName" scrollspy sticky offset-top="80px;">
                    <van-tab title="基础资料" name="base">
                        <div class="tabClass">
                            <lj-dictionary :data="Emp" :columns="dictColumns"></lj-dictionary>
                        </div>
                    </van-tab>
                    <van-tab title="附件" name="fj">
                        <div class="tabClass">
                            <div v-for="item in FileList">
                                <van-cell :title="item.className" is-link arrow-direction="down" value="内容" 
                                    style="font-size:15px;font-weight:bold;"/>
                                <!-- <div class="fjTitleClass">{{item.className}}</div> -->
                                <div>
                                    <van-grid :border="false" :column-num="3" square>
                                        <van-grid-item v-for="picture in item.FileDatas">
                                            <lj-img-vant v-if="picture.filemd5" :md5="picture.filemd5" @click.native="photoBrowser(picture.filemd5)" />
                                        </van-grid-item>
                                    </van-grid>
                                </div>
                                <div class="lj-divider"></div>
                            </div>
                        </div>
                    </van-tab>

                    <van-tab title="合同信息" name="contract">
                         <div class="tabClass">
                             <mu-row>
                                 <mu-col class="colClass" span="5">签订日期</mu-col>
                                 <mu-col class="colClass" span="2"></mu-col>
                                 <mu-col class="colClass" span="5">到期日期</mu-col>
                             </mu-row>

                            <mu-row v-for="item in contractList">
                                 <mu-col class="colClass" span="5">{{item.bdate | dateFilter}}</mu-col>
                                 <mu-col class="colClass" span="2">——</mu-col>
                                 <mu-col class="colClass" span="5">{{item.edate | dateFilter}}</mu-col>
                             </mu-row>
                        </div>
                    </van-tab>
                    
                    <van-tab title="借还登记" name="inout">
                         <div class="tabClass">
                             <mu-row>
                                 <mu-col class="colClass" span="3">物品</mu-col>
                                 <mu-col class="colClass" span="3">借用日期</mu-col>
                                 <mu-col class="colClass" span="3">归还日期</mu-col>
                                 <mu-col class="colClass" span="3">已归还</mu-col>
                             </mu-row>

                            <mu-row v-for="item in lyList">
                                 <mu-col class="colClass" span="3">{{item.mtrlname}}</mu-col>
                                 <mu-col class="colClass" span="3">{{item.outdate | dateFilter}}</mu-col>
                                 <mu-col class="colClass" span="3">{{item.indate | dateFilter}}</mu-col>
                                 <mu-col class="colClass" span="3">
                                     <i v-if="item.ifly == 1" class="icon-progress-done iconfont lj-card-summary-icon"></i>
                                 </mu-col>
                             </mu-row>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>


        </div>
        <div slot="footer">
            <mu-button full-width color="primary" @click="handleClickEdit">修改</mu-button> 
        </div>
    </lj-win-common>
</template>

<script>
	import LjWinCommon from 'components/lj-win-common';
	import LjImgVant from "components/lj-img-vant";
    import LjDictionary from "components/lj-dictionary";

	export default {
		components: {
			LjWinCommon,
			LjImgVant,
            LjDictionary,
		},
		data() {
			return {
				token:'',
                activeName:"base",
                Emp:{},
                FileList:[],
                contractList:[],  
                lyList:[],
                empid:0,
                empcode:'',
                base64Temp: "",
                showImages: false,
                empnameLastone:"",
                dictColumns: [
                    {label: "年龄", property: "age", required: -1},
                    {label: "性别", property: "sex", required: -1},
                    {label: "籍贯", property: "homeplace", required: -1},
                    {label: "联系电话", property: "handtel", required: -1},
                    {label: "身份证号", property: "idcard", required: -1},
                    {label: "部门", property: "departmentname", required: -1},

                ],
			}
		},
		created() {
            ///
            var mainObject = $lj.getPageParam();
            this.token = $lj.getStorage("token");
            this.empid = mainObject.empid;
            this.empcode = mainObject.empcode;
            this.empnameLastone = $lj.strLastOne(mainObject.empname);
		},
		mounted() {
            this.refresh();
		},
		methods: {
			refresh() {
                this.Emp = {};
                this.FileList = [];
                var body = {
                    token: this.token,
                    empid: this.empid
                }

                let self = this;
                $lj.postLJRequest("GetL1EmpInfoOne", body, function (ret) {
                    if (ret) {
                        self.Emp = ret.Emp;
                        self.FileList = ret.FileList;
                        self.contractList = ret.contractList;
                        self.lyList = ret.lyList;
                        self.changeImages();
                    }
                }) 
			},
            changeImages(){
                let imageBool = false;

                if(this.Emp.filemd5 || this.Emp.base64){
                    imageBool = true;
                }

                this.showImages = false;
                this.$nextTick(() => {
                    this.showImages = imageBool;
                })
            },
            handleClickEdit(){

                let self = this;
                $lj.removeEventListener("empinfo-edit");
                $lj.addEventListener("empinfo-edit", function (ret) {
                    if (ret) {
                        self.refresh();
                    }
                })

                $lj.openWin("empinfo-mx-edit", {
                    empid:this.empid,
                    empcode: this.empcode
                });
            },
            photoBrowser(filemd5) {
                var images = [];
                var md5list = [];
                var url = $lj.constant.cacheDir + "/" + filemd5;
                images.push(url);
                md5list.push(filemd5);
                $lj.photoBrowser(images, 0, md5list);
            },
            handleAddFile(){
                let self = this;
                var UIAlbumBrowser = api.require('UIAlbumBrowser');
                UIAlbumBrowser.imagePicker({
                    max: 1, //可以选择图片个数
                    showCamera: true,
                    animation: true,
                    styles: {
                        bg: '#000000',
                        mark: {
                            icon: '',
                            position: 'top_right',
                            size: 20
                        },
                        nav: {
                            bg: '#000000',
                            cancelColor: '#fff',
                            cancelSize: 16,
                            nextStepColor: '#fff',
                            nextStepSize: 16,
                            finishText: '确定'
                        },
                        thumbnail: { //（可选项）返回的缩略图配置，**建议本图片不要设置过大** 若已有缩略图，则使用已有的缩略图。若要重新生成缩略图，可先调用清除缓存接口api.clearCache()。  
                            w: 100, //（可选项）数字类型；返回的缩略图的宽；默认：原图的宽度
                            h: 100 //（可选项）数字类型；返回的缩略图的宽；默认：原图的高度
                        }
                    },
                }, function (ret) {
                    if (ret.eventType == 'nextStep') {
                        var UIAlbumBrowser = api.require('UIAlbumBrowser');
                        UIAlbumBrowser.closePicker();
                        if (ret.list.length > 0) {
                            self.DealImg(ret.list)
                        }
                    } else if (ret.eventType == 'clickCamera' || ret.eventType == "") {
                        let List = [];
                        List.push({
                            path: ret.originalPath
                        })
                        self.DealImg(List);                      
                    }
                });
            },
            DealImg(List){
                let self = this;
                api.showProgress({
                    title: '处理图片中',
                    text: '请稍候...',
                    modal: false
                });
                List.forEach(el => {
                    let path = el.path
                    
                    self.base64Temp = '';
                    var trans = api.require('trans');
                    var UIAlbumBrowser = api.require('UIAlbumBrowser');
                    UIAlbumBrowser.transPath({
                        path: path
                    }, function(ret, err) {
                        if (ret) {
                            let name = ret.path.substring(ret.path.lastIndexOf("\/") + 1, ret.path.length);
                            trans.decodeImgToBase64({
                                imgPath: ret.path
                            }, function (ret, err) {
                                if (ret.status) {
                                    let self2 = self;
                                    $lj.compressBase64('data:image/jpeg;base64,' + ret.base64Str, {quality:0.8}, function (ret) {                            
                                        if (ret) {  
                                            self2.Emp.base64 = ret;       
                                            self2.changeImages();                                    
                                            $lj.postLJRequest("UploadL1Emppic", {
                                                token: $lj.getStorage("token"),
                                                base64: ret,
                                                empid: self2.empid
                                            }, function (ret) {
                                                if (ret) {                                       
                                                    $lj.toast("上传成功!");  
                                                }
                                            });                                       
                                            api.hideProgress();                                                                                
                                        }                                                                             
                                    });
                                } else {
                                    alert(JSON.stringify(err));
                                    api.hideProgress();
                                    return;
                                }
                            });
                        } else {
                            alert(JSON.stringify(err));
                            return;
                        }
                    });
                });

            },
		}
	}

</script>

<style>
.mainClass{
    background-color:white;
    padding: 20px 10px;
}
.baseClass{
    font-size: 15px;
}
.imgclass{
		float: right;
		position: absolute;
		top: 110px;
		right: 20px;
}
.tabClass{
    border-radius:10px;
    margin: 10px 10px;
    background-color:white;
    padding: 0 auto;
}
.colClass{
    text-align: center;
    font-size:15px;
}
.fjTitleClass{
    font-size: 15px;
    font-weight: bold;
    margin-left:12px;
    margin-bottom: -5px;
}
</style>