<template>
    <div class=" flex-col" v-loading="fieldTreeLoadingFlag" style="height: 100%">
        <div class="flex-center">
            <el-input placeholder="关键字过滤" v-model="fieldTreeFilterText" class="flex-1"></el-input>
        </div>
        <el-tree
            class="flex-1"
            style="overflow: auto;"
            ref="fieldTreeRef"
            node-key="fieldName"
            :default-checked-keys="defaultCheckedKeys"
            :data="fieldTreeData"
            props="{children: 'children',label: 'fieldName'}"
            :show-checkbox="opts.showCheckbox"
            :default-expand-all="true"
            :check-on-click-node="false"
            :highlight-current="true"
            :expand-on-click-node="false"
            :check-strictly="false"
            @check="opts.checkEvent"
            :filter-node-method="filterTreeNode"
            @node-click="opts.clickEvent">
            <template slot-scope="{ node, data }">
                <div style="width: 100%;">
                    <div class="abap-tree-node-left ap-ellipse">
                         <span style="font-size: 12px;">
                             <span v-if="data.keyFlag == 'X'" style="color: #ffba00;">
                                 <i class="el-icon-key"/></span>
                            {{ data.fieldName }}
                            <span v-if="data.fdType == 1" style="color: #13ce66;">
                                <i class="el-icon-search"/>
                            </span>
                            <span v-if="data.fdType == 2" style="color: #3d76d3;">
                                <i class="el-icon-tiaojian1"/>
                            </span>
                        </span>
                    </div>
                    <div class="flex-justify-start" style="font-size: 12px;">
                        <span>
                            <span v-if="data.fdDesc != null && data.fdDesc!=''" class="ap-color-green">
                                {{ data.fdDesc }}
                            </span>
                            <span v-else>{{ data.text }}</span>
                        </span>
                    </div>
                </div>
            </template>
        </el-tree>
    </div>
</template>

<script>
import {handleDefaultParams} from "ap-util/util/ObjectUtil";
import {convertToTreeData} from "ap-util/util/DataUtil";

export default {
    name: 'AbapTableField',
    props: {
        options: {
            type: Object,
            required: true
        },
    },
    data() {
        return {
            fieldTreeFilterText: "",
            fieldTreeLoadingFlag: false,
            fieldTreeData: [],
            defaultCheckedKeys: [],
            opts: {},
        }
    },
    watch: {
        opts: {
            handler(value) {
                // 深度监听，opts有修改，对应修改父组件options参数
                this.$emit('update:options', this.opts);
            },
            deep: true
        },
        fieldTreeFilterText(val) {
            this.$refs.fieldTreeRef.filter(val);
        }
    },
    created() {
        // 初始化组件前修改默认参数
        this.opts = handleDefaultParams(this.options, {
            selectedTable:"",
            showCheckbox: false,
            clickEvent() {
            },
            checkEvent(){

            }
        });
    },
    methods: {
        // 字段树：配置
        filterTreeNode(value, data) {
            if (!value) return true;
            if (data.fdDesc != null &&data.fdDesc.indexOf(value) !== -1) {
                return true;
            }
            if (data.text != null &&data.text.indexOf(value) !== -1) {
                return true;
            }
            if (data.fieldName != null &&data.fieldName.indexOf(value) !== -1) {
                return true;
            }
            if (data.fdFunction != null &&data.fdFunction.indexOf(value) !== -1) {
                return true;
            }
            return false;
        },
        loadFieldTreeData() {
            this.fieldTreeLoadingFlag = true;
            // 加载数据
            this.$request({
                url: "/apd/abap/AbapTable/getTableFieldTree",
                method: 'post',
                data: {
                    tableName: this.opts.selectedTable
                }
            }).then(response => {
                // 数据格式转换：数组 -> tree
                this.fieldTreeData = convertToTreeData(response.data, {
                    idKey: "fieldName",
                    parentKey: "fdParentId",
                    childrenKey: "children",
                    label: "fieldName"
                });
            }).finally(() => {
                this.fieldTreeLoadingFlag = false;
            })
        },
        refresh(){
            this.loadFieldTreeData();
        },
        getData(){
            return this.fieldTreeData;
        },
        getCheckedKeys(){
            return this.$refs.fieldTreeRef.getCheckedKeys()
        },
        setChecked(key, isCheck){
            return this.$refs.fieldTreeRef.setChecked(key, isCheck, true)
        },
        setDefaultCheckKeys(keys){
            this.defaultCheckedKeys = keys;
        }
    }
}
</script>

<style scoped>
.abap-tree-node-left {
    font-size: 13px;
    width: 50%;
    float: left;
}
</style>
