{yun:}include file="$wapstyle/member/header.htm"{/yun}
<div id="yunvue" class="none">

    <div class="m_tab" v-if="islook">
        <div class="m_tabbox category">
            <ul>
                <li :class="browse == 1 ? 'm_tabactive' : ''" @click="pageTo('index.php?c=sq&browse=1')">未查看</li>
                <li :class="browse == 2 ? 'm_tabactive' : ''" @click="pageTo('index.php?c=sq&browse=2')">已查看</li>
                <li :class="browse == 3 ? 'm_tabactive' : ''" @click="pageTo('index.php?c=sq&browse=3')">待沟通</li>
                <li :class="browse == 4 ? 'm_tabactive' : ''" @click="pageTo('index.php?c=sq&browse=4')">约面试</li>
            </ul>
        </div>
    </div>


    <div class="m_cardbox" v-if="browse == 1">
        <div class="m_cardbgbox">
            <div class="conts active">
                <div class="Posted_body_card" v-for="(item, sqkey) in list" :key="sqkey" @touchstart="touchin(sqkey)" @touchmove="cleartouch">
                    <div @touchend="cleartime(sqkey, 'job')">
						<div class="Posted_card_top">
						    <div class="Posted_card_name">
						        {{item.job_name}}
						    </div>
						    <div class="Posted_card_pay">{{item.job_salary}}</div>
						</div>
						<div class="Posted_card_cen" style="position: relative;"><span class="Posted_card_cx">{{item.body != '' ? '已撤销' : ''}}</span>
						    <ul>
						        <li>{{item.cityclassname}}</li>
						        <li>{{item.edu}}</li>
						        <li>{{item.exp}}</li>
						    </ul>
						</div>
					</div>
                    <div class="Posted_card_bom" @touchend="cleartime(sqkey, 'com')">
                        <div class="Posted_bom_box">
                            <div class="Posted_box_logo">
                                <img :src="item.logo" alt="" width="100%" height="100%">
                            </div>
                            <div class="Posted_box_name">{{item.com_name}}</div>
                        </div>
                        <div class="Posted_bom_time"> {{item.datetime_n}}</div>
                    </div>
                </div>
            </div>
            <div v-if="count==2">
                <van-pagination v-model="page" :total-items="total" :items-per-page="limit" force-ellipses @change="pageChange"/>
            </div>
            <div class="wap_member_bgcar" v-show="islook&&count==0">
                <div class="wap_member_no"> 暂无申请记录
                    <div><a class="wap_member_no_submit" href="{yun:}url m=wap c=job{/yun}">前往申请</a></div>
                </div>
            </div>
        </div>
    </div>
    <!--投递进展-->


    <div class="m_cardbox" v-else>
        <div class="m_cardbgbox">
            <!-- 投递进展 已投递-->
            <div class="issue_post_body_card" v-for="(item, sqkey) in list" :key="sqkey" @touchstart="touchin(sqkey)" @touchend="cleartime(sqkey, '')" @touchmove="cleartouch">
                <div class="Posted_card_top" @touchend="cleartime(sqkey, 'job')">
                    <div class="Posted_card_name">{{item.job_name}}</div>
                    <div class="Posted_card_pay">{{item.job_salary}}</div>
                </div>
                <div class="Posted_card_bom" @touchend="cleartime(sqkey, 'com')">
                    <div class="Posted_bom_box">
                        <div class="Posted_box_logo">
                            <img :src="item.logo" alt="" width="100%" height="100%">
                        </div>
                        <div class="Posted_box_name">{{item.com_name}}</div>
                    </div>
                    <div class="Posted_bom_time"></div>
                </div>
                <div class="Posted_card_state" v-if="browse==2">
                    <div class="Posted_state_without">
                        <div class="state_been_icon">
                            <img src="{yun:}$wap_style{/yun}/images/deliver_been.png" alt="" width="100%" height="100%">
                        </div>
                        <div class="state_without_text">已投递</div>
                    </div>
                    <div class="Posted_state_dot">· · · ·</div>
                    <div class=" Posted_state_underway">
                        <div class="state_underway_icon">
                            <img src="{yun:}$wap_style{/yun}/images/deliver_pass.png" alt="" width="100%" height="100%">
                        </div>
                        <div class="state_underway_text">已查看</div>
                    </div>
                    <div class="Posted_state_nodot">· · · ·</div>
                    <div class="Posted_state_without">
                        <div class="state_been_icon">
                            <img src="{yun:}$wap_style{/yun}/images/deliver_no_show.png" alt="" width="100%"
                                 height="100%">
                        </div>
                        <div class="state_without_text">待沟通</div>
                    </div>
                    <div class="Posted_state_nodot">· · · ·</div>
                    <div class="Posted_state_without">
                        <div class="state_been_icon">
                            <img src="{yun:}$wap_style{/yun}/images/deliver_no_show.png" alt="" width="100%"
                                 height="100%">
                        </div>
                        <div class="state_without_text">邀面试</div>
                    </div>
                </div>
                <div class="Posted_card_state" v-else-if="browse==3">
                    <div class="Posted_state_without">
                        <div class="state_been_icon">
                            <img src="{yun:}$wap_style{/yun}/images/deliver_been.png" alt="" width="100%" height="100%">
                        </div>
                        <div class="state_without_text">已投递</div>
                    </div>
                    <div class="Posted_state_nodot">· · · ·</div>
                    <div class="Posted_state_without">
                        <div class="state_been_icon">
                            <img src="{yun:}$wap_style{/yun}/images/deliver_been.png" alt="" width="100%" height="100%">
                        </div>
                        <div class="state_without_text">已查看</div>
                    </div>
                    <div class="Posted_state_dot">· · · ·</div>
                    <div class="Posted_state_underway">
                        <div class="state_underway_icon">
                            <img src="{yun:}$wap_style{/yun}/images/deliver_pass.png" alt="" width="100%" height="100%">
                        </div>
                        <div class="state_underway_text">{{item.zt_n}}</div>
                    </div>
                    <div class="Posted_state_nodot">· · · ·</div>
                    <div class="Posted_state_without">
                        <div class="state_been_icon">
                            <img src="{yun:}$wap_style{/yun}/images/deliver_no_show.png" alt="" width="100%" height="100%">
                        </div>
                        <div class="state_without_text">邀面试</div>
                    </div>
                </div>
                <div class="Posted_card_state" v-else-if="browse==4">
                    <div class="Posted_state_been">
                        <div class="state_been_icon">
                            <img src="{yun:}$wap_style{/yun}/images/deliver_been.png" alt="" width="100%" height="100%">
                        </div>
                        <div class="state_been_text">已投递</div>
                    </div>
                    <div class="Posted_state_dot">· · · ·</div>
                    <div class="Posted_state_been">
                        <div class="state_been_icon">
                            <img src="{yun:}$wap_style{/yun}/images/deliver_been.png" alt="" width="100%" height="100%">
                        </div>
                        <div class="state_been_text">已查看</div>
                    </div>
                    <div class="Posted_state_dot">· · · ·</div>

                    <div class="Posted_state_been">
                        <div class="state_been_icon">
                            <img src="{yun:}$wap_style{/yun}/images/deliver_been.png" alt="" width="100%" height="100%">
                        </div>
                        <div class="state_been_text">已沟通</div>
                    </div>
                    <div class="Posted_state_dot">· · · ·</div>

                    <div class="Posted_state_underway">
                        <div class="state_underway_icon">
                            <img src="{yun:}$wap_style{/yun}/images/deliver_pass.png" alt="" width="100%" height="100%">
                        </div>
                        <div class="state_underway_text">邀面试</div>
                    </div>
                </div>
                <div class="Posted_state_hrtip">别急，HR当前这正在处理简历</div>
            </div>
            <div v-if="count==2">
                <van-pagination v-model="page" :total-items="total" :items-per-page="limit" force-ellipses @change="pageChange"/>
            </div>
        </div>
        <div class="wap_member_bgcar" v-show="islook&&count==0">
            <div class="wap_member_no"> 暂无相关记录
                <div><a class="wap_member_no_submit" href="{yun:}url m=wap c=job{/yun}">前往申请</a></div>
            </div>
        </div>
    </div>
	<van-action-sheet v-model="sheetShow" :actions="reasonList" @select="onSelect" cancel-text="取消" @cancel="sheetShow = false" :closeable="false" title="请选择取消原因" />
