<template>
    <div class="userAbility">
        <img class="banner" src="/assets/ability/applybanner.png" />
        <div class="searchBox container">
            <el-input v-model="queryParams.keyword" clearable placeholder="请输入关键字，如：测试工程师"></el-input>
            <div class="searchbtn" @click="searchFn">搜索</div>
        </div>
        <div class="contentBox container">
            <div class="jianliboxitem" v-for="it in peopleList" :key="it.url">
                <div class="jlboxtop">
                    <img class="jlboxtopimg" :src="it.avatar" alt="" />
                    <div class="jlboxtoptit">{{ it.name }}</div>
                    <div class="jlboxtopzc">{{ it.testSkills }}</div>
                    <div class="jlboxtopcon">{{ it.personalAdvantage }}</div>
                </div>
                <div class="jlboxbottom">
                    <div class="jlboxbottoml jlboxbottomlbor">
                        <img class="jlboxbottomlimg" src="/assets/ability/daxue.png" alt="" />
                        <span class="textaaa" :title="it.college">{{ it.college }}</span>
                    </div>
                    <div class="jlboxbottoml">
                        <img class="jlboxbottomlimg" src="/assets/ability/zhuanye.png" alt="" />
                        <span class="textaaa" :title="it.major">{{ it.major }}</span>
                    </div>
                </div>
                <div class="addressBox">
                    <img src="/assets/ability/posion.png" alt="" />
                    {{ it.city && it.city.split('-')[1] }}
                </div>
            </div>
        </div>
        <div class="pavan container">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParams.pageNum"
                :page-sizes="[12, 20, 32, 40]"
                :page-size="queryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getCloudList } from '@/api/ability'
export default {
    data() {
        return {
            peopleList: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 12,
                keyword: '',
            },
            base: process.env.VUE_APP_BASE_API
        }
    },
    mounted() {},
    created() {
        this.getList()
    },

    computed: {
        ...mapGetters(['userinform', 'token']),
    },
    methods: {
        getList() {
            getCloudList(this.queryParams).then((res) => {
                this.total = res.total
                this.peopleList = res.rows
                this.peopleList.forEach(it => {
                    if (it.avatar.indexOf('/prod-api') == -1) {
                        it.avatar = this.base + it.avatar
                    }
                })
            })
        },
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val
            this.getList()
        },
        searchFn() {
            this.getList()
        },
    },
}
</script>

<style scoped>
.container {
    width: 1200px;
    margin: auto;
}
.searchBox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -28px;
    margin-bottom: 50px;
}
.pavan {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
    margin-top: 35px;
}
.searchbtn {
    width: 100px;
    height: 45px;
    background: #0066eb;
    border-radius: 0px 4px 4px 0px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 45px;
    text-align: center;
}
.el-input {
    width: 648px;
    height: 45px;
}
.searchBox >>> .el-input__inner {
    height: 45px;
    background: #ffffff;
    border-radius: 4px 0px 0px 4px;
    border: 1px solid #e6e7eb;
}
.contentBox {
    display: grid;
    grid-template-columns: 280px 280px 280px 280px;
    justify-content: space-between;
}
.jianliboxitem {
    width: 280px;
    height: 300px;
    background: #ffffff;
    box-shadow: 0px 4px 34px 6px rgba(14, 97, 205, 0.1);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.1s linear;
    margin-bottom: 25px;
    position: relative;
}
.addressBox {
    position: absolute;
    top: 20px;
    right: 20px;
    font-weight: 500;
    font-size: 13px;
    color: #999999;
    display: flex;
    align-items: center;
}
.addressBox img {
    width: 13px;
    height: 13px;
    margin-right: 5px;
}
.jianliboxitem:hover {
    transform: translateY(-15px);
}
.jlboxtop {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.jlboxtopimg {
    width: 88px;
    height: 88px;
    border-radius: 50%;
}
.jlboxtoptit {
    font-weight: bold;
    font-size: 20px;
    color: #000000;
    margin: 15px 0;
}
.jlboxtopzc {
    width: 90%;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    text-align: center;
}
.jlboxtopcon {
    margin-top: 15px;
    width: 85%;
    font-weight: 500;
    font-size: 14px;
    color: #808080;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}
.jlboxbottom {
    width: 100%;
    height: 47px;
    border-top: 1px solid #ebebeb;
    display: flex;
    align-items: center;
}
.jlboxbottoml {
    height: 16px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 15px;
    color: #737373;
}
.textaaa {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jlboxbottomlbor {
    box-sizing: border-box;
    border-right: 1px solid #e6e6e6;
}
.jlboxbottomlimg {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}
</style>