<template>
    <awsui-dialog
            title="请选择属性"
            :visible.sync="dialogVisible"
            destroy-on-close
            :before-close="handleClose"
            :close-on-click-modal=false
            :modal-append-to-body=false
            :append-to-body=true
            width="500px"
            height="300px">
        <div v-if="refresh">
            <el-tree
                    ref="attrTree"
                    :data="attributeDlg.tree.data"
                    :props="attributeDlg.tree.props"
                    highlight-current
                    :expand-on-click-node=false
                    default-expand-all
                    node-key="id">
            <span slot-scope="{node, data}">
              <i class="awsui-iconfont tree-content-icon tree-content-icon-padding" :style="{'color': data.iconColor}" v-html="node.data.iconCode"></i>
              <span>{{node.label}}</span>
            </span>
            </el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
                <awsui-button type="primary" @click="submit">确定</awsui-button>
                <awsui-button @click="cancel">取消</awsui-button>
            </span>
    </awsui-dialog>
</template>

<script>
    import awsuiAxios from "../../../../awsuiAxios";

    export default {
        name: "PalAttributeTree",
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            methodId: {
                type: String,
                default: '',
            },
            type: {
                type: String,
                default: 'file'
            }
        },
        data() {
            return {
                refresh: false,
                dialogVisible: false,
                loading: false,
                attributeDlg: {
                    tree: {
                        props: {
                            children: 'children',
                            label: 'label'
                        },
                        data: []
                    },
                    visible: false,
                    currGroup: 0,
                    currRow: 0
                },
            }
        },
        methods: {
            initTree() {// 打开自定义属性树
                const that = this;
                // 查询特性树
                that.attributeDlg.tree.data = [];
                that.attributeDlg.visible = true;
                const data = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal.batch_replace_attribute_tree_data_query',
                        wsId: wsId,
                        type: that.type,
                        methodId: that.methodId
                    }
                };
                // 查询数据
                awsuiAxios.post(data).then(function (ro) {
                    if(ro.result == 'ok') {
                        that.attributeDlg.tree.data = ro.data;
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            handleClose(done) {
                this.closeDlalog('cancel');
                done();
            },
            cancel() {
                this.closeDlalog('cancel');
                this.dialogVisible = false;
            },
            submit() {
                const isOk = this.closeDlalog('save');
                if (isOk) {
                    this.dialogVisible = false;
                }
            },
            closeDlalog(type) {// 取消/确定之后的关闭
                if (type == 'save') {
                    const node = this.$refs.attrTree.getCurrentNode();
                    if (node == null || node.type == 'group') {
                        this.$message({message: '请选择属性',type: 'warning'});
                        return false;
                    }
                    this.$emit('getResult', JSON.parse(JSON.stringify(node)));
                } else {
                    this.$emit('cancel');
                }
                // 清空所有数据
            }
        },
        watch: {
            visible(val) {
                this.dialogVisible = val;
                if (val) {// 打开
                    this.refresh = true;
                    this.initTree();// 初始化查询
                } else {// 关闭
                    this.refresh = false;
                }
            }
        }

    }
</script>

<style scoped>

</style>