<template>
    <div class="myCollection">
        <el-row>
            <div class="content_title">
                <span>我的收藏列表</span>
                <span class="edit" @click="isEdit = true" v-if="!isEdit">编辑</span>
                <span class="del" @click="delList" v-else>删除</span>
            </div>
        </el-row>
        <el-row>
            <span class="tab" :class="{ active: tab === 0 }" @click="(tab = 0), getData()">需求信息</span>
            <span class="tab" :class="{ active: tab === 1 }" @click="(tab = 1), getData()">供应信息</span>
        </el-row>
        <el-row v-if="tab === 0">
            <div class="con_main" v-for="item in tableData" :key="item.id">
                <ul>
                    <!-- 技术需求 -->
                    <div>
                        <li :class="{ active: checked === true }" v-if="item.type == 'TECH_DEMAND'">
                            <el-checkbox v-if="isEdit === true" @change="addId(item.id)" :key="item.id"></el-checkbox>
                            <img :src="item.images" />
                            <div
                                class="con_main_right"
                                @click="
                                    $router.push({
                                        name: 'resourceDetail',
                                        query: { id: item.id, type: 'TECH_DEMAND' }
                                    })
                                "
                            >
                                <div class="con_main_tit">
                                    <!-- <i :class="item.artNeed.state === 1 ? 'wait' : ''">{{
                                        item.artNeed.state === 1 ? '等待对接' : '正在对接'
                                    }}</i> -->
                                    <i class="wait" v-if="list.conversationStatus === 'AWAIT'"> 等待对接 </i>
                                    <i v-if="list.conversationStatus === 'CONDUCTED'"> 正在对接</i>
                                    <span>{{ item.name }}</span>
                                </div>
                                <p>
                                    {{ item.description }}
                                </p>
                                <span class="con_time">{{ item.resSnDPropertyList[0].createdAt }}</span>
                            </div>
                        </li>
                        <!-- 产品需求 -->
                        <li :class="{ active: checked === true }" v-else-if="item.type == 'PRODUCT_DEMAND'">
                            <el-checkbox v-if="isEdit === true" @change="addId(item.id)"></el-checkbox>
                            <img :src="item.images" />

                            <div
                                class="con_main_right"
                                @click="
                                    $router.push({
                                        name: 'resourceDetail',
                                        query: { id: item.id, type: 'PRODUCT_DEMAND' }
                                    })
                                "
                            >
                                <div class="con_main_tit">
                                    <!-- <i>{{ item.productNeed.state }}</i
                                    ><span>{{ item.productNeed.name }}</span> -->
                                    <!-- <i :class="item.productNeed.state === 1 ? 'wait' : ''">{{
                                        item.productNeed.state === 1 ? '等待对接' : '正在对接'
                                    }}</i> -->
                                    <i class="wait" v-if="list.conversationStatus === 'AWAIT'"> 等待对接 </i>
                                    <i v-if="list.conversationStatus === 'CONDUCTED'"> 正在对接</i>
                                    <span>{{ item.name }}</span>
                                </div>
                                <p>{{ item.description }}</p>
                                <span class="con_time">{{ item.resSnDPropertyList[0].createdAt }}</span>
                            </div>
                        </li>
                        <!-- 融资需求 -->
                        <li :class="{ active: checked === true }" v-else-if="item.type == 'FINANCING_DEMAND'">
                            <el-checkbox v-if="isEdit === true" @change="addId(item.id)"></el-checkbox>
                            <img :src="item.images" />
                            <div
                                class="con_main_right"
                                @click="
                                    $router.push({
                                        name: 'resourceFanceDetail',
                                        query: { id: item.id, type: 'FINANCING_DEMAND' }
                                    })
                                "
                            >
                                <div class="con_main_tit">
                                    <i class="wait" v-if="list.conversationStatus === 'AWAIT'"> 等待对接 </i>
                                    <i v-if="list.conversationStatus === 'CONDUCTED'"> 正在对接</i>
                                    <span>{{ item.name }}</span>
                                </div>
                                <div class="con_info">
                                    <div class="con_info_item">
                                        <i>计划融资</i><span>{{ item.resSnDPropertyList[0].value }}</span>
                                    </div>
                                    <div class="con_info_item">
                                        <i>融资阶段</i><span>{{ item.resSnDPropertyList[1].value }}</span>
                                    </div>
                                    <div class="con_info_item">
                                        <i>行业类型</i><span>{{ item.resSnDPropertyList[2].value }}</span>
                                    </div>
                                </div>
                                <span class="con_time">{{ item.resSnDPropertyList[0].createdAt }}</span>
                            </div>
                        </li>
                    </div>
                </ul>
            </div>
        </el-row>
        <el-row v-else>
            <div class="con_main ">
                <ul class="con_card_ul" v-for="item in tableData" :key="item.id">
                    <li class="con_card " :class="{ active: checked === true }" v-if="item.type == 'RES_SUPPLY'">
                        <div
                            @click="
                                $router.push({
                                    name: 'resourceRelease',
                                    query: { id: item.id, type: 'RES_SUPPLY' }
                                })
                            "
                        >
                            <img :src="item.images[0]" />
                            <h5>{{ item.name }}</h5>
                            <p>{{ item.description }}</p>
                        </div>
                        <el-checkbox v-if="isEdit === true" @change="addId(item.id)"></el-checkbox>
                    </li>

                    <li
                        class="con_card "
                        :class="{ active: checked === true }"
                        v-else-if="item.type == 'PRODUCT_SUPPLY'"
                    >
                        <div
                            @click="
                                $router.push({
                                    name: 'resourceRelease',
                                    query: { id: item.id, type: 'PRODUCT_SUPPLY' }
                                })
                            "
                        >
                            <img :src="item.images[0]" />
                            <h5>{{ item.name }}</h5>
                            <p>{{ item.description }}</p>
                        </div>

                        <el-checkbox v-if="isEdit === true" @change="addId(item.id)"></el-checkbox>
                    </li>

                    <li class="con_card " :class="{ active: checked === true }" v-else-if="item.type == 'TECH_SUPPLY'">
                        <div
                            @click="
                                $router.push({
                                    name: 'resourceRelease',
                                    query: { id: item.id, type: 'TECH_SUPPLY' }
                                })
                            "
                        >
                            <img :src="item.images[0]" />
                            <h5>{{ item.name }}</h5>
                            <p>{{ item.description }}</p>
                        </div>
                        <el-checkbox v-if="isEdit === true" @change="addId(item.id)"></el-checkbox>
                    </li>
                </ul>
            </div>
        </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>
