<template>
    <div class="template">
        <el-row>
            <el-col :span="21">
                <el-cascader :options="tagOptions" ref="tags"
                             :props="{ multiple: true }" style="width: 100%;" clearable></el-cascader>
            </el-col>
            <el-col :span="3" style="text-align: right;">
                <el-button type="primary" @click="addTags">添加</el-button>
            </el-col>
        </el-row>
        <el-table
            :data="list"
            class="res"
            border
            v-loading="loading">
            <el-table-column prop="label" label="主标签" show-overflow-tooltip width="200" />
            <el-table-column label="次标签">
                <template slot-scope="scope">
                    <span v-for="tag in scope.row.children"
                          :key="tag.value" style="padding-right: 5px;">
                        <el-tag
                            closable
                            type="success" @close="removeTag(tag.value)">
                        {{tag.label}}
                    </el-tag>
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 15px; text-align: right;">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="saveTag">确 定</el-button>
        </div>
    </div>
</template>

<script>

import {getTags} from "@/api/random";
import {loadTags, updateTag} from "@/api/resource";

export default {
    name: 'TagSetting',
    props: {
        obj_id: {
            type:String,
        },
    },
    data () {
        return {
            tagOptions: [],
            loading: false,
            total: 0,
            list: [],
            tagMap: {},
        }
    },
    mounted () {
        this.showTags()
        this.showObjTags()
    },
    methods: {
        showTags() {
            getTags({page: 1, size: 1000, query: 'level==1'}).then(res => {
                let tagOptions = []
                if (res && res.data && res.data.length > 0) {
                    for (let index in res.data) {
                        let subTagOptions = []
                        if (res.data[index].sub_tags && res.data[index].sub_tags.length > 0) {
                            for (let subIndex in res.data[index].sub_tags) {
                                subTagOptions.push({
                                    value: res.data[index].sub_tags[subIndex].id,
                                    label: res.data[index].sub_tags[subIndex].tag_name
                                })
                            }
                        }

                        tagOptions.push({
                            value: res.data[index].id,
                            label: res.data[index].tag_name,
                            children: subTagOptions.length > 0 ? subTagOptions : null
                        })
                    }
                }
                this.tagOptions = tagOptions
            })
        },
        showObjTags() {
            loadTags(this.obj_id).then(res => {
                if (res && res.length > 0) {
                    let tagMap = {}
                    for (let index in res) {
                        tagMap[res[index].id] = {
                            value: res[index].id,
                            label: res[index].tag_name,
                            children: []
                        }
                        if (res[index].sub_tags && res[index].sub_tags.length > 0) {
                            for (let subIndex in res[index].sub_tags) {
                                tagMap[res[index].id].children.push({
                                    value: res[index].sub_tags[subIndex].id,
                                    label: res[index].sub_tags[subIndex].tag_name
                                })
                            }
                        }
                    }
                    this.tagMap = tagMap
                    let list = []
                    for (let key in tagMap) {
                        list.push(tagMap[key])
                    }
                    this.list = list
                }
            })
        },
        addTags() {
            let tags = this.$refs.tags.getCheckedNodes()
            if (tags.length > 0) {
                let tagMap = Object.assign({}, this.tagMap)
                for (let index in tags) {
                    if (tags[index].parent) {
                        if (!tagMap[tags[index].parent.value]) {
                            tagMap[tags[index].parent.value] = {
                                value: tags[index].parent.value,
                                label: tags[index].parent.label,
                                children: [{
                                    value: tags[index].value,
                                    label: tags[index].label
                                }]
                            }
                        } else {
                            tagMap[tags[index].parent.value].children.push({
                                value: tags[index].value,
                                label: tags[index].label
                            })
                        }
                    } else {
                        if (!tagMap[tags[index].value]) {
                            tagMap[tags[index].value] = {
                                value: tags[index].value,
                                label: tags[index].label,
                                children: []
                            }
                        }
                    }
                }

                let list = []
                for (let key in tagMap) {
                    if (tagMap[key].children && tagMap[key].children.length > 0) {
                        let temp = {}
                        let tempArr = []
                        for (let index in tagMap[key].children) {
                            if (!temp[tagMap[key].children[index].value]) {
                                temp[tagMap[key].children[index].value] = 1
                                tempArr.push(tagMap[key].children[index])
                            }
                        }
                        tagMap[key].children = tempArr
                    }
                    list.push(tagMap[key])
                }
                this.tagMap = tagMap
                this.list = list
            }
        },
        saveTag() {
            let subTagIds = []
            let tagMap = Object.assign({}, this.tagMap)
            for (let key in tagMap) {
                if (tagMap[key].children && tagMap[key].children.length > 0) {
                    for (let index in tagMap[key].children) {
                        subTagIds.push(tagMap[key].children[index].value)
                    }
                }
            }
            updateTag(this.obj_id, {tagIds: subTagIds}).then(res => {
                this.$message({
                    message: '标签设置成功',
                    type: 'success'
                })
                this.$emit('hide')
            })
        },
        close() {
            this.$emit('hide')
        },
        removeTag(value) {
            let tagMap = Object.assign({}, this.tagMap)
            for (let key in tagMap) {
                if (tagMap[key].children && tagMap[key].children.length > 0) {
                    for (let index in tagMap[key].children) {
                        if (tagMap[key].children[index].value == value) {
                            tagMap[key].children.splice(index, 1)
                        }
                    }
                }
            }
            this.tagMap = tagMap
            let list = []
            for (let key in tagMap) {
                list.push(tagMap[key])
            }
            this.list = list
        }
    }
}
</script>

<style lang="scss" scoped>
.res {
    margin-top: 15px;
}
</style>
