<template>
    <div class="interactive">
        <el-row>
            <div class="content_title">
                <span>我的互动消息</span>
            </div>
        </el-row>
        <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 v-if="this.current === 0">
            <div v-for="n in tableData" :key="n.id">
                <div
                    class="box"
                    @click="$router.push({ name: 'interactDetail', query: { id: n.id, type: 'OFFICIAL' } })"
                >
                    <div class="info">
                        <i></i><span>{{ n.title }}</span>
                    </div>
                    <div class="num">{{ (n.commentNum = 0 ? '未回复' : '已回复') }}</div>
                    <div class="time">{{ n.createdAt }}</div>
                </div>
            </div>
        </el-row>
        <el-row v-if="this.current === 1">
            <div v-for="n in tableData" :key="n.id">
                <div class="box" @click="$router.push({ name: 'interactDetail2', query: { id: n.id, type: 'TOPIC' } })">
                    <div class="info">
                        <i></i><span>{{ n.title }}</span>
                    </div>
                    <div class="num">
                        回复 <span>{{ n.commentNum }}</span>
                    </div>
                    <div class="time">{{ n.createdAt }}</div>
                </div>
            </div>
        </el-row>
        <el-row v-if="this.current === 2">
            <div v-for="n in tableData" :key="n.id">
                <div
                    class="box"
                    v-if="n.type === 'QA'"
                    @click="$router.push({ name: 'interactDetail2', query: { id: n.id, type: 'QA' } })"
                >
                    <div class="info">
                        <i></i><span>{{ n.title }}</span>
                    </div>
                    <div class="num">
                        回复 <span>{{ n.commentNum }}</span>
                    </div>
                    <div class="time">{{ n.createdAt }}</div>
                </div>
            </div>
        </el-row>

        <!-- <el-row v-if="this.current === 3">
            <div
                class="box"
                v-for="n in replylist"
                :key="n.id"
                @click="$router.push({ name: 'interactDetail2', query: { id: n.id } })"
            >
                <div class="info">
                    <i></i><span>{{ n.title }}</span>
                </div>
                <div class="num">
                    回复 <span>{{ n.commentList ? n.commentList.length : 0 }}</span>
                </div>
                <div class="time">{{ n.createdAt }}</div>
            </div>
        </el-row> -->
    </div>
</template>

<script>
import pageableTable from '@/mixins/pageableTable';
export default {
    mixins: [pageableTable],
    name: 'interactive',
    data() {
        return {
            url: '/post/allDTO',
            // List: ['我的咨询', '我的话题', '我的问题', '我的回复'],
            List: ['我的咨询', '我的话题', '我的问题'],
            current: 0,
            // search: '',
            query: { type: 'OFFICIAL' }
        };
    },
    created() {
        this.$http.get('/post/pcPostDTO').then(res => {
            this.replylist = res.content;
            console.log(res);
        });
    },
    methods: {
        beforeGetData() {
            if (this.query) {
                // if (this.current === 1) {
                //     // this.query = 'TOPIC';
                //     this.query = {
                //         type: 'TOPIC'
                //     };
                // }
                return { query: this.query };
            }
        },
        getIndex(index) {
            this.current = index;
            if (this.current === 0) {
                this.query = { type: 'OFFICIAL' };
                this.getData();
            } else if (this.current === 1) {
                this.query = { type: 'TOPIC' };
                this.getData();
            } else if (this.current === 2) {
                this.query = { type: 'QA' };
                this.getData();
            }
            //else if (this.current === 3) {
            //     this.url = 'topic/myAll';
            //     this.getData();
            // }
        }
    }
};
</script>
<style lang="less" scoped>
.content_title {
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-bottom: 20px;
    border-bottom: #f2f3f5 1px solid;
    > span {
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        font-weight: 700;
    }
}
.classify {
    height: 60px;
    line-height: 60px;
    span {
        cursor: pointer;
        font-size: 13px;
        color: #818999;
        + span {
            margin-left: 30px;
        }
        &.active {
            color: #bf1616;
        }
    }
}
.box {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    height: 24px;
    padding: 10px 0px;
    .info {
        display: flex;
        align-items: center;

        width: 500px;
        font-size: 14px;
        color: #000000;
        span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        i {
            display: block;
            width: 4px;
            height: 4px;
            background-color: #e3e4e6;
            border-radius: 50%;
            margin-right: 6px;
        }
    }
    .num {
        font-size: 14px;
        color: #c8c9cc;
        // margin: 0 88px 0 177px;
    }
    .time {
        font-size: 14px;
        color: #939599;
    }
    &:hover .info {
        color: #bf1616;
    }
}
</style>
