<template>
    <div style="width: 100%;height: 450px" class="flex-justify-start">
        <div style="width: 400px;height: 100%">
            <ap-aside-tree ref="cptParamTreeRef" :options.sync="cptParamTreeOptions">
                <div slot="tree" slot-scope="scope" style="width: 100%">
                    <span @click="copyText(scope.data.fdName, $event)">{{ scope.data.fdName }} </span>
                    <span class="ap-color-blue"
                          @click="copyParamValue(scope.data.fdCode, $event)">{{ scope.data.fdCode }}</span>
                </div>
            </ap-aside-tree>
        </div>
        <div class="flex-1" style="height: 100%;margin-left: 15px;">
            <el-input v-model="myValue" type="textarea" :rows=24></el-input>
        </div>
    </div>
</template>

<script>

import clipboard from "ap-util/util/ClipboardUtil";

export default {
    name: "CptTemplate",
    model: {
        prop: 'modelValue',
        event: 'changeModelValue'
    },
    props: {
        cptId: {
            required: false
        },
        modelValue: {
            required: false
        }
    },
    data() {
        return {
            cptParamTreeOptions: this.getCptParamTreeOptions(),
            opts: {},
            myValue: null,
        }
    },
    watch: {
        myValue(value) {
            this.$emit('changeModelValue', this.myValue);
        },
        modelValue(value){
        }
    },
    created() {
        this.myValue = this.modelValue;
    },
    mounted: function () {
        this.$refs.cptParamTreeRef.reLoadTreeData();
    },
    methods: {
        getCptParamTreeOptions() {
            let treeOptions = {
                title: "组件参数",
                initData: false,
                onClick: (data, node, comp) => {
                },
                loadOptions: {
                    url: "/apd/TDevCptParam/getTDevCptParamList",
                    data: () => {
                        return {
                            cptId: this.cptId
                        }
                    },
                    treeKey: {
                        idKey: "fdId",
                        parentKey: "fdParentId",
                        childrenKey: "children",
                        label: "fdName"
                    },
                    success: (response) => {
                    },
                },
            };

            return treeOptions;
        },
        copyParamValue(code, event) {
            let str = '"${' + code + '.value}"';
            clipboard(str, event);
        },
    }
}
</script>

<style scoped>
</style>
