<template>
    <NavBar :showIcon="true" :showTitle="true" title="营业执照认证" backgroundBox="#FFFFFF"></NavBar>
    <div class="page">
        <div class="audit-message">
            <p class="title" :style="{ background: status == 2 ? '#ff5113' : '#1F86FF' }">
                {{ status == 2 ? "审核拒绝" : status == 0 ? "待审核" : status == 1 ? "通过审核" : "" }}
            </p>
            <div class="message" :style="{ background: '#FFEDE7' }" v-if="status == 2">
                <p>拒绝原因</p>
                {{ companyInfo.message }}
            </div>
        </div>
        <view class="image-wrap">
            <div class="title" v-if="status == 2">重新提交</div>
            <image @click="chooseImage" v-if="myLicensePath" :src="evn.APP_IMAGE_BASE_API + myLicensePath" mode="" />
            <view>注：接受拍摄复印件，黑白复印需要加盖公章，大小不超过10M</view>
        </view>
        <view class="content-wrap">
            <view class="item1">
                <wd-input
                    type="text"
                    size="small"
                    :disabled="status != 2"
                    v-model="companyName"
                    placeholder="请输入企业全称"
                    :use-label-slot="true"
                    @input="handleChange($event, 'companyName')"
                >
                    <template #label>
                        <view class="label">企业全称</view>
                    </template></wd-input
                >
            </view>
            <view class="item1">
                <wd-input
                    type="text"
                    size="small"
                    :disabled="status != 2"
                    v-model="myCode"
                    placeholder="请输入信用代码"
                    :use-label-slot="true"
                    @input="handleChange($event, 'myCode')"
                >
                    <template #label>
                        <view class="label">信用代码</view>
                    </template></wd-input
                >
            </view>
        </view>
        <wd-tabbar
            v-if="[2].includes(status)"
            @click="submit"
            custom-style="display: flex;justify-content: center !important;z-index:1;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="foot-btn">提交</view>
        </wd-tabbar>
    </div>
</template>

<script setup>
import evn from "@/utils/config";
import { uploadFiles } from "@/utils/fileUpload";
import { getCompanyInfoApi, registerCompanyApi, companyReviewInfo, companyReviewUpdate } from "@/api/user";
import { ref } from "vue";
import dayjs from "dayjs";
const radio = ref(1);
const companyName = ref("");
const myCode = ref("");
const myLicensePath = ref("");
let status = ref(1);
let myLicenseValidityPeriod = ref(new Date().getTime());
let companyInfo = reactive({});
let minDate = ref(new Date().getTime());
let maxDate = ref(new Date().getTime() + 1000 * 60 * 60 * 24 * 365);

const pageStatus = ref(1);
function change(e) {
    console.log(e);
    if (e.value == 2) {
        myLicenseValidityPeriod.value = new Date().getTime();
    } else {
        myLicenseValidityPeriod.value = 4102329600000;
    }
}
onLoad(({ status }) => {
    pageStatus.value = status;

    if (status == 1) {
        getCompanyInfoApiFn();
    } else {
        companyReviewInfoFn();
    }
});
function getCompanyInfoApiFn() {
    getCompanyInfoApi().then(res => {
        companyInfo = res.data;
        status.value = res.data.status;
        myLicensePath.value = res.data.licensePath;
        companyName.value = res.data.companyName;
        myCode.value = res.data.creditCode;
        myLicenseValidityPeriod.value = res.data.licenseValidityPeriod;
    });
}

function companyReviewInfoFn() {
    companyReviewInfo().then(res => {
        companyInfo = res.data;
        status.value = res.data.status;
        myLicensePath.value = res.data.licensePath;
        companyName.value = res.data.companyName;
        myCode.value = res.data.creditCode;
        myLicenseValidityPeriod.value = res.data.licenseValidityPeriod;
    });
}
/* 选择图片 */
const chooseImage = () => {
    if (status.value == 2) {
        uni.chooseImage({
            count: 1,
            success: async ({ tempFiles }) => {
                const res = await uploadFiles(tempFiles);
                myLicensePath.value = res[0].key;
            }
        });
    }
};

