<template>
    <div>
        <div class="bigBox">
            <!-- 标签 -->
            <div class="tagBox">
                <template v-for="(item, index) in tagList">
                    <span class="tagLit" @click="tagChange(item, index)" :style="{
                        background: `url(${item.isSelected ? item.isImg : item.noImg})`,
                        color: item.isSelected ? 'white' : 'black',
                    }">{{ item.name }}</span>
                </template>
            </div>
            <!-- 设置盒子 -->
            <div class="setBox">
                <ReportModule v-if="selectIndex == 0"></ReportModule>
                <SetLog v-if="selectIndex == 3"></SetLog>
                <SystemCode v-if="selectIndex == 1"></SystemCode>
                <SystemNum v-if="selectIndex == 2"></SystemNum>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import SystemNum from './components/SystemNum.vue'
import ReportModule from './components/ReportModule.vue'
import SetLog from './components/SetLog.vue'
import SystemCode from './components/SystemCode.vue'
import blueBtn from '@/assets/image/btn_blue.png'
import grayBtn from '@/assets/image/btn_gray.png'
export default {
    setup() {
        let selectIndex = ref(0)
        let tagList = ref([
            {
                name: "报告模板",
                id: 1,
                noImg: grayBtn,
                isImg: blueBtn,
                isSelected: true, // 初始状态未选中
            },
            {
                name: "系统代码管理",
                id: 2,
                noImg: grayBtn,
                isImg: blueBtn,
                isSelected: false, // 初始状态未选中
            },
            {
                name: "系统参数",
                id: 3,
                noImg: grayBtn,
                isImg: blueBtn,
                isSelected: false, // 初始状态未选中
            },
            {
                name: "操作日志",
                id: 4,
                noImg: grayBtn,
                isImg: blueBtn,
                isSelected: false, // 初始状态未选中
            }
        ])
        function tagChange(row, num) {
            selectIndex.value = num
            // 将当前点击的标签设为选中状态，其他标签设为非选中
            tagList.value.forEach((tag) => {
                tag.isSelected = tag.id === row.id;
            });
        }
        onMounted(() => {
        })
        return {
            selectIndex,//选择的标签index
            tagList,//标签列表
            tagChange,//标签切换事件
        }
    },
    components: {
        SystemCode,
        SystemNum,
        ReportModule,
        SetLog,
    }
}
</script>

<style scoped>
.bigBox {
    width: 98%;
    height: 100%;
}

.tagLit {
    display: inline-block;
    width: 112px;
    height: 40px;
    /* border: 1px solid red; */
    text-align: center;
    line-height: 40px;
    margin-left: 10px;
    margin-top: 5px;
    font-size: 12px;
}
</style>