<template>
    <div class="release">
        <el-row>
            <div class="content_title">
                <span class="tab" :class="{ active: tab === 0 }" @click="getTabData(0)">供应信息</span>
                <span class="tab" :class="{ active: tab === 1 }" @click="getTabData(1)">需求信息</span>
                <button @click="changeTab">
                    <img src="../../assets/icon_plus.png" />
                    <span v-if="tab === 0">发布供应</span>
                    <span v-else>发布需求</span>
                </button>
            </div>
        </el-row>
        <!-- 供应信息列表 -->
        <div class="tab1" v-if="tab === 0" key="tab1">
            <el-row>
                <div class="classify">
                    <span
                        v-for="(item, index) in List"
                        :key="index"
                        :class="index == current ? 'active' : ''"
                        @click="getIndex(index)"
                    >
                        {{ item }}
                    </span>
                </div>
            </el-row>
            <!-- 产品 -->
            <el-row>
                <template v-if="current == 0">
                    <div class="card_list">
                        <div class="card" v-for="n in tableData" :key="n.id">
                            <el-image class="cover" :src="n.images[0]">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <h5>{{ n.name }}</h5>
                            <p>{{ n.description }}</p>
                            <div class="btn">
                                <div class="edit" @click="toShow(n)">
                                    编辑
                                </div>
                                <div class="red">当前对接&nbsp;{{ n.count ? n.count : 0 }}</div>
                                <div class="under_review" v-if="n.status == 'PASS'">
                                    审核通过
                                </div>
                                <div class="under_review" v-if="n.status == 'PENDING'">
                                    审核中
                                </div>
                                <div class="under_review" v-if="n.status == 'DENY'">
                                    审核失败
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="current == 1">
                    <div class="card_list" v-if="current == 1">
                        <div class="card" v-for="n in tableData" :key="n.id">
                            <el-image class="cover" :src="n.images[0]">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <h5>{{ n.name }}</h5>
                            <p>{{ n.description }}</p>
                            <div class="btn">
                                <div class="edit" @click="toShow(n)">
                                    编辑
                                </div>
                                <div class="red">当前对接&nbsp;{{ n.count ? n.count : 0 }}</div>
                                <div class="under_review" v-if="n.status == 'PASS'">
                                    审核通过
                                </div>
                                <div class="under_review" v-if="n.status == 'PENDING'">
                                    审核中
                                </div>
                                <div class="under_review" v-if="n.status == 'DENY'">
                                    审核失败
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="current == 2">
                    <div class="card_list">
                        <div class="card" v-for="n in tableData" :key="n.id">
                            <el-image class="cover" :src="n.images[0]">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <h5>{{ n.name }}</h5>
                            <p>{{ n.description }}</p>
                            <div class="btn">
                                <div class="edit" @click="toShow(n)">
                                    编辑
                                </div>
                                <div class="red">当前对接&nbsp;{{ n.count ? n.count : 0 }}</div>
                                <div class="under_review" v-if="n.status == 'PASS'">
                                    审核通过
                                </div>
                                <div class="under_review" v-if="n.status == 'PENDING'">
                                    审核中
                                </div>
                                <div class="under_review" v-if="n.status == 'DENY'">
                                    审核失败
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </el-row>
            <el-row>
                <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalElements"
                >
                </el-pagination>
            </el-row>
        </div>
        <!--需求信息列表  -->
        <div class="tab1" v-else key="tab2">
            <el-row>
                <div class="classify">
                    <span
                        v-for="(item, index) in needsList"
                        :key="index"
                        :class="index == current ? 'active' : ''"
                        @click="getIndexNeed(index)"
                    >
                        {{ item }}
                    </span>
                </div>
            </el-row>
            <!-- 产品需求，技术需求 -->
            <el-row>
                <!-- <div v-for="n in tableData" :key="n.id" class="neens_div"> -->
                <template v-if="current == 0">
                    <div v-for="n in tableData" :key="n.id" class="neens_div">
                        <div class="needs_card">
                            <el-image class="cover" :src="n.images[0]">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <div class="info">
                                <div class="title">{{ n.name }}</div>
                                <p>
                                    {{ n.description }}
                                </p>
                                <div class="time">{{ n.createdAt }}</div>
                            </div>
                            <div class="btn">
                                <div class="red">当前对接&nbsp;{{ n.count ? n.count : 0 }}</div>
                                <div class="edit" @click="toNeedShow(n)">编辑</div>
                                <div class="under_review" v-if="n.status == 'PASS'">
                                    审核通过
                                </div>
                                <div class="under_review" v-if="n.status == 'PENDING'">
                                    审核中
                                </div>
                                <div class="under_review" v-if="n.status == 'DENY'">
                                    审核失败
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="current == 1">
                    <div v-for="n in tableData" :key="n.id" class="neens_div">
                        <div class="needs_card">
                            <el-image class="cover" :src="n.images[0]">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <div class="info">
                                <div class="title">{{ n.name }}</div>
                                <p>
                                    {{ n.description }}
                                </p>
                                <div class="time">{{ n.createdAt }}</div>
                            </div>
                            <div class="btn">
                                <div class="red">当前对接&nbsp;{{ n.count ? n.count : 0 }}</div>
                                <div class="edit" @click="toNeedShow(n)">编辑</div>
                                <div class="under_review" v-if="n.status == 'PASS'">
                                    审核通过
                                </div>
                                <div class="under_review" v-if="n.status == 'PENDING'">
                                    审核中
                                </div>
                                <div class="under_review" v-if="n.status == 'DENY'">
                                    审核失败
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-if="current == 2">
                    <div v-for="n in tableData" :key="n.id" class="neens_div">
                        <div class="needs_card">
                            <el-image class="cover" :src="n.images[0]">
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <div class="info">
                                <div class="title">{{ n.name }}</div>
                                <div class="con_info">
                                    <div class="con_info_item">
                                        <i>计划融资</i><span>{{ n.resSnDPropertyList[0].value }}</span>
                                    </div>
                                    <div class="con_info_item">
                                        <i>融资阶段</i><span>{{ n.resSnDPropertyList[1].value }}</span>
                                    </div>
                                    <div class="con_info_item">
                                        <i>行业类型</i><span>{{ n.resSnDPropertyList[2].value }}</span>
                                    </div>
                                </div>
                                <div class="time">{{ n.createdAt }}</div>
                            </div>
                            <div class="btn">
                                <div class="red">当前对接&nbsp;{{ n.count ? n.count : 0 }}</div>
                                <div class="edit" @click="toNeedShow(n)">编辑</div>
                                <div class="under_review" v-if="n.status == 'PASS'">
                                    审核通过
                                </div>
                                <div class="under_review" v-if="n.status == 'PENDING'">
                                    审核中
                                </div>
                                <div class="under_review" v-if="n.status == 'DENY'">
                                    审核失败
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </el-row>
            <el-row>
                <el-pagination
                    @size-change="onSizeChange"
                    @current-change="onCurrentChange"
                    :current-page="page"
                    :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalElements"
                >
                </el-pagination>
            </el-row>
        </div>
    </div>
