<template>
    <div class="page">
        <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 class="name" v-if="step === 1">
                <view class="t1">企业信息</view>
                <input type="text" v-model="formData.name" placeholder="请输入企业名称" />
            </view>
            <view class="name" v-if="step === 2">
                <view class="t1">信用代码</view>
                <input type="text" v-model="formData.creditCode" placeholder="请输入信用代码" />
            </view>
            <view class="image-upload" v-if="step === 3">
                <view class="t1">营业执照照片</view>
                <view class="t2">注：执照信息清晰可见，照片内容真实有效，不做任何修改，大小不超过10M</view>
                <image v-if="formData.licensePath" :src="evn.APP_IMAGE_BASE_API + 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 < 3" class="bottom-btn" @tap="nextStep">下一步</button>
            <template v-if="step === 3 && !!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 { useDefineStore } from "./store";
onLoad(() => {
    console.log(uni);
});
const { formData, setFormDataKey } = useDefineStore();
const step = ref(1);
const name = ref("");
const showPopout = ref(false);
const nextStep = () => {
    let flag = false;
    switch (step.value) {
        case 1:
            if (!formData.name) flag = true;
            break;
        case 2:
            if (!formData.creditCode) flag = true;
            break;
        case 3:
            wx.navigateTo({
                url: `/pages/user/businessLicense/submit`
            });
            break;
        default:
            break;
    }
    if (flag) {
        uni.showToast({
            title: "请先完成操作",
            icon: "none"
        });
        return;
    }
    step.value++;
};
/* 选择图片 */
const chooseImage = sourceType => {
    uni.chooseImage({
        sourceType: [sourceType],
        count: 1,
        success: async ({ tempFiles }) => {
            const res = await uploadFiles(tempFiles);
            setFormDataKey("licensePath", 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: 0 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;
    .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;
        }
    }
    .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>
