<template>
    <div class="main-content12">
        <div class="pageTemplete-wrap">
            <div class=" flex-common" id="">
                <h3>模板选择</h3>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="混合（AI+查重）" name="1">
                        <div class="templeteImgs">
                            <div class="templeteImgs-item" v-for="item in templeteList" :key="item.tpl_id">
                                <img :src="item.img" alt="">
                                <span class="look">预览</span>
                                <img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
                                <p>{{ item.list }}</p>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="仅查重" name="2">
                        <div class="templeteImgs">
                            <div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 1})" :key="item.tpl_id">
                                <img :src="require(item.img)" alt="">
                                <span class="look">预览</span>
                                <img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
                                <p>{{ item.list }}</p>
                            </div>
                        </div>
                        
                    </el-tab-pane>
                    <el-tab-pane label="仅AI写作" name="3"></el-tab-pane>
                    <div class="templeteImgs">
                        <div class="templeteImgs-item" v-for="item in templeteList.filter(item1=> {item1.type == 0})" :key="item.tpl_id">
                            <img :src="require(item.img)" alt="">
                            <span class="look">预览</span>
                            <img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
                            <p>{{ item.list }}</p>
                        </div>
                    </div>
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    // 站点设置
    name: '',
    components: {
        // GuipInput,
        // GuipButton,
        // GuipSwitch,
        // GroupFormBtns
    },
    data() {
        return {
            activeName: '1',
            addImgList: {
                '万方': require('@/assets/register/wanfang.png'),
                '维普': require('@/assets/register/weipu.svg'),
                '学术不端': require('@/assets/register/xueshubuduan.svg'),
            },
            templeteList:[
                {
                    name:'清新科技蓝',
                    type:1,
                    tpl_id:'1',
                    img:require('@/assets/site/temImg.png')
                },
                {
                    name:'清新科技蓝1',
                    type:0,
                    tpl_id:'11',
                    img:require('@/assets/site/temImg.png')
                },
                {
                    name:'清新科技蓝2',
                    tpl_id:'12',
                    type:0,
                    img:require('@/assets/site/temImg.png')
                },
                {
                    name:'清新科技蓝3',
                    tpl_id:'16',
                    type:0,
                    img:require('@/assets/site/temImg.png')
                },
                {
                    name:'清新科技蓝4',
                    tpl_id:'13',
                    type:1,
                    img:require('@/assets/site/temImg.png')
                },
                {
                    name:'清新科技蓝5',
                    tpl_id:'14',
                    type:1,
                    img:require('@/assets/site/temImg.png')
                },
                {
                    name:'清新科技蓝6',
                    type:1,
                    tpl_id:'15',
                    img:require('@/assets/site/temImg.png')
                },
            ]
        }
    },
    methods: {
        handleClick() {

        }
    }
}
</script>
<style scoped lang="scss">
.pageTemplete-wrap {
    width: 100%;
    letter-spacing: 0.08em;
    box-sizing: border-box;
}

::v-deep .el-tabs__nav-wrap {
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #DFE2E6;
}
</style>