<template>
    <div class="table-expand">
        <el-tabs v-model="tabLabel">
            <el-tab-pane label="默认" name="默认">
                <defaultComent :rowData="rowData" :fields="fields" @related-click="$emit('related-click',row)" @export-click="$emit('export-click',row)"></defaultComent>
            </el-tab-pane>
            <el-tab-pane label="键/值" name="键/值">
                <keyValueComent :rowData="rowData" :filtersFields="filtersFields" @filter-click="$emit('filter-click', $event)" @toggle-click="$emit('toggle-click', $event)"></keyValueComent>
            </el-tab-pane>
            <el-tab-pane label="JSON" name="JSON">
                <jsonComent :jsonData="row"></jsonComent>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import defaultComent from './expandComponents/defaultComent'
import keyValueComent from './expandComponents/keyValueComent'
import jsonComent from './expandComponents/jsonComent'
export default{
    components:{
        defaultComent,
        keyValueComent,
        jsonComent
    },
    props:{
        row: {
            type: Object,
            default: () => {}
        },
        fields: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        fields: {
            immediate: true,
            handler(val) {
                if (val.length) {
                    // 适配对应协议的展示字段为对象时，如http: { url: 'xxx'},将其展开
                    let cloneRow = JSON.parse(JSON.stringify(this.row))
                    if (this.typeOf(cloneRow[cloneRow.app_proto]) == 'object') {
                        Object.keys(cloneRow[cloneRow.app_proto]).forEach(key => {
                            cloneRow[cloneRow.app_proto + '.' + key] = cloneRow[cloneRow.app_proto][key]
                        })
                    }
                    if ((cloneRow.app_proto == 'http' || cloneRow.app_proto == 'other') && this.typeOf(cloneRow['file']) == 'object') {
                        Object.keys(cloneRow['file']).forEach(key => {
                            cloneRow['file' + '.' + key] = cloneRow['file'][key]
                        })
                    }
                    this.rowData = cloneRow
                    val.forEach(el => {
                        if (this.rowData[el.dataStr] != undefined) { 
                            if (!this.filtersFields[el.belong]) {
                                this.$set(this.filtersFields, el.belong, [])
                            }
                            this.filtersFields[el.belong].push(el)
                        }
                    })
                    let keys = Object.keys(this.filtersFields)
                    let uniqueKeys = Array.from(new Set(['基础字段', '常用字段', ...keys]))
                    let optionFields = {}
                    uniqueKeys.forEach(key => {
                        optionFields[key] = this.filtersFields[key]
                    })
                    this.filtersFields = optionFields
                }
            }
        },
        tabLabel(val) {
            this.$nextTick(() => {
                // 切换标签时，高度不同导致fixed列错位
                let nodes = document.querySelectorAll('.el-table__expanded-cell')
                if (nodes.length == 2) {
                    nodes[1].parentNode.style.height = nodes[0].offsetHeight + 'px'
                }
            })
        }
    },
    data(){
        return {
            tabLabel: '默认',
            filtersFields: {}, // 分类字段
            rowData: {}
        }
    },
    methods: {
        typeOf (obj) {
            const toString = Object.prototype.toString;
            const map = {
                '[object Boolean]'  : 'boolean',
                '[object Number]'   : 'number',
                '[object String]'   : 'string',
                '[object Function]' : 'function',
                '[object Array]'    : 'array',
                '[object Date]'     : 'date',
                '[object RegExp]'   : 'regExp',
                '[object Undefined]': 'undefined',
                '[object Null]'     : 'null',
                '[object Object]'   : 'object'
            };
            return map[toString.call(obj)];
        }
    }
}
</script>

<style lang="scss" scoped>
    .table-expand {
        ::v-deep .el-collapse-item__header {
            display: inline-block;
            border-bottom: none;
        }
        ::v-deep .el-collapse {
            border-bottom: none;
        }
        ::v-deep .el-form-item {
            margin-bottom: 2px;
        }
        ::v-deep .el-form-item__label {
            height: 20px;
            line-height: normal;
            font-size: 12px;
        }
        ::v-deep .el-form-item__content {
            line-height: normal;
            font-size: 12px;
            max-width: 600px;
        }
    }

</style>
