{extend name="public/base"/}
{block name="css"}
<style>
    .base-content .header {background-image:url("__MIMAGES__/detail_header.jpg");background-repeat:no-repeat;background-size:100% 70px;width:100%;height:70px;display:flex;align-items:center;justify-content:center;padding:0 20px;}
    .base-content .header .left {flex:1;display:flex;flex-direction:column;}
    .base-content .header .salary-box {line-height:24px;height:24px;flex:1;}
    .base-content .header .salary-box .salary {color:white;font-size:24px;font-weight:bold;}
    .base-content .header .salary-box .text {color:white;font-size:14px;margin-left:5px;}
    .base-content .header .company-name {color:white;font-size:14px;}
    .base-content .header .phone-box {display:flex;flex-direction:column;}
    .base-content .header .phone-box .text{color:white;}
    .base-content .title {background:white;padding:10px 20px;color:#000;font-size:18px;}
    .base-content .tags {background:white;padding:0 20px 10px 20px;}
    .base-content .tags .van-tag {margin-right:5px;}
    .base-content .introduce {background:white;}
    .base-content .introduce .introduce-item {border-top:1px solid #f0f0f0;padding:5px 20px;display:flex;align-items:center;}
    .base-content .introduce .introduce-item .van-image{margin-right:5px;}
    .base-content .introduce .introduce-item .split{margin:0 15px;}
    .describe {margin-top:10px;background:white;}
    .describe .header {padding:10px 20px;font-size:16px;border-bottom:1px solid #f0f0f0;}
    .describe .content {padding:10px 20px;}
    .describe .content pre {font-size: 14px;line-height: 20px;padding: 0;margin: 0;font-family: "Microsoft Yahei",arial,"Hiragino Sans GB","Hiragino Sans GB W3",宋体,simsun;}
    .describe .content .is_bargain {color:var(--red);padding-bottom:5px;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">详情</span>
    </template>
</van-nav-bar>
<div class="base-content">
    <div class="header">
        <div class="left">
            <div class="salary-box">
                <van-image
                        width="15px"
                        src="__MIMAGES__/icon_salary_white.png"
                ></van-image>
                <span class="text">工资：</span>
                <span class="salary">{{info.salary}}</span>
            </div>
            <div class="company-name">{{info.company_name}}</div>
        </div>
        <div class="phone-box" @click="onPhone">
            <van-image
                    width="30px"
                    src="__MIMAGES__/icon_phone_white.png"
            ></van-image>
            <span class="text">拔号</span>
        </div>
    </div>
    <div class="title">{{info.title}}</div>
    <div class="tags" v-if="info.tags.length > 0">
        <van-tag type="primary" size="large" v-for="tag in info.tags">{{tag}}</van-tag>
    </div>
    <div class="introduce">
        <div class="introduce-item">
            <van-image
                    width="15px"
                    src="__MIMAGES__/icon_num.png"
            ></van-image>
            <span>招聘人数:{{info.num}}</span>
            <span class="split">|</span>
            <van-image
                    width="15px"
                    src="__MIMAGES__/icon_age.png"
            ></van-image>
            <span>年龄:{{info.agegroup}}</span>
        </div>
        <div class="introduce-item">
            <van-image
                    width="15px"
                    src="__MIMAGES__/icon_address.png"
            ></van-image>
            <span>{{info.province}}{{info.city}}{{info.district}}{{info.address}}</span>
        </div>
    </div>
</div>

<div class="describe" v-if="info.requirement">
    <div class="header">
        岗位要求
    </div>
    <div class="content">
        <pre>{{info.requirement}}</pre>
    </div>
</div>

<div class="describe" v-if="info.comdetails">
    <div class="header">
        企业简介
    </div>
    <div class="content">
        <pre>{{info.comdetails}}</pre>
    </div>
</div>

<div class="describe" v-if="info.picall.length > 0">
    <div class="header">
        相册
    </div>
    <div class="content">
        <van-grid :border="false">
            <van-grid-item v-for="(image,index) in info.picall">
                <van-image
                        :src="image"
                        @click="showImage(index)"
                ></van-image>
            </van-grid-item>
        </van-grid>
    </div>
</div>

<div class="describe" v-if="info.remark">
    <div class="header">
        补充说明
    </div>
    <div class="content">
        <pre>{{info.remark}}</pre>
    </div>
</div>

<div class="describe" v-if="info.market_content">
    <div class="header">
        市场行情
    </div>
    <div class="content">
        <div class="is_bargain">{{info.is_bargain == 1 ? '可议价' : '不可议价'}}</div>
        <pre>{{info.market_content}}</pre>
    </div>
</div>

<van-floating-bubble @click="onReport">报备</van-floating-bubble>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.active = Vue.ref(0);

        base.info = Vue.reactive({$info});
        base.onPhone = () => {
            location.href = 'tel:' + base.info.telephone;
        };
        base.showImage = (index) => {
            vant.showImagePreview({
                images: base.info.picall,
                startPosition: index,
                loop:false,
            });
        };

        base.onReport = () => {
            location.href = "{:url('recruit/report')}?id=" + base.info.id;
        };

        base.onBack = () => {
            location.href = "{:url('recruit/index')}";
        };

        return base;
    }
</script>
{/block}