<template>
    <div class="enterprise">
        <div class="container">
            <!-- 面包屑 -->
            <el-row>
                <el-col>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/resource' }">资源供需</el-breadcrumb-item>
                        <el-breadcrumb-item>产品详情</el-breadcrumb-item>
                        <el-breadcrumb-item><span style="color:#C8C9CC">查看企业</span></el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
            </el-row>
            <el-row>
                <div class="top">
                    <div class="name">
                        <!-- <img :src="data.orgInfo ? data.orgInfo.loge : null" alt="" /> -->
                        <!-- <span>{{ data.orgInfo ? data.orgInfo.orgName : null }}</span> -->
                        <img :src="logo" />
                        <span>{{ orgName }}</span>
                    </div>
                    <div class="tab">
                        <!-- <span :class="{ active: index === 0 }" @click="index = 0">全部供需</span> -->
                        <span :class="{ active: index === 1 }" @click="index = 1">技术需求({{ list.length }})</span>
                        <span :class="{ active: index === 2 }" @click="index = 2"
                            >产品需求({{ productNeedList.length }})</span
                        >
                        <span :class="{ active: index === 3 }" @click="index = 3"
                            >融资需求({{ financingRequireList.length }})</span
                        >
                        <span :class="{ active: index === 4 }" @click="index = 4"
                            >产品发布({{ productList.length }})</span
                        >
                        <span :class="{ active: index === 5 }" @click="index = 5"
                            >技术发布({{ artProductList.length }})</span
                        >
                        <span :class="{ active: index === 6 }" @click="index = 6"
                            >资源共享({{ financineReleaseList.length }})</span
                        >
                    </div>
                </div>
                <div class="content">
                    <!-- <div v-if="index === 0">
                        <listSupplyDemand></listSupplyDemand>
                    </div> -->
                    <div v-if="index === 1">
                        <techRequier></techRequier>
                    </div>
                    <div v-if="index === 2">
                        <productRequire></productRequire>
                    </div>
                    <div v-if="index === 3">
                        <financingRequire></financingRequire>
                    </div>
                    <div v-if="index === 4">
                        <productRelease></productRelease>
                    </div>
                    <div v-if="index === 5">
                        <techRelease></techRelease>
                    </div>
                    <div v-if="index === 6">
                        <financingRelease></financingRelease>
                    </div>
                </div>
            </el-row>
        </div>
    </div>
</template>

<script>
import techRequier from '../components/enterprise/techRequier';
import productRequire from '../components/enterprise/productRequire';
import financingRequire from '../components/enterprise/financingRequire';
import productRelease from '../components/enterprise/productRelease';
import techRelease from '../components/enterprise/techRelease';
import financingRelease from '../components/enterprise/financingRelease';
// import listSupplyDemand from '../components/enterprise/listSupplyDemand';

export default {
    components: {
        techRequier,
        productRequire,
        financingRequire,
        productRelease,
        techRelease,
        financingRelease
        // listSupplyDemand
    },
    name: 'enterprise',
    data() {
        return {
            index: 1,
            data: {},
            list: {},
            productNeedList: {},
            financingRequireList: {},
            productList: {},
            artProductList: {},
            financineReleaseList: {},
            orgName: '',
            logo: ''
        };
    },
    created() {
        // if (this.$route.query) {
        //     this.$http.get(`orgInfo/getAllCount/${this.$route.query.id}`).then(res => {
        //         this.data = res;
        //     });
        // }
        // if (this.$route.query) {
        //     this.orgName = this.$route.query.name;
        //     this.logo = this.$route.query.logo;
        //     console.log(this.$route.query.logo);
        // }
        if (this.$route.query) {
            this.orgName = this.$route.query.name;
            this.logo = this.$route.query.logo;
        }
        this.$http.get('/resourceSupplyAndDemand/all', { size: 8, query: { type: 'TECH_DEMAND' } }).then(res => {
            this.list = res.content;
        });
        this.$http.get('/resourceSupplyAndDemand/all', { size: 8, query: { type: 'PRODUCT_DEMAND' } }).then(res => {
            this.productNeedList = res.content;
        });
        this.$http.get('/resourceSupplyAndDemand/all', { size: 8, query: { type: 'FINANCING_DEMAND' } }).then(res => {
            this.financingRequireList = res.content;
        });
        this.$http.get('/resourceSupplyAndDemand/all', { size: 5, query: { type: 'PRODUCT_SUPPLY' } }).then(res => {
            this.productList = res.content;
        });
        this.$http.get('/resourceSupplyAndDemand/all', { size: 5, query: { type: 'TECH_SUPPLY' } }).then(res => {
            this.artProductList = res.content;
        });
        this.$http.get('/resourceSupplyAndDemand/all', { size: 5, query: { type: 'RES_SUPPLY' } }).then(res => {
            this.financineReleaseList = res.content;
        });
    }
};
</script>
<style lang="less" scoped>
.container {
    width: 980px;
    margin: 0 auto;
}
.el-breadcrumb {
    height: 60px;
    line-height: 60px;
    /deep/.el-breadcrumb__inner {
        font-size: 12px;
        color: #000 !important;
    }
}
.top {
    background: #ffffff;
    padding: 20px 20px 16px;
    .name {
        display: flex;
        align-items: center;
        img {
            width: 70px;
            height: 70px;
            margin-right: 10px;
        }
        span {
            font-size: 22px;
            font-weight: 500;
            color: #000000;
        }
    }
    .tab {
        margin-top: 28px;
        span {
            cursor: pointer;
            height: 22px;
            font-size: 14px;
            font-weight: 500;
            color: #313233;
            line-height: 22px;
            margin-right: 36px;
            padding-bottom: 5px;
            &.active {
                color: #bf1616;
                border-bottom: 2px solid #bf1616;
            }
        }
    }
}
.content {
    // height: 748px;
    background-color: #fff;
    margin-top: 5px;
    padding: 0px 20px 40px;
}
</style>
