<template>
    <el-container>
        <el-main id="theme">
            <div class="text-general-color category-title">
                <p style="padding-left: 5px;">
                    logo
                    <el-tooltip class="item" content="仅支持png、jpg、jpeg、gif格式的图片文件，文件大小5M内，建议宽高180*30左右" placement="bottom-start">
                        <i style="font-size: 13px;" class="awsui-iconfont">&#58889;</i>
                    </el-tooltip>
                </p>
            </div>
            <div style="margin: 20px 0 20px 20px;">
                <div v-if="logoData.src != undefined" class="logo" style="width: 180px;height: 30px;position: relative;">
                    <el-card style="height: 100%;width: 100%;" shadow="never" :body-style="{padding: '0px', height: '100%', width: '100%'}">
                        <img :src=logoData.src class="image">
                    </el-card>
                    <div class="logo-mask"></div>
                    <i class="awsui-iconfont text-general-color logo-del-icon" @click="removeFile('logo')">&#58918;</i>
                </div>
                <div v-else style="width: 180px;height: 30px;" @click="openFileSelect('logo')">
                    <el-card style="height: 100%;width: 100%;border: 1px dashed #ebeef5;cursor: pointer;" shadow="never" :body-style="{padding: '0px',height: '100%', width: '100%', 'text-align': 'center', 'vertical-align': 'middle', 'line-height': '30px'}">
                        <i style="font-size: 15px;position: relative;top: 1px;" class="awsui-iconfont text-linker-color">&#58947;</i>
                        <span style="font-size: 12px;">&nbsp;&nbsp;添加logo</span>
                    </el-card>
                </div>
            </div>
            <div class="text-general-color category-title">
                <p style="padding-left: 5px;">
                    轮播图
                    <el-tooltip class="item" placement="bottom-start">
                        <span slot="content">默认按照图片名称进行排序，不支持自定义排序<br/>仅支持png、jpg、jpeg、gif格式的图片文件，文件大小5M内，建议宽高1920*440</span>
                        <i style="font-size: 13px;" class="awsui-iconfont">&#58889;</i>
                    </el-tooltip>
                </p>
            </div>
            <div style="margin: 20px 0 20px 20px;">
                <template v-for="item in bannerData">
                    <div class="banner" style="width: 280px;height: 60px;margin-right: 20px;display:inline-block;position: relative; margin-bottom :15px;">
                        <el-card style="height: 100%;width: 100%;" shadow="never" :body-style="{padding: '0px', height: '100%', width: '100%'}">
                            <img :src="item.src" class="image">
                        </el-card>
                        <div class="banner-mask"></div>
                        <i class="awsui-iconfont text-general-color banner-del-icon" style="cursor: pointer;float: right;position: relative;top: -38px;left: -5px;" @click="removeFile('banner', item.name)">&#58918;</i>
                    </div>
                </template>
                <div style="width: 280px;height: 60px;display: inline-block;" @click="openFileSelect('banner')">
                    <el-card style="height: 100%;width: 100%;border: 1px dashed #ebeef5;cursor: pointer;" shadow="never" :body-style="{padding: '0px',height: '100%', width: '100%', 'text-align': 'center', 'vertical-align': 'middle', 'line-height': '60px'}">
                        <i style="font-size: 20px;position: relative;top: 2px;" class="awsui-iconfont text-linker-color">&#58947;</i>
                        <span style="font-size: 12px;">&nbsp;&nbsp;添加轮播图</span>
                    </el-card>
                </div>
            </div>
            <PALUpload ref="logoUpload"
                       :appId=appId
                       :repositoryName="repositoryName"
                       :groupValue=groupValue
                       fileValue="logo"
                       :show-file-list=false
                       :on-success="uploadSuccess"
                       :before-upload="beforeUpload"
                       accept=".jpg,.jpeg,.gif,.png"
                       :file-list="fileList">
                <div style="display: none;">
                    <awsui-button id="selectLogoButton" style="width: 130px;" class="button-general-color" type="primary">文件上传</awsui-button>
                </div>
            </PALUpload>
            <PALUpload ref="bannerUpload"
                       :appId=appId
                       :repositoryName="repositoryName"
                       :groupValue=groupValue
                       fileValue="banner"
                       multiple
                       :show-file-list=false
                       :on-success="uploadSuccess"
                       :before-upload="beforeUpload"
                       accept=".jpg,.jpeg,.gif,.png"
                       :file-list="fileList">
                <div style="display: none;">
                    <awsui-button id="selectBannerButton" style="width: 130px;" class="button-general-color" type="primary">文件上传</awsui-button>
                </div>
            </PALUpload>
        </el-main>
    </el-container>
