<template>
    <div class="crowdnum">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="cardtitle">
                    <div class="cardline"></div>
                    <div class="cardtext">{{ title }}</div>
                </div>
                <div class="cardBtn" @click="backlist">{{ '< 返回' }}</div>
            </div>
            <el-table :data="sactionData">
                <el-table-column label="序号" align="center" prop="user_id" />
                <el-table-column label="姓名" align="center" prop="nick_name" />
                <el-table-column label="手机号" align="center" prop="phonenumber" />
                <el-table-column label="申请时间" align="center" prop="create_time">
                    <template slot-scope="scope">
                        {{ scope.row.create_time && scope.row.create_time.slice(0, 10) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="260">
                    <template slot-scope="scope">
                        <el-button type="text" @click="jlDetail(scope.row)"> 查看简历 </el-button>
                        <el-button type="text" @click="downLj(scope.row)"> 下载简历 </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="total > 0" style="width: 100%; margin-top: 30px; text-align: center">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :page-size="queryParams.pageSize"
                    layout="total,  prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { jobHuntDetail, downloadPdf } from '@/api/job'
import { saveAs } from 'file-saver'
export default {
    data() {
        return {
            title: '',
            sactionData: [],
            total: 0,
            queryParams: {
                pageSize: 10,
                pageNum: 1,
            },
            rowUserID: null, // 查看用户id
        }
    },
    mounted() {
        this.title = this.$route.query.title || ''
        this.getList()
    },
    computed: {
        ...mapGetters(['userinform']),
    },

    methods: {
        getList() {
            jobHuntDetail(this.$route.query.id).then((res) => {
                this.sactionData = res.data.rows
                this.total = res.data.total
            })
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val
        },
        // 查看简历按钮
        jlDetail(row) {
            // this.$router.push('/ability/more/detail?id=' + row.user_id)
            this.$router.push('/console/jobuserDetail?id=' + row.user_id)
        },
        // 返回上一步
        backlist() {
            this.$router.push('/console/jobM')
        },
        downLj(row) {
            downloadPdf(row.user_id).then((res) => {
                const blob = new Blob([res])
                saveAs(blob, row.nick_name + '简历.pdf')
            })
        },
    },
}
</script>
<style scoped>
.crowdnum >>> .el-dialog {
    margin-top: 30vh !important;
    border-radius: 6px !important;
}
.dialogClass >>> .el-dialog__title {
    font-weight: bold;
    font-size: 20px;
    color: #000000;
}
.textdialog {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    text-align: center;
}
.dialogBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}
.dialogBtnL {
    width: 250px;
    height: 44px;
    background: linear-gradient(90deg, #5ea6fd, #1a81f9);
    border-radius: 22px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 44px;
    text-align: center;
    margin-right: 6px;
    cursor: pointer;
}
.dialogBtnR {
    width: 250px;
    height: 44px;
    border-radius: 22px;
    border: 1px solid #e0e0e0;
    font-weight: 500;
    font-size: 16px;
    color: #666666;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
}

.dialogClass >>> .el-dialog__header {
    padding: 20px;
    border: 1px solid rgba(135, 135, 135, 0.16);
}
.clearfix {
    display: flex;
    justify-content: space-between;
}
.cardtitle {
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 20px;
    color: #000000;
}
.cardline {
    width: 5px;
    height: 18px;
    background: #1578ed;
    border-radius: 3px;
    margin-right: 10px;
}
.cardBtn {
    font-weight: 500;
    font-size: 20px;
    color: #1c82f9;
    cursor: pointer;
}

.crowdnum >>> .el-table th {
    background-color: #f7f7f7;
    color: #666666;
    text-align: center;
}
.crowdnum >>> .el-table td {
    /* text-align:center; */
    background-color: #ffffff;
    height: 60px;
    color: #333333;
}
.crowdnum >>> .el-table--border th {
    border-right: #f7f7f7;
}
.crowdnum >>> .el-tooltip__popper {
    width: 33vw;
}
</style>
<style>
.el-tooltip__popper {
    width: 33vw;
}
</style>