<template>
    <view class="container">
        <view>
            <view class="b">
                <view class="l">申请时间：{{ join.applyTime }}</view>
                <view class="r">状态：{{ join.applyStatusText }}</view>
            </view>
            <view class="b2" v-if="join.applyStatus == 2">
                <view class="">拒绝原因：{{ join.confirmReason }}</view>
            </view>
        </view>

        <view v-if="join.applyStatus == null || join.applyStatus == 2">
            <view class="fb-body">
                <textarea
                    class="content"
                    placeholder="请输入您的申请理由(请合伙人务必填写正确的公司全称)"
                    @input="contentInput"
                    maxlength="100"
                    :auto-focus="true"
                    :value="content"
                />
                <view class="text-count">{{ contentLength }}/100</view>
            </view>
            <view class="cell-wrapper">
                <van-cell title="申请人类型" :value="applyType" @tap.native="showPickerFun" />
            </view>
            <view class="fb-mobile">
                <view class="label">手机号码</view>
                <view class="mobile-box">
                    <input class="mobile" maxlength="11" type="number" placeholder="方便我们与你联系" @input="mobileInput" :value="mobile" />
                    <van-icon class="clear-icon" name="close" v-if="mobile.length > 0" @tap.native.stop.prevent="clearMobile" />
                </view>
            </view>
            <view class="fb-mobile">
                <view class="label">名称</view>
                <view class="mobile-box">
                    <input class="mobile" placeholder="申请人名称" @input="applyNameInput" :value="applyName" />
                    <van-icon class="clear-icon" name="close" v-if="applyName.length > 0" @tap.native.stop.prevent="clearCode" />
                </view>
            </view>
            <view class="fb-mobile">
                <view class="label">推荐码</view>
                <view class="mobile-box">
                    <input class="mobile" maxlength="11" type="number" placeholder="推荐码信息" @input="codeInput" :value="code" />
                    <van-icon class="clear-icon" name="close" v-if="code.length > 0" @tap.native.stop.prevent="clearCode" />
                </view>
            </view>

            <view class="fb-btn" @tap="submitFeedback">提交申请</view>

            <view class="tips">请记得完成合伙人协议签署</view>
        </view>
        <van-popup :show="showPicker" position="bottom">
            <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
        </van-popup>
    </view>
</template>

<script>
var util = require('../../../../utils/util.js');
var check = require('../../../../utils/check.js');
var api = require('../../../../config/api.js');
var app = getApp();
export default {
    data() {
        return {
            content: '',
            contentLength: 0,
            mobile: '',
            code: '',
            applyName: '',
            join: {
                applyTime: '',
                applyStatusText: '',
                applyStatus: 0,
                confirmReason: ''
            },
            applyType: '请选择',
            type: '',
            showPicker: false,
            applyNid: '',
            //申请人身份证
            columns: ['小家政合伙人', '自营门店', '阿姨小哥', '大客户', '公司BD', '引荐人']
        };
    },
    onLoad: function (options) {},
    onReady: function () {},
    onShow: function () {
        this.getList();
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        mobileInput: function (e) {
            this.setData({
                mobile: e.detail.value
            });
        },

        codeInput: function (e) {
            this.setData({
                code: e.detail.value
            });
        },

        applyNameInput: function (e) {
            this.setData({
                applyName: e.detail.value
            });
        },

        contentInput: function (e) {
            this.setData({
                contentLength: e.detail.cursor,
                content: e.detail.value
            });
        },

        clearMobile: function (e) {
            this.setData({
                mobile: ''
            });
        },

        clearCode: function (e) {
            this.setData({
                code: ''
            });
        },

        getList() {
            let that = this;
            util.request(api.JoinApplyList, {
                page: that.content,
                limit: that.mobile
            }).then(function (res) {
                if (res.errno === 0) {
                    console.log(res.data);
                    that.setData({
                        join: res.data
                    });
                }
            });
        },

        showPickerFun() {
            this.setData({
                showPicker: true
            });
        },

        onCancel: function () {
            this.setData({
                showPicker: false
            });
        },

        onConfirm: function (event) {
            this.setData({
                type: event.detail.index,
                applyType: event.detail.value,
                showPicker: false
            });
        },

        submitFeedback: function (e) {
            if (!app.globalData.hasLogin) {
                uni.navigateTo({
                    url: '/pages/auth/login/login'
                });
            }
            let that = this;
            if (that.content == '') {
                util.showErrorToast('请输入申请理由');
                return false;
            }
            if (that.applyType == '请选择') {
                util.showErrorToast('请选择申请人类型');
                return false;
            }
            if (that.mobile == '') {
                util.showErrorToast('请输入手机号码');
                return false;
            }
            if (that.applyName == '') {
                util.showErrorToast('请输入名称');
                return false;
            }
            if (!check.isValidPhone(this.mobile)) {
                // this.setData({
                //   mobile: ''
                // });
                util.showErrorToast('请输入正确的手机号码');
                return false;
            }
            uni.showLoading({
                title: '提交中...',
                mask: true,
                success: function () {}
            });
            util.request(
                api.JoinApply,
                {
                    mobile: that.mobile,
                    content: that.content,
                    code: that.code,
                    type: that.type,
                    applyName: that.applyName,
                    applyNid: that.applyNid
                },
                'GET'
            ).then(function (res) {
                uni.hideLoading();
                if (res.errno === 0) {
                    uni.showToast({
                        title: '感谢您的申请！',
                        icon: 'success',
                        duration: 2000,
                        complete: function () {
                            that.setData({
                                content: '',
                                contentLength: 0,
                                mobile: '',
                                code: '',
                                join: {
                                    applyTime: util.formatTime(new Date()),
                                    applyStatusText: '处理中',
                                    applyStatus: 1
                                }
                            });
                        }
                    });
                } else {
                    util.showErrorToast(res.errmsg);
                }
            });
        }
    }
};
</script>
<style>
page {
    background: #f4f4f4;
    min-height: 100%;
    display: flex;
}

