<template>
    <div style="">
        <div style="text-align: right;" v-if="activedata == -1">
            <span style="color: #aaa;">只能上传png、jgp图片</span>
            <el-button @click="showUpload = true" style="background-color: #f6f7f8;">上传文件</el-button>
        </div>

        <ul class="ulStyle" :class="[activedata == -1 ? '' : 'heightStyle']">
            <!-- <li class="upImgStyles" @click="showUpload = true" v-if="activedata == -1">
                +
            </li> -->
            <li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'actives' : '']"
                @click="clickEvent(item)">
                <img :src="item.url" style="width: 100px;height: 100px;" alt="">
                <!-- {{ item.name.substring(0, 6) }} -->
            </li>
        </ul>
        <template v-if="showUpload">
            <el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="1000px"
                @close="showUpload = false">
                <el-upload :before-remove="handleBeforeRemove" :before-upload="beforeUpload" list-type="picture-card"
                    :on-success="handleSuccess" :file-list="fileList" :headers="headers" :action="qiNiuUploadApi"
                    class="upload-demo" multiple>
                    <i class="el-icon-plus"></i>
                </el-upload>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="doSubmit">确认</el-button>
                </div>
            </el-dialog>
        </template>
    </div>
</template>
<script>
import { delimg } from "@/api/imagesPhp";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
import { getcommonCategor, getcommonpicture, storeAddcategory, addImg, delcate } from "@/api/imagesPhp";

export default {
    computed: {
        ...mapGetters(["qiNiuUploadApi"])
    },
    props: ['list', 'activedata'],
    data() {
        return {
            showUpload: false,
            selectList: [],
            files: [],
            fileList: [],
            headers: {
                Authorization: getToken()
            },
        }
    },
    mounted() {

    },
    methods: {
        async doSubmit() {
            this.showUpload = false;
            let arr = []
            if (this.files.length) {
                this.files.forEach(ele => {
                    arr.push({
                        url: ele.response.data[0],
                        name: ele.name
                    })
                })
                const res = await addImg({
                    category: '',
                    store_id: localStorage.getItem("shopId"),
                    url: arr
                })
                if (res.code == 1) {
                    // this.getType(this.value)
                    this.$emit('getList')
                    this.$message.success(res.msg);

                } else {
                    this.$message.error(res.msg);
                }
                this.files = [];
            }
        },
        handleSuccess(response, file, fileList) {
            this.files.push(file)
        },
        handleBeforeRemove(file, fileList) {
            let index = this.files.findIndex(ele => ele.name == file.name)
            this.files.splice(index, 1);
        },
        beforeUpload(file) {
            if (file.type == 'image/png') {
            } else if (file.type == 'image/jpeg') {
            } else {
                this.$message.error('只能上传图片')
                return false
            }

        },
        clickEvent(d) {
            this.selectList = d
            this.$emit('onSelectImage', d)
        },
        async deleteEvent(id) {
            let res = await delimg({
                id,
                store_id: localStorage.getItem("shopId"),
            })
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
            this.$emit('getList')
        },
    }
}
</script>
<style>
ul,
li {
    list-style: none;
}

.show {
    position: absolute;
    right: -10px;
    top: -10px;
    display: none;
}

.listyle:hover>.show {
    display: block;
}

.buttonstyle {
    border-radius: 50%;
    color: #db1616;
    background-color: #fff;
    font-size: 20px;
}

.ulStyle {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    height: 402px;
}

.heightStyle {
    height: 402px;
}


.listyle {
    width: 110px;
    height: 110px;
    margin-right: 10px;
    margin-top: 10px;
    border: 5px solid #fff;
    position: relative;
    text-align: center;
}

.listyle:last-child {
    margin-right: auto;
}

.upImgStyles {
    cursor: pointer;
    width: 110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
    border: 1px dashed #ccc;
    border-radius: 1%;
    font-size: 30px;
    color: #ccc;
    margin-right: 10px;
    margin-top: 10px;
}


.actives {
    border: 5px solid #1890ff;
}
</style>