</template>

<script>
import pageableTable from '@/mixins/pageableTable';
export default {
    mixins: [pageableTable],
    name: 'myCollection',
    data() {
        return {
            // url: '/collect/getNeedAll',
            url: '/resourceSupplyAndDemand/myCollect',
            isEdit: false,
            tab: 0,
            currentPage: 1,
            checked: [],
            list: {},
            techList: {}
        };
    },
    created() {
        // this.$http.get('/resourceSupplyAndDemand/myCollect').then(res => {
        //     console.log(res);
        // });
    },
    methods: {
        addId(value) {
            if (this.checked.indexOf(value) === -1) {
                this.checked.push(value);
            } else {
                this.checked.splice(this.checked.indexOf(value), 1);
            }
            console.log(this.checked);
        },
        delList() {
            let ids = this.checked;
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
                .then(() => {
                    return this.$axios.post('/collect/remove', JSON.stringify(ids), {
                        headers: {
                            'Content-Type': 'application/json;charset=UTF-8'
                        }
                    });
                })
                .then(() => {
                    this.$message.success('删除成功');
                    this.getData();
                })
                .catch(e => {
                    if (e !== 'cancel') {
                        this.$message.error(e.error);
                    }
                });
            this.isEdit = false;
        }
    }
};
</script>
<style lang="less" scoped>
.content_title {
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-bottom: 20px;
    border-bottom: #f2f3f5 1px solid;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    > span {
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        font-weight: 700;
    }
    .edit {
        font-size: 14px;
        font-weight: normal;
        color: #939599;
        cursor: pointer;
    }
    .del {
        font-size: 14px;
        font-weight: normal;
        color: #bf1616;
        cursor: pointer;
    }
}
.tab {
    cursor: pointer;
    font-size: 13px;
    color: #818999;
    height: 60px;
    line-height: 60px;
    + .tab {
        margin-left: 30px;
    }
    &.active {
        color: #bf1616;
    }
}
.con_main {
    margin-bottom: 40px;
    li {
        overflow: hidden;
        cursor: pointer;
        &.active .con_main_right {
            background-color: #f5f7fa;
        }
    }
    li + li {
        margin-top: 20px;
    }
    .el-checkbox {
        float: left;
        margin-top: 40px;
        margin-right: 20px;
    }

    img {
        width: 100px;
        height: 100px;
        float: left;
    }
    .con_main_right {
        float: left;
        width: 800px;
        padding-left: 16px;
        box-sizing: border-box;
        height: 100px;
        .con_main_tit {
            margin-top: 3px;
            i {
                font-style: normal;
                font-size: 12px;
                color: #22b197;
                background: #ebf9f7;
                padding: 5px 3px;
                margin-right: 6px;
            }
            .wait {
                background-color: #ffebe8;
                color: #ff4a33;
            }
            span {
                font-size: 14px;
                color: #000;
            }
        }
        p {
            font-size: 13px;
            line-height: 22px;
            color: #939599;
            margin: 10px 0 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .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;
                }
            }
        }
        .con_time {
            color: #939599;
            font-size: 13px;
        }
    }
    // .con_card_ul {
    //     overflow: hidden;
    // }

    .con_card {
        display: flex;
        flex-direction: column;
        width: 223px;
        float: left;
        margin: 0 15px 20px 0;
        &.active {
            background-color: #f5f7fa;
        }
        div {
            img {
                width: 223px;
                height: 223px;
                margin-bottom: 10px;
            }
            h5 {
                width: 100%;
                font-size: 14px;
                color: #000;
                margin: 10px 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            p {
                font-size: 12px;
                color: #939599;
                margin: 0;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .el-checkbox {
            margin: 10px auto;
        }
    }
    .con_card:nth-child(4n) {
        margin-right: 0;
    }
}
.el-pagination {
    text-align: center;
    margin-top: 40px;
}
</style>
