<template>
    <div class="choosed-icon-wrap">
        <el-dialog
            :visible.sync="isShowIconDialog"
            :close-on-click-modal="false"
            :modal-append-to-body='false'
            title="选择图标"
            @close="$emit('close')"
            width="420px"
            v-dialogDrag
            center
        >
            <div class="dialog-container-wrap">
                <div class="top">
                    <el-upload action="" accept="image/*" 
                        :http-request="handleUploadImg" 
                        :show-file-list="false"
                    >
                        <el-button size="small">选择文件</el-button>
                        <span>支持上传图标</span>
                    </el-upload>
                    
                    
                </div>
                <div class="icon-box">
                    <div class="icon-item" :class="{'active':icon.IconPath===choosedIcon}" 
                        v-for="icon in iconList" :key="icon.IconId"
                        @click.stop="choosedIcon = icon.IconPath">
                        <img :src="icon.IconPath">
                    </div>
                </div>
                <div class="btn-wrap" style="text-align: center;margin-bottom: 25px;">
                    <el-button type="primary" plain  @click="$emit('close')">取消</el-button>
                    <el-button type="primary"  style="margin-left:50px;" @click="saveIcon">保存</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {menuConfigInterface} from '@/api/modules/etaMenuApi';
import {bannerupload} from '@/api/api.js';
export default {
    props:{
        isShowIconDialog:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            iconList:[],
            choosedIcon:''
        };
    },
    watch:{
        isShowIconDialog(newVal){
            if(newVal){
                this.getIconList()
            }
        }
    },
    methods: {
        getIconList(){
            menuConfigInterface.getMenuIconList().then(res=>{
                if(res.Ret!==200) return 
                this.iconList = res.Data||[]
            })
        },
        async handleUploadImg(e){
            if(!['image/png','image/jpeg'].includes(e.file.type)){
                this.$message.warning('仅支持png、jpg格式的图片')
                return
            }
            if(e.file.size>50*1024){
                this.$message.warning('图标文件大小不能超过50kb')
                return 
            }
            let form = new FormData()
            form.append("file", e.file)
            const res = await bannerupload(form)
            if(res.Ret===200){
                await menuConfigInterface.addMenuIcon({
                    IconPath:res.Data.ResourceUrl
                })
                this.getIconList()
            }
        },
        saveIcon(){
            if(!this.choosedIcon){
                this.$message.warning('请选择图标')
                return
            }
            this.$emit('save',this.choosedIcon)
        }
    },
};
</script>

<style scoped lang="scss">
.choosed-icon-wrap{
    .top{
        span{
            margin-left: 15px;
            color: #DCDCDC;
        }
    }
    .icon-box{
        margin: 20px 0;
        border:1px dashed #DCDCDC;
        padding:20px;
        display: flex;
        flex-wrap: wrap;
        gap:20px;
        max-height: 256px;
        overflow-y: auto;
        .icon-item{
            width:30px;
            height:30px;
            cursor: pointer;
            img{
                width: 100%;
            }
            &:hover,&.active{
                background-color: antiquewhite;
                border-radius: 50%;
            }
        }
    }
}
</style>
