<template>
    <view v-if="showDetail">
        <view class="head">
            <view class="proname">
                {{ info.jobName || '暂无' }}
            </view>
            <!-- <view class="prolist">
        		任务编码：{{info.missionNo}}
        	</view> -->
            <view class="prolist">发布日期：{{ dateFormat(info.stime) || '暂无' }}</view>
            <view class="prolist">招聘人数：{{ info.peopleNum || '暂无' }}</view>
            <view class="prolist">
                行业类型：{{ info.tradeNames ? info.tradeNames : info.jobCompanyIndustry || '暂无' }}
            </view>
            <view class="prolist">岗位工种：{{ info.skillNames || '暂无' }}</view>
            <!-- <view class="fee">
        		{{info.wage}}{{wageUnit[info.wageUnitCategory]}}
        	</view> -->
            <view
                class="position_right"
                v-if="info.reviewState === 1"
                @click="
                    navTo(
                        `/pages/projectInfo/sub/inviteList?jobType=${info.jobType}&id=${info.id}&createUserId=${info.createUserId}`
                    )
                "
            >
                邀请用户
            </view>
        </view>
        <view class="head">
            <view class="proname proneed">岗位要求</view>
            <!-- <view class="prolist">
        		<view class="protype">
        			年龄要求：{{age[info.ageDesc]}}
        		</view>
        	</view> -->
            <view class="prolist">
                <view class="protype">年龄要求：{{ age[info.ageDesc] || '暂无' }}</view>
            </view>
            <view class="prolist">
                <view class="protype">学历要求：{{ education[info.education] || '暂无' }}</view>
            </view>
            <view class="prolist">
                <view class="protype">经验要求：{{ info.experienceDesc || '暂无' }}</view>
            </view>

            <!--   <view class="prolist">
                岗位地址：{{info.jobAddress}}
            </view> -->
            <view class="prolist proint" style="font-weight: bold; color: #333">岗位描述</view>
            <view class="prolist description">
                {{ info.jobDescription }}
            </view>
            <!-- 技能标签 start -->
            <view class="ask">
                <view class="askList" v-for="(item, index) in skillNames" :key="index">
                    {{ item }}
                </view>
            </view>
            <!-- 技能标签 end -->
            <view v-if="info.jobSources" style="color: red" class="prolist">来源：{{ info.jobSources || '暂无' }}</view>
        </view>
        <view class="head">
            <!-- <view class="proname proneed">
        		企业信息
        	</view> -->
            <!-- <view class="prolist">
        		{{info.companyName}}
        	</view> -->
            <!-- <view class="prolist">
        		用工单位：{{info.jobCompanyName}}
        	</view> -->
            <view style="display: flex; align-items: center">
                <image
                    src="../../static/img/city.png"
                    style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
                    mode=""
                ></image>
                <view style="font-size: 30rpx">{{ info.jobCompanyName }}</view>
            </view>
        </view>
        <view class="head">
            <view class="proname proneed">地址</view>
            <!-- <view class="prolist">
        		<view class="protype">
        			联系人：{{info.callName}}
        		</view>
        		<view class="protype">
        			联系方式：{{info.callTel}}
        		</view>
        	</view> -->
            <!-- <view class="prolist" v-if="info.callNumber">
        		座机号：{{info.callNumber}}
        	</view> -->
            <view class="prolist">注册地址：{{ info.cityId || '暂无' }}</view>
            <view class="prolist">工作地址：{{ info.address || '暂无' }}</view>
            <view class="map">
                <super-map
                    ref="uMap"
                    style="width: 100%; height: 100%"
                    :latitude="latitude"
                    :longitude="longitude"
                    :open="true"
                    :zoom="14"
                    :min-zoom="10"
                    :max-zoom="20"
                    @regionchange="show = false"
                    :init="false"
                    :MapUrl="$config.supperMap"
                    :flag-tip="false"
                ></super-map>
            </view>
            <!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
        </view>
        <view class="" style="height: 200rpx; background-color: #f6f6f6" v-if="isShow !== '0'"></view>
        <view class="btn" v-if="isShow !== '0' && status === 0">
            <view
                @click="collect"
                style="display: flex; align-items: center; margin-right: 10rpx; flex-direction: column"
            >
                <image
                    v-if="collectStatus == 0"
                    src="../../static/img/collect.png"
                    style="width: 36rpx; height: 36rpx"
                    mode=""
                ></image>
                <image
                    v-if="collectStatus == 1"
                    src="../../static/img/collect_yes.png"
                    style="width: 36rpx; height: 36rpx"
                    mode=""
                ></image>
                <view v-if="collectStatus == 0" style="font-size: 26rpx; color: #707070; margin-top: 10rpx">收藏</view>
                <view v-if="collectStatus == 1" style="font-size: 20rpx; color: #707070; margin-top: 10rpx">
                    已收藏
                </view>
            </view>

            <view
                @click="callPhone"
                class="bottombtn flexbtn"
                style="margin-right: 10rpx; background-color: #fbad17; border-radius: 45rpx"
            >
                电话联系
            </view>
            <view @click="submit" class="bottombtn flexbtn" style="border-radius: 45rpx">申请</view>
        </view>
        <view class="btn" v-if="!jobType && isShow !== '0' && status !== 0">
            <!-- <view class="bottombtn lookContract" @click="lookMask">查看合同</view> -->
            <view
                @click="collect"
                style="display: flex; align-items: center; margin-right: 10rpx; flex-direction: column"
            >
                <image
                    v-if="collectStatus == 0"
                    src="../../static/img/collect.png"
                    style="width: 36rpx; height: 36rpx"
                    mode=""
                ></image>
                <image
                    v-if="collectStatus == 1"
                    src="../../static/img/collect_yes.png"
                    style="width: 36rpx; height: 36rpx"
                    mode=""
                ></image>
                <view v-if="collectStatus == 0" style="font-size: 26rpx; color: #707070; margin-top: 10rpx">收藏</view>
                <view v-if="collectStatus == 1" style="font-size: 20rpx; color: #707070; margin-top: 10rpx">
                    已收藏
                </view>
            </view>

            <view
                @click="callPhone"
                class="bottombtn flexbtn"
                style="margin-right: 10rpx; background-color: #fbad17; border-radius: 45rpx"
            >
                电话联系
            </view>
            <view class="bottombtn disabledBtn flexbtn" style="border-radius: 45rpx">已申请</view>
        </view>
        <uniMask :maskShow="maskShow">
            <view class="contractMask">
                <!-- #ifdef H5 || APP-PLUS -->
                <view class="close" @click="close" style="top: 124rpx">+</view>
                <!-- #endif -->
                <!-- #ifdef MP-WEIXIN -->
                <view class="close" @click="close">+</view>
                <!-- #endif -->
                <view style="height: 30px"></view>
                <img :src="src" alt="" style="width: 100%; height: 1000px" />
                <view v-if="nextBtn" class="down" @click="next">下一步</view>
            </view>
        </uniMask>
        <u-popup closeable :show="showPopUp" mode="bottom" @close="closePopUp">
            <view style="height: 200rpx; padding: 20rpx 40rpx">
                <view style="font-size: 28rpx; font-weight: bold">重要提示：</view>
                <view style="font-size: 24rpx; color: #707070; margin-top: 10rpx">
                    为保障个人基本劳动权益，建议通过平台用工的形式就业
                </view>
                <view style="text-align: center; font-size: 28rpx; margin-top: 30rpx">
                    {{ info.callName || '联系人' }} :
                    <span style="color: blue" v-if="info.callTel" @click="tools.onDialingPhoneNumber(info.callTel)">
                        {{ info.callTel }}
                    </span>
                    <span style="color: #333333" v-else>无联系方式</span>
                </view>
            </view>
        </u-popup>
    </view>

    <view v-else-if="showCode" class="codeSealBox">
        <!-- #ifdef H5 || APP-PLUS -->
        <view class="closeCode" @click="closeShowCode" style="top: 124rpx">+</view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view class="closeCode" @click="closeShowCode">+</view>
        <!-- #endif -->

        <view class="title">
            <view class="name">签名密码</view>
            <view class="tip">6位数字签名密码</view>
        </view>
        <view style="height: 36px"></view>
        <valid-code ref="validCode" @finish="getInpCode" :maxlength="maxlength"></valid-code>
        <view style="height: 36px"></view>
        <view class="forget" @click="forget">忘记密码？</view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex';