</template>

<script>
import pageableTable from '@/mixins/pageableTable';
export default {
    name: 'release',
    mixins: [pageableTable],
    data() {
        return {
            tab: 0,
            List: [/* '全部供应',  */ '产品发布', '技术发布', '资源共享'],
            needsList: [/* '全部需求', */ '技术需求', '产品需求', '融资需求'],
            current: 0,
            currentPage: 1,
            url: '/resourceSupplyAndDemand/my',
            pageSize: 10,
            // infoList: {}
            productList: {},
            techList: {},
            resList: {},
            techDemandtList: {},
            proDemandtList: {},
            resDemandtList: {},
            // query: {}
            types: ''
        };
    },
    methods: {
        getTabData(index) {
            this.tableData = [];
            this.tab = index;
            if (this.tab === 1) {
                this.getIndexNeed(this.current);
            } else {
                this.getIndex(this.current);
            }
        },
        // 供应信息
        getIndex(index) {
            this.tableData = [];
            this.current = index;
            if (this.current === 0) {
                // this.query = { types:PRODUCT_SUPPLY' };
                this.types = 'PRODUCT_SUPPLY';
                this.getData();
            } else if (this.current === 1) {
                // this.query = { types: 'TECH_SUPPLY' };
                this.types = 'TECH_SUPPLY';
                this.getData();
            } else if (this.current === 2) {
                this.types = 'RES_SUPPLY';
                this.getData();
            }
        },
        // 需求信息
        getIndexNeed(index) {
            this.tableData = [];
            this.current = index;
            if (this.current === 0) {
                this.types = 'TECH_DEMAND';
                this.getData();
            } else if (this.current === 0) {
                this.types = 'TECH_DEMAND';
                this.getData();
            } else if (this.current === 1) {
                this.types = 'PRODUCT_DEMAND';
                this.getData();
            } else if (this.current === 2) {
                this.types = 'FINANCING_DEMAND';
                this.getData();
            }
        },
        toShow(n) {
            // if (this.current === 0) {
            //     this.query = { product: { id: n.id }, name: n.name };
            // } else if (this.current === 1) {
            //     this.query = { product: { id: n.id }, name: n.name };
            // } else if (this.current === 2) {
            //     this.query = { artProduct: { id: n.id }, name: n.name };
            // }
            // localStorage.setItem('releaseParams', JSON.stringify(this.query));
            // this.$router.push({ name: 'releaseDetails' });
            this.$router.push({ name: 'releaseDetails', query: { id: n.id } });
        },
        toNeedShow(n) {
            // if (this.current === 0) {
            //     this.query = { artNeed: { id: n.id }, name: n.name };
            // } else if (this.current === 0) {
            //     this.query = { artNeed: { id: n.id }, name: n.name };
            // } else if (this.current === 1) {
            //     this.query = { productNeed: { id: n.id }, name: n.name };
            // } else if (this.current === 2) {
            //     this.query = { financingNeeds: { id: n.id }, name: n.name };
            // }
            // localStorage.setItem('releaseParams', JSON.stringify(this.query));
            // this.$router.push({ name: 'releaseDetails' });
            this.$router.push({ name: 'releaseDetails', query: { id: n.id } });
        },
        changeTab() {
            if (this.tab == 0) {
                this.$router.push({ name: 'releaseSupply' });
            } else {
                this.$router.push({ name: 'releaseRequirement' });
            }
        },
        beforeGetData() {
            if (this.tab == 0) {
                if (this.current === 0) {
                    return { types: 'PRODUCT_SUPPLY' };
                } else {
                    return { types: this.types };
                }
            } else {
                if (this.current === 0) {
                    return { types: 'TECH_DEMAND' };
                } else {
                    return { types: this.types };
                }
            }
        }
    }
};
</script>
<style lang="less" scoped>
.content_title {
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-bottom: 20px;
    border-bottom: #f2f3f5 1px solid;
    .tab {
        cursor: pointer;
        padding-bottom: 20px;
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        font-weight: 700;
        margin-right: 40px;
        &.active {
            color: #bf1616;
            border-bottom: 1px solid #bf1616;
        }
    }
    button {
        width: 130px;
        height: 36px;
        background: #bf1616;
        border-radius: 4px;
        float: right;
        cursor: pointer;
        margin-top: 12px;
        display: flex;
        padding-left: 22px;
        align-items: center;
        img {
            width: 18px;
            height: 18px;
            margin-right: 6px;
        }
        span {
            color: #ffffff;
            font-size: 13px;
        }
    }
}
.classify {
    height: 60px;
    line-height: 60px;
    span {
        cursor: pointer;
        font-size: 13px;
        color: #818999;
        + span {
            margin-left: 30px;
        }
        &.active {
            color: #bf1616;
        }
    }
}
.card_list {
    // display: flex;
    // flex-wrap: wrap;
}
.card {
    + .card {
        margin-left: 15px;
    }
    &:nth-child(5n) {
        margin-left: 0;
    }
    width: 223px;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    float: left;

    .cover {
        width: 223px;
        height: 223px;
        ::v-deep .image-slot {
            width: 100%;
            height: 100%;
            background: #f5f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #909399;
            font-size: 14px;
            i {
                font-size: 30px;
            }
        }
    }
    h5 {
        width: 223px;
        height: 24px;
        font-size: 14px;
        color: #000000;
        line-height: 24px;
        margin: 10px 0 0;
        font-weight: 400;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    p {
        width: 223px;
        height: 22px;
        font-size: 12px;
        color: #939599;
        line-height: 22px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .btn {
        display: flex;
        text-align: center;
        font-size: 13px;
        margin-top: 15px;

        .edit {
            cursor: pointer;
            width: 56px;
            height: 26px;
            line-height: 26px;
            border-radius: 2px;
            border: 1px solid #c8c9cc;
            box-sizing: border-box;
            color: #626366;
            margin-right: 12px;
        }
        .under_review {
            cursor: pointer;
            width: 70px;
            height: 26px;
            line-height: 26px;
            border-radius: 2px;
            border: 1px solid #ffc432;
            box-sizing: border-box;
            color: #ffc432;
            margin-left: 12px;
        }
        .red {
            cursor: pointer;
            width: 89px;
            height: 26px;
            border-radius: 2px;
            border: 1px solid #bf1616;
            line-height: 26px;
            color: #bf1616;
            box-sizing: border-box;
        }
    }
}
.neens_div + .neens_div {
    margin-top: 20px;
}
.needs_card {
    display: flex;
    // + .needs_card {

    // }
    .cover {
        width: 100px;
        height: 100px;
        margin-right: 16px;
        ::v-deep .image-slot {
            width: 100%;
            height: 100%;
            background: #f5f7fa;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #909399;
            font-size: 14px;
            i {
                font-size: 30px;
            }
        }
    }
    .info {
        width: 600px;
        margin-right: 60px;
        .title {
            height: 24px;
            font-size: 14px;
            color: #000000;
            line-height: 24px;
        }
        p {
            height: 22px;
            font-size: 13px;
            color: #939599;
            line-height: 22px;
            margin: 8px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .time {
            font-size: 13px;

            color: #939599;
        }
    }
    .con_info {
        overflow: hidden;
        margin: 13px 0 10px;
        .con_info_item {
            float: left;
            font-size: 13px;
            margin-right: 40px;
            i {
                font-style: normal;
                color: #939599;
                margin-right: 4px;
            }
            span {
                color: #bf1616;
            }
        }
    }
    .btn {
        display: flex;
        text-align: center;
        align-items: center;
        font-size: 13px;
        cursor: pointer;
        .edit {
            width: 56px;
            height: 26px;
            line-height: 26px;
            border-radius: 2px;
            border: 1px solid #c8c9cc;
            box-sizing: border-box;
            color: #626366;
        }
        .under_review {
            cursor: pointer;
            width: 70px;
            height: 26px;
            line-height: 26px;
            border-radius: 2px;
            border: 1px solid #ffc432;
            box-sizing: border-box;
            color: #ffc432;
            margin-left: 12px;
        }
        .red {
            width: 89px;
            height: 26px;
            border-radius: 2px;
            border: 1px solid #bf1616;
            line-height: 26px;
            color: #bf1616;
            box-sizing: border-box;
            margin-right: 12px;
        }
    }
}
.el-pagination {
    text-align: center;
    margin-top: 40px;
}
</style>
