<template>
    <div class="manage">
        <div class="breadcrumb">
            <span style="display:inline-block">当前位置：</span>
            <el-breadcrumb separator="/" style="display: inline-block;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><span style="color:#EA2D2D">管理</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-row :gutter="20">
            <el-col :span="5">
                <div class="left-menu">
                    <div class="tabs">
                        <div class="tab" :class="{ active: tab === 0 }" @click="tab = 0">技术需求</div>
                        <div class="tab" :class="{ active: tab === 1 }" @click="tab = 1">技术产品</div>
                        <div class="tab" :class="{ active: tab === 2 }" @click="tab = 2">共享资源</div>
                        <div class="tab" :class="{ active: tab === 3 }" @click="tab = 3">我收到的留言</div>
                        <div class="tab" :class="{ active: tab === 4 }" @click="tab = 4">我提交的留言</div>
                    </div>
                </div>
            </el-col>
            <el-col :span="19">
                <div class="right-list">
                    <div class="filters">
                        <el-button type="primary" style="float:left" @click="$router.push({ name: 'artNeed' })">
                            新增
                        </el-button>
                        <el-input icon="el-icon-search" v-model="search" placeholder="关键字搜索…" style="width:200px">
                            <i slot="prefix" class="el-input__icon el-icon-search"> </i>
                        </el-input>
                        <el-select
                            v-model="applicationField"
                            placeholder="筛选应用领域"
                            style="margin-left:10px"
                        ></el-select>
                        <el-button icon="el-icon-search" style="margin-left:10px" type="primary"></el-button>
                    </div>
                    <el-table :data="tableData" height="500px">
                        <el-table-column type="index" label="序号"></el-table-column>
                        <el-table-column label="关键字" prop="keyword"></el-table-column>
                        <el-table-column label="需求名称" prop="name"></el-table-column>
                        <el-table-column label="发布单位" prop="orgName"></el-table-column>
                        <el-table-column label="联系人" prop="contactName" width="80"></el-table-column>
                        <el-table-column
                            label="报送时间"
                            prop="createdAt"
                            width="150"
                            :formatter="fmtConvert('yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd HH:mm')"
                        ></el-table-column>
                        <el-table-column label="状态" prop="state" width="80">
                            <template slot-scope="scope">
                                <span v-if="(scope.row.state = 0)">正在对接</span>
                                <span v-if="(scope.row.state = 1)">无对接</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" width="80">
                            <template>
                                <el-button type="primary" plain size="mini">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'manage',
    data() {
        return {
            tab: 0,
            search: '',
            applicationField: null,
            page: 1,
            size: 20,
            total: 0,
            tableData: []
        };
    },
    created() {
        this.getRequirements();
    },
    methods: {
        getRequirements() {
            this.$http
                .get('/artNeed/all', {
                    query: {
                        userId: this.userInfo.id
                    },
                    page: this.page - 1,
                    size: this.size
                })
                .then(res => {
                    this.tableData = res.content;
                    this.total = res.totalElements;
                });
        }
    }
};
</script>
<style lang="less" scoped>
.filters {
    padding: 20px 0;
    text-align: right;
}
</style>