import { missionDetail, submit, getCollectState, updateCollectStatus, workDetail } from '@/api/mission.js';
import { GoLogin } from '@/untils/AxiosUtils.js';
import { setRead } from '@/api/news.js';
import { checkPass, getPhoneCountNumber } from '@/api/auth.js';
import dictionary from '@/common/textdata.js';
import { dateFormat } from '../../untils/format.js';
import { userrecruitDetail } from '@/api/userrecruit.js';
import uniMask from '@/components/uni-mask/mask.vue';
import validCode from '@/components/p-valid-code/p-valid-code.vue';
import { getuserrecruitDetailApp } from '@/api/userrecruit.js';
export default {
    data() {
        return {
            ...dictionary,
            info: {},
            status: null,
            showDetail: false,
            showCode: false,
            maskShow: false,
            nextBtn: false,
            loading: false,
            latitude: 31.126855, //中心点
            longitude: 104.397894,
            covers: [
                {
                    //marker标记位置
                    id: 0,
                    latitude: 0,
                    longitude: 0,
                    // width:30,
                    // height:30,
                    iconPath: '../../static/img/location.png',
                },
            ],
            missionNo: '',
            isShow: '',
            type: '',
            id: '',
            src: 'https://jlfiles.oss-cn-zhangjiakou.aliyuncs.com/jobslink-api/doc/%E7%94%B5%E5%AD%90%E5%90%88%E5%90%8C%E9%A2%84%E8%A7%88%E5%9B%BE%E7%89%87.png',
            maxlength: 6,
            collectStatus: 0, // 收藏状态
            showPopUp: false,
            jobType: null,
        };
    },
    components: {
        uniMask,
        validCode,
    },
    onLoad: function (option) {
        //option为object类型，会序列化上个页面传递的参数
        // this.$store.dispatch('setAutograph')
        if (option.workId) {
            this.workId = decodeURIComponent(option.workId);
        }
        if (option.isCan) {
            this.isShow = option.isCan; //isShow为'0'则为我的任务、我的评价过来的，需要隐藏抢任务按钮
        }
        if (option.type) {
            this.type = option.type; //type为1则为消息邀请过来的,需要设置消息已读;
        }
        if (option.id) {
            this.id = option.id; //消息id
        }
        if (option.jobType) {
            this.jobType = option.jobType;
        }
    },
    onShow: function () {
        this.showDetail = true;
        this.getData();
    },
    onShareAppMessage(obj) {
        return {
            title: this.info.missionTitle,
            path: `/pages/projectInfo/projectInfo?missionNo=${this.info.missionNo}`,
        };
    },
    methods: {
        dateFormat,
        collect() {
            if (!this.$api.haslogin()) {
                GoLogin();
                return;
            }
            if (!this.$api.hasResume()) {
                this.navTo('/pageMy/my/resume/index', true);
                return;
            }
            // console.log('收藏，取消收藏')
            const status = this.collectStatus == 0 ? 1 : 0;
            updateCollectStatus(this.info.id, status, 2).then((res) => {
                if (res.data.code == 200) {
                    this.getCollectStatus();
                }
            });
        },
        async callPhone() {
            getPhoneCountNumber();
            if (!this.$api.haslogin()) {
                GoLogin();
                return;
            }

            if (!this.$api.hasResume()) {
                this.navTo('/pageMy/my/resume/index', true);
                return;
            }
            this.showPopUp = true;
        },
        closePopUp() {
            this.showPopUp = false;
        },
        // 获取收藏状态
        getCollectStatus() {
            getCollectState(this.info.id, 2).then((res) => {
                // 0 未收藏，1 已收藏
                // console.log(res)
                this.collectStatus = res.data.data;
            });
        },
        async getData() {
            const self = this;
            let resData = null;
            if (this.jobType) {
                resData = await getuserrecruitDetailApp({
                    id: this.id,
                    jobType: this.jobType,
                });
            } else {
                resData = await userrecruitDetail(self.workId);
            }
            if (resData.data?.code === 200) {
                self.info = resData.data.data;
                self.status = resData.data.data.status;
                self.missionNo = resData.data.data.missionNo;
                self.latitude = self.info.lat;
                self.longitude = self.info.lon;
                self.covers[0].latitude = self.info.lat;
                self.covers[0].longitude = self.info.lon;
                if (!(self.info.lat && self.info.lat === -1)) {
                    self.$refs.uMap.initMap({
                        lat: self.info.lat,
                        lon: self.info.lon,
                    });
                }
                self.showDetail = true;
                if (!this.seeDeatil) {
                    self.getCollectStatus();
                    if (self.type === 1) {
                        // 设置已读
                        setRead(self.id).then((res) => {
                            self.$store.commit('SET_READ');
                        });
                    }
                }
            }
        },
        submit: function () {
            if (!this.$api.haslogin()) {
                GoLogin();
                return;
            }

            if (!this.$api.hasResume()) {
                this.navTo('/pageMy/my/resume/index', true);
                return;
            }
            const _that = this;
            uni.showModal({
                title: '提示',
                content: '请确认申请，申请后不能撤销',
                success: function (res) {
                    if (res.confirm) {
                        if (_that.loading) return;
                        const auth = _that.auth;
                        const contractOn = _that.info.contractOn;
                        const sealOk = _that.autograph && _that.autograph.data && _that.autograph.data.signSrcUrl;
                        // if (sealOk) {
                        // 	console.log('直接抢任务')
                        // 	this.submitTask()
                        // } else
                        // if (!auth.realNameState || !auth.laborState || !auth.insureState) {
                        // 	this.goSign(0)
                        // } else if (!auth.bankCardState){
                        // 	this.goSign(1)
                        // } else
                        if (contractOn && !sealOk) {
                            _that.goSign(2);
                        } else if (sealOk && contractOn) {
                            _that.nextBtn = true;
                            _that.lookMask();
                        } else {
                            _that.submitTask();
                        }
                    } else if (res.cancel) {
                        _that.$api.msg('取消申请');
                    }
                },
            });
        },
        // 查看合同
        lookMask() {
            this.maskShow = true;
        },
        // 岗位申请
        submitTask() {
            submit(this.missionNo, 2).then(
                (res) => {
                    uni.hideLoading();
                    uni.showToast({
                        title: '操作成功',
                        icon: 'none',
                    });
                    this.status = null;
                    this.loading = false;
                },
                (error) => {
                    this.loading = false;
                }
            );
        },
        // 步骤
        goSign(active) {
            uni.navigateTo({
                url: `/pages/projectInfo/signContract?active=${active}`,
            });
        },
        // 关闭弹窗
        close() {
            this.maskShow = false;
        },
        // 合同下一步
        next() {
            this.maskShow = false;
            this.showDetail = false;
            this.showCode = true;
        },
        // 输入签名密码
        getInpCode(password) {
            uni.showLoading({
                title: '请求中...',
            });
            this.loading = true;
            var obj = {
                pass: password,
            };
            checkPass(obj)
                .then((res) => {
                    this.submitTask();
                    this.closeShowCode();
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        // 关闭签名密码弹窗
        closeShowCode() {
            this.showCode = false;
            this.showDetail = true;
        },
        // 忘记密码
        forget() {
            uni.navigateTo({
                url: `/pageMy/setUserBase/seal/forget?forget=true`,
            });
        },
    },
    computed: {
        ...mapGetters(['auth', 'autograph', 'area']),
        skillNames() {
            if (this.info.skillNames) {
                return this.info.skillNames.split(',');
            }
        },
        // cityNamed() {
        //     console.log('val', this.info, this.area.dic)
        //     if (this.info && this.info.cityId !== -1 && this.area.dic) {
        //         return this.area.dic[this.info.cityId].label
        //     } else {
        //         return '无'
        //     }
        // }
    },
};
</script>

<style lang="scss">
.codeSealBox {
    padding: 285rpx 72rpx 0 72rpx;

    .closeCode {
        position: absolute;
        right: 36rpx;
        top: 120rpx;
        color: #1b66ff;
        transform: rotate(45deg);
        font-size: 40px;
    }

    .title {
        display: flex;
        align-items: center;
    }

    .name {
        height: 46rpx;
        font-size: 46rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 46rpx;
        margin-right: 28rpx;
    }

    .tip {
        height: 38rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 38rpx;
    }

    .forget {
        height: 38rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #5aa0fa;
        line-height: 38rpx;
        text-align: right;
    }
}

.contractMask {
    background-color: #ffffff;
    margin: 30rpx;
    position: relative;
    border-radius: 4px;
    height: 96%;
    overflow: auto;

    .close {
        width: 23px;
        height: 23px;
        color: #1b66ff;
        position: fixed;
        right: 60rpx;
        top: 60rpx;
        transform: rotate(45deg);
        font-size: 40px;
    }

    .down {
        position: fixed;
        bottom: 30px;
        left: 14%;
        width: 545rpx;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        background: #1b66ff;
        font-size: 36rpx;
        font-weight: 400;
        color: #ffffff;
    }
}

.lookContract {
    width: 30%;
    margin-right: 30rpx;
}

.flexbtn {
    flex: 1;
}

.bottombtn {
    background-color: #1b66ff;
    color: #fff;
    text-align: center;
    border-radius: 10rpx;
    font-family: PingFangSC-Medium;
    font-size: 32rpx;
    height: 90rpx;
    line-height: 90rpx;
}

.btn {
    background-color: #fefefe;
    width: 690rpx;
    padding: 30rpx;
    padding-bottom: 80rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
}

.disabledBtn {
    background-color: #c8c9cc;
}

.map {
    width: 100%;
    height: 350rpx;
    margin-top: 30rpx;
}

.askList {
    font-family: PingFangSC-Regular;
    font-size: 24rpx;
    color: #666666;
    background-color: #f6f6f6;
    padding: 5rpx 15rpx;
    margin-right: 10rpx;
    margin-top: 15rpx;
}

.ask {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 20rpx 0;
}

.proint {
    margin-top: 30rpx;
    font-size: 30rpx !important;
}

.proneed {
    font-size: 32rpx !important;
}

.fee {
    font-family: PingFangSC-Medium;
    font-size: 32rpx;
    color: #f46161;
    margin-top: 30rpx;
}

.protype {
    width: 50%;
}

.prolist {
    font-family: PingFangSC-Regular;
    font-size: 28rpx;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 5rpx 0;
}

.proname {
    font-weight: bold;
    font-family: PingFangSC-Medium;
    font-size: 40rpx;
    color: #333333;
    width: 90%;
    overflow: hidden;
    padding-bottom: 20rpx;
}

.head {
    padding: 30rpx;
    background: #fefefe;
    border-bottom: 20rpx solid #f6f6f6;
}

.description {
    word-break: break-all;
    white-space: pre-line;
}

.head {
    position: relative;

    .position_right {
        position: absolute;
        right: 24rpx;
        top: 30rpx;
        color: #ffffff;
        font-size: 24rpx;
        background-color: #1b66ff;
        border-radius: 12rpx;
        padding: 10rpx 20rpx;
    }

    .position_right:active {
        background-color: #e8e8e8;
        color: #333333;
    }
}
</style>
