<template>
    <lj-win-common title="人员档案修改">
        <div slot="body" style="padding:1px 0">    

            <div>
                <div v-for="(item,index) in FileList">
                    <van-cell :title="item.className" is-link arrow-direction="down" value="内容" 
                        style="font-size:15px;font-weight:bold;"/>
                    <div style="background-color:white;">
                        <van-grid :border="false" :column-num="3" square>
                            <van-grid-item v-for="(picture,picIndex) in item.FileDatas" :text="picture.fileName">
                                <lj-img-vant :md5="picture.filemd5" :src="picture.base64" @click.native="photoBrowser(picture.filemd5)" /> 
                                <span @click="deleteImgs(index,picIndex)">
                                    <i class="iconfont icon-guanbi" style="font-size: 14px;color: #fc4e2c;"></i>
                                </span>
                            </van-grid-item>
                            <div class="icon_addpic" @click="handleAddFile(index)" >
                                <i class="iconfont icon-tianjiatupian"></i>
                            </div>
                        </van-grid>        
                    </div>
                </div>
            </div>      
           
        </div>
        <div slot="footer">
            <mu-button full-width color="success" @click="handleClickSave">保存</mu-button> 
        </div>
    </lj-win-common>
</template>

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

	export default {
		components: {
			LjWinCommon,
			LjImgVant,
		},
		data() {
			return {
				token:'',
                FileList:[],   
                UrlList:[],
                deleteFileList:[],
                addFileList:[],
                empid:0,
                empcode:'',
                chooseIndex: 0,
			}
		},
		created() {
            var mainObject = $lj.getPageParam();
            this.token = $lj.getStorage("token");
            this.empid = mainObject.empid;   
            this.empcode = mainObject.empcode;

		},
        mounted() {
            this.refresh();
		},
		methods: {
            refresh(){
                this.FileList = [];
                var body = {
                    token: this.token,
                    empid: this.empid
                }

                let self = this;
                $lj.postLJRequest("GetL1EmpInfoOne", body, function (ret) {
                    if (ret) {
                        self.FileList = ret.FileList;
                    }
                }) 
            },
            deleteImgs(index,picindex){
                this.deleteFileList.push(this.FileList[index].FileDatas[picindex].fileid);
                this.FileList[index].FileDatas.splice(picindex,1);
            },
            photoBrowser(filemd5) {
                var images = [];
                var md5list = [];
                var url = $lj.constant.cacheDir + "/" + filemd5;
                images.push(url);
                md5list.push(filemd5);
                $lj.photoBrowser(images, 0, md5list);
            },
            handleAddFile(index){
                this.chooseIndex = index;
                let self = this;
                var UIAlbumBrowser = api.require('UIAlbumBrowser');
                UIAlbumBrowser.imagePicker({
                    max: 9, //可以选择图片个数
                    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
                    
                    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) {
                                            var datas = {
                                                fileid: 0,
                                                base64: ret,
                                                fileType: name.substring(name.lastIndexOf("\.") + 1, name.length),
                                                fileName: name,
                                                billtype: 704,
                                                ClassID: self2.FileList[self2.chooseIndex].classId,
                                                relid: self2.empid,
                                                relcode: self2.empcode,
                                                relidmx: 0,
                                            }

                                            self2.FileList[self2.chooseIndex].FileDatas.push(datas);                                    
                                            self2.addFileList.push(datas);
                                            api.hideProgress();                                                                                
                                        }                                                                             
                                    });
                                } else {
                                    alert(JSON.stringify(err));
                                    api.hideProgress();
                                    return;
                                }
                            });
                        } else {
                            alert(JSON.stringify(err));
                            return;
                        }
                    });
                });

            },
            handleClickSave(){
                if(this.deleteFileList.length == 0 && this.addFileList.length == 0){
                    alert("没有内容修改，操作取消");
                    return;
                }

                $lj.postLJRequest("UpdateL1Empinfo", {
                    token: this.token,
                    deleteFileList: this.deleteFileList,
                    addFileList: this.addFileList
                }, function (ret) {
                    if (ret) {                                       
                        $lj.toast("保存成功!");  
                        $lj.sendEvent("empinfo-edit", true);
                        $lj.closeWin();
                    }
                }); 
            }
		}
	}

</script>

<style>

.icon_addpic {
        background-color: #f6f6f6;
        color: #bbb;
        height: 100px;
        flex: 0 0 100px;
        text-align: center;
        line-height: 100px;
        font-size: 30px;
    }
</style>