<template>
    <view>
        <view class="navigator" hover-class="none" :hover-stop-propagation="false">
            <view class="p10" style="background-color: #fff" hover-class="none" :hover-stop-propagation="false">
                <view class="weui-search-bar__box flex-1 fsa" style="background-color: #f5f5f5; border-radius: 17px; padding-left: 16px">
                    <i class="iconfont icon-sousuo"></i>
                    <input
                        type="text"
                        class="weui-search-bar__input flex-1 c3 ml8"
                        placeholder-style="color:#999;"
                        :value="inputVal"
                        placeholder="搜索职位名称"
                        @input="inputTyping"
                        @confirm="searchKey"
                        auto-focus
                        confirm-type="search"
                    />
                    <view class="iconfont icon-qingchu biggerSize c9 mr12" v-if="inputVal" @click.stop="clearInput"></view>
                    <view class="search" @click.stop="searchKey">搜索</view>
                </view>
            </view>
            <view class="topMenu">
                <view :class="'onMune ' + (currIndex == '0' ? 'active' : '')" data-id="0" @tap="changeMenu">
                    <view class="pr dib">
                        全部
                        <view class="menuBorder"></view>
                    </view>
                </view>
                <view :class="'onMune ' + (currIndex == '1' ? 'active' : '')" data-id="1" @tap="changeMenu">
                    <view class="pr dib">
                        在招中
                        <view class="menuBorder"></view>
                    </view>
                </view>
                <view :class="'onMune ' + (currIndex == '2' ? 'active' : '')" data-id="2" @tap="changeMenu">
                    <view class="pr dib">
                        已停招
                        <view class="menuBorder"></view>
                    </view>
                </view>
            </view>
        </view>
        <view class="p10" hover-class="none" :hover-stop-propagation="false">
            <view v-if="recordList != null && recordList.length > 0" class="standardList" style="padding-top: 0">
                <scroll-view
                    :scroll-y="true"
                    :enable-back-to-top="true"
                    @scrolltolower="onScrollToLower"
                    @refresherrefresh="onScrollRefresh"
                    :refresher-enabled="!isScrollTop"
                    :refresher-triggered="isTrigger"
                    class="jobCenterActive"
                    style="padding-bottom: 24px"
                    :scroll-with-animation="true"
                    :scroll-into-view="siv"
                    :style="
                        'height:calc(100vh - ' +
                        (selectBrandList.length > 0 || selectJobList.length > 0 || activez != 'all' || sexid != '-1'
                            ? navigatorBarHeight + 30
                            : navigatorBarHeight + (!isFilterPage ? 103 : 95)) +
                        'px);'
                    "
                >
                    <view :x:if="recordList != null && recordList.length > 0" class style="padding-top: 0">
                        <view class="jcenter">
                            <view class="listcontainer" style="">
                                <view
                                    class="mb10 bgf br4"
                                    hover-start-time="50"
                                    hover-stay-time="0"
                                    :data-id="item.id"
                                    @tap="goDetail"
                                    :hover-class="item.recruitment == '1' ? 'ahover' : ''"
                                    :style="'background-color:#fff;border-bottom: ' + (item.recruitment == '1' ? '' : '1px solid #ddd') + ';'"
                                    v-for="(item, index) in recordList"
                                    :key="index"
                                >
                                    <view class="p10 pt16" hover-class="none">
                                        <image
                                            class="markImg"
                                            style="width: 80px; height: 80px; position: absolute; right: 100px"
                                            src="http://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/tingzhao.svg"
                                            v-if="item.recruitment == 2"
                                        ></image>
                                        <view class="display-flex">
                                            <view class="flex-1 vsb">
                                                <view class="display-flex">
                                                    <view class="storeName" v-if="item.jobName != null && item.jobName != ''">{{ item.jobName }}</view>
                                                    <view class="storeName" v-else>{{ item.aliasName }}</view>
                                                    <view class="hourPay" v-if="item.salaryClassify != 7">{{ item.salaryClassifyValue }}</view>
                                                    <view class="hourPay" v-else>{{ item.monthlyPay }}</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>
                                                </view>
                                                <view class="display-flex" style="align-items: flex-end">
                                                    <view :scroll-x="true" :class="' ' + (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>
                                                    </view>
                                                    <view class="cccc f12" hover-class="none" :hover-stop-propagation="false">
                                                        {{ item.update }}
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>

                                    <view class="pb8 pt8 pl10 pr10 bt1 display-flex" style="">
                                        <mp-switch @change="changecheck" trueText="开招" :height="24" :width="60" falseText="停招" :item="item"></mp-switch>
                                        <view
                                            class="tac"
                                            @tap="showDraw"
                                            :data-item="item"
                                            style="width: 39px; height: 24px; border-radius: 12px; background-color: #f5f5f5"
                                            hover-class="none"
                                            :hover-stop-propagation="false"
                                        >
                                            <view class="iconfont icon-gengduo2 c9" style="transform: rotate(90deg)"></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>
                            <block v-if="isLogin">
                                <view class="tc p20 f12 c045" v-if="!hasMoreData || recordList.length == 0">已经到底啦～</view>
                                <view class="tc p20 f12 c045" v-else>上滑加载更多</view>
                            </block>
                        </block>
                    </view>
                </scroll-view>
            </view>

            <view v-if="recordList == null || (recordList.length == 0 && pageShow && !isWannaShow)" style="height: calc(100vh - 95px)" class="tc">
                <view class="t-icon t-icon-zanwu" style="width: 80px; height: 80px; margin: 50% auto 20px"></view>
                <view class="tc f14 c045">没有符合条件的职位</view>
            </view>
        </view>
    </view>
