<template>
    <div class="random">
        <el-collapse accordion style="width: 100%;">
            <el-collapse-item v-for="(item, index) in pageTags" :key="index">
                <template slot="title">
                    <el-row style="width: 100%; padding-left: 10px;">
                        <el-col :span="18"><span style="color: #1B90FF; font-weight: bolder; margin-right: 8px;">|</span>{{item.tag_name}}<span style="color: #409EFF">({{enforce_obj_count[item.id + ''] ? enforce_obj_count[item.id + ''] : 0}})</span></el-col>
                        <el-col :span="6" style="text-align: right; padding-right: 10px;">
                            <div @click="stopProp"><el-input-number :min="1" :max="100" :precision="0" v-model.number="pageTags[index].percent" placeholder="请设置百分比" style="width: 180px;"></el-input-number></div>
                        </el-col>
                    </el-row>
                </template>
                <div style="padding-left: 20px; padding-top: 5px; background-color: #f5f7fa;">
                    <el-row v-for="(subItem, subIndex) in item.sub_tags" :key="subIndex" type="flex" style="height: 42px;">
                        <el-col :span="18"><div>{{subItem.tag_name}}<span style="color: #409EFF">({{enforce_obj_count[subItem.id + ''] ? enforce_obj_count[subItem.id + ''] : 0}})</span></div></el-col>
                        <el-col :span="6" style="text-align: right; padding-right: 35px;">
                            <div><el-input-number :min="1" :max="100" :precision="0" v-model.number="pageTags[index].sub_tags[subIndex].percent" placeholder="请设置百分比" style="width: 180px;"></el-input-number></div>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-item>
        </el-collapse>
        <el-row style="text-align: right; margin-top: 15px;">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
        </el-row>
    </div>
</template>

<script>

export default {
    name: 'RandomRuleSettingTag',
    components: {},
    data() {
        return {
            pageTags: []
        }
    },
    props: {
        enforce_obj_count: {
            type: Object
        },
        type: {
            type: Number
        },
        tags: {
            type: Array
        }
    },
    mounted() {
        this.pageTags = this.tags
        console.log(this.type)
    },
    methods: {
        stopProp(e) {
            e.stopPropagation()
        },
        handleCancel() {
            this.$emit("handleCancel")
        },
        handleSubmit() {
            this.$emit("handleSubmit", this.type, this.pageTags)
        }
    }
}
</script>
