<template>
    <view>
        <!-- catchtouchmove="filterTouchMove" -->
        <form @submit="formSubmit" v-if="showClone">
            <view class="leftBox" hover-class="none" :hover-stop-propagation="false">
                <view class="mask" v-if="showClone" @touchmove.stop.prevent="modalMove" @tap="hideLeft"></view>
                <view :class="'hideBox ' + (showClone ? 'leftShow' : '')" v-if="touchClose" :style="'background-color:' + color" @touchstart="filterTouchStart">
                    <view class="tac fw500 por">
                        <!-- <slot name="title"></slot> -->
                        <view class="iconfont icon-guanbi11 f14 c9 poa" style="color: #333; right: 8px; top: -46px; width: 32px; height: 32px" @tap.stop.prevent="hideLeft"></view>
                    </view>
                    <!-- <slot></slot> -->
                    <view class="bgf container">
                        <view
                            class="weui-cells weui-cells_form"
                            style="display: flex; flex-direction: column; justify-content: space-between; margin-top: 0; height: calc(100% - 32px)"
                        >
                            <view class v-if="morePeople" style="height: calc(100%); overflow: auto">
                                <view class="fsa pt16 pb16 bb1" v-for="(item, index) in recordList" :key="index">
                                    <view class>
                                        <view class="fw500">{{ item.name + (item.gender ? '/' + item.gender : '') }}</view>
                                        <view class="c9">{{ item.tel }}</view>
                                    </view>

                                    <view class>
                                        <view
                                            class="iconfont icon-lajitong tac c6"
                                            style="font-size: 14px; background-color: #f6f6f6; width: 32px; height: 32px; border-radius: 50%; line-height: 32px"
                                            hover-class="thover"
                                            :hover-stop-propagation="true"
                                        ></view>
                                        <!-- <checkbox class value="{{item.checked}}" color></checkbox> -->
                                    </view>
                                </view>
                            </view>
                            <view class v-else>
                                <view class="weui-cell bb1 pb12">
                                    <view class="weui-cell__hd display-flex aic mb16" style="max-width: 80px">
                                        <label class="weui-label c9 f12">
                                            您的姓名
                                            <text class="cfred">*</text>
                                        </label>
                                    </view>
                                    <view class="weui-cell__bd fsa">
                                        <input
                                            class="weui-input f17 flex-1"
                                            type="text"
                                            name="userName"
                                            @input="bothwayBind"
                                            data-type="name"
                                            :value="userName"
                                            placeholder="请输入您的姓名"
                                            placeholder-class="input__placeholder cccc"
                                        />
                                        <view class="sexBox fss">
                                            <view :class="'sub mr12 ' + (sex == 1 ? 'subActive' : '')" @tap="changeSex" data-type="1">先生</view>
                                            <view :class="'sub ' + (sex == 2 ? 'subActive' : '')" @tap="changeSex" data-type="2">女士</view>
                                        </view>
                                    </view>
                                </view>

                                <!-- wx:if="{{info.agencyOperation == 1}}" -->
                                <view class="weui-cell bb1 pb12 pt12">
                                    <view class="weui-cell__hd display-flex aic mb16" style="max-width: 90px">
                                        <label class="weui-label c9 f12" @tap="uploadCard">
                                            您的身份证号
                                            <text class="cfred">*</text>
                                        </label>
                                    </view>
                                    <view class="weui-cell__bd display-flex">
                                        <input
                                            class="weui-input f17 flex-1 mr20"
                                            type="idcard"
                                            maxlength="18"
                                            name="idCard"
                                            :value="idCardNum"
                                            placeholder="请输入您的身份证号"
                                            placeholder-class="input__placeholder cccc"
                                        />
                                        <view class="t-icon t-icon-paizhao rightPz" @tap.stop.prevent="chooseIdCard"></view>
                                    </view>
                                </view>
                                <view class="weui-cell bb1 pb12 pt12">
                                    <view class="weui-cell__hd display-flex aic mb16" style="max-width: 80px">
                                        <label class="weui-label c9 f12">
                                            您的年龄
                                            <text class="cfred">*</text>
                                        </label>
                                    </view>
                                    <view class="weui-cell__bd">
                                        <picker @change="bindPickerChangeAge" style="width: 100%" :value="ageIndex" :range="ageArray">
                                            <view class="picker display-flex">
                                                <block v-if="ageIndex == -1">
                                                    <view class="ccc dib flex-1" style="color: #ccc">请选择年龄</view>
                                                </block>
                                                <block v-else>
                                                    <view class="c3 dib flex-1">{{ ageArray[ageIndex] }}</view>
                                                </block>
                                                <i class="iconfont icon-gengduo11 f16 dib pr c9 mr12" style="line-height: 1; top: 4px"></i>
                                            </view>
                                        </picker>
                                    </view>
                                </view>
                                <view class="weui-cell bb1 pb12 pt12">
                                    <view class="weui-cell__hd display-flex aic mb16" style="max-width: 80px">
                                        <label class="weui-label c9 f12">
                                            您的手机号
                                            <text class="cfred">*</text>
                                        </label>
                                    </view>
                                    <view class="weui-cell__bd">
                                        <input
                                            class="weui-input f17"
                                            type="number"
                                            maxlength="11"
                                            name="tel"
                                            :value="tel"
                                            placeholder="请输入您的手机号"
                                            placeholder-class="input__placeholder cccc"
                                        />
                                    </view>
                                </view>
                                <view class="weui-cell bb1 pb12 pt12">
                                    <view class="weui-cell__hd display-flex aic mb16" style="max-width: 90px">
                                        <label class="weui-label c9 f12">
                                            预约面试时间
                                            <text class="cfred">*</text>
                                        </label>
                                    </view>
                                    <view class="weui-cell__bd">
                                        <picker
                                            mode="multiSelector"
                                            :range="dateTimeArray"
                                            :value="dateTime"
                                            @change="changeDateTime"
                                            @columnchange="changeDateTimeColumn"
                                            style="color: #333"
                                        >
                                            {{ !!currentTime ? currentTime : '----' }}
                                            <i class="iconfont icon-rili f16 ml4 dib pr c9" style="line-height: 1"></i>
                                        </picker>
                                    </view>
                                </view>
                                <view class="weui-cell pb12 pt12">
                                    <view class="weui-cell__hd display-flex aic mb16" style="max-width: 80px">
                                        <label class="weui-label c9 f12">备注</label>
                                    </view>
                                    <view class="weui-cell__bd">
                                        <input class="weui-input f17" type="text" name="desp" placeholder="请输入备注" placeholder-class="input__placeholder cccc" />
                                    </view>
                                </view>
                            </view>
                            <view class="sticky" style="margin-bottom: 32px">
                                <!-- <view class="f16 poa" style="top:-320px" bindtap="handlerMore">多人报名切换</view>
          <button class="bgf pt12 pb12 mb16" style="width: 100%; color:#0DCC91" hover-class="thover" bindtap="addPersion">
            <i class="iconfont icon-tianjia3 mr8 fw400"></i>选择报名人
            </button>-->

                                <button :class="'loginOut mt0 ' + (disabled ? 'disabled' : '')" style="width: 100%" formType="submit" hover-class="thover">立即报名</button>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- <view class="hideBox {{show ? 'leftShow':''}}" wx:else style="height: {{height}};background-color:{{color}}">
    <view class="tac bb1 fw500 por">
      <slot name="title"></slot>
      <view class="iconfont icon-guanbi11 f14 c9 poa" wx:if="{{cancerShow}}" style="color:#333;right:8px;top:16px;width:32px;height:32px" catchtap="hideLeft"></view>
    </view>
    <slot></slot>
    </view>-->
            </view>
        </form>
    </view>
