<template>
<el-color-picker
    v-model="model"
    :show-alpha="row.showAlpha"
    :color-format="row.colorFormat"
    :popper-class="row.popperClass"
    :predefine="row.predefine"
    :size="row.size"
    :disabled="row.disabled?.()"
    @change="handleChange"
/>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import useModel from '../../../script/help/useModel'
import { ColorPickerInterface } from './index'
export default defineComponent({
    props: {
        row: {
            type: Object as PropType<ColorPickerInterface>,
            default: () => {
            }
        },
        modelData: {
            type: Object,
            default: () => {}
        },
        addIndex: {
            type: [Number, String],
            default: ''
        }
    },
    setup (props) {
        const { row, modelData } = props
        const model = useModel(modelData, row.model, row.deepData, props.addIndex)
        const handleChange = (val: number): void => {
            row.methods?.(val)
        }
        return {
            handleChange,
            model
        }
    }
})
</script>
<style lang="scss" scoped>
</style>
