<template>
    <div>
        <div>搜索标签：
            <el-input v-model="queryParams.name" placeholder="请输入标签名称" clearable size="small"
                style="width: 200px;margin-right: 10px" />
            <el-button type="primary" icon="el-icon-search" size="mini"
                @click="search">
                搜索
            </el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
        </div>
        <div v-for="item in tagGroupList" :key="item.id">
            <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
                <span class="name-background">{{ item.name }}</span>
            </div>
            <div class="tag-container">
                <a v-for="tagItem in item.tags" class="tag-box" @click="tagSelection(item, tagItem)"
                    :class="{ 'tag-selected': tagItem.isSelected || (tagSelected && tagSelected.some(tg => tg.id == tagItem.id)) }">
                    {{ tagItem.name }}
                </a>
            </div>
        </div>
        <pagination v-show="tagTotal > 0" :total="tagTotal" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="search"/>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="tagSubmit">确 定</el-button>
            <el-button @click="tagCancel">取消</el-button>
        </div>
    </div>
</template>
<script>

import { searchTags, } from "@/api/app/tag/tagGroup";
export default {
    name: "searchTags",
    props: {
        defaultPageNum: {
            type: Number,
            default: 1
        },
        defaultPageSize: {
            type: Number,
            default: 10
        },
        tagSelected: {
            type: Array,
            default: () => [],
        }
    },
    data() {
        return {
            queryParams: {
                name: null,//标签搜索名称
                pageNum: 1,//页码
                pageSize: 10,//页记录数
            },
            tagGroupList: [],//标签组
            tagTotal: 0,//总数
        }
    },
    created() {
        this.reset();
        //默认查询一次
        this.search();
    },
    watch: {
        tagSelected: {
            handler(n) {
                this.setDefaultSelected();
            },
            deep: true,
        }
    },
    methods: {
        setDefaultSelected() {
            this.tagGroupList.map(tg => {
                tg.tags.map(t => {
                    if (this.tagSelected.some(ts => ts.id == t.id)) {
                        t.isSelected = true;
                    } else {
                        t.isSelected = false;
                    }
                })
            })
        },
        async search() {
            let qp = {...this.queryParams, groupName: this.queryParams.name}
            let dd = await searchTags(qp);
            let rows = dd.rows;
            rows.map(tg => {
                tg.tags.map(t => {
                    if (this.tagSelected.some(ts => ts.id == t.id)) {
                        t.isSelected = true;
                    } else {
                        t.isSelected = false;
                    }
                })
            })
            this.tagGroupList = rows;
            this.tagTotal = dd.total;
        },
        reset() {
            this.queryParams.pageNum = this.defaultPageNum;
            this.queryParams.pageSize = this.defaultPageSize;
            this.queryParams.name = null;
            this.search();
        },
        tagSubmit() {
            try {
                this.$emit('tagSubmit');
            } catch (e) {
                console.warn('执行提交失败！');
            }
        },
        tagCancel() {
            try {
                this.$emit('tagCancel');
            } catch (e) {
                this.warn('执行取消失败！')
            }
        },
        tagSelection(groupItem, tagItem) {
            this.$set(tagItem, 'isSelected', !tagItem.isSelected)
            this.$forceUpdate();
            try {
                this.$emit('tagSelection', groupItem, tagItem);
            } catch (e) {

            }
        },
    }
}
</script>
<style lang="scss">
    
/* CSS 样式 */
.tag-container {
  display: flex;
  flex-wrap: wrap; /* 超出宽度时自动换行 */
  gap: 8px; /* 设置标签之间的间距 */
}

.name-background {
  display: inline-block;
  background-color: #abece6; /* 背景颜色 */
  padding: 4px 8px; /* 调整内边距，让背景包裹文字 */
  border-radius: 4px; /* 可选：设置圆角 */
}

.tag-box {
  padding: 8px 12px;
  border: 1px solid #989797;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}

.tag-selected {
  background-color: #00bc98;
  color: #fff;
  border-color: #00bc98;
}
</style>