<template>
    <div class="page">
        <NavBar
            backIcon="#ffffff"
            :showIcon="true"
            :showTitle="true"
            title="添加企业"
            backgroundBox="#1F86FF"
            textColor="#ffffff"
        ></NavBar>
        <view class="welcome flex-between">
            <view class="text">
                <view class="t1">Welcome</view>
                <view class="t2">进入乐业观山湖</view>
            </view>
            <image src="@/static/image/businessLicense/hi.png"></image>
        </view>
        <view class="content">
            <view v-if="step === 1">
                <view class="t1">个人信息</view>
                <div class="content1">
                    <div class="item flex-between">
                        <p class="label">头像</p>
                        <div class="flex-align-center" @click="chooseImage">
                            <image
                                v-if="params.avatarPath"
                                class="avatar"
                                :src="evn.APP_IMAGE_BASE_API + params.avatarPath"
                                mode=""
                            />
                            <image v-else class="avatar" src="@/static/image/user/default-avatar.png" mode="" />
                            <div class="arrow"></div>
                        </div>
                    </div>
                    <div class="item">
                        <p class="label">姓名<text class="red">*</text></p>

                        <input type="text" v-model="params.name" placeholder="请输入姓名" />
                    </div>
                    <div class="item">
                        <p class="label">职位<text class="red">*</text></p>
                        <input type="text" v-model="params.position" placeholder="请输入职位" />
                    </div>
                    <div class="item">
                        <p class="label">电话<text class="red">*</text></p>
                        <input type="number" v-model="params.phone" placeholder="请输入电话" />
                    </div>
                </div>
            </view>
            <view class="name" v-if="step === 2">
                <view class="t1">账户申述</view>
                <textarea v-model="appealMessage" placeholder="请填写申述理由" />
            </view>
            <view class="image-upload" v-if="step === 3">
                <view class="t1">营业执照照片</view>
                <view class="t2">注：执照信息清晰可见，照片内容真实有效，不做任何修改，大小不超过10M</view>
                <image v-if="pinias.formData.licensePath" :src="evn.APP_IMAGE_BASE_API + pinias.formData.licensePath" mode="" />
                <image v-else @click="showPopout = true" src="@/static/image/businessLicense/businessLicenseUpload.png" mode="" />
            </view>
        </view>
        <view class="btn-wrap flex-center">
            <button v-if="step == 1" class="bottom-btn" @tap="nextStep">下一步</button>
            <button v-if="step == 2" class="bottom-btn" @tap="nextStep">提交</button>
            <template v-if="step === 3 && !!pinias.formData.licensePath">
                <button class="reupload" @tap="showPopout = true">重新上传</button>
                <button class="next" @tap="nextStep">下一步</button>
            </template>
        </view>
        <!-- 选择营业执照 -->
        <wd-overlay :show="showPopout" @click="showPopout = false">
            <view class="popout-wrap" @click.stop>
                <view class="tips">
                    <view class="title">营业执照拍摄技巧</view>
                    <view class="flex-between">
                        <image src="@/static/image/businessLicense/template.png" mode="" />
                        <view class="text-wrap">
                            <view>1.确保页面<text class="orange">【文字区域】</text>拍摄清晰</view>
                            <view class="m16">2.如果光线足够可以关闭闪光灯<text class="orange">【避免反光】</text></view>
                            <view>3.文件边框不可缺</view>
                        </view>
                    </view>
                </view>
                <view class="select-list">
                    <view class="item" @tap="chooseImage('camera')">拍照</view>
                    <view class="item" @tap="chooseImage('album')">从手机相册选择</view>
                    <view class="item" @tap="showPopout = false">取消</view>
                </view>
            </view>
        </wd-overlay>
    </div>
</template>

<script setup>
import { ref } from "vue";
import evn from "@/utils/config";
import { uploadFiles } from "@/utils/fileUpload";
import { validateForm } from "@/utils/utils";
import { ocrLicense, getLoginUserApi, saveBasicInfoApi, userAppeal } from "@/api/user.js";
import { useDefineStore } from "./store";
const pinias = useDefineStore();
const params = reactive({
    avatarPath: "",
    name: "",
    phone: "",
    position: ""
});
const appealMessage = ref(null);
onLoad(({ steps }) => {
    step.value = steps * 1;
});
let step = ref(1);
const name = ref("");
const showPopout = ref(false);

onShow(() => {
    if (step.value === 1) {
        getLoginUserApiFn();
    }
});
function ocrLicenseFn(uri) {
    return ocrLicense({ uri }).then(res => {
        if (res.code == 200) {
            pinias.setFormDataKey("name", res.data.name);
            pinias.setFormDataKey("creditCode", res.data.regNum);
            pinias.setFormDataKey("location", res.data.address);
        }
    });
}
function getLoginUserApiFn() {
    getLoginUserApi().then(user => {
        if (user.code == 200 && user.data) {
            const { avatarPath, name, phone, position } = user.data;
            params.avatarPath = avatarPath;
            params.name = name;
            params.phone = phone;
            params.position = position;
            if (step.value !== 2) {
                if (name) {
                    step.value = 3;
                }
            }
        }
    });
}
/**
 * 保存用户信息
 */
