<template>
    <div :id="`table-form-item-${keyId}`" v-loading="isLoading" :class="!isTableForm ? 'no-scroll-bar' : ''" style="width: auto; height: 100%;" class="hc-table-form-data-item">
        <el-scrollbar class="table-form-item-scrollbar">
            <div :id="`table-form-${keyId}`" class="hc-excel-table-form" />
        </el-scrollbar>
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import HTableForm from '~src/plugins/HTableForm'
import { getRandom, isString } from 'js-fast-way'

//初始
const props = defineProps({
    html: String,
    form: {
        type: Object,
        default: () => ({}),
    },
    loading: Boolean,
})

//事件
const emit = defineEmits(['render'])

const keyId = getRandom(6)

//初始变量
const isLoading = ref(props.loading)

//表单数据
const excelHtml = ref(props.html)
const excelForm = ref(props.form)

//样式
const tableFormApp = ref(null)
const tableFormVM = ref(null)
const isTableForm = ref(false)

//监听
watch(() => props.loading, (loading) => {
    isLoading.value = loading
})

//html变动
watch(() => props.html, (html) => {
    excelHtml.value = html
    setExcelHtml()
})

//深度监听变动的对象数据
watch(() => props.form, (val) => {
    excelForm.value = val
    setPickerKey()
    setFormData(val)
}, {
    deep: true,
})

//渲染完成
onMounted(() => {
    setPickerKey()
    getExcelHtml()
})

//获取已填写的数据
const setPickerKey = () => {
    HTableForm.setPickerKey(excelForm.value)
}

const setExcelHtml = () => {
    setPickerKey()
    //先卸载
    if (tableFormApp.value) {
        tableFormApp.value?.unmount()
        tableFormApp.value = null
        nextTick(() => {
            getExcelHtml()
        })
    } else {
        getExcelHtml()
    }
}

//获取模板标签数据
const getExcelHtml = () => {
    const temp = isString(excelHtml.value) ? excelHtml.value : ''
    if (temp && keyId) {
        //渲染表单
        isTableForm.value = true
        const { app, vm } = HTableForm.createForm({
            pid: keyId,
            template: temp,
            tableForm: excelForm.value,
            appId: `#table-form-${keyId}`,
            onFormDataChange: (form) => {
                excelForm.value = form
                emit('render', form)
            },
        })
        tableFormApp.value = app
        tableFormVM.value = vm
        excelForm.value.isRenderForm = true
        emit('render', excelForm.value)
    } else {
        isTableForm.value = false
        excelForm.value.isRenderForm = false
        emit('render', excelForm.value)
    }
}

//获取表单数据
const getFormData = () => {
    return excelForm.value
}

//设置表单数据
const setFormData = (data) => {
    excelForm.value = data
    tableFormVM.value?.setFormData(excelForm.value)
}

//卸载渲染
const unmountHtml = () => {
    if (tableFormApp.value) {
        tableFormApp.value?.unmount()
    }
}

// 暴露出去
defineExpose({
    getFormData,
    setFormData,
    setExcelHtml,
    unmountHtml,
})
</script>

<style lang="scss">
.hc-excel-table-form {
    transform: scale(0.9);
    transform-origin: top;
}
//插入特殊字符弹窗的输入框
.hc-table-form-data-item .hc-excel-table-form td,
.hc-table-form-data-item .hc-excel-table-form td .el-input .el-input__wrapper .el-input__inner,
.el-form-item.special-form-item .el-form-item__content .el-input .el-input__wrapper .el-input__inner {
    font-family: "hc-eudc", hc-sans, 宋体, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

.hc-table-form-data-item {
    position: relative;
    padding: 12px;
    height: 100%;
    overflow: hidden;
    background-color: white;
    &.no-scroll-bar .el-scrollbar {
        display: none;
    }
    .hc-excel-table-form {
        position: relative;
        display: flex;
        padding: 10px;
        justify-content: center;
        td {
            position: relative;
            padding: 6px;
            background-clip: padding-box;
            .el-input {
                clear: both;
                color: #606266;
                border-radius: 3px;
                height: initial;
                background-color: #ffffff !important;
                .el-input__wrapper {
                    background-color: inherit;
                    caret-color: var(--el-color-primary);
                }
                .el-input__suffix-inner {
                    width: 18px;
                }
            }
            .el-textarea {
                width: 100%;
                height: 100%;
                .el-textarea__inner {
                    min-height: initial;
                    background-color: #ffffff;
                    border-radius: 3px;
                    color: #606266;
                    height: 100%;
                    caret-color: var(--el-color-primary);
                }
            }
            //日期选择框
            .el-date-editor.el-input .el-input__wrapper,
            .el-date-editor.el-date-editor--datetimerange.el-input__wrapper {
                width: 100%;
                height: initial;
                clear: both;
            }
            //焦点
            .el-input .el-input__wrapper.is-focus, .el-input .el-input__wrapper:hover,
            .el-textarea .el-textarea__inner:hover {
                box-shadow: 0 0 0 1.5px var(--el-input-focus-border-color) inset;
                background-color: #eddac4;
            }
            //公式
            &[gscolor] {
                .el-input, .el-textarea .el-textarea__inner {
                    background-color: #dcdcdc !important;
                }
                .el-date-editor.el-input__wrapper{
                    background-color: #dcdcdc !important;
                }
                .el-select .el-select__wrapper {
                    background: #dcdcdc !important;
                }
            }
            //文本选中颜色
            .el-input .el-input__wrapper input,
            .el-textarea textarea {
                &::selection {
                    background: var(--el-color-primary-light-9);
                    color: var(--el-color-primary);
                }
                &::-moz-selection {
                    background: var(--el-color-primary-light-9);
                    color: var(--el-color-primary);
                }
            }
            //下拉框
            .el-select {
                width: 100%;
                height: initial;
                clear: both;
            }
            .el-select .el-select__wrapper.is-focused {
                background: var(--el-color-primary-light-9);
                color: var(--el-color-primary);
            }
            //表单上传
            .hc-upload-table-form {
                position: absolute;
                top: 6px;
                bottom: 6px;
                left: 6px;
                right: 6px;
                .el-upload {
                    height: 100%;
                }
            }
        }
        //列合并的单元格
        td[rowspan] {
            height: initial;
        }
        //非输入框颜色
        td:not([titlexx]), td[titlexx*=''],
        td:not([title]), td[title*=''] {
            background-color: white !important;
            user-select: none;
        }
    }
    .hc-no-table-form {
        position: relative;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .table-form-no {
            position: relative;
            img {
                width: 350px;
            }
            .desc {
                text-align: center;
                font-size: 20px;
                color: #aaa;
            }
        }
    }
}

.hc-red-border {
    &.el-textarea__inner, &.el-input .el-input__wrapper {
        --el-input-border-color: #fe0000 !important;
        box-shadow: 0 0 0 2px #fe0000 inset !important;
    }
}

.hc-green-border {
    &.el-textarea__inner, &.el-input .el-input__wrapper {
        --el-input-border-color: #1ECC95 !important;
        box-shadow: 0 0 0 2px #1ECC95 inset !important;
    }
}
</style>
