<template>
    <ul class="img_List clearfix" ref="goImgList">
        <li
            :key="index"
            class="hand upload-list-item"
            v-for="(item,index) of items"
            @click.stop="setChangebgiLi($event, item)"
        >
            <div>
                <img :src="item.imgUrl" :width="imgWidth" :height="imgHeight"/>
                <div class="upload-list-cover" :style="listCoverStyle">
                    <Icon
                        :size="26"
                        v-show="item.type === 'customer'"
                        type="ios-trash"
                        @click.stop="handleRemove(item)"
                    ></Icon>
                </div>
            </div>
            <div v-if="checkBox" style="text-align: center;">
                <span v-if="!itemActive(item)" :class="unCheckClasses"></span>
                <span style="color:#2d8cf0" v-else="itemActive(item)" :class="checkClasses"></span>
            </div>
        </li>

        <li
            class="hand"
            style="background-color: #DEDEDE"
        >
            <go-img-upload-view @addFile="addFile"></go-img-upload-view>
        </li>
    </ul>
</template>

<script>
    import GoImgUploadView from "./components/go-img-upload-view";
    import WinUtils from "../../../winUtils";
    import {AssertUtils} from 'goingutils';

    export default {
        name: "goImgList",
        data: function () {
            return {
                checkClasses:`goingicon go-checkboxoutlineblank`,
                unCheckClasses:`goingicon go-icon-checkboxmarked`,
                imgUrls:[],
                bgUrls:[],
                selIds:[],

            };
        },
        props: {
            //图片的宽度
            imgWidth: {
                type: Number,
                default: 90
            },
            //是否相应checkbox功能
            checkBox: {
                type: Boolean,
                default: true
            },
            selUrls: {
                type: [String,Array],
                default: ''
            },
            //是否为多选
            multiple: {
                type: Boolean,
                default: false
            },
            items: {
                type: Array,
                default: () => []
            }
        },
        computed: {

            listCoverStyle(){
                let defS={};
                if(this.checkBox){
                    defS["height"]=50+"px";
                }else{
                    defS["height"]=65+"px";
                }
                return defS;
            },
            imgHeight(){
                return this.checkBox?50:65;
            }
        },
        mounted(){
            //如果选中到urls 不为空则相应进行状态check设置
            if(AssertUtils.isNotNull(this.selUrls)){
                this.initItemsCheck();
            }
        },
        watch:{
            selUrls(newValue){
                if(newValue!=null&&newValue.length>0){
                    this.initItemsCheck();
                }else{
                    this.clearAllSel();
                }
            }
        },
        methods: {
            clearAllSel(){
                this.items.forEach(function (item) {
                    item.active=false;
                });
            },
            itemActive(item){
                let flag=true;
                if(item.active==null){
                    this.$set(item,"active",false);
                    flag=false;
                }else{
                    if(item.active===false||item.active==='false'){
                        flag=false;
                    }
                }
                return flag;
            },
            //初始化选项到选中状态
            initItemsCheck(){
                this.selIds=[];
                this.imgUrls=[];
                this.bgUrls=[];
                //将打勾的去掉
                this.clearAllSel();

                this.items.forEach((itemObj)=>{
                    this.setCheckState(itemObj);
                });
            },
            //根据selUrls 设置相应到item为选中
            setCheckState(item){
                let flag=false;
                if(AssertUtils.isArray(this.selUrls)){
                    flag= this.selUrls.some((value)=>value===item.bgUrl);
                }else{
                    flag= this.selUrls===item.bgUrl;
                }
                if(flag){
                    this.selIds.push(item.id);
                    this.imgUrls.push(item.imgUrl);
                    this.bgUrls.push(item.bgUrl);
                    item.active=true;
                }
            },
            addFile(fileIds) {
                this.$emit("addFile", fileIds);
            },
            getNewSelIds(targetAry,extendId){
                let newIds=[];
                targetAry.forEach(function (oldId) {
                    if(oldId!==extendId){
                        newIds.push(oldId);
                    }
                });
                return newIds;
            },
            //多选操作
            multipleSelRecord(event, item){
                //选中选项
                item.active=!item.active;
                if(item.active){
                    this.selIds.push(item['id']);
                    this.imgUrls.push(item['imgUrl']);
                    this.bgUrls.push(item['bgUrl']);
                }else{
                    this.selIds=this.getNewSelIds(this.selIds,item['id']);
                    this.imgUrls=this.getNewSelIds(this.imgUrls,item['imgUrl']);
                    this.bgUrls=this.getNewSelIds(this.bgUrls,item['bgUrl']);
                }
                this.$emit("selimg", {item, checkVal: item.active,selIds:this.selIds,imgUrls:this.imgUrls,bgUrls:this.bgUrls});
            },
            //单选操作
            singleSelRecord(event, item,checkElFlag){
                this.selIds=[];
                this.imgUrls=[];
                this.bgUrls=[];
                //将打勾的去掉
                this.clearAllSel();
                this.multipleSelRecord(event, item,checkElFlag);
            },
            //选择相应图片的事件
            setChangebgiLi(event, item) {
                if(this.multiple){
                    this.multipleSelRecord(event, item,false);
                }else{
                    this.singleSelRecord(event, item,false);
                }
            },
            //删除用户自己定义的图片背景选项
            handleRemove(item) {
                WinUtils.executeConfirm("您确定删除该记录吗!",()=>{
                    this.$emit("delImgRecord", item);
                });
            }
        },
        components: {
            GoImgUploadView
        },
        beforeDestroy(){
            this.imgUrls=null;
            this.selIds=null;
        }
    };
</script>
