<template>
    <div class="Modal">
        <Row class="colLeft">
            <Col :xl="18" :lg="18" :md="18" :sm="18" :xs="24" class="colLeft">
                <div class="conter">
                    <div class="bnt acea-row row-middle">
                        <Col span="24" class="mb10">
                            <Button type="primary" :disabled="checkPicList.length===0" @click="checkPics" class="mr10">使用选中图片</Button>
                            <Upload :show-upload-list="false" :action="fileUrl" class="mr10 mb10"
                                    :before-upload="beforeUpload"
                                    :data="uploadData"
                                    :headers="header"
                                    :multiple="true"
                                    :on-success="handleSuccess"
                                    style="margin-top: 1px;display: inline-block">
                                <Button type="primary">上传图片</Button>
                            </Upload>
                        </Col>
                    </div>
                    <div class="pictrueList acea-row">
                        <Row :gutter="24" class="conter">
                            <div v-show="isShowPic" class="imagesNo" style="width: 100%">
                                <Icon type="ios-images" size="60" color="#dbdbdb"/>
                                <span class="imagesNo_sp">图片为空</span>
                            </div>
                            <div class="acea-row">
                                <div class="pictrueList_pic mr10 mb10" v-for="(item, index) in pictrueList" :key="index">
                                    <img :class="item.isSelect ? 'on': '' " v-lazy="item.img"
                                         @click.stop="changImage(item, index, pictrueList)"/>
                                </div>
                            </div>
                        </Row>
                    </div>
                </div>
            </Col>
        </Row>
    </div>
</template>

<script>
    import Setting from '@/setting';
    export default {
        name: 'uploadPictures',
        // components: { editFrom },
        props: {
            isChoice: {
                type: String,
                default: ''
            },
            gridBtn: {
                type: Object,
                default: null
            },
            gridPic: {
                type: Object,
                default: null
            }
        },
        data () {
            return {
                spinShow: false,
                fileUrl: Setting.apiBaseURL + "/systemv1/upload/index",
                modalPic: false,
                treeData: [],
                treeData2: [],
                pictrueList: [],
                uploadData: {
                    isz:0
                }, // 上传参数
                checkPicList: [],
                uploadName: {
                    name: ''
                },
                FromData: null,
                isShow: false,
                treeId: 0,
                isJudge: false,
                buttonProps: {
                    type: 'default',
                    size: 'small'
                },
                fileData: {
                    pid: 0,
                    page: 1,
                    limit: 12
                },
                total: 0,
                pids: 0,
                list: [],
                modalTitleSs: '',
                isShowPic: true,
                header: {},
                ids: [] // 选中附件的id集合
            }
        },
        mounted () {
            this.getToken();
        },
        methods: {
            // 上传头部token
            getToken () {
                var upHeaders = {};
                const token = this.$utils.util.cookies.get('system_token');
                if (token) {
                    upHeaders['SYSTEM-ACC-TOKEN'] = token;
                }
                this.header = upHeaders;
            },
            // 删除图片
            editPicList (tit) {

            },
            // 鼠标移入 移出
            onMouseOver (root, node, data) {
                event.preventDefault();
                data.flag = !data.flag
            },
            // 上传之前
            beforeUpload () {
                this.uploadData = {
                    pid: this.treeId
                }
                let promise = new Promise((resolve) => {
                    this.$nextTick(function () {
                        resolve(true);
                    });
                });
                return promise;
            },
            // 上传成功
            handleSuccess (res, file) {
                if (res.code === 200) {
                    this.$Message.success("上传成功");
                    this.isShowPic = false;
                    this.pictrueList.push({
                        img : res.data.img,
                        isSelect : false
                    })
                } else {
                    this.$Message.error(res.msg);
                }
            },
            // 关闭
            cancel () {
                this.$emit('changeCancel')
            },
            // 选中图片
            changImage (item, index, row) {
                let selectItem = '';
                this.$set(this.pictrueList[index], 'isSelect', item.isSelect === undefined ? true : !item.isSelect);
                selectItem = this.pictrueList.filter((item) => { return item.isSelect === true });
                this.checkPicList = selectItem;
                this.ids = [];
                this.checkPicList.map((item, index) => {
                    this.ids.push(item.img)
                });
            },
            // 点击使用选中图片
            checkPics () {
                if (this.isChoice === '单选') {
                    if (this.checkPicList.length > 1) return this.$Message.warning('最多只能选一张图片');
                    this.$emit('getPic', this.checkPicList[0]);
                } else {
                    this.$emit('getPicD', this.checkPicList);
                    console.log(this.checkPicList)
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    .selectTreeClass
        background:#d5e8fc;
    .treeBox
        width 100%
        height 100%
        >>> .ivu-tree-title-selected, .ivu-tree-title-selected:hover
             color #2D8cF0 !important
             background-color #fff !important
        >>> .ivu-btn-icon-only
            width 20px !important
            height 20px !important
        >>> .ivu-tree-title:hover
            color #2D8cF0 !important
            background-color #fff !important
    .pictrueList_pic
        width 120px
        height 120px
        cursor pointer
        img
          width 100%
          height 100%
    .trees-coadd
        width: 100%;
        border-radius: 4px;
        overflow: hidden;
        position: relative;
        .scollhide
            overflow-x: hidden;
            overflow-y: scroll;
            padding: 10px 0 10px 0;
            box-sizing: border-box;
            .trees
                width: 100%;
                max-height: 374px;
        .scollhide::-webkit-scrollbar
            display: none;
    .treeSel >>>.ivu-select-dropdown-list
        padding 0 5px!important
        box-sizing border-box
    .imagesNo
        display: flex;
        justify-content: center;
        flex-direction column
        align-items center
        margin: 65px 0;
        .imagesNo_sp
            font-size 13px
            color #dbdbdb
            line-height 3
    .Modal{
        width:100%;
        height 100%;background #fff !important;}
    .Nav{width:100%;border-right:1px solid #eee;}
    .colLeft{padding-right:0!important;height:100%;}
    .conter{width:99%; height:100%;}
    .conter .bnt{width:100%;padding: 0 13px 10px 15px;box-sizing border-box}
    .conter .pictrueList{padding-left:25px;width 100%;}
    .conter .pictrueList img{width:100%;border:2px solid #fff;}
    .conter .pictrueList img.on{border:2px solid #5FB878;}
    .conter .footer{padding:20px;}
</style>