</template>

<script>
const app = getApp();
const mydate = new Date();
var dateUtil = require('../../utils/dateUtil.js');
var dateTimePicker = require('../../utils/dateTimePicker.js');
export default {
    data() {
        return {
            disabled: false,
            idCardImageUrl: '',
            idCardNum: '',
            tel: '',
            userName: '',
            dateTime: '',
            currentTime: dateUtil.formatDateYMD(mydate.toLocaleDateString()),
            copyTime: dateUtil.formatDateYMD(mydate.toLocaleDateString()),
            sex: 1,
            ageArray: [],
            ageIndex: -1,
            morePeople: false,

            recordList: [
                {
                    id: 0,
                    name: '李红霞',
                    tel: 13488887125,
                    gender: '女',
                    checked: false
                },
                {
                    id: 1,
                    name: '张卫国',
                    tel: 13488887125,
                    gender: '男',
                    checked: false
                },
                {
                    id: 2,
                    name: '王丽丽',
                    tel: 13488887125,
                    gender: '男',
                    checked: false
                },
                {
                    id: 3,
                    name: '王丽丽',
                    tel: 13488887125,
                    gender: '男',
                    checked: false
                },
                {
                    id: 4,
                    name: '王丽丽',
                    tel: 13488887125,
                    gender: '男',
                    checked: false
                }
            ],

            dateTimeArray: '',

            userInfo: {
                age: ''
            },

            isShow: false,
            color: '',
            infoClone: '',
            showClone: false
        };
    },
    props: {
        // 抽屉高度
        height: {
            type: String,
            default: ''
        },
        drawerType: {
            type: String,
            default: ''
        },
        //抽屉显示隐藏
        show: {
            type: Boolean,
            default: false
        },
        titleText: {
            type: String,
            default: ''
        },
        // 是否需要显示tabbar
        hideTabbar: {
            type: Boolean,
            default: false
        },
        cancerShow: {
            type: Boolean,
            default: true
        },
        //
        touchClose: {
            type: Boolean,
            default: true
        },
        info: {
            type: Object,
            default: () => ({})
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    methods: {
        ready() {
            let that = this;
            console.log('this.data.info', this.info);
            console.log('app.globalData.loginUserInfo', app.globalData.loginUserInfo);
            for (let i = 16; i < 70; i++) {
                that.ageArray.push(i);
            }
            this.setData({
                ageArray: that.ageArray,
                infoClone: that.info
            });
            // 监听弹窗的显示与隐藏
            Object.defineProperty(that, 'show', {
                enumerable: true,
                configurable: true,

                set(val) {
                    console.log(val); //打印设置好的值
                    if (val) {
                        that.setData({
                            tel: app.globalData.loginUserInfo.tel,
                            userName: app.globalData.loginUserInfo.user.realName,
                            idCardNum: app.globalData.loginUserInfo.user.idcard
                        });
                    }
                }
            });
            let hour = new Date().getHours();
            if (hour < 20 && hour >= 6) {
                if (that.currentTime == that.copyTime) {
                    that.currentTime = that.currentTime + ' ' + (hour + 1) + ':00';
                }
            } else if (hour >= 20) {
                if (that.currentTime == that.copyTime) {
                    that.currentTime = that.currentTime + ' ' + '19:30';
                }
            } else if (hour < 6) {
                if (that.currentTime == that.copyTime) {
                    that.currentTime = that.currentTime + ' ' + '6:00';
                }
            }
            this.setData({
                currentTime: that.currentTime
            });
            var obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear, this.currentTime);
            console.log(obj);
            console.log(obj.dateTimeArray);
            for (let index = 0; index < obj.dateTimeArray[0].length; index++) {
                obj.dateTimeArray[0][index] = obj.dateTimeArray[0][index] + '年';
            }
            for (let index = 0; index < obj.dateTimeArray[1].length; index++) {
                obj.dateTimeArray[1][index] = obj.dateTimeArray[1][index] + '月';
            }
            for (let index = 0; index < obj.dateTimeArray[2].length; index++) {
                obj.dateTimeArray[2][index] = obj.dateTimeArray[2][index] + '日';
            }
            this.setData({
                dateTimeArray: obj.dateTimeArray,
                dateTime: obj.dateTime
            });
        },

        changeDateTime(e) {
            var dateTimeArray = this.dateTimeArray;
            var dateTime = e.detail.value;
            this.setData({
                // dateTime: e.detail.value,
                currentTime:
                    dateTimeArray[0][dateTime[0]].replace('年', '') +
                    '-' +
                    dateTimeArray[1][dateTime[1]].replace('月', '') +
                    '-' +
                    dateTimeArray[2][dateTime[2]].replace('日', '') +
                    ' ' +
                    dateTimeArray[3][dateTime[3]]
            });
        },

        changeDateTimeColumn(e) {
            console.log(e);
            console.log(e.detail.value);
            console.log(e.detail.column);
            var arr = this.dateTime;
            var dateArr = this.dateTimeArray;
            console.log(arr);
            console.log(dateArr);
            arr[e.detail.column] = e.detail.value;
            console.log(dateArr[0][arr[0]], dateArr[1][arr[1]]);
            dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
            for (let index = 0; index < dateArr[2].length; index++) {
                dateArr[2][index] = dateArr[2][index] + '日';
            }
            // .replace("年",'').replace("月",'').replace("日",'')
            this.setData({
                dateTimeArray: dateArr,
                dateTime: arr
            });
        },

        bindPickerChangeAge(e) {
            this.setData({
                ageIndex: e.detail.value,
                ['userInfo.age']: parseInt(e.detail.value) + 16
            });
        },

        formSubmit(e) {
            let that = this;
            console.log(e.detail.value);
            if (e.detail.value.userName == '') {
                uni.showToast({
                    icon: 'none',
                    title: '请输入姓名'
                });
                return;
            }
            if (e.detail.value.tel == '') {
                uni.showToast({
                    icon: 'none',
                    title: '请输入手机号'
                });
                return;
            }
            var reg = /^1[3|4|5|6|9|7|8][0-9]\d{8}$/;
            if (reg.test(e.detail.value.tel) == false) {
                uni.showToast({
                    icon: 'none',
                    title: '请输入正确的手机号'
                });
                return;
            }
            // if (that.data.info.agencyOperation == 2) {
            if (that.ageIndex == -1) {
                uni.showToast({
                    icon: 'none',
                    title: '请选择年龄'
                });
                return;
            }
            e.detail.value.age = parseInt(that.ageIndex) + 16;
            e.detail.value.sex = that.sex;
            // } else {
            if (e.detail.value.idCard == '') {
                uni.showToast({
                    icon: 'none',
                    title: '请输入身份证号'
                });
                return;
            }
            var regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            if (regIdCard.test(e.detail.value.idCard) == false) {
                uni.showToast({
                    icon: 'none',
                    title: '请输入正确的身份证号'
                });
                return;
            }
            e.detail.value.interviewTimeStr = that.currentTime;
            // }
            if (that.idCardImageUrl != '') {
                e.detail.value.idCardImageUrl = that.idCardImageUrl;
            }
            e.detail.value.jobId = that.info.id;
            that.setData({
                disabled: true
            });
            console.log('form发生了submit事件，携带数据为：', e.detail.value);
            uni.request({
                url: app.globalData.ip + '/yishoudan/common/order/add',
                data: e.detail.value,
                header: app.globalData.headers,
                method: 'POST',
                success: function (res) {
                    console.log(res);
                    if (res.data.status == 200) {
                        uni.showToast({
                            icon: 'none',
                            title: '报名成功'
                        });
                        that.setData({
                            showClone: false,
                            ageIndex: -1,
                            disabled: false,
                            idCardNum: ''
                        });
                        uni.showTabBar({
                            animation: false,
                            success: (result) => {},
                            fail: () => {},
                            complete: () => {}
                        });
                    } else {
                        that.setData({
                            disabled: false
                        });
                        uni.showToast({
                            icon: 'none',
                            title: res.data.msg
                        });
                    }
                }
            });
        },

        /**
         * 阻止滑动穿透
         *
         *
         */
        modalMove() {
            // console.log(this.data.color);
            return false;
        },

        // 触摸开始事件
        handletouchtart: function (event) {
            this.lastX = event.touches[0].pageX;
            this.lastY = event.touches[0].pageY;
        },

        filterTouchStart(event) {
            this.handletouchtart(event);
        },

        filterTouchMove(event) {
            let tx = this.handletouchmove(event);
            if (this.touchClose) {
                if (tx.ty > 100) {
                    this.hideLeft();
                }
            } else {
                return false;
            }
        },

        /**
         * 页面滑动事件监听
         *
         *
         */
        handletouchmove: function (event) {
            let that = this;
            var currentX = event.touches[0].pageX;
            var currentY = event.touches[0].pageY;
            var tx = currentX - this.lastX;
            var ty = currentY - this.lastY;
            //左右方向滑动
            if (Math.abs(tx) > Math.abs(ty)) {
                return {
                    tx
                };
            }
            //上下方向滑动
            else {
                return {
                    ty
                };
            }
        },

        hideLeft() {
            // this.data.show = false
            this.setData({
                ageIndex: -1,
                idCardNum: ''
            });
            var eventDetail = {
                type: this.drawerType
            };
            this.$emit('hidedrawer', {
                detail: eventDetail
            });
            if (this.hideTabbar) {
                setTimeout(() => {
                    this.getTabBar().setData({
                        isShow: true
                    });
                }, 200);
            }
        },

        changeSex(e) {
            this.setData({
                sex: e.currentTarget.dataset.type
            });
        },

        addPersion() {
            uni.navigateTo({
                url: '/pages/mine/vitaeList/index?type=add'
            });
        },

        handlerMore() {
            this.setData({
                morePeople: !this.morePeople
            });
        },

        chooseIdCard() {
            var that = this;
            console.log('ischoise');
            uni.chooseMedia({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success(res) {
                    console.log(res);
                    // debugger;
                    that.uploadIdcardImg(res);
                }
            });
        },

        uploadIdcardImg(imgPath) {
            let that = this;
            // tempFilePath可以作为img标签的src属性显示图片
            let filePath;
            console.log('22222222222222222');
            console.log(imgPath);
            if (imgPath.tempFiles[0].tempFilePath) {
                filePath = imgPath.tempFiles[0].tempFilePath;
            } else {
                filePath = imgPath;
            }
            console.log(filePath);
            uni.showLoading({
                title: '识别中...'
            });
            uni.uploadFile({
                // url: app.globalData.ip + '/commons/idCardOcrRecognize',
                url: app.globalData.ip + '/commons/idCardOcrRecognizeAndUploadToAliyunOss',
                filePath,
                name: 'uploadFile',
                header: app.globalData.headers,
                success: function (res) {
                    console.log('9999999999');
                    console.log(res);
                    if (res.statusCode == 413) {
                        uni.showToast({
                            duration: 2000,
                            title: '身份证未识别',
                            icon: 'none',
                            mask: true
                        });
                        return;
                    }
                    var idcard = JSON.parse(res.data);
                    console.log(idcard);
                    if (idcard.status == 200) {
                        that.setData({
                            idCardNum: idcard.data.num,
                            idCardImageUrl: idcard.data.idCardImageUrl
                        });
                    } else {
                        uni.showToast({
                            duration: 2000,
                            title: '身份证未识别',
                            icon: 'none',
                            mask: true
                        });
                    }
                    uni.hideLoading();
                },
                fail: function (res) {
                    console.log('99999999998');
                    console.log(res);
                    uni.hideLoading();
                    uni.showToast({
                        duration: 2000,
                        title: '身份证未识别',
                        icon: 'none',
                        mask: true
                    });
                }
            });
        },

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

        uploadCard() {
            console.log('占位：函数 uploadCard 未声明');
        }
    },
    created: function () {},
    watch: {
        info: {
            handler: function (newVal, oldVal) {
                this.infoClone = newVal;
            },

            immediate: true,
            deep: true
        },

        show: {
            handler: function (newVal, oldVal) {
                this.showClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
