<template>
    <div class="cloudUser">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="姓名" prop="name">
                <el-input
                    v-model="queryParams.name"
                    placeholder="请输入姓名"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="手机号" prop="phoneNumber">
                <el-input
                    v-model="queryParams.phoneNumber"
                    placeholder="请输入手机号"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="cloudUserList">
            <el-table-column label="用户编号" align="center" prop="userId" />
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="手机号" align="center" prop="phoneNumber" />
            <el-table-column label="技能" align="center" prop="testSkills" />
            <el-table-column label="毕业年份" align="center" prop="graduateTime">
                <template slot-scope="scope">
                    {{ scope.row.graduateTime && scope.row.graduateTime.slice(0, 10) }}
                </template>
            </el-table-column>
            <el-table-column label="显示状态" align="center" prop="status">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.status == 2">已上线</el-tag>
                    <el-tag type="danger" v-if="scope.row.status == 4">已隐藏</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="简历完整度" align="center" prop="integrity">
                <template slot-scope="scope">
                    {{ scope.row.integrity }}%
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="350px">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="cloudUserDetail(scope.row)"
                        >查看详情</el-button
                    >
                    <el-button size="mini" type="text" icon="el-icon-download" @click="downloadFn(scope.row)"
                        >下载简历</el-button
                    >
                    <el-button
                        v-if="scope.row.status == 2"
                        size="mini"
                        type="text"
                        icon="el-icon-turn-off"
                        @click="hideJl(scope.row)"
                        >隐藏简历</el-button
                    >
                    <el-button
                        v-if="scope.row.status == 4"
                        size="mini"
                        type="text"
                        icon="el-icon-turn-off"
                        @click="showJl(scope.row)"
                        >显示简历</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <!-- 简历弹层 -->
        <!-- 用户详情 -->
        <el-dialog title="详情" :visible.sync="cloudUserOpen" width="700px" append-to-body class="cloudi">
            <div class="sintitle">
                <div class="line"></div>
                个人信息
            </div>
            <div class="newfont">
                <div>姓名：{{ cloudUserOpenRow.name || '未填写' }}</div>
                <div>性别：{{ cloudUserOpenRow.sex || '未填写' }}</div>
                <div>手机号：{{ cloudUserOpenRow.phonenumber || '未填写' }}</div>
                <div>所在城市：{{ cloudUserOpenRow.city || '未填写' }}</div>
                <div>技能方向：{{ cloudUserOpenRow.testSkills || '未填写' }}</div>
                <div>个人优势：{{ cloudUserOpenRow.personalAdvantage || '未填写' }}</div>
            </div>
            <div class="sintitle">
                <div class="line"></div>
                工作经历
            </div>
            <div v-if="workList.length">
                <div class="newfont" v-for="it in workList" :key="it.caseId">
                    <div>公司名称：{{ it.name }}</div>
                    <div>在职时间：{{ it.startTime }} - {{ it.endTime }}</div>
                    <div>职位名称：{{ it.title }}</div>
                    <div>工作内容：{{ it.intro }}</div>
                </div>
            </div>
            <p v-else style="color: #333333; margin: 20px 30px; text-align: left">未填写</p>
            <div class="sintitle">
                <div class="line"></div>
                项目经历
            </div>
            <div v-if="proList.length">
                <div class="newfont" v-for="it in proList" :key="it.caseId">
                    <div>公司名称：{{ it.name }}</div>
                    <div>在职时间：{{ it.startTime }} - {{ it.endTime }}</div>
                    <div>担任角色：{{ it.title }}</div>
                    <div>应用技术：{{ it.applyTech }}</div>
                    <div>工作内容：{{ it.intro }}</div>
                </div>
            </div>
            <p v-else style="color: #333333; margin: 20px 30px; text-align: left">未填写</p>
            <div class="sintitle">
                <div class="line"></div>
                教育经历
            </div>
            <div v-if="eduList.length">
                <div class="newfont" v-for="it in eduList" :key="it.caseId">
                    <div>学校名称：{{ it.name }}</div>
                    <div>在校时间：{{ it.startTime }} - {{ it.endTime }}</div>
                    <div>学历：{{ it.education }}</div>
                    <div>专业：{{ it.major }}</div>
                </div>
            </div>
            <p v-else style="color: #333333; margin: 20px 30px; text-align: left">未填写</p>
            <div class="sintitle">
                <div class="line"></div>
                技能证书
            </div>
            <div v-if="bookList.length">
                <div class="newfont" v-for="it in bookList" :key="it.fileId">
                    <div>证书名称：{{ it.fileName }}</div>
                    <img :src="it.fileUrl" style="width: 360px; height: 150px" alt="" />
                </div>
            </div>
            <p v-else style="color: #333333; margin: 20px 30px; text-align: left">未填写</p>
        </el-dialog>
    </div>
</template>

<script>
import { downloadPdf, getUserJL } from '@/api/system/ApplicationReview'
import { getCloudList, showJLFN, hideJLFN } from '@/api/cloudUser'
import { saveAs } from 'file-saver'
export default {
    data() {
        return {
            loading: false,
            cloudUserList: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: null,
                phoneNumber: null,
            },
            companyApplyOpen: false,
            // 工作经历
            workList: [],
            // 项目经历
            proList: [],
            // 教育经历
            eduList: [],
            // 证书
            bookList: [],
            cloudUserOpenRow: {},
            cloudUserOpen: false,
            base: process.env.VUE_APP_BASE_TARGET,
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取列表
        getList() {
            this.loading = true
            getCloudList(this.queryParams)
                .then((res) => {
                    this.loading = false
                    this.total = res.total
                    this.cloudUserList = res.rows
                })
                .catch((error) => {
                    this.loading = false
                })
        },
        // 下载简历
        downloadFn(row) {
            downloadPdf(row.userId).then((res) => {
                const blob = new Blob([res])
                saveAs(blob, row.name + '简历.pdf')
            })
            // window.open(this.base + '/prod-api/personal/download/resume/' + row.userId)
        },
        // 云员工详情
        cloudUserDetail(row) {
            this.cloudUserOpenRow = {}
            this.workList = []
            this.proList = []
            this.eduList = []
            this.bookList = []
            getUserJL(row.userId).then((res) => {
                this.cloudUserOpenRow = res.personalInfo
                if (res.experience && res.experience.length) {
                    this.workList = res.experience.filter((it) => it.type == 1)
                    this.proList = res.experience.filter((it) => it.type == 0)
                    this.eduList = res.experience.filter((it) => it.type == 2)
                }
                if (res.credentials && res.credentials.length) {
                    this.bookList = res.credentials
                }
                this.cloudUserOpen = true
            })
        },

        detailFn() {},
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        // 显示简历
        showJl(row) {
            showJLFN(row.userId).then((res) => {
                this.$message.success('显示成功')
                this.getList()
            })
        },
        // 隐藏简历
        hideJl(row) {
            hideJLFN(row.userId).then((res) => {
                this.$message.success('隐藏成功')
                this.getList()
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.cloudUser {
    padding: 20px;
}
.addbtnbtn {
    margin: 10px 0 20px 0;
}
.cloudi >>> .el-dialog__body {
    max-height: 700px;
    overflow: auto;
    padding: 0 20px !important;
}
.sintitle {
    font-size: 16px;
    color: #000000;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.newfont {
    padding: 0 20px;
    box-sizing: border-box;
}
.newfont div {
    margin-bottom: 5px;
}
.line {
    width: 4px;
    height: 18px;
    background: #1890ff;
    margin-right: 5px;
    border-radius: 2px;
}
</style>