<template>
    <div class="random">
        <div class="custom-table">
            <el-table
                :data="tableData"
                border
                style="width: 100%"
                v-loading="loading">
                <el-table-column type="index" align="center" label="序号" width="80"/>
                <el-table-column prop="tag_name" show-overflow-tooltip label="标签名称">
                    <template slot-scope="scope">{{ scope.row.tag_name }}</template>
                </el-table-column>
                <el-table-column prop="tag_name" show-overflow-tooltip label="对应单位数">
                    <template slot-scope="scope">{{ enforce_obj_count[scope.row.id + ''] ? enforce_obj_count[scope.row.id + ''] : 0 }}</template>
                </el-table-column>
                <el-table-column prop="sub_tags" show-overflow-tooltip label="下级标签数">
                    <template slot-scope="scope">{{ scope.row.sub_tags ? scope.row.sub_tags.length : 0 }}</template>
                </el-table-column>
                <el-table-column prop="action" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="loadSubTag(scope.row.id)">下级</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

</template>

<script>

import {getTags, statBatchTag, statTag} from "@/api/random"

export default {
    components: {},
    data() {
        return {
            loading: false,
            query: {
                page: 1,
                size: 1000
            },
            total: 0,
            enforce_obj_count: {},
            tableData: []
        }
    },
    mounted() {
        this.loadData()
    },
    methods: {
        loadData() {
            this.loading = true
            if (this.query.query) {
                this.query.query += ';level==1'
            } else {
              this.query.query = 'level==1'
            }
            getTags(this.query).then(res => {
                // if (res) {
                //     let tags = res.data || []
                //     this.tableData = tags
                //     let tagIds = tags.map(item => item.id)
                //     for (let index in tags) {
                //         if (tags[index].sub_tags && tags[index].sub_tags.length > 0) {
                //             let subTagIds = tags[index].sub_tags.map(item => item.id)
                //             tagIds = tagIds.concat(subTagIds)
                //         }
                //     }
                //     statBatchTag({ids: tagIds.join(',')}).then(res => {
                //         this.enforce_obj_count = JSON.parse(res.statics)
                //     })
                // }
                // this.loading = false

                if (res) {
                    this.tableData = res.data || []
                    let enforce_obj_count = {}
                    let tasks = []
                    for (let index in this.tableData) {
                        tasks.push(new Promise((resolve, reject) => {
                            statTag(this.tableData[index].id, {}).then(res => {
                                console.log(this.tableData[index].id, res)
                                enforce_obj_count[this.tableData[index].id + ''] = res.total
                                resolve(res)
                            })
                        }))
                    }
                    Promise.all(tasks).then(res => {
                        this.enforce_obj_count = enforce_obj_count
                    })

                }
                this.loading = false
            })
        },
        loadSubTag(id) {
            this.$router.push({
                path: '/random/tag/sub',
                query: {
                    id
                }
            })
        }
    }
}
</script>
