<template>
    <div class="ace-icon-selector"
         ref="aceIconSelectorRef">
        <div class="left-box"
             :style="{ height: boxHeight }">
            <div class="ace-icon-selector__icon-box"
                 :style="{
          height: circularSize,
          width: circularSize,
          background: currentColor ? currentColor : 'rgba(0,0,0,0.1)',
        }">
                <span v-if="!currentIcon"
                      class="empty-prompt">请选择图标</span>
                <template v-else>
                    <el-image :style="{width: iconSize,height: iconSize}"
                              :src="iconUrl"
                              v-if="custom"></el-image>
                    <i v-else 
                       :style="{ fontSize: iconSize ,color:enableColorPicker?'#FFF':'#272E35'}"
                       :class="currentIcon"></i>
                </template>

            </div>
        </div>
        <el-popover placement="bottom-end"
                    @show="popoverShowHandle"
                    v-model="visible">
            <div class="right-box"
                 slot="reference"
                 :style="{ height: boxHeight, width: boxHeight }">选择图标</div>
            <div class="ace-icon__popover-content"
                 :style="{ width: popoverWidth }">
                <div v-if="enableColorPicker" class="ace-icon__popover-content__color">
                    <color-picker v-model="currentColor"
                                  ref="colorPickerRef" />
                </div>
                <div class="ace-icon__popover-content__icon">
                    <icon-picker v-model="currentIcon"
                                 ref="iconPickerRef"
                                 @removeIconImage="handleRemove"
                                 :iconUrl="iconUrl"
                                 :enableCustomIcon="enableCustomIcon"
                                 :isCustom.sync="custom"
                                 :iconUploadUrl="iconUploadUrl"
                                 :uploadParams="uploadParams" />
                </div>
            </div>
        </el-popover>
    </div>
</template>

<script>
import ColorPicker from "./components/ColorPicker.vue";
import IconPicker from "./components/IconPicker.vue";
// import { ColorPicker } from 'element-ui';
export default {
    name: "AceIconSelector",
    model: {
        event: "change",
        prop: "value",
    },
    components: {
        IconPicker,
        ColorPicker,
    },
    props: {
        enableCustomIcon:{
            type:Boolean,
            default:false
        },
        enableColorPicker:{
            type:Boolean,
            default:false
        },
        isCustom:{
            type: Boolean
        },
        mode: {
            validator: (value)=>["pick", "display"].includes(value),
        },
        uploadParams: {
            type: Object,
            default() {
                return {};
            },
        },
        icon: {
            type: String,
        },
        iconUrl: {
            type: String,
            default: "",
        },
        iconUploadUrl: {
            type: String,
            default: "",
        },
        color: {
            type: String,
        },
        //展示图标背景圆型直径大小
        size: {
            type: [String, Number],
            default: 80,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        width: {
            type: [String, Number],
            default: 950,
        },
    },
    computed: {
        custom: {
            get() {
                return this.isCustom;
            },
            set(value) {
                this.$emit("update:isCustom", value);
            },
        },
        currentColor: {
            get() {
                return this.color;
            },
            set(val) {
                this.$emit("update:color", val);
            },
        },
        currentIcon: {
            get() {
                return this.icon;
            },
            set(val) {
                this.$emit("update:icon", val);
            },
        },
        popoverWidth() {
            return parseInt(this.width) + "px";
        },
        boxHeight() {
            return parseInt(this.size) + 24 + "px";
        },
        iconSize() {
            return parseInt(this.size) - 32 + "px";
        },
        circularSize() {
            return parseInt(this.size) + "px";
        },
    },
    data() {
        return {
            visible: false,
        };
    },
    mounted() {},
    methods: {
        handleRemove(next) {
            this.$emit("removeIconImage", next);
        },
        popoverShowHandle() {
            this.$refs.iconPickerRef.init();
        },
    },
};
</script>

<style lang="scss" scoped>
.ace-icon-selector {
    display: flex;
    border: 1px solid #c4cad6;
    border-radius: 2px;
    .left-box {
        flex: 1;
        display: flex;
        align-items: center;
        border-right: none;
        padding: 0 16px;
    }
    .right-box {
        display: flex;
        justify-content: center;
        align-items: center;
        border-left: 1px solid #c4cad6;
        background-color: #f5f7fa;
        cursor: pointer;
    }
    &__icon-box {
        display: flex;
        border-radius: 50%;
        align-items: center;
        justify-content: center;

        .empty-prompt {
            font-size: 12px;
        }
        .aceicon,.acefont,.iconfont {
            color: #fff;
        }
    }
}

.ace-icon__popover-content {
    display: flex;
    height: 360px;
    // flex-direction: column;

    &__color {
        width: 300px;
        flex: 1;
        margin-right: 16px;
    }
    &__icon {
        flex: 2;
        height: 100%;
    }
}
</style>