</template>

<script>
import mpSwitch from '../../../components/mp-switch/mp-switch';
// pages/mine/listManagement/index.js
const app = getApp();
const commonUtil = require('../../../utils/commonUtil.js');
const dateUtil = require('../../../utils/dateUtil.js');
export default {
    components: {
        mpSwitch
    },
    data() {
        return {
            chaShowed: false,
            inputVal: '',
            hasMoreData: true,

            //下拉是否还有更多数据
            navigatorBarHeight: 0,

            // 头部整体高度信息
            // editJobList: [
            //   "复制内容",
            //   "编辑",
            //   "删除"
            // ],
            editJobList: [
                '复制内容',
                // "编辑",
                '删除'
            ],

            totalPage: 0,
            currPage: 0,
            isTrigger: 0,
            pageShow: false,

            storeJobListSearchForm: {
                pageNum: 1,
                pageSize: 40,
                sortTag: 0,
                keys: ''
            },

            recordList: [],
            currIndex: 0,
            checked: false,
            isWannaShow: false,
            triggered: false,
            isScrollTop: '',
            siv: '',
            selectBrandList: [],
            selectJobList: [],
            activez: '',
            sexid: '',
            isFilterPage: false,
            isLogin: false
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getJobList();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        changecheck(e) {
            console.log(e);
            let id = e.detail.value.id;
            let ind = this.recordList.findIndex((item) => item.id == id);
            console.log(id);
            console.log(ind);
            this.recordList[ind].checked = !this.recordList[ind].checked;
            this.setData({
                recordList: this.recordList
            });
        },

        // 下拉加载更多
        onScrollToLower() {
            console.log('====================================================');
            var that = this;
            if (app.globalData.isLogin) {
                that.storeJobListSearchForm.pageNum = that.storeJobListSearchForm.pageNum + 1;
                if (that.hasMoreData) {
                    that.getJobList();
                }
            } else {
            }
        },

        showDraw(e) {
            let that = this;
            let item = e.currentTarget.dataset.item;
            uni.showActionSheet({
                itemList: that.editJobList,
                success: function (res) {
                    if (res.tapIndex == 0) {
                        that.getJobDetail(item.id);
                    }
                    //else if (res.tapIndex == 1) {
                    // uni.navigateTo({
                    //   url: "/root/home/jobForm?id=" + e.jobId,
                    // });
                    // that.delJob(item.id);
                    //}
                    else if (res.tapIndex == 1) {
                        that.delJob(item.id);
                    }
                },
                fail: function (res) {}
            });
        },

        /**
         * 获取职位详情
         */
        getJobDetail(id) {
            let that = this;
            uni.request({
                url: app.globalData.ip + '/assistant/custom/job/v2/getInfo/' + id,
                method: 'get',
                header: app.globalData.headers,
                success: function (res) {
                    console.log(res);
                    if (!res.data.data) {
                        uni.showToast({
                            title: '该职位无内容',
                            icon: 'none'
                        });
                    } else {
                        console.log('right', res);
                        uni.setClipboardData({
                            data: res.data.data,
                            success(res) {
                                uni.showToast({
                                    title: '内容已复制',
                                    icon: 'none',
                                    duration: 1500
                                });
                            },
                            fail(err) {}
                        });
                    }
                }
            });
        },

        /**
         * 删除职位
         */
        delJob(id) {
            let that = this;
            uni.showModal({
                content: '是否确定删除该职位',
                success: function (res) {
                    console.log(res);
                    if (res.confirm) {
                        uni.request({
                            url: app.globalData.ip + '/yishoudan/custom/job/del/' + id,
                            method: 'get',
                            header: app.globalData.headers,
                            success: function (res) {
                                console.log(res);
                                if (res.data.status == 200) {
                                    that.getJobList();
                                } else {
                                    uni.showToast({
                                        title: '删除失败',
                                        icon: 'none'
                                    });
                                }
                            }
                        });
                    }
                }
            });
        },

        changeMenu(e) {
            var that = this;
            that.storeJobListSearchForm.pageNum = 1;
            that.storeJobListSearchForm.recruitment = e.currentTarget.dataset.id;
            this.setData({
                currIndex: e.currentTarget.dataset.id,
                recordList: [],
                storeJobListSearchForm: this.storeJobListSearchForm
            });
            this.getJobList();
        },

        clearInput: function () {
            console.log('clearInput');
            this.setData({
                inputVal: '',
                chaShowed: false,
                hasMoreData: true
            });
            // this.inputBlur();
            this.recordList = [];
            this.storeJobListSearchForm.pageNum = 1;
            this.storeJobListSearchForm.keys = '';
            this.getJobList();
        },

        searchKey: function (e) {
            console.log(e);
            if (this.inputVal.trim() == '') {
                uni.showToast({
                    title: '请输入内容',
                    icon: 'none'
                });
            } else {
                this.setData({
                    isWannaShow: false,
                    recordList: []
                });
                console.log(this.placeholderText);
                this.storeJobListSearchForm.pageNum = 1;
                this.storeJobListSearchForm.keys = this.inputVal || this.placeholderText;
                this.setData({
                    inputVal: this.inputVal || this.placeholderText
                });
                this.getJobList();
                // this.setHistoryList();
            }
        },

        inputTyping: function (e) {
            console.log(e);
            this.setData({
                inputVal: e.detail.value
            });
            console.log(this.inputVal == '');
            if (this.inputVal == '') {
                this.setData({
                    recordList: []
                });
                this.storeJobListSearchForm.pageNum = 1;
                this.storeJobListSearchForm.keys = '';
                // this.getJobList();
            }
        },

        getJobList(e) {
            console.log(e);
            var that = this;
            // debugger
            return new Promise(function (resolve, reject) {
                console.log(that.inputVal);
                that.storeJobListSearchForm.keys = that.inputVal == '' ? '' : that.inputVal;
                that.storeJobListSearchForm.agencyId = uni.getStorageSync('storageSyncAgencyUserId');
                // debugger;
                uni.showLoading({
                    title: '加载中...'
                });
                console.log(that.storeJobListSearchForm);
                uni.request({
                    url: app.globalData.ip + '/assistant/custom/job/v2/list',
                    method: 'POST',
                    header: app.globalData.headers,
                    data: that.storeJobListSearchForm,
                    success: function (res) {
                        console.log('职位列表↓↓↓↓');
                        console.log(res);
                        that.setData({
                            totalPage: res.data.data.pageCount,
                            currPage: res.data.data.currentPage
                        });
                        setTimeout(function () {
                            that.setData({
                                triggered: false
                            });
                        }, 1000);
                        if (res.data.data.recordList == null || res.data.data.recordList.length == 0 || res.data.data.recordList.length < that.storeJobListSearchForm.pageSize) {
                            var jobListTemp = commonUtil.disposeJobListData(res.data.data.recordList);
                            that.recordList = that.recordList.concat(jobListTemp);
                            that.setData({
                                recordList: that.recordList,
                                hasMoreData: false,
                                isTrigger: false
                            });
                        } else {
                            var jobListTemp = commonUtil.disposeJobListData(res.data.data.recordList);
                            that.recordList = that.recordList.concat(jobListTemp);
                            that.setData({
                                recordList: that.recordList,
                                hasMoreData: true,
                                isTrigger: false
                            });
                        }
                        that.recordList.forEach((item) => {
                            item.update = dateUtil.timeShowXXX(item.updateTime);
                            item.checked = false;
                        });
                        that.setData({
                            recordList: that.recordList
                        });
                        uni.hideLoading({
                            success: (res) => {}
                        });
                        that.setData({
                            pageShow: true,
                            storeJobListSearchForm: that.storeJobListSearchForm
                        });
                        resolve();
                        // that.getTag();

                        that.recordList.forEach((item, index) => {
                            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
                        });
                        setTimeout(() => {
                            var query = uni.createSelectorQuery();
                            query.select('.navigator').boundingClientRect();
                            query.exec(function (res) {
                                //res就是 所有标签为v1的元素的信息 的数组
                                console.log(res);
                                //取高度
                                // console.log(res[0].height);
                                that.setData({
                                    navigatorBarHeight: res[0].height
                                });
                                console.log(that.navigatorBarHeight);
                            });
                        }, 1000);
                    }
                });
            });
        },

        onScrollRefresh: function () {
            var that = this;
            that.storeJobListSearchForm.pageNum = 1;
            that.setData({
                recordList: []
            });
            that.getJobList();
        },

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