<template>
    <div>
        <div class="apt_stan_header">
            <span v-for="(item,index) in list" class="apt_stan_header_span" :class="activeIndex==index?'active_span':''" :key="index" @click="activeIndex=index">{{item}}</span>
        </div>
        <div class="apt_stan_content">
            <div class="apt_stan_content_header">
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div style="padding:16px;">
                <el-table :data="tableData" :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}" v-horizontal-scroll="'hover'"
                class="table-item1 fixed-table" border highlight-current-row>
                
                    <el-table-column label="资质名称" fixed >
                        <template slot-scope="scope">
                            {{scope.row.province}}
                        </template>
                    </el-table-column>
                    
                    <el-table-column label="等级" width="274">
                        <template slot-scope="scope">
                            {{scope.row.biddingCount||"--"}}
                        </template>

                    </el-table-column>
                    <el-table-column label="经营范围" >
                        <template slot-scope="scope">
                            {{scope.row.landInfoCount||"--"}}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="apt_stan_content_text_box">·建筑工程是指各类结构形式的民用建筑工程、工业建筑工程、构筑物工程以及相配套的道路、通信、管网管线等设施工程。工程内容包括地基与基础、主体结构、建筑屋面、装修装饰、建筑幕墙、附建人防工程以及给水排水及供暖、通风与空调、电气、消防、智能化、防雷等配套工程；</div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            tableData:[],
            activeIndex:0,
            list:['建筑业企业资质','工程监理','工程设计','工程勘察','工程造价咨询'],
            options: [
                {
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶'
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }, {
                value: '选项4',
                label: '龙须面'
                }, {
                value: '选项5',
                label: '北京烤鸭'
                }
            ],
            value: ''
        }
    },
}
</script>

<style lang="scss" scoped>
    .apt_stan_header{
        border-radius: 0px 0px 4px 4px;
        display: flex;
        padding: 16px;
        background: #FFFFFF;
        .apt_stan_header_span{
            cursor: pointer;
            font-size: 14px;
            color: #3D3D3D;
            height: 32px;
            border-radius: 4px;
            padding: 5px 12px;
            margin-right: 12px;
            display: inline-block;
            background: #F3F4F5;
        }
        .active_span{
            background: #F6F9FC;
            color: #0081FF;
        }
    }
    .apt_stan_content{
        margin-top: 16px;
        background: #FFFFFF;
        border-radius: 4px 4px 0px 0px;
        .apt_stan_content_header{
            padding: 16px;

            border-width: 0px 0px 1px 0px;
            border-style: solid;
            border-color: #EEEEEE;
        }
        ::v-deep .el-input__inner{
            border: none;
        }
        .apt_stan_content_text_box{
            border-radius: 0px 0px 4px 4px;
            padding: 16px;
            background: #FFFFFF;
            border: 1px solid #E6EAF1;
            color: #3D3D3D;
            font-size: 12px;
            margin-top: 16px;
        }
    }
</style>