<template>
    <view>
        <view style class="container" @touchstart="touchStart">
            <view class="tc bgf" style="height: 100vh" v-if="recordList.length == 0">
                <view class="t-icon t-icon-zanwu" style="width: 80px; height: 80px; margin: 80px auto 20px"></view>
                <view class="tc f14 c045">暂无记录</view>
            </view>

            <!-- bindrefresherrefresh="onScrollRefresh" refresher-triggered="{{isTrigger}}" refresher-enabled="{{true}}" -->
            <scroll-view
                id="listBox"
                @scrolltolower="onScrollToLower"
                :scroll-top="topNum"
                enhanced
                @dragstart="listTouchStart"
                @scroll="listTouchMove"
                style="height: calc(100vh)"
                enable-passive
                :scroll-x="false"
                :scroll-y="true"
                :scroll-into-view="scrollTo"
                :scroll-with-animation="false"
                :enable-back-to-top="true"
            >
                <view class hover-class="none" :hover-stop-propagation="false">
                    <!-- 标准列表 -->
                    <view>
                        <view
                            class="standardList"
                            :style="
                                'padding-top: 0px;min-height: calc(100vh - ' +
                                (selectBrandList.length > 0 || selectJobList.length > 0 || activez != 'zuigao' || sexid != '-1' ? '170px' : '214px') +
                                ')'
                            "
                        >
                            <view>
                                <view :x:if="recordList != null && recordList.length > 0" style="padding-top: 0; overflow-x: hidden">
                                    <view class="jcenter bgf br8">
                                        <view class="listcontainer" style="border-top: 1px solid #f3f3f3">
                                            <view
                                                class="jobOne"
                                                hover-start-time="50"
                                                hover-stay-time="0"
                                                :data-id="item.id"
                                                @tap="goDetail"
                                                :hover-class="item.recruitment == '1' ? 'ahover' : ''"
                                                :style="
                                                    'background-color:' +
                                                    (item.recruitment == '1' ? '#fff' : '#f5f5f5') +
                                                    ';border-bottom: ' +
                                                    (item.recruitment == '1' ? '' : '1px solid #ddd') +
                                                    ';'
                                                "
                                                v-for="(item, index) in recordList"
                                                :key="index"
                                            >
                                                <view class="p1020 jobIn" hover-class="none">
                                                    <image
                                                        style="width: 80px; height: 80px; position: absolute; right: 100px; z-index: 99"
                                                        src="http://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/tingzhao.svg"
                                                        v-if="item.status == 1 && item.recruitment == 2"
                                                    ></image>

                                                    <image
                                                        style="width: 72px; height: 72px; position: absolute; right: 100px"
                                                        src="http://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/weishangxian.svg"
                                                        v-if="item.status == 0"
                                                    ></image>

                                                    <view class="display-flex">
                                                        <view class="prImg">
                                                            <view class="por" hover-class="none" :hover-stop-propagation="false">
                                                                <image
                                                                    :src="item.logo || 'https://matripe.oss-cn-beijing.aliyuncs.com/default.png'"
                                                                    mode="aspectFit"
                                                                    class="logoClass"
                                                                    alt
                                                                ></image>
                                                                <image
                                                                    class="pendant"
                                                                    v-if="item.hotJob == 1"
                                                                    src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/hot.png"
                                                                    mode="aspectFit|aspectFill|widthFix"
                                                                ></image>
                                                            </view>

                                                            <button
                                                                :class="'collect biggerSize v-center ' + (item.collected - 1 == 0 ? 'collectred' : '')"
                                                                @click.stop="collectPaste"
                                                                style="width: 52px"
                                                                :data-collected="item.collected"
                                                                :data-jobid="item.id"
                                                                hover-stop-propagation
                                                            >
                                                                <i class="iconfont icon-shoucang lh12" style="color: #888" v-if="item.collected - 2 == 0"></i>
                                                                <i class="iconfont icon-yishoucang lh12 color-f40" style v-else></i>
                                                                <text :class="'f10 ' + (item.collected - 1 == 0 ? 'color-f40' : 'c8')" style="line-height: 12px; margin-left: 2px">
                                                                    {{ item.collected - 2 == 0 ? '收藏' : '已收藏' }}
                                                                </text>
                                                            </button>
                                                        </view>
                                                        <view class="flex-1 vsb">
                                                            <view class="display-flex">
                                                                <view class="storeName">{{ item.jobName || item.aliasName }}</view>
                                                                <view class="hourPay">{{ item.salaryClassifyValue }}</view>
                                                            </view>
                                                            <view class="v-center mt12 mb12">
                                                                <view class="f14s c045 flex-1 display-flex">
                                                                    <view class="overflowOmit" hover-class="none" :hover-stop-propagation="false" style="max-width: 220px">
                                                                        {{ item.district == '' ? '' : item.district + ' | ' }}
                                                                        <block v-if="item.distance != null && item.distance != '' && storeJobListSearchForm.sortTag == 2">
                                                                            {{ item.distanceKm }}
                                                                        </block>
                                                                        <block v-else>{{ item.age }}</block>
                                                                    </view>
                                                                    <!-- <view class="fr f14s fw400" style="color: var(--color-f40);">{{item.monthlyPay}}</view> -->
                                                                </view>
                                                            </view>
                                                            <view class="display-flex">
                                                                <scroll-view
                                                                    :scroll-x="true"
                                                                    @scroll.stop.prevent="scroll"
                                                                    @tap="stoptap"
                                                                    :class="'tttg ' + (item.isTagShow == true ? 'isTagShow' : '')"
                                                                >
                                                                    <!-- <view class="t-icon t-icon-ziying1 " wx:if="{{item.signType == 1}}" style="background-repeat:no-repeat"></view> -->
                                                                    <view class="tagsLi" v-for="(item1, index1) in item.jobSpecialLabelNameArray" :key="index1">{{ item1 }}</view>
                                                                    <view class="tagsLi" v-if="item.jobSpecialLabelNameArray.length <= 0">暂无特色</view>
                                                                </scroll-view>

                                                                <block v-if="item.status == 1 && item.recruitment == 2">
                                                                    <view class="miniBtn disabled" :hover-stop-propagation="false">立即报名</view>
                                                                </block>
                                                                <block v-else>
                                                                    <view
                                                                        class="miniBtn"
                                                                        @click.stop="recordBill"
                                                                        :data-job="item"
                                                                        hover-class="thover"
                                                                        :hover-stop-propagation="false"
                                                                    >
                                                                        立即报名
                                                                    </view>
                                                                </block>

                                                                <!-- <view class="miniBtn" bindtap="recordBill" data-job="{{item}}" hover-class="thover" hover-stop-propagation="false">报名</view> -->
                                                                <!-- <view class="fsa bz f12 fee" wx:if="{{agencyStatus == 1 || corpUserFlag == true}}"> 
                              <view class="inner" hover-class="none" hover-stop-propagation="false">费</view>{{item.fuWuFei ? item.fuWuFei : '-' }}
                            </view>-->
                                                            </view>
                                                        </view>
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                    <block v-if="(recordList == null || recordList.length == 0) && storeJobListSearchForm.keys != null && storeJobListSearchForm.keys != ''">
                                        <view class="tc p20 f12 c045">没有符合条件的职位</view>
                                    </block>
                                    <block v-else>
                                        <view class="tc p20 f12 c045" v-if="!hasMoreData && recordList.length != 0">已经到底啦～</view>
                                        <view class="tc p20 f12 c045" v-if="hasMoreData">上滑加载更多</view>
                                    </block>
                                </view>
                                <view v-if="(recordList == null || recordList.length == 0) && pageShow" class="tc">
                                    <view class="t-icon t-icon-zanwu" style="width: 80px; height: 80px; margin: 80px auto 20px"></view>
                                    <view class="tc f14 c045">暂无记录</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <bottom-drawer
            :show="recordShow"
            :info="currentInfo"
            drawerType="recordShow"
            :cancerShow="false"
            :touchClose="true"
            @hidedrawer="hidedrawershow"
            class="bottomDrawer"
            height="494px"
        ></bottom-drawer>
    </view>
</template>

<script>
import bottomDrawer from '../../components/bottom-drawer/index';
const app = getApp();
const commonUtil = require('../../utils/commonUtil.js');
export default {
    components: {
        bottomDrawer
    },
    data() {
        return {
            recordShow: false,
            toped: '1',
            recordList: [],

            storeJobListSearchForm: {
                pageNum: 1,
                pageSize: 20,
                classify: 1,
                sex: -1,
                workTypeStr: '',
                lat: '',
                lng: '',
                jobClassify: '',
                sortTag: 0,
                jobSpecialLabelIds: '',
                cityName: '',
                brandIds: '',
                jobCategoryLabelIds: '',
                ujc: 1,
                keys: ''
            },

            loading: true,
            hasMoreData: false,

            //下拉是否还有更多数据
            inputShowed: false,

            inputVal: '搜索工作',
            wxCode: '',
            isCollect: false,
            collectTxt: '收藏',

            searchCityParamStorage: {
                name: '',
                shortName: ''
            },

            pageShow: false,
            whichOneShow: '',
            totalPage: '',
            currPage: '',
            triggered: false,
            isTrigger: false,
            currentJobDrawer: '',
            currentInfo: '',
            topNum: 0,
            scrollTo: '',
            selectBrandList: [],
            selectJobList: [],
            activez: '',
            sexid: ''
        };
    },
    onShow() {
        var that = this;
        that.setData({
            recordList: []
        });
        that.getJobList();
    },
    methods: {
        goBack() {
            uni.navigateBack({
                delta: -1
            });
        },

        goDetail(e) {
            console.log(e);
            var that = this;
            uni.navigateTo({
                url: '../detail/index?storeJobId=' + e.currentTarget.dataset.id + '&wxCode=' + that.wxCode
            });
        },

        getJobList() {
            var that = this;
            // debugger
            that.setData({
                pageShow: false
            });
            return new Promise(function (resolve, reject) {
                uni.showLoading({
                    title: '加载中...'
                });
                console.log(that.storeJobListSearchForm);
                uni.request({
                    url: app.globalData.ip + '/yishoudan/custom/job/listApp',
                    method: 'POST',
                    header: app.globalData.headers,
                    data: that.storeJobListSearchForm,
                    success: function (res) {
                        console.log('职位列表↓↓↓↓');
                        console.log(res);
                        that.setData({
                            totalPage: res.data.data.pageBean.pageCount,
                            currPage: res.data.data.pageBean.currentPage
                        });
                        setTimeout(function () {
                            that.setData({
                                triggered: false
                            });
                        }, 1000);
                        if (
                            res.data.data.pageBean.recordList == null ||
                            res.data.data.pageBean.recordList.length == 0 ||
                            res.data.data.pageBean.recordList.length < that.storeJobListSearchForm.pageSize
                        ) {
                            var jobListTemp = commonUtil.disposeJobListData(res.data.data.pageBean.recordList);
                            that.recordList = that.recordList.concat(jobListTemp);
                            that.setData({
                                recordList: that.recordList,
                                hasMoreData: false,
                                isTrigger: false
                            });
                        } else {
                            var jobListTemp = commonUtil.disposeJobListData(res.data.data.pageBean.recordList);
                            that.recordList = that.recordList.concat(jobListTemp);
                            that.setData({
                                recordList: that.recordList,
                                hasMoreData: true,
                                isTrigger: false
                            });
                        }
                        uni.hideLoading({
                            success: (res) => {}
                        });
                        that.setData({
                            loading: false,
                            pageShow: true,
                            storeJobListSearchForm: that.storeJobListSearchForm
                        });
                        resolve();
                        // that.getTag();

                        that.recordList.forEach((item, index) => {
                            console.log(item.storeDistrict);
                            item['citys'] = commonUtil.setJobInfoPosition(item.storeDistrict);
                            // console.log(item);
                            if (app.globalData.isNotEmptyCheck(item.returnFeeType) || item.returnFeeType == '0' || item.returnFee == '0') {
                                item['fuWuFei'] = commonUtil.getReturnFeeTypeName1ById(item.returnFeeType, item.returnFee);
                            } else {
                                item['fuWuFei'] = '';
                            }
                        });
                        that.setData({
                            recordList: that.recordList,
                            currentJobDrawer: that.currentJobDrawer
                        });
                        console.log(that.recordList);
                        // if (that.data.recordList.length < res.data.data.pageBean.recordCount) {
                        // 	that.setData({
                        // 		hasMoreData: true,
                        // 	});
                        // } else {
                        // 	that.setData({
                        // 		hasMoreData: false,
                        // 	});
                        // }
                    }
                });
            });
        },

        collectPaste(e) {
            var txt;
            var that = this;
            var collected = e.currentTarget.dataset.collected;
            var storeJobId = e.currentTarget.dataset.jobid;
            that.doCollected(collected, storeJobId);
        },

        doCollected(collected, storeJobId) {
            var that = this;
            var url = '/yishoudan/custom/job/collect/' + storeJobId;
            console.log(app.globalData.headers);
            //发起网络请求
            uni.request({
                url: app.globalData.ip + url,
                data: {
                    storeJobId: storeJobId
                },
                header: app.globalData.headers,
                method: 'GET',
                success: function (res) {
                    var txt;
                    if (collected - 1 == 0) {
                        //取消收藏
                        for (var i = 0; i != that.recordList.length; ++i) {
                            if (that.recordList[i].id - storeJobId == 0) {
                                that.recordList[i].collected = 2;
                                break;
                            }
                        }
                        txt = '取消收藏';
                        if (that.choiceCollect == 1) {
                            that.storeJobListSearchForm.pageNum = 1;
                            that.setData({
                                recordList: [],
                                storeJobListSearchForm: that.storeJobListSearchForm
                            });
                            that.getJobList();
                        }
                    } else {
                        //收藏
                        for (var i = 0; i != that.recordList.length; ++i) {
                            if (that.recordList[i].id - storeJobId == 0) {
                                that.recordList[i].collected = 1;
                                break;
                            }
                        }
                        txt = '收藏成功';
                    }
                    that.setData({
                        recordList: that.recordList
                    });
                    uni.showToast({
                        icon: 'none',
                        title: txt
                    });
                },
                fail: function (res) {
                    console.log('操作失败');
                }
            });
        },

        hidedrawershow(e) {
            console.log(e);
            this.setData({
                [e.detail.type]: false
            });
            uni.showTabBar({
                animation: false,
                success: (result) => {},
                fail: () => {},
                complete: () => {}
            });
        },

        recordBill(e) {
            console.log(e.currentTarget.dataset.job);
            this.setData({
                recordShow: true,
                currentInfo: e.currentTarget.dataset.job
            });
            console.log(this.recordShow);
            uni.hideTabBar({
                animation: false,
                success: (result) => {},
                fail: () => {},
                complete: () => {}
            });
            return;
            if (!this.isLogin) {
                uni.navigateTo({
                    url: '/pages/login/index'
                });
                return;
            }
            console.log(e.currentTarget.dataset.job);
            console.log(123);
            let middleInfo = e.currentTarget.dataset.job;
            let info = JSON.stringify({
                id: middleInfo.id,
                jobName: middleInfo.jobName,
                storeName: middleInfo.storeName,
                aliasName: middleInfo.aliasName,
                storeId: middleInfo.storeId
            });
            console.log(info);
            uni.navigateTo({
                url: `../newEnroll/enroll/index?applyType=1&info=${info}`
            });
            // wx.navigateTo({
            // 	url: `../newEnroll/enroll/index?applyType=1&info=${info}`,
            // });
        },

        touchStart() {
            console.log('占位：函数 touchStart 未声明');
        },

        onScrollToLower() {
            console.log('占位：函数 onScrollToLower 未声明');
        },

        listTouchStart() {
            console.log('占位：函数 listTouchStart 未声明');
        },

        listTouchMove() {
            console.log('占位：函数 listTouchMove 未声明');
        },

        scroll() {
            console.log('占位：函数 scroll 未声明');
        },

        stoptap() {
            console.log('占位：函数 stoptap 未声明');
        }
    }
};
</script>
<style>
@import './index.css';
</style>
