<template>
    <div>
        <div class="content">
            <div class="content_item content_item_padding0">
                <div class="label">企业名称</div>
                <div class="content_right item_ckquery_list">
                <el-input class="ename_input" clearable placeholder="多个企业用空格隔开" v-model="ename" @input="projectNamebtn('ename',ename,'关键字:')">
                    <div slot="append" class="btn-search" @click="search()">搜索</div>
                </el-input>
                </div>
            </div>
            <div class="content_item">
                <div class="label label1" >资质条件</div>
                <div class="content_right content_item_ckquery">
                <div class="item_ckquery_list" v-for="(item,i) in aptitudeDtoList" :key="i" :class="i>0?'item_ckquery_distance':''">
                    <el-cascader :options="optionss" separator='丨' clearable :ref="i" class="content_item_list" v-model="item.codeStr" @change='optionsbtn(i)'
                    filterable :props="{
                                            checkStrictly:true,
                                            label:'name',
                                            value:'id',
                                            children:'list',
                                            expandTrigger:'hover'
                                        }" popper-class='content_item_zizi'>
                    </el-cascader>
                    <div class="ckquery_list_right" v-show="i==aptitudeDtoList.length-1" style="position: relative;">
                    <span class="item_ckquery_btn" @click="addAptitudeDtoList">
                        <i class="el-icon-plus" style="font-size:14px"></i>
                        添加资质
                    </span>

                    

                    </div>
                </div>
                </div>
            </div>
            <div class="content_item" style="margin-left:68px;">
                <span v-for=" (kitme,k)  in queryTypelist" :key="k">
                    <el-radio v-model="queryType" :label="kitme.key">
                    {{kitme.value}}
                    </el-radio>
                </span>
            </div>

            <div class="content_item content_item1">
                <div class="search-new">
                <span @click="search()">查询</span>
                <span style="color:#5B5B5B" @click="reset()">重置</span>
                <span @click="$refs.batchImport.visible = true">批量查询</span>
                </div>

            </div>
        </div>
        <div class="bottomlist">
            <div class="bottomlist-title">
                <div class="bottomlist-title-left">
                    <p class="title-left">
                    <span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条
                    </p>
                </div>
                <div class="title-right">
                    <p>
                    <img src="@/assets/images/EXCEL.png" alt="">
                    <span class="excel" @click="clickDialog">导出EXCEL</span>
                    </p>
                </div>
            </div>
            <div class="bd"></div>
            <div class="table-item-jf table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
                <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
                <div class="item-jf-titel">抱歉，没找到相关数据！</div>
                <div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div>
            </div>
            <template v-if="!isSkeleton&&tableData.length>0">
                <div v-for="(item,index) in tableData" :key="index" style="padding-bottom: 16px;">
                    <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
                    <div class=" table-item-jf table-item " >
                        <div class="title_box">
                            <img src="@/assets/images/enterprise.png" >
                            <span class="name_box">{{ item.name }}</span>
                            <span class="float_r">符合条件资质（{{ item.total }}）<span v-if="item.total>5" class="show_more" @click="showClick(item)">查看所有 ></span></span></span>
                        </div>
                        <el-table :data="item.list" :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="证书编号" width="119">
                                <template slot-scope="scope">
                                    {{scope.row.supplierCount||"--"}}
                                </template>
                            </el-table-column>
                            
                            <el-table-column label="资质名称" width="273">
                                <template slot-scope="scope">
                                    {{scope.row.biddingCount||"--"}}
                                </template>

                            </el-table-column>
                            <el-table-column label="承包工程范围" width="415">
                                <template slot-scope="scope">
                                    {{scope.row.landInfoCount||"--"}}
                                </template>
                            </el-table-column>

                            
                            <el-table-column label="发证日期" width="119">
                                <template slot-scope="scope">
                                    {{scope.row.bratingSubjectLevel||"--"}}
                                </template>
                            </el-table-column>
                            <el-table-column label="有效期至" width="119">
                                <template slot-scope="scope">
                                    {{scope.row.bondBalance||"--"}}
                                </template>
                            </el-table-column>
                            <el-table-column label="发证机关" width="204">
                                <template slot-scope="scope">
                                    {{scope.row.bondBalance1||"--"}}
                                </template>
                            </el-table-column>
                            <el-table-column label="经营范围" width="415">
                                <template slot-scope="scope">
                                    <span class="line_2"> {{scope.row.bondBalance2||"--"}}</span>
                                
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="pagination clearfix" v-show="total>0">
                    <el-pagination background :page-size="pageSize" :current-page="pageNum" @current-change="handleCurrentChange" layout="prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
            </template>
        </div>
        <el-dialog title="所有符合条件资质" custom-class="show_more_dialog" :visible.sync="showMore">
            <div class=" table-item-jf table-item " >
                <div class="title_box">
                        <img src="@/assets/images/enterprise.png" >
                        <span class="name_box">{{ dialogData.name }}</span>
                        <span class="float_r">共有 <span style="color: #0081FF;">{{ dialogData.total }}</span> 个资质</span>
                    </div>
                <el-table :data="dialogData.list" :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="证书编号" width="119">
                        <template slot-scope="scope">
                            {{scope.row.supplierCount||"--"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="资质名称" width="273">
                        <template slot-scope="scope">
                            {{scope.row.biddingCount||"--"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="承包工程范围" width="415">
                        <template slot-scope="scope">
                            {{scope.row.landInfoCount||"--"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="发证日期" width="119">
                        <template slot-scope="scope">
                            {{scope.row.bratingSubjectLevel||"--"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="有效期至" width="119">
                        <template slot-scope="scope">
                            {{scope.row.bondBalance||"--"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="发证机关" width="204">
                        <template slot-scope="scope">
                            {{scope.row.bondBalance1||"--"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="经营范围" width="415">
                        <template slot-scope="scope">
                            <span class="line_2"> {{scope.row.bondBalance2||"--"}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination clearfix" v-show="dialogData.total>5">
                <el-pagination background  :current-page="pageNum1" :page-size="pageSize" @current-change="handleCurrentChange1" layout="prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </el-dialog>
    <BatchImport ref="batchImport"></BatchImport>
    <ExportDialog :data="exportData" v-if="exportData.dialogExportVisible" @clickEXCEL="clickEXCEL"></ExportDialog>

    </div>
</template>

<script>
import "@/assets/styles/public.scss";
import api from '@/api/enterpriseData/enterpriseData.js';
import skeleton from '@/views/project/projectList/component/skeleton';
import ExportDialog from "@/views/component/export-dialog"
import BatchImport from "./BatchImport"

export default {
    components: { skeleton,ExportDialog,BatchImport },
    data(){
        return{
            batchImport:false,
            ename: '',
            aptitudeDtoList: [
                {
                    nameStr: '',
                    codeStr: [],
                    
                }
            ],
            queryTypelist: [
                {
                    key: 'or',
                    status: false,
                    value: '任意均可'
                },
                {
                    key: 'and',
                    status: true,
                    value: '同时具备'
                },
            ],
            queryType: 'and',
            optionss: [],
            dialogData:{},
            tableData: [
                {
                    name:'中交第二航务工程局有限公司',
                    list:[
                        {
                            biddingCount:'工程勘察岩土工程专业（岩土工程勘察）甲级',
                            landInfoCount:'可承担一级以下公路，单座桥长 1000 米以下、单跨跨度 150 米以下的桥梁，长度 1000 米以下的隧道工程的施工。',
                            supplierCount:'B233000514',
                            bratingSubjectLevel:'2021-12-27',
                            bondBalance:'2021-12-27',
                            bondBalance1:'浙江省住房和城乡建设厅',
                            bondBalance2:'经营范围包含许可项目：建设工程设计；建设工程勘察；建设工程监理；建设工程施工；测绘服务；国土空间规划编制；水利工程建设监理(依法...',
                        }
                    ],
                    total:10
                },
                {
                    name:'中交第二航务工程局有限公司',
                    list:[
                        {
                            biddingCount:'工程勘察岩土工程专业（岩土工程勘察）甲级',
                            landInfoCount:'可承担一级以下公路，单座桥长 1000 米以下、单跨跨度 150 米以下的桥梁，长度 1000 米以下的隧道工程的施工。',
                            supplierCount:'B233000514',
                            bratingSubjectLevel:'2021-12-27',
                            bondBalance:'2021-12-27',
                            bondBalance1:'浙江省住房和城乡建设厅',
                            bondBalance2:'经营范围包含许可项目：建设工程设计；建设工程勘察；建设工程监理；建设工程施工；测绘服务；国土空间规划编制；水利工程建设监理(依法...',
                        }
                    ],
                    total:10
                },
            ],
            total: 0,
            pageNum: 1,
            pageNum1: 1,
            pageSize: 5,
            dataEXCEL:{},
            isSkeleton: false,
            exportData:{
                title:'查城投平台',
                dialogExportVisible:false,
                forData: [
                {label: '公司名称', prop: 'companyName',slot: true,minWidth: '140'},
                {label: '区域', prop: 'province', slot: true,minWidth: '160'},
                {label: '招标数量', prop: 'biddingCount',slot: true,minWidth: '80'},
                {label: '城投拿地', prop: 'landInfoCount', slot: true,minWidth: '80'},
                {label: '供应商', prop: 'supplierCount',slot: true,minWidth: '100'},
                {label: '债券余额（亿元）', prop: 'bondBalance',minWidth: '130'},
                {label: '主体评级', prop: 'bratingSubjectLevel',minWidth: '80'},
                {label: '行政级别', prop: 'uipExecutiveLevel',minWidth: '80'},
                {label: '股东背景', prop: 'shareholderBg', slot: true,minWidth: '100'},
                {label: '股权关系', prop: 'equityRelationship', slot: true,minWidth: '100'},
                {label: '平台重要性', prop: 'platformImportance', slot: true,minWidth: '130'},
                {label: '城投业务类型', prop: 'uipBusinessType', slot: true,minWidth: '130'},
                {label: '实控人', prop: 'actualController', slot: true,minWidth: '140'},
                {label: '最新报告期', prop: 'latestReportPeriod', slot: true,minWidth: '120'},
                {label: '总资产（亿元）', prop: 'totalAssets', slot: true,minWidth: '120'},
                {label: '归母净资产（亿元）', prop: 'belongNetAssets', slot: true,minWidth: '140'},
                ],
                exportTableData:[],
                exportEXCEL:{}
            },
            showMore:false,
        }
    },
    created(){
        api.aptitudeCode().then(res => {
            if (res) {
                this.optionss = res;

            } else {
                this.optionss = aptitudeCode;

            }
            }).catch(error => {
            this.optionss = aptitudeCode;
        });
    },
    methods:{
        projectNamebtn(){},
        search(){},
        showClick(item){
            this.showMore = true;
            this.dialogData = item
        },
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum;
            this.search(pageNum, this.pageSize);
        },
        handleCurrentChange1(pageNum) {
            this.pageNum1 = pageNum;
            this.search(pageNum, this.pageSize);
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.search(this.pageNum, pageSize);
        },
        reloadPage() {
            this.pageFlag = false;
            this.$nextTick(() => {
                this.pageFlag = true;
            });
        },
        optionsbtn(i) {
            if (this.aptitudeDtoList.length > 1 && this.aptitudeDtoList[i].codeStr.length < 1) {
                this.aptitudeDtoList.splice(i, 1);
                i--;
            }
            this.$refs[i] && this.$refs[i][0].toggleDropDownVisible(false);
            var _this = this;
            //延迟500毫秒执行
            if (this.$refs[i]) {
                setTimeout(function () {
                _this.aptitudeDtoList[i].nameStr = _this.$refs[i][0].$refs.input.$options.propsData.value;
                }, 100);
            }
        },
        addAptitudeDtoList(){
            var n = 0;
            for (let i = 0; i < this.aptitudeDtoList.length; i++) {
                if (!this.aptitudeDtoList[i].nameStr) {
                n++;
                }
            }
            if (n > 0) {
                this.$message.warning("请选择资质条件后，增加资质！");
            } else {
                this.aptitudeDtoList.push({
                nameStr: '',
                codeStr: [],
                });
            }
        },
        reset(){
            Object.assign(this.$data, this.$options.data()); //重置data
            api.aptitudeCode().then(res => {
                if (res) {
                this.optionss = res;

                } else {
                this.optionss = aptitudeCode;

                }
            }).catch(error => {
                this.optionss = aptitudeCode;
            });
        },
        clickDialog(){
        this.exportData.dialogExportVisible=true;
        },
        clickEXCEL(value,title) {
        if(this.tableData.length === 0){
            this.$message.error('当前信息列表数据为空，请重新筛选数据');
            return
        }
        if(value > 2000){
            return
        }
        this.dataEXCEL.exportExeclName=title;
        if(value){
            this.dataEXCEL.pageSize=value
        }else {
            this.dataEXCEL.pageSize=2000;
        }
        api.uipSerachExport(this.dataEXCEL).then(res => {
            if(res.code === 200){
            this.exportData.exportEXCEL=true;
            }else {
            this.$message.error(res.msg);
            }
        })
        },
        cancel(){
        this.exportData.dialogExportVisible=false;
        this.exportData.exportEXCEL={}
        },
    }
}
</script>

<style lang="scss" scoped>
    .content {
        padding: 0px 16px;
        padding-top: 16px;
        border-radius: 4px 4px 4px 4px;
        background: #ffffff;
        ::v-deep .el-input .el-input__inner{
            height: 32px;
            line-height: 32px;
        }
        ::v-deep .el-radio__label {
                    margin-left: 0px;
                    padding-left: 4px;
                    margin-right: 24px;
                }
        .content_item {
            padding-top: 20px;
            display: flex;
            align-items: center;
            .label {
            width: 68px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(35, 35, 35, 0.8);
            }
            .label1{
                align-self: baseline;
                display: inline-block;
                height: 32px;
                line-height: 32px;
            }
            .content_right {
                .ename_input {
                    width: 405px;

                    margin-right: 20px;
                }
                .el-input-group {
                    display: flex;
                    align-items: center;
                }
                ::v-deep .el-input-group__append {
                    padding: 0px;
                    line-height: 32px;
                    font-weight: 400;
                    color: #0081ff;
                    height: 32px;
                    width: 80px;
                    background: #f5f5f5;
                    border-radius: 0px 0px 0px 0px;
                    text-align: center;
                    cursor: pointer;
                }
                
            }

            .item_ckquery_list {
            display: flex;
            align-items: center;
            .qualifications-tab {
                margin-right: 4px;
                border: 1px solid #e0e0e0;
                padding: 2px 3px;
                border-radius: 2px;
                height: 32px;
                margin-top: 1px;
                span {
                background: #fff;
                display: inline-block;
                cursor: pointer;
                float: left;
                border-radius: 2px;
                padding: 3px 8px;
                margin-top: 0.5px;
                }
                .action {
                color: #ffffff;
                background: #0081ff;
                }
            }

            .content_item_list {
                width: 280px;
                height: 32px;
                line-height: 32px;
            }
            .ckquery_list_right {
                width: 670px;
            }
            }

            .item_ckquery_list .el-input__icon {
            position: relative;
            top: 1px;
            }
            .ckquery_list_right {
                width: 405px;
                top: 1px;
                .item_ckquery_btn{
                    height: 32px;
                    line-height: 32px;
                    top: 1px;
                    border-color: #DCDFE6;
                    color: rgba(35, 35, 35, 0.8);
                    &:hover{
                        color: #ffffff;
                    }
                }
            }
            .register_count_ipt {
            margin-left: 0px;
            }
            .register_count_ipt .el-input__inner {
            width: 174px;
            }
            ::v-deep .el-input-group__prepend {
            padding: 0 8px;
            }
            .content-projecttype {
            display: flex;
            align-items: center;
            justify-content: center;
            .projecttype {
                font-weight: 400;
                color: #232323;
                padding: 1px 5px;
                margin-right: 4px;
                cursor: pointer;
                border-radius: 3px 3px 3px 3px;
                font-size: 14px;
            }
            .projecttype:first-child {
                padding-left: 0px;
            }
            .projecttype:hover {
                background: #f3f4f5;
                padding: 1px 5px;
            }
            .activetype {
                background: #f3f4f5;
                padding: 1px 5px !important;
            }
            }
        }
        .content_item1{
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #EEEEEE;
            padding-left: 64px;
            .search-new{
                padding-bottom: 16px;
                span{
                    display: inline-block;
                    width: 80px;
                    text-align: center;
                    line-height: 32px;
                    cursor: pointer;
                    border-radius: 4px;
                    border: 1px solid #D4D4D4;
                    opacity: 1;
                    margin-right: 12px;
                }
            }
        }
        .content_item_padding0 {
            padding: 0;
        }
        
    }
    .bottomlist {
        width: 100%;
        background-color: #ffffff;

        border-radius: 4px 4px 4px 4px;
        .bottomlist-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            padding: 16px;

            .title-right {
            display: flex;
            align-items: center;
            p:last-child {
                display: flex;
                align-items: center;
                font-size: 14px;
                font-weight: 400;
                color: rgba(35, 35, 35, 0.8);
            }
            img {
                width: 18px;
                height: 18px;
            }
            .excel {
                cursor: pointer;
            }
            }
        }
        .bd{
            border-top: 1px solid #EEEEEE;
            margin: 0 16px 16px;
        }
        .bottomlist-title-left {
            display: inline-flex;
            align-items: center;
            .title-left {
            height: 16px;
            line-height: 16px;
            font-size: 12px;
            font-weight: 400;
            color: #3d3d3d;
            }
        }
        .bottomlist-content {
            padding-bottom: 0px;
        }

        .table-item-jf {
            padding: 0px 16px;
            .list-titel-a {
            color: #0081ff;
            }
            ::v-deep .el-table--border .el-table__cell:first-child .cell {
            padding: 0px 8px;
            padding-left: 12px;
            font-size: 12px;
            font-weight: 400;
            }
            ::v-deep .el-table th.el-table__cell > .cell {
            padding: 0px 8px;
            padding-left: 12px;
            font-size: 12px;
            font-weight: 400;
            }
            ::v-deep .el-table th.el-table__cell.is-leaf,
            ::v-deep .el-table td.el-table__cell {
            border-bottom: 1px solid #e6eaf1;
            }
            ::v-deep .el-table--border .el-table__cell {
            border-right: 1px solid #e6eaf1;
            }
            ::v-deep.el-table__fixed::before {
            height: 0;
            }
           

            .el-table {
                th,
                td {
                    .cell {
                    font-size: 12px;
                    }
                }
            }
            .title_box{
                font-size: 14px;
                color: #232323;
                .name_box{
                    font-size: 16px;
                    font-weight: 700;
                    color: #232323;
                    margin-bottom: 12px;
                }
                img{
                    width: 28px;
                    height: 28px;
                    margin-right: 12px;
                }
                .float_r{
                    float:right;
                    .show_more{
                        cursor: pointer;
                        color:#0081FF;
                        margin-left: 8px;
                    }
                }
            }
        }
        .table-item1 {
            ::v-deep .el-table__body-wrapper {
            color: #232323;
            }
        }
        .fixed-table {
            overflow: initial;

            ::v-deep .el-table__header-wrapper {
            position: sticky;
            top: 56px;
            z-index: 9;
            }
            ::v-deep .el-table__fixed-header-wrapper {
            position: sticky;
            z-index: 9;
            top: 56px;
            }
            ::v-deep .el-table__fixed {
            overflow-x: clip;
            overflow-y: clip;
            }
        }
        .table-item-jf1 {
            border-top: 1px solid #efefef;
        }
        .pagination {
            padding: 14px;
            .el-pagination {
            float: right;
            }
        }
    }
    .line_2{
        overflow:hidden;
        text-overflow:ellipsis;
        line-clamp:2; 
        display:-webkit-box;
        text-overflow:-o-ellipsis-lastline;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
    }
    ::v-deep .show_more_dialog{
        border-radius: 4px;
        width: 900px;
        .el-dialog__header{
            font-size: 16px;
            color:#232323;
            font-weight:700;
        }
        .el-dialog__body{
            border-top: 1px solid #E5E6EB;
            padding: 20px 20px 56px;
        }
        .title_box{
            font-size: 14px;
            color: #232323;
            margin-bottom: 20px;
            height: 28px;
            line-height: 28px;
            .name_box{
                font-size: 16px;
                color: #232323;
                margin-bottom: 12px;
            }
            img{
                width: 28px;
                height: 28px;
                margin-right: 12px;
            }
            .float_r{
                float:right;
                .show_more{
                    cursor: pointer;
                    color:#0081FF;
                    margin-left: 8px;
                }
            }
        }
        .pagination{
            float:right;
            margin-top: 12px;
            margin-right: -10px;
        }   
    }
</style>