<template>
    <div class="rencaifuwu">
        <div class="topinfo">
            <div class="container topbox">
                <div class="topboxL">
                    <div class="topboxLT">
                        {{ jonInfo.title }}
                        <span>{{ jonInfo.emolument }}</span>
                    </div>
                    <div class="topboxLM">
                        <div class="topboxLMit">
                            <img src="/assets/ability/userd1.png" alt="" />
                            {{ jonInfo.city }}
                        </div>
                        <div class="topboxLMit">
                            <img src="/assets/ability/userd2.png" alt="" />
                            {{ jonInfo.experience }}
                        </div>
                        <div class="topboxLMit">
                            <img src="/assets/ability/userd3.png" alt="" />
                            {{ jonInfo.education }}
                        </div>
                        <div class="topboxLMit">
                            <img src="/assets/ability/userd4.png" alt="" />
                            招{{ jonInfo.personCount }}人
                        </div>
                        <div class="topboxLMit">
                            <img src="/assets/ability/userd5.png" alt="" />
                            {{ jonInfo.jobType == 1 ? '兼职' : '全职' }}
                        </div>
                    </div>
                    <div class="topboxLB" @click="sqJob">申请职位</div>
                </div>
                <div class="topboxR">
                    <div class="topboxRT">
                        <div class="topboxRTIT">五险一金</div>
                        <div class="topboxRTIT">加班补助</div>
                        <div class="topboxRTIT">餐补</div>
                        <div class="topboxRTIT">带薪年假</div>
                    </div>
                    <div class="topboxRB">{{ jonInfo.company }}</div>
                </div>
            </div>
        </div>
        <div class="content container">
            <div class="contentTitle">职位描述</div>
            <div class="contentCon" v-html="jonInfo.jobDesc"></div>
            <div class="contentTitle">工作地点</div>
            <div class="contentCon">{{ jonInfo.city }}</div>
            <div class="contentTitle">入职企业</div>
            <div class="contentCon">{{ jonInfo.company }}</div>
            <!-- <div class="skill">
                <div class="skillit">C++test</div>
                <div class="skillit">Testbed</div>
                <div class="skillit">loadrunner</div>
                <div class="skillit">jmeter</div>
                <div class="skillit">C++</div>
            </div> -->
            <!-- <div class="contentCon">
                岗位要求： <br />
                1.本科及以上学历，计算机相关专业毕业； <br />2.对测试工作有兴趣，能够接受出差。
            </div>
            <div class="contentCon">
                岗位技能： <br />
                1.掌握软件测试技能、具备用例编写能力； <br />
                2.熟练掌握C、C++语言，有白盒测试经验，有单元测试经验者优先；（非常重要条件） <br />
                3.具有嵌入式培训、工作经历及相关行业测试经验者优先； <br />
                4.熟悉C++test、Testbed、loadrunner、jmeter等测试工具，或具有第三方测评经验者优先录用。
            </div>
            <div class="contentCon">
                岗位职责：<br />
                1.负责嵌入式软件的单元测试、集成测试、配置项测试和系统测试，完成测试计划，测试用例编写问题单提交，测试报告编写；<br />
                2.负责通用软件文档审查、功能测试、性能测试、兼容性、易用性、可靠性、信息安全性、维护性、可移植性测试，完成测试文档和测试报告编写；<br />
                3.完成内部测试和第三方软件测评。
            </div>
             -->
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getJobById, shenqingJob } from '@/api/ability'
export default {
    data() {
        return {
            jonInfo: {},
        }
    },
    mounted() {},
    beforeDestroy() {},
    computed: {
        ...mapGetters(['userId', 'token']),
    },
    created() {
        this.getDetail()
    },
    methods: {
        getDetail() {
            getJobById(this.$route.query.id).then((res) => {
                this.jonInfo = res.data
            })
        },
        sqJob() {
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.$router.push('/login?type=log')
                })
            } else {
                shenqingJob(this.jonInfo.jobId, {userId: this.userId}).then(res => {
                    this.$message.success('职位申请成功')
                })
            }
        },
    },
}
</script>

<style scoped>
.rencaifuwu {
    background: #f2f3f7;
    padding-bottom: 40px;
}
.container {
    width: 1200px;
    margin: auto;
}
.topinfo {
    width: 100%;
    height: 230px;
    background: #203e65;
    margin-bottom: 18px;
}
.content {
    background: #ffffff;
    border-radius: 8px;
    padding: 40px;
    box-sizing: border-box;
}
.contentTitle {
    font-weight: bold;
    font-size: 18px;
    color: #1a1a1a;
    margin: 20px 0;
}
.contentCon {
    font-weight: 500;
    font-size: 16px;
    color: #595959;
    margin-bottom: 20px;
    line-height: 30px;
}
.skill {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.skillit {
    height: 30px;
    background: #f2f3f7;
    border-radius: 3px;
    padding: 0 15px;
    box-sizing: border-box;
    line-height: 30px;
    margin-right: 11px;
}

.topbox {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topboxR {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.topboxRT {
    display: flex;
    align-items: center;
}
.topboxRTIT {
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: rgba(140, 158, 177, 0.3);
    border-radius: 3px;
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
    margin-left: 11px;
}
.topboxRB {
    font-weight: 500;
    font-size: 15px;
    color: #c1cedc;
    margin-top: 80px;
}
.topboxLB {
    width: 140px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #1778f7;
    border-radius: 6px;
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
    cursor: pointer;
}
.topboxLT {
    font-weight: bold;
    font-size: 30px;
    color: #ffffff;
    display: flex;
    align-items: center;
}
.topboxLT span {
    font-weight: bold;
    font-size: 32px;
    color: #fca362;
    margin-left: 50px;
}
.topboxLM {
    display: flex;
    align-items: center;
    margin: 25px 0;
}
.topboxLMit {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
    margin-right: 25px;
}
.topboxLMit img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}
</style>