<template>
    <view v-if="showDetail">
        <view class="head">
            <view class="proname">
                {{ info.missionTitle }}
            </view>
            <!-- <view class="prolist">
				任务编码：{{info.missionNo}}
			</view> -->
            <view class="prolist">岗位日期：{{ dateFormat(info.stime) }}至{{ dateFormat(info.etime) }}</view>
            <!-- <view class="prolist">
				报名截止：{{dateFormat((info.etimePub))}}
			</view> -->
            <view class="prolist">行业类型：{{ info.tradeNames }}</view>
            <view class="prolist">工种类型：{{ info.worktypeNames }}</view>
            <view class="fee">
                {{ info.wage }}
            </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">学历要求：{{ education[info.education] }}</view>
                <view class="protype">经验要求：{{ experience[info.experienceDesc] }}</view>
            </view>
            <view class="prolist proint" style="font-weight: bold; color: #333">任务描述</view>
            <view class="prolist description">
                {{ info.missionDesc }}
            </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.companyAddress }}</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.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"
                    :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">
            <view
                @click="callPhone"
                class="bottombtn flexbtn"
                style="margin-right: 10rpx; background-color: #fbad17; 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="min-height: 100rpx; padding: 60rpx 40rpx">
                <view class="contactWrapper" v-for="(item, index) in info.applyList" :key="index">
                    <view class="wrapperLeft">
                        <view>{{ item.realName }} : {{ item.telphone }}</view>
                        <view>申请时间：{{ item.applyTime }}</view>
                    </view>
                    <view class="applyTime">
                        <!-- // 1：申请中；2：申请通过；3：申请未通过；-->
                        <view
                            class="btnGr"
                            v-if="item.status === 1 || item.status === 3"
                            @click="changeWorkerStatus(item)"
                        >
                            录用
                        </view>
                        <view class="btnHuy" v-if="item.status === 2" @click="cancelWorkerStatus(item)">取消</view>
                    </view>
                </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 { recruit_missionDetail } from '@/api/mission.js';
import { GoLogin } from '@/untils/AxiosUtils.js';
import { setRead, updataEmployedNew, cancelEmployed } from '@/api/news.js';
import { checkPass } from '@/api/auth.js';
import dictionary from '@/common/textdata.js';
import { dateFormat } from '../../../../untils/format.js';
import uniMask from '@/components/uni-mask/mask.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import validCode from '@/components/p-valid-code/p-valid-code.vue';
export default {
    data() {
        return {
            ...dictionary,
            info: {},
            status: null,
            showDetail: false,
            showCode: false,
            maskShow: false,
            nextBtn: false,
            loading: false,
            latitude: 39.909, //中心点
            longitude: 116.39742,
            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,
        };
    },
    components: {
        uniMask,
        validCode,
        uniPopup,
    },
    onLoad: function (option) {
        //option为object类型，会序列化上个页面传递的参数
        // this.$store.dispatch('setAutograph')
        if (option.missionNo) {
            this.missionNo = decodeURIComponent(option.missionNo);
        }
        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
        }
    },
    onShow: function () {
        this.showDetail = true;
        this.getData();
    },
    onShareAppMessage(obj) {
        return {
            title: this.info.missionTitle,
            path: `/pages/projectInfo/projectInfo?missionNo=${this.info.missionNo}`,
        };
    },
    methods: {
        dateFormat,
        async cancelWorkerStatus(item) {
            let params = {
                missionNo: this.info.missionNo,
                ids: item.id,
            };
            uni.showLoading({
                title: '请稍后',
            });
            let resData = await cancelEmployed(params);
            uni.hideLoading();
            if (resData.data.code === 200) {
                this.$api.msg('操作成功');
                this.getData();
            }
        },
        async changeWorkerStatus(item) {
            let params = {
                missionNo: this.info.missionNo,
                ids: item.id,
            };
            uni.showLoading({
                title: '请稍后',
            });
            let resData = await updataEmployedNew(params);
            uni.hideLoading();
            if (resData.data.code === 200) {
                this.$api.msg('操作成功');
                this.getData();
            }
        },
        callPhone() {
            this.showPopUp = true;
        },
        closePopUp() {
            this.showPopUp = false;
        },
        getData: function () {
            const self = this;
            // missionDetail(self.missionNo).then(res => {
            recruit_missionDetail(self.missionNo, self.type).then(
                (res) => {
                    self.info = res.data.data;
                    self.status = res.data.data.detailStatus;
                    self.latitude = self.info.lat;
                    self.longitude = self.info.lon;
                    self.covers[0].latitude = self.info.lat;
                    self.covers[0].longitude = self.info.lon;
                    self.showDetail = true;
                    if (self.type === 1) {
                        // 设置已读
                        setRead(self.id).then((res) => {
                            self.$store.commit('SET_READ');
                        });
                    }
                },
                (error) => {
                    console.log(error);
                }
            );
        },
        // 查看合同
        lookMask() {
            this.maskShow = true;
        },
        // 关闭弹窗
        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.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']),
        skillNames() {
            if (this.info.skillNames) {
                return this.info.skillNames.split(',');
            }
        },
    },
};
</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;
}

.contactWrapper {
    box-sizing: border-box;
    text-align: center;
    font-size: 28rpx;
    margin-top: 10rpx;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.applyTime {
    font-size: 24rpx;
    color: #666666;
}

.wrapperLeft {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.btnGr {
    background-color: green;
    color: #ffffff;
    padding: 10rpx 20rpx;
    border-radius: 5rpx;
}

.btnHuy {
    background-color: #e8e8e8;
    color: #ffffff;
    padding: 10rpx 20rpx;
    border-radius: 5rpx;
}
</style>
