<template>
    <el-tooltip
        class="switch-tooltip"
        effect="light"
        placement="top"
        :disabled="row.tipDisabled?.()"
        :content="$t(row.tipContent?.(model) || '')"
    >
        <el-switch
            v-show="typeof row.show === 'function'? row.show?.(modelData): true"
            v-model="model"
            :disabled="row.disabled?.()"
            :active-text="$t(row.activeText || '')"
            :inactive-text="$t(row.inactiveText || '')"
            :active-value="row.activeValue"
            :inactive-value="row.inactiveValue"
            :active-color="row.activeColor"
            :inactive-color="row.inactiveColor"
            @change="changes"
        />
    </el-tooltip>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import useModel from '../../../script/help/useModel'
import { SwitchInterface } from './index'

export default defineComponent({
    name: 'InfoSwitch',
    props: {
        row: {
            type: Object as PropType<SwitchInterface>,
            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 changes = (val: boolean): void => {
            row.methods?.(val, modelData)
        }
        return {
            model,
            changes
        }
    }
})
</script>
<style lang="scss" scoped>
</style>