</div>

<script>
    var currentPage = parseInt('{yun:}$smarty.get.page{/yun}');
    var browse = '{yun:}$smarty.get.browse{/yun}';
    browse = browse ? browse : '1';
	var loopVal = null,
		loop = 0,
		cancel_id = 0,
		cancel_key = null;
    new Vue({
        el: '#yunvue',
        data: {
            list: [],
            limit: 10,
            browse: browse,
            id: '',
            total: 0,
            page: currentPage ? currentPage : 1,
            islook: false,
			sheetShow: false,
			reasonList: [
				{name:'已经找到工作'}, 
				{name:'想休息一段时间'}, 
				{name:'生病了'}, 
				{name:'看错信息了'}, 
				{name:'很长时间没有查看'}, 
				{name:'其它原因'}
			]
        },
        computed: {
            count() {
                if (this.total > this.limit) {
                    return 2;
                } else if (this.list.length == 0) {
                    return 0;
                } else {
                    return 1;
                }
            }
        },
        created() {
            this.getSq();
        },
        methods: {
            sqShow: function (e) {
                this.page = 1;
                this.list = [];
                this.islook = false;
                this.browse = e;
                this.getSq();
            },
            getSq: function () {
                showLoading();
                var that = this;
                var paramer = {};
                paramer['page'] = that.page;
                paramer['limit'] = that.limit;
                paramer['browse'] = that.browse;

                $.post('{yun:}url d=wxapp h=user m=job c=sqjoblist{/yun}', paramer, function (res) {
                    hideLoading();

                    that.list = res.data;
                    that.total = res.total;
                    that.page = currentPage ? currentPage : 1;
                    that.browse = browse;
                    that.islook = true
                    $("#yunvue").css('display', 'block');
                }, 'json');
            },
            pageChange: function (e) {

                location.href = 'index.php?c=sq&browse=' + this.browse + '&page=' + e;
            },
            pageTo: function (url) {
                window.location.href = url;
            },
			touchin(key) {
				if(loopVal){
					 //再次清空定时器，防止重复注册定时器
					clearInterval(loopVal);
				}
				var self = this;
				loopVal = setTimeout(function() {
					loop = 1;
					cancel_id = self.list[key].id;
					cancel_key = key;
					if(self.list[key].body || self.list[key].is_browse > 1){

						self.sqdel();
					}else{
                        showConfirm('确定要取消申请？', function() {
                            self.sheetShow = true;
                        });

					}
				}.bind(this), 1000);
			},
			cleartime(key, goType) {
				if(loop == 0 && goType){
					// click
                    if(goType == 'com'){
                        this.pageTo(this.list[key].wapcom_url);
                    }else{
                        this.pageTo(this.list[key].wapjob_url);
                    }
				}
				// 这个方法主要是用来将每次手指移出之后将计时器清零
				if(loopVal){
					clearInterval(loopVal);
					loopVal = null;
				}
				loop = 0;
			},
			// 滑动时清除定时器
			cleartouch(){
			    if(loopVal){
					clearInterval(loopVal);
					loopVal = null;
					loop = 1;
				}
			},
			onSelect(item){
				let self = this;
				let	param = {
						ids: cancel_id,
						body: item.name
					};
				self.sheetShow = false;
                showLoading('取消中');
                $.post('{yun:}url d=wxapp h=user m=job c=qxSqJob{/yun}', param, function (res) {
                    hideLoading();
                    if (res.error == 1) {
                        self.list[cancel_key].body = item.name;
                        showToast('取消成功');
                    } else {
                        showModal('取消失败');
                    }
                })
			},
			sqdel(){
				let self = this;
				let	param = {
						ids: cancel_id
					};
				showConfirm('确定要删除？', function() {
					showLoading('删除中');
					$.post('{yun:}url d=wxapp h=user m=job c=delsqjob{/yun}', param, function (res) {
					    hideLoading();
						if (res.error == 1) {
							self.list.splice(cancel_key, 1);
							showToast('删除成功');
						} else {
							showModal('删除失败');
						}
					})
				})
			}
        }
    });
</script>
</body>
</html>