<template>
    <div
        class="info-button"
        :style="{'justify-content': row.aligning || 'left' }"
    >
        <el-tooltip
            v-for="(item, index) in row.operation"
            :key="index"
            :content="item.tooltip"
            :disabled="!item.tooltip"
            :effect="item.effect || 'dark'"
        >
            <template
                #content
                v-html="item.tooltip"
            />
            <el-button
                v-if="((typeof item.show === 'undefined') ? true : item.show?.(modelData)) && filterButtonHandler(item.code)"
                :size="item.size || row.size"
                :icon="item.icon"
                :type="item.type"
                :test-cy="item.code"
                :disabled="item.disabled?.(modelData)"
                :plain="item.plain"
                :text="item.text"
                :round="item.round"
                :bg="item.bg"
                :loading="item.loading?.()"
                @click.stop="item.methods?.(modelData)"
            >
                {{ typeof item.label === 'function' ? $t(item.label?.()) : $t(item.label) }}
            </el-button>
        </el-tooltip>
    </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { ButtonInterface } from './index'
import useModel from '../../../script/help/useModel'
import { filterButtonHandler } from '../../../script/util'

export default defineComponent({
    name: 'InfoButton',
    props: {
        row: {
            type: Object as PropType<ButtonInterface>,
            default: () => {
            }
        },
        modelData: {
            type: Object,
            default: () => {
            }
        },
        addIndex: { // addform Index
            type: [Number, String],
            default: () => ''
        }
    },
    setup (props) {
        const { row, modelData } = props
        const model = useModel(modelData, row.model, row.deepData, props.addIndex, row)
        return {
            model,
            filterButtonHandler
        }
    }

})
</script>

<style lang="scss" scoped>
.info-button {
    width: 100%;
    display: flex;
}
</style>