function saveBasicInfoApiFn() {
    xma.showLoading({
        title: "提交中...",
        mask: true
    });
    if (validateForm(params, ["name", "phone", "position"])) {
        return saveBasicInfoApi(params).then(res => {
            xma.hideLoading();
            if (res.code == 200) {
                step.value = 3;
                return false;
            } else {
                return true;
            }
        });
    } else {
        return true;
    }
}
const nextStep = () => {
    let flag = false;
    switch (step.value) {
        case 1:
            flag = saveBasicInfoApiFn();
            break;
        case 2:
            if (!appealMessage.value) {
                flag = true;
            } else {
                userAppeal({ appealMessage: appealMessage.value }).then(res => {
                    if (res.code == 200) {
                        uni.showModal({
                            title: "申诉中",
                            content: "您的申述已提交请等待审核",
                            showCancel: false,
                            confirmText: "好的",
                            success: function (confirm) {
                                if (confirm.confirm) {
                                    xma.navigateTo({
                                        url: "/pages/login/index"
                                    });
                                }
                            }
                        });
                    }
                });
            }

            break;
        case 3:
            xma.navigateTo({
                url: `/pages/user/businessLicense/submit`
            });
            break;
        default:
            break;
    }
};
/* 选择图片 */
const chooseImage = sourceType => {
    uni.chooseImage({
        sourceType: [sourceType],
        count: 1,
        success: async ({ tempFiles }) => {
            const res = await uploadFiles(tempFiles);
            if (step.value == 1) {
                params.avatarPath = res[0].key;
            } else {
                pinias.setFormDataKey("licensePath", res[0].key);
                ocrLicenseFn(res[0].key);
                showPopout.value = false;
            }
        }
    });
};
</script>

<style></style>
<style lang="scss" scoped>
:deep(.uni-page-head-hd) {
    display: none;
}
.page {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;

    // padding-top: 54rpx;
    background-color: #1f86ff;
}
.welcome {
    padding: 54rpx 80rpx 0 66rpx;
    image {
        width: 164rpx;
        height: 164.46rpx;
    }
    .t1 {
        font-size: 48rpx;
        line-height: 40rpx;
        color: #ffffff;
    }
    .t2 {
        margin-top: 26rpx;
        font-size: 48rpx;
        line-height: 40rpx;
        color: #ffffff;
    }
}
.content {
    flex: 1;
    padding: 80rpx 32rpx 0;
    margin-top: 52rpx;
    background-color: #ffffff;
    border-top-left-radius: 80rpx;
    border-top-right-radius: 80rpx;
    .item {
        display: flex;
        align-items: center;

        // justify-content: space-between;
        padding: 16px 0;
        border-bottom: 1px solid #f3f4f8;
        .label {
            flex: 0 0 100px;
            font-size: 12px;
            font-weight: 500;
            line-height: 18px;
            color: #77818f;
            .red {
                color: red;
            }
        }
        input {
            font-size: 14px;
            font-weight: normal;
            line-height: 18px;
            color: #1b2026;
        }
        image {
            width: 28px;
            height: 28px;
            border-radius: 50%;
        }
    }
    .t1 {
        font-size: 32rpx;
        line-height: 54rpx;
        color: #1b2026;
    }
    .t2 {
        font-size: 24rpx;
        line-height: 36rpx;
        color: #a3a7b3;
    }
    .name {
        input {
            padding: 32rpx 0 16rpx;
            margin-top: 16rpx;
            border-bottom: 2rpx solid #f3f4f8;
        }
        textarea {
            position: relative;
            box-sizing: border-box;
            width: 686rpx;
            height: 272rpx;
            padding: 32rpx;
            padding-bottom: 54rpx;
            margin-top: 32rpx;
            background: #f2f5fb;
            border-radius: 8rpx;
            opacity: 1;
            text {
                position: absolute;
                right: 20rpx;
                bottom: 16rpx;
                font-size: 24rpx;
                color: #77818f;
            }
        }
    }
    .image-upload {
        .t2 {
            margin-top: 16rpx;
        }
        image {
            width: 686rpx;
            height: 386rpx;
            margin-top: 84rpx;
        }
    }
}
.popout-wrap {
    .tips {
        padding: 32rpx 0 94rpx;
        background-color: #ffffff;
        border-top-left-radius: 16rpx;
        border-top-right-radius: 16rpx;
        .title {
            margin: 0 0 70rpx;
            font-size: 36rpx;
            font-weight: 600;
            line-height: 54rpx;
            color: #1b2026;
            text-align: center;
        }
        image {
            width: 340rpx;
            height: 222rpx;
        }
        .flex-between {
            padding: 0 32rpx 0 16rpx;
            .text-wrap {
                margin-left: 10rpx;
            }
            .m16 {
                margin: 32rpx 0;
            }
            .orange {
                color: #ff561b;
            }
            view {
                font-size: 24rpx;
                line-height: 36rpx;
                color: #1b2026;
            }
        }
    }
    .select-list {
        margin-top: 14rpx;
        text-align: center;
        background-color: #ffffff;
        .item {
            height: 108rpx;
            line-height: 108rpx;
            &:not(:first-child) {
                border-top: 2rpx solid #f3f4f8;
            }
        }
    }
}
.btn-wrap {
    box-sizing: border-box;
    height: 112rpx;
    padding: 16rpx 0;
    background-color: #ffffff;
    border-top: 2rpx solid rgb(31 35 41 / 15%);
    .next,
    .reupload {
        width: 294rpx;
        height: 80rpx;
        margin: 0;
        font-size: 30rpx;
    }
    .next {
        margin-left: 64rpx;
        color: #ffffff;
        background-color: #1f86ff;
    }
    .reupload {
        color: #1f86ff;
        background: #1f86ff22;
    }
}
.wd-transition {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
</style>