</template>

<script>
    import awsuiAxios from "../../awsuiAxios";
    import PALUpload from "@/components/common/upload";
    export default {
        name: "ThemeStyle",
        components: {PALUpload},
        data() {
            return {
                appId: 'com.actionsoft.apps.coe.pal',
                repositoryName: 'tmp',
                groupValue:"portal",
                fileValue:"logo",// logo,banner
                uploadKey: Math.random() + '',
                multiple: false,
                fileList: [],
                logoData: {},// {'name':'','src':''}
                bannerData: [] // [{'name':'','src':''}]
            }
        },
        mounted() {
            this.initData();
        },
        methods: {
            initData() {// 初始化
                const that = this;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_publish_publishgroup_theme_data_query'
                    }
                };
                // 查询数据
                awsuiAxios.post(params).then(function (ro) {
                    if(ro.result == 'ok') {
                        that.logoData = ro.data.logoData;
                        that.bannerData = ro.data.bannerData;
                    } else {
                        that.$message(ro.msg);
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            openFileSelect(type) {
                if (type == 'logo') {// logo
                    this.fileValue = 'logo';
                    document.getElementById("selectLogoButton").click();
                } else {// 轮播图
                    this.fileValue = 'banner';
                    document.getElementById("selectBannerButton").click();
                }
            },
            removeFile(type, fileName) {// 删除图片
                this.$confirm('确定要删除吗？', '提示', {
                    confirmButtonText: '确定',
                    confirmButtonClass: 'button-general-color',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const that = this;
                    const data = {
                        url:'jd',
                        data:{
                            cmd: 'com.actionsoft.apps.coe.pal_publish_publishgroup_theme_data_remove',
                            type: type,
                            fileName: fileName
                        }
                    };
                    // 查询数据
                    awsuiAxios.post(data).then(function (ro) {
                        if(ro.result == 'ok') {
                            that.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            that.initData();
                        } else {
                            that.$message.error('删除失败');
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }).catch(() => {
                });
            },
            uploadSuccess(response, file, fileList) {// 上传完成后保存
                const that = this;
                const data = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_publish_publishgroup_theme_data_save',
                        type: that.fileValue,
                        fileName: file.name
                    }
                };
                // 查询数据
                awsuiAxios.post(data).then(function (ro) {
                    if(ro.result == 'ok') {
                        that.$message({
                            message: '['+ file.name +']上传成功',
                            type: 'success'
                        });
                        that.initData();
                    } else {
                        that.$message.error('['+ file.name +']上传失败');
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            beforeUpload(file) {// 单个文件校验，返回false不影响其他文件上传
                const that = this;
                if (file.size > 5 * 1024 * 1024) {
                    that.$message('图片[' + file.name + ']不能大于5M，上传失败!')
                    return false;
                }
            },
        }
    }
</script>

<style scoped>
    .category-title {
        height: 25px;
        line-height: 25px;
        vertical-align: center;
        margin: 10px 10px 5px 0px;
        border-left: 3px solid #4E7FF9;
    }
    .logo:hover .logo-del-icon{
        display: inline-block;
    }
    .logo-mask {
        display: none;
    }
    .logo:hover .logo-mask {
        display: inline-block;
        border-radius: 2px;
        position: absolute;
        left: 1px;
        top: 1px;
        right: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        background-color: rgba(125, 125, 125,0.5);
    }
    .logo-del-icon {
        cursor: pointer;
        float: right;
        position: relative;
        top: -23px;
        left: -5px;
        display: none;
    }
    .banner:hover .banner-del-icon{
        display: inline-block;
    }
    .banner-mask {
        display: none;
    }
    .banner:hover .banner-mask {
        display: inline-block;
        border-radius: 2px;
        position: absolute;
        left: 1px;
        top: 1px;
        right: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        background-color: rgba(125, 125, 125,0.5);
    }
    .banner-del-icon {
        display: none;
    }
</style>