<template>
    <div class="container">
        <div class="tab">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="供给信息" name="first"></el-tab-pane>
                <el-tab-pane label="需求信息" name="second"></el-tab-pane>
            </el-tabs>
            <el-button v-if="Flag == 0" type="primary" class="more" icon="el-icon-plus" @click="release"
                >发布供给</el-button
            >
            <el-button v-else type="primary" class="more" icon="el-icon-plus" @click="PatentDemand">需求供给</el-button>
        </div>
        <div class="box-tab">
            <div
                class="tab-item"
                :class="{ active: item === active }"
                v-for="(item, index) in tabs"
                :key="index"
                @click="chageFn(item)"
            >
                {{ item }}
            </div>
        </div>
        <div class="box" v-if="Flag == 0">
            <div class="news-img" v-for="(item, index) in newsList" :key="index">
                <div>
                    <el-avatar shape="square" :size="223" :src="item.img"></el-avatar>
                    <p>{{ item.name }}</p>
                    <div class="val">{{ item.digest }}</div>
                    <div class="btn" @click="edit(item.id)">编辑</div>
                </div>
            </div>
        </div>
        <div v-else>
            <div class="box" v-for="(item, index) in list" :key="index + 1">
                <div>
                    <p>{{ item.name }}</p>
                    <div class="con">
                        <div class="con-all">
                            <div class="all">行业领域 {{ item.industryClass }}</div>
                            <div class="all">转化类型 {{ item.mode }}</div>
                            <div class="all">限价 {{ item.expectedPrice }}</div>
                            <div class="all">发布时间 {{ item.createdAt }}</div>
                        </div>
                        <div class="on" @click="DemandEdit">编辑</div>
                        <div class="edit">删除</div>
                    </div>
                    <div class="text1">{{ item.description }}</div>
                </div>
            </div>
        </div>
        <div class="block">
            <span class="demonstration">完整功能</span>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[8, 16, 32, 64]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="8"
            >
            </el-pagination>
        </div>
        <patent-add ref="public"></patent-add>
        <patent-demand-add ref="publicdemand"></patent-demand-add>
    </div>
</template>

<script>
import PatentAdd from '../../components/popup/PatentAdd.vue';
import PatentDemandAdd from '../../components/popup/PatentDemandAdd.vue';
import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState(['userInfo'])
    },
    components: { PatentAdd, PatentDemandAdd },
    data() {
        return {
            activeName: 'first',
            active: '全部供给',
            tabs: ['全部供给', '脱密专利', '普通专利', '商标', '版权', '软著', '技术', '产品'],
            newsList: [],
            list: [],
            Flag: 0,
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4
        };
    },
    methods: {
        chageFn(item) {
            this.active = item;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        handleClick(e) {
            this.Flag = e.index;
        },
        release() {
            this.$router.push('/Release');
        },
        PatentDemand() {
            this.$router.push('/demandPatent');
        },
        edit(id) {
            console.log(id);
            this.$refs.public.init(id);
        },
        DemandEdit() {
            this.$refs.publicdemand.init();
        }
    },
    created() {
        let userId = this.userInfo.id;
        let query = { del: false, ...this.$route.query, caseType: 'DECLASSIFICATION', field: 13, userId: userId };
        delete query.sort;
        delete query.page;
        delete query.size;
        let data = {
            page: 0,
            size: 10,
            sort: 'createdAt,desc',
            query: query
        };
        this.$http
            .post('/patent/all', data, { body: 'json' })
            .then(res => {
                console.log(res);
                this.newsList = res.content;
                console.log(this.newsList);
            })
            .catch(e => {
                console.log(e);
                this.saving = false;
                this.$message.error(e.error);
            });
        this.$http
            .post('/patentDemand/all', data, { body: 'json' })
            .then(res => {
                console.log(res);
                this.list = res.content;
            })
            .catch(e => {
                console.log(e);
                this.saving = false;
                this.$message.error(e.error);
            });
    }
};
</script>

<style lang="less" scoped>
.container {
    // display: flex;
    margin: 17px 20px 0;
    .tab {
        position: relative;
        /deep/.el-tabs__nav-wrap {
            &::after {
                height: 1px;
                background-color: @bg;
            }
            .el-tabs__active-bar {
                height: 1px;
            }
            .el-tabs__item {
                font-size: 16px;
            }
        }
        /deep/.el-tabs__header {
            margin: 0 0 0;
        }
        .more {
            position: absolute;
            right: 16px;
            top: -6px;
            z-index: 20;
        }
    }
    .box {
        display: flex;
        margin-top: 35px;
        border-bottom: 1px solid @bg;
        border-top: 1px solid @bg;
        p {
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            margin: 14px 0 10px;
        }
        .con {
            .flex();
            .con-all {
                .flex();
                width: 756px;
                flex-wrap: wrap;
                .all {
                    font-size: 13px;
                    font-weight: 400;
                    color: #939599;
                    line-height: 22px;
                    margin-right: 40px;
                }
            }
            .on {
                width: 89px;
                border-radius: 2px;
                border: 1px solid #ff8700;
                color: #ff8700;
                font-size: 13px;
                line-height: 26px;
                text-align: center;
                margin-right: 12px;
            }
            .edit {
                width: 56px;
                text-align: center;
                border-radius: 2px;
                font-size: 13px;
                color: #626366;
                line-height: 26px;
                border: 1px solid #c8c9cc;
            }
        }
        .text1 {
            font-size: 14px;
            font-weight: 400;
            color: #939599;
            line-height: 20px;
            margin-top: 14px;
        }
    }
}
/deep/ .el-tabs__item {
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
}
/deep/ .el-avatar {
    margin: 10px 15px 10px 0;
}
/deep/ .el-pagination {
    margin-top: 50px;
    text-align: center;
}
/deep/ .el-button {
    width: 130px;
    border-radius: 4px;
}

.news-img {
    // float: left;
    width: 223px;
    margin: 30px 16px 0 0;
    &:nth-child(4n) {
        margin-right: 0 !important;
    }

    p {
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        line-height: 20px;
        margin-bottom: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; /* for IE */
    }
    .val {
        width: 223px;
        font-size: 12px;
        font-weight: 400;
        color: #939599;
        line-height: 22px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis; /* for IE */
    }
    .btn {
        width: 56px;
        height: 26px;
        border-radius: 2px;
        color: #626366;
        font-size: 13px;
        text-align: center;
        line-height: 26px;
        border: 1px solid #c8c9cc;
        margin-top: 15px;
    }
}
.demonstration {
    opacity: 0;
}
.box-tab {
    .flex();
    .tab-item {
        font-size: 13px;
        font-weight: 400;
        color: #818999;
        line-height: 18px;
        padding: 18px 21px 0 0;
        cursor: pointer;
        &.active {
            color: #ff8700;
        }
    }
}
</style>
