<template>
	<el-dialog :title="titleMap" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
		<el-container>
            <el-aside width="300px" v-loading="menuloading">
                <el-container>
                    <el-main class="nopadding">
                        <el-tree ref="menu" class="menu" node-key="Id" :data="menuList" :props="menuProps" highlight-current :default-expanded-keys="defaultExpandedIds"
                                check-strictly :draggable="false" :filter-node-method="menuFilterNode" :expand-on-click-node="false" @node-click="menuClick">
                            <template #default="{node, data}">
                                <span class="custom-tree-node el-tree-node__label">
                                    <span class="label">{{ node.label }}</span>
                                    <span class="do">
                                        <el-icon @click.stop="add(node, true)" v-if="data.ParentId.length <= 0" :size="25" :title="$t('menu.createMenu')"><sc-icon-operate-add /></el-icon>
                                        <el-icon @click.stop="deleteNode(node, data)" v-if="data.ParentId > 0 || data.ParentId.length > 0" :size="25" style="color:#f56c6c" :title="$t('delete') + $t('thesaurus.thesaurusItemType')" ><sc-icon-operate-delete /></el-icon>
                                    </span>
                                </span>
                            </template>
                        </el-tree>
                    </el-main>
                </el-container>
            </el-aside>
            <el-container>
                <el-main class="nopadding" style="padding: 20px" ref="main">
                    <save ref="save" :menu="menuList" @success="getMenu"></save>
                </el-main>
            </el-container>
        </el-container>
	</el-dialog>
</template>

<script>
    let newMenuIndex = 1;
    import save from "./saveContentConfig";
    import common from "@/utils/common";

	export default {
        components: {
            save,
        },
		emits: ['success', 'closed'],
		data() {
			return {
				titleMap: this.$t('reportDesigner.ElementTagSetting'),
				visible: false,
                menuloading: false,
				labelPosition: this.$TOOL.data.get("APP_LANG")=="en-US"?'top':'left', 
				//表单数据
				menuList: [],
                defaultExpandedIds: [],
                menuProps: {
                    label: function (a) {
                        return `${a.Value}`;
                    },
                    id: "Id",
                    children: "Children",
                },
			}
		},
        mounted() {
            this.getMenu();
        },
		methods: {
            //加载树数据
            async getMenu() {
                var tempList = await this.$API.template.getContentConfigFromStorgae.post();
                var comEntity = tempList.filter(c => c.Key === "CommonMeasure")[0]
                var comIndex = tempList.indexOf(comEntity);
                tempList.splice(comIndex, 1);
                var otherEntity = tempList.filter(c => c.Key === "OtherMeasure")[0]
                var otherIndex = tempList.indexOf(otherEntity);
                tempList.splice(otherIndex, 1);
                //外部内容
                var tagList = this.$TOOL.data.get("activeTemplateTagList");
                if (tagList && tagList.length > 0) {
                    tempList.some(d => {
                        tagList.some(c => {
                            if (c.ParentId === d.Id) 
                            {
                                d.Children.push(c);
                            }
                        });
                    });
                }

                this.menuloading = true;
                this.menuList = tempList;
                this.defaultExpandedIds = [1];
                this.menuloading = false;
            },
			//显示
			open(){
				// this.queryUserInfo(userCode);
				this.visible = true;
				return this
			},
             //树点击
            menuClick(data) {
                this.$refs.save.setData(data, true);
                this.$refs.main.$el.scrollTop = 0;
            },
            //新增
            async add(node) {
                var featherCode = node.data.Id;
                var newMenuData = {
                    Id: common.guid(),
                    Value: `未命名${newMenuIndex++}`,
                    ParentId: featherCode,
                    IsDefault: false
                };
                this.$refs.save.setData(newMenuData, false);
            },
            //删除
            async deleteNode(node, data) {
                if (data.Id && data.Id.length > 0) { 
                    var result = false;
                    if (data.IsDefault) 
                    {
                        result = await this.$API.template.deleteContentConfigToStorage.post(data); 
                    }
                    else
                    {
                        //处理动态数据
                        var templateTagList = this.$TOOL.data.get("activeTemplateTagList");
                        if (templateTagList && templateTagList.length > 0) 
                        {
                            var info = templateTagList.filter(d => d.Id === data.Id);
                            if (info && info.Id && info.Id.length > 0)
                            {
                                templateTagList.splice(templateTagList.indexOf(info), 1);
                                this.$TOOL.data.set("activeTemplateTagList", templateTagList);
                                result = true;
                            }
                            else
                            {
                                result = false;
                                console.log("DynamicTemplateTag Not Exist:" + data);
                            }
                        }
                        else {                            
                            result = true;
                        }
                    }
                    if (result) {
                        this.$message.success(this.$t("response.operateSuccess"));
                        this.$refs.menu.remove(node);
                    }
                    else {
                        this.$message.success(this.$t('reportDesigner.DeleteFail'));
                    }
                }
            },
            //过滤
            menuFilterNode(value, data) {
                if (!value) return true;
                var targetText = `${data.Value}`;
                return targetText.indexOf(value) !== -1;
            },
        }
    }
</script>


<style scoped>
.custom-tree-node {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 24px;
  height: 100%;
}
.custom-tree-node .label {
  display: flex;
  align-items: center;
  height: 100%;
}
.custom-tree-node .label .el-tag {
  margin-left: 5px;
}
.custom-tree-node .do {
  display: none;
}
.custom-tree-node .do i {
  margin-left: 5px;
  color: #999;
}
.custom-tree-node .do i:hover {
  color: #333;
}

.custom-tree-node:hover .do {
  display: inline-block;
}
</style>