const handleChange = (event, type) => {
    if (type == "companyName") {
        companyName.value = event.value;
    } else {
        myCode.value = event.value;
    }
};
const submit = () => {
    let { id, location } = companyInfo;
    registerCompanyApi({
        location,
        name: companyName.value,
        creditCode: myCode.value,
        licensePath: myLicensePath.value,
        id
    }).then(res => {
        if (res.code == 200) {
            uni.showToast({
                title: "提交成功",
                icon: "none"
            });
            uni.switchTab({
                url: "/pages/user/index"
            });
        } else {
            uni.showToast({
                title: res.message,
                icon: "error"
            });
        }
    });
};
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.foot-btn {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 622rpx;
    height: 80rpx;
    color: #ffffff;
    background: #1f86ff;
    border-radius: 12rpx;
}
.audit-message {
    .title {
        height: 80rpx;
        line-height: 80rpx;
        color: #ffffff;
        text-align: center;
    }
    .message {
        padding: 32rpx;
        font-size: 24rpx;
        font-weight: normal;
        line-height: 36rpx;
        color: #ff5113;
        background: #ff511316;
        p {
            margin-bottom: 16rpx;
            font-size: 32rpx;
            font-weight: 600;
        }
    }
}
.image-wrap {
    padding: 32rpx;
    border-bottom: 16rpx solid #f3f4f8;
    .title {
        margin-bottom: 16px;
        font-size: 32rpx;
        font-weight: 600;
        color: #1b2026;
    }
    image {
        width: 686rpx;
        height: 381.56rpx;
        border-radius: 12rpx;
    }
    view {
        margin-top: 36rpx;
        font-size: 24rpx;
        line-height: 36rpx;
        color: #a3a7b3;
    }
}
.content-wrap {
    flex: 1;
    padding: 0 32rpx;
    .item {
        display: flex;
        border-bottom: 2rpx solid #f3f4f8;
        padding: 32rpx 0;
        align-items: center;
        :deep(.wd-input) {
            padding: 0 0;
        }
        .label {
            flex: 0 0 184rpx;
            font-size: 24rpx;
            line-height: 36rpx;
            color: #77818f;
        }
        .content {
            font-size: 28rpx;
            line-height: 36rpx;
            color: #1b2026;
            .van-radio-group {
                display: flex;
                gap: 30rpx;
            }
        }
        .disabled {
            color: #cccccc;
        }
    }
    .item1 {
        border-bottom: 2rpx solid #f3f4f8;
        padding: 32rpx 0;
        align-items: center;
        :deep(.wd-input) {
            padding: 0 0;
        }
        :deep(.wd-input__label) {
            flex: 0 0 184rpx;
            margin-right: 0 !important
           ;
        }
        .label {
            font-size: 24rpx;
            line-height: 36rpx;
            color: #77818f;
        }
    }
}
.btn-wrap {
    padding: 16rpx 0;
    border-top: 2rpx solid rgb(31 35 41 / 15%);
}
.sumbit-error {
    position: relative;
    box-sizing: border-box;
    width: 600rpx;
    padding: 0 32rpx 32rpx;
    border-radius: 10rpx;
    image {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 30rpx;
        height: 30rpx;
    }
    .title {
        padding: 32rpx 0;
        font-size: 36rpx;
        font-weight: 600;
        line-height: 54rpx;
        color: #1b2026;
        text-align: center;
    }
    .info {
        font-family: "PingFang SC";
        font-size: 24rpx;
        line-height: 48rpx;
        text {
            color: #1f86ff;
        }
    }
    .btn {
        padding: 24rpx;
        padding-right: 36rpx;
        margin-top: 32rpx;
        border: 2rpx solid #dfe1e5;
        border-radius: 8rpx;
        .t1 {
            font-size: 28rpx;
            font-weight: 500;
            line-height: 36rpx;
            color: #1b2026;
        }
        .t2 {
            margin-top: 8rpx;
            font-size: 24rpx;
            line-height: 36rpx;
            color: #a3a7b3;
        }
        .arrow {
            border-color: #77818f;
        }
    }
}
</style>
