<template>
    <v-hover 
        v-slot="{hover}"
        :disabled="! column.editable"
    >
        <td
            :style="column.htmlStyle"
            :class="column.htmlClass"
        >
            <v-sheet
                tile
                :width="sheetWidth"
                color="transparent"
                
                class="d-flex"
            >
                <v-sheet
                    :width="'calc(100% - ' + (hover ? 22 : 0) + 'px)'"
                    class="transparent"
                >
                    <component 
                        :is="renderComponent"
                        :cellContent="cellContent"
                        :column="column"
                        :app="app"
                        :style="{
                            ...htmlStyle, 
                            ...columnHtmlStyle
                        }"
                    >
                    </component>
                </v-sheet>

                <v-sheet
                    :width="hover ? 22 : 0"
                    class="transparent"
                >
                    <v-btn
                        v-if="!! column.editable && hover"
                        x-small
                        color="orange"
                        icon
                        @click="OnClickEditableIcon"
                    >
                        <v-icon>
                            {{ column.editable.icon }}
                        </v-icon>
                    </v-btn>
                </v-sheet>
            </v-sheet>

            <cs-datatable-cell-editable 
                :column="column"
                :item="item"
            />
        </td>
    </v-hover>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            column: {required: true},
            item: {required: true},
            rowIndex: {required: true},
            per_page: {required: true},
            current_page: {default: 1},

            /**
             * stilul row-ului (vezi Datatable class)
             */
            htmlStyle: {default: null}, 
        },

        computed: {
            renderComponent() {
                return this.column.renderComponent || 'cs-cell-string';
            },

            sheetWidth() {
                /**
                 * 3px = padding stanga-dreapta
                 */
                return this.column._header.width ? 'calc(' + this.column._header.width + ' - 6px )' : null;
            },

            /**
             * Stilul coloanei in functie de item 
             * Se adauga la stilul randului: {...htmlStyle, ...columnHtmlStyle}
             */
            columnHtmlStyle() {
                let r = this.column.ColumnHtmlStyle(this.item);
                if(!! this.column.numeric) 
                {
                    r = {
                        ...r,
                        'text-align': 'right',
                    }
                }
                return r;
            },

            cellContent() {
                let content = this.column.renderFunction(this.item, this.rowIndex, this.per_page, this.current_page);
                if(!! this.column.numeric)
                {
                    content = 1 * content;
                    content = content.toFixed(this.column.numeric.decimals);

                }
                else
                {
                    if(this.column.isDate)
                    {
                        content = this.ToDate(content);
                    }
                }
                return content;
            }
        },

        methods: {
            OnClickEditableIcon(e) {
                e.preventDefault();

                this.column.editable.menuVisible = false;
                this.column.editable.editedItem = null;
                this.column.editable.x = e.clientX
                this.column.editable.y = e.clientY
                this.$nextTick(() => {

                    this.column.editable.menuVisible = true;

                    this.column.editable.editedItem = this.column.editable.recordName 
                        ? {
                            ...this.item[this.column.editable.recordName],
                        } 
                        : {
                            ...this.item
                        };

                    let record = this.column.editable.editedItem;

                    if(_.isFunction(this.column.editable.InitInput))
                    {
                        record = this.column.editable.InitInput(this.column.editable.editedItem);
                    }

                    this.column.editable.form.formprovider
                        .Reset()
                        .SetAction('update') 
                        .SetActiveRecord(record);
   
                })
            }
        },

        components: {
            CsCellString: require('./celltypes/CsCellString').default,
            CsCellBoolean: require('./celltypes/CsCellBoolean').default,
            CsCellYesNo: require('./celltypes/CsCellYesNo').default,
            CsCellDaysDifference: require('./celltypes/CsCellDaysDifference').default,

            CsCellPopupActions: require('./celltypes/CsCellPopupActions').default,
            CsCellIconsActions: require('./celltypes/CsCellIconsActions').default,
            CsDatatableCellEditable: require('./CsDatatableCellEditable').default,
        },

        name: 'CsDatatableCell',
    }
</script>