<template>
  <div class="app-color-picker">
    <el-color-picker ref="picker" v-model="curVal" size="small" />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Model } from 'vue-property-decorator';

@Component({})
export default class AppColorPicker extends Vue {
    /**
     * 双向绑定表单项数据
     *
     * @type {*}
     * @memberof AppColorPicker
     */
    @Model('change') value: any;

    /**
     * 禁用状态
     *
     * @type {*}
     * @memberof AppColorPicker
     */
    @Prop({ default: false }) disabled?: boolean;

    /**
     * 获取输入框值
     *
     * @type {*}
     * @memberof AppColorPicker
     */
    get curVal() {
        return this.value;
    }

    /**
     * 设置值
     *
     * @type {*}
     * @memberof AppColorPicker
     */
    set curVal(val: any) {
        this.$emit('change', val);
    }

    /**
     * 模拟点击事件
     *
     * @memberof AppColorPicker
     */
    iconClick() {
        let picker: any = this.$refs.picker;
        let e: any = document.createEvent('MouseEvent');
        e.initEvent('click', true, true);
        if (picker) {
            picker.$el.children[0].dispatchEvent(e);
        }
    }
}
</script>

<style lang="less">
@import './app-color-picker.less';
</style>