.container {
    background: #f4f4f4;
    min-height: 100%;
    padding-top: 30rpx;
    width: 100%;
}

.fb-type {
    height: 104rpx;
    width: 100%;
    background: #fff;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 30rpx;
    padding-right: 30rpx;
}

.fb-type .type-label {
    height: 36rpx;
    flex: 1;
    color: #333;
    font-size: 28rpx;
}

.fb-type .type-icon {
    height: 36rpx;
    width: 36rpx;
}

.fb-body {
    width: 100%;
    background: #fff;
    height: 450rpx;
    padding: 18rpx 30rpx 64rpx 30rpx;
}

.fb-body .content {
    width: 100%;
    height: 400rpx;
    color: #333;
    line-height: 40rpx;
    font-size: 28rpx;
}

.fb-body .text-count {
    line-height: 30rpx;
    float: right;
    color: #666;
    font-size: 24rpx;
}

.fb-mobile {
    height: 162rpx;
    width: 100%;
}

.fb-mobile .label {
    height: 58rpx;
    width: 100%;
    padding-top: 14rpx;
    padding-bottom: 11rpx;
    color: #7f7f7f;
    font-size: 24rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    line-height: 33rpx;
}

.fb-mobile .mobile-box {
    height: 104rpx;
    width: 100%;
    color: #333;
    padding-left: 30rpx;
    padding-right: 30rpx;
    font-size: 24rpx;
    background: #fff;
}

.fb-mobile .mobile {
    top: 27rpx;
    left: 30rpx;
    height: 50rpx;
    width: 100%;
    color: #333;
    line-height: 50rpx;
    font-size: 24rpx;
    padding-top: 25rpx;
}

.fb-mobile .clear-icon {
    position: absolute;
    top: 27rpx;
    right: 30rpx;
    width: 48rpx;
    height: 48rpx;
    z-index: 2;
}

.fb-btn {
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    height: 90rpx;
    line-height: 98rpx;
    position: absolute;
    bottom: 25rpx;
    left: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    margin-left: 5%;
    text-align: center;
    /* padding-left: -5rpx; */
    font-size: 26rpx;
    border-top-left-radius: 50rpx;
    border-bottom-left-radius: 50rpx;
    border-top-right-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    letter-spacing: 3rpx;
    /* color: #f4f4f4;
  background-image: linear-gradient(to right, #242a48 0%, #242a48 100%); */
    color: #fff;
    background: #09afff;
}

.b {
    height: 53rpx;
    line-height: 53rpx;
    margin-left: 31.25rpx;
    padding-right: 31.25rpx;
    border-top: 1px solid #f4f4f4;
    font-size: 30rpx;
    background-color: #f4f4f4;
}
.b2 {
    height: 50rpx;
    line-height: 50rpx;
    margin-left: 31.25rpx;
    margin-bottom: 15rpx;
    padding-right: 31.25rpx;
    border-top: 1px solid #f4f4f4;
    font-size: 30rpx;
    background-color: #f4f4f4;
}
.b .l {
    float: left;
}

.b .r {
    float: right;
    color: red;
}
.tips {
    color: red;
    margin-top: 40rpx;
    margin-left: 30rpx;
}
.cell-wrapper {
    margin: 40rpx 0;
}
.cell-wrapper .van-cell__title {
    color: #7f7f7f;
}
view.van-ellipsis {
    color: #666;
}
</style>
