<template>
    <div  >
        <el-dialog title="选择图片" :visible.sync="dialogVisible" width="1000px">
            <el-container>
                <el-aside style="background-color: #fff;" width="150px">
                    <ul style="padding-left: 0;margin: 0;">
                        <li style="cursor: pointer;" v-for="item in options" :key="item.id"
                            :class="[activedata == item.id ? 'activedata' : '']" @click="changeEvent(item.id)">
                            {{ item.name }} <span style="font-size: 12px;">({{ item.count }})</span>
                        </li>
                    </ul>
                    <div class="uplocation" :class="[activedata == -1 ? 'activedata' : '']" @click="uplocation">我的图片
                    </div>
                </el-aside>
                <el-main>
                    <imageComponent @onSelectImage="onSelectImage" @getList="getList" :activedata="activedata"
                        :list='dataImages'>
                    </imageComponent>
                    <mypagination :total="total" @gopageEvent="handleCurrentChange"></mypagination>
                    <!-- <el-pagination style="position: absolute;right: 60px;" layout="prev, pager, next ,jumper" background :total="total" :page-size="pageSize"
                        @current-change="handleCurrentChange">
                    </el-pagination> -->
                </el-main>
            </el-container>
            <div  style="text-align: center">
                <el-button type="success" @click="sumbit">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>

        <!-- <el-select v-model="value" placeholder="请选择" @change="changeEvent">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                    <span style="float: left">{{ item.name }}</span>
                    <template v-if="item.id != '681'">
                        <template v-if="item.id != '682'">
                            <template v-if="item.id != '699'">
                                <span style="float: right; color: #8492a6; font-size: 13px"><i class="el-icon-error "
                                        @click="deleteType(item.id)"></i></span>
                            </template>
</template>
</template>
</el-option>
</el-select> -->
        <!-- <el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button> -->
        <!-- <el-button type="primary" @click="showUpload = true">新增图片</el-button> -->

        <!-- 新增类型 -->
        <!-- <el-dialog title="新增类型" :visible.sync="dialogTableVisibles">
            <el-input v-model="typedata" placeholder="请输入类型" autocomplete="off"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisibles = false">取 消</el-button>
                <el-button type="primary" @click="addtype">确 定</el-button>
            </span>
        </el-dialog> -->
        <!-- 新增图片 -->
        <!-- <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" 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 { getcommonCategor, getcommonpicture, storeAddcategory, addImg, delcate } from "@/api/imagesPhp";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import imageComponent from './imageComponent.vue'
import mypagination from './mypagination'
export default {
    computed: {
        ...mapGetters(["qiNiuUploadApi"])
    },
    components: {
        imageComponent,mypagination
    },
    data() {
        return {
            dialogVisible: false,
            dialogTableVisibles: false,
            selectImage: [],
            headers: {
                Authorization: getToken()
            },
            files: [],
            dataImages: [],
            options: [],
            fileList: [],
            value: '',
            typedata: '',
            showUpload: false,
            page: 1,
            total: 0,
            // pageSize: 18,
            activedata: '681'
        }
    },
    mounted() {
        this.getType()
    },
    methods: {
        uplocation() {
            this.activedata = -1
            this.page = 1
            this.dataImages = []
            // this.pageSize = 17
            this.getList()
        },
        changeEvent(id) {
            this.page = 1
            // this.pageSize = 18
            this.activedata = id
            this.getList()
        },
        handleCurrentChange(i) {
            this.page = i
            this.getList()
        },
        // 删除类型
        deleteType(id) {
            this.$confirm('删除该类型, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await delcate({
                    id,
                    store_id: localStorage.getItem("shopId"),
                })
                this.getType()
                this.$message({
                    type: 'success',
                    message: res.msg
                });
            }).catch(() => {
                this.$message.error(res.msg);
            });
        },
        // 刷新列表数据
        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: this.value,
                    store_id: localStorage.getItem("shopId"),
                    url: arr
                })
                if (res.code == 1) {
                    this.getType(this.value)
                } else {
                    this.$message.error(res.msg);
                }
                this.files = [];
            }
        },
        handleBeforeRemove(file, fileList) {
            let index = this.files.findIndex(ele => ele.name == file.name)
            this.files.splice(index, 1);
        },
        handleSuccess(response, file, fileList) {
            this.files.push(file)
        },
        async addtype() {
            if (this.typedata) {
                const res = await storeAddcategory({
                    store_id: localStorage.getItem("shopId"),
                    name: this.typedata
                });
                if (res.msg == '成功') {
                    this.typedata = ''
                    this.dialogTableVisibles = false
                    this.getType()
                }
            }
        },

        sumbit() {
            this.dialogVisible = false
            this.$emit('successEvent', this.selectImage)
        },
        show() {
            this.dialogVisible = true
        },
        async getList() {
            let obj = {
                category: this.activedata == -1 ? '' : this.activedata,
                page: this.page,
                size: 18,
                store_id: localStorage.getItem("shopId"),
            }
            const res = await getcommonpicture(obj);
            this.dataImages = res.data
            this.total = res.count
        },
        async getType(valueIndex) {
            const res = await getcommonCategor({
                store_id: localStorage.getItem("shopId"),
            });
            this.options = res.data
            this.value = valueIndex ? valueIndex : res.data[0].id
            this.getList()
        },
        onSelectImage(d) {
            this.selectImage = [d]
        }
    }
}
</script>
<style scoped>
.activedata {
    color: #1890ff;
    /* background-color: #f6f7f8; */
}

.uplocation {
    cursor: pointer;
    /* position: absolute; */
    /* bottom: 20px; */
}
</style>