<template>
    <div class="random">
        <el-collapse accordion style="width: 800px;">
            <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}}</el-col>
                        <el-col :span="6" style="text-align: right; padding-right: 10px;">
                            <el-input v-model.number="pageTags[index].percent" placeholder="请设置百分比" style="width: 150px;"></el-input>
                        </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}}</div></el-col>
                        <el-col :span="6" style="text-align: right; padding-right: 35px;">
                            <div><el-input v-model.number="pageTags[index].sub_tags[subIndex].percent" placeholder="请设置百分比" style="width: 150px;"></el-input></div>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>

export default {
    name: 'RuleSettingTag',
    components: {},
    data() {
        return {
            pageTags: []
        }
    },
    props: {
        tags: {
            type: Array
        }
    },
    mounted() {
        this.pageTags = this.tags
    },
    methods: {
    }
}
</script>
