<template>
    <div class="page">
        <NavBar :showIcon="true" :showTitle="true" title="企业申诉"></NavBar>
        <view class="appealing-name"> 申诉企业：{{ name }} </view>
        <view class="appealing-user-name">
            <view>申述人姓名</view>
            <input type="text" v-model="params.realName" placeholder="请输入你的真实姓名" />
        </view>
        <view class="appealing-content">
            <view>申诉内容</view>
            <textarea v-model="params.content" maxlength="300" placeholder="请输入你的申诉内容，不少于5个字">
        <text>{{ params.content.length }}/300</text>
    </textarea
            >
        </view>
        <view class="image-upload">
            <view class="flex-between">
                <view>
                    <image v-if="params.licensePath" :src="evn.APP_IMAGE_BASE_API + params.licensePath" @tap="chooseImage(1)" />
                    <image v-else src="@/static/image/businessLicense/appealingLicense.png" @tap="chooseImage(1)" />
                    <view>点击上传营业执照</view>
                </view>
                <view>
                    <image v-if="params.idCardPath" :src="evn.APP_IMAGE_BASE_API + params.idCardPath" @tap="chooseImage(2)" />
                    <image v-else src="@/static/image/businessLicense/appealingIdcard.png" @tap="chooseImage(2)" />
                    <view>点击上传法人身份证</view>
                </view>
            </view>
            <view class="t1"> 请上传企业营业执照和法人身份证正面照片 </view>
            <view class="t1"> (注：图片大小不超过10M） </view>
        </view>
        <wd-tabbar
            @tap="next"
            v-if="status == 2"
            custom-style="display: flex;justify-content: center !important;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="foot-btn" @tap="submit">提交</view>
        </wd-tabbar>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { uploadFiles } from "@/utils/fileUpload";
import evn from "@/utils/config";
import { companyAppealApi, appealInfo } from "@/api/user";
import _ from "lodash";
const name = ref("");
const params = reactive({
    realName: "",
    licensePath: "",
    idCardPath: "",
    content: "",
    companyId: 1
});
let status = ref(2);
onLoad(data => {
    name.value = data.name;
    params.companyId = data.id;
    appealInfoFn();
});
/* 选择图片 */
const chooseImage = type => {
    uni.chooseImage({
        count: 1,
        success: async ({ tempFiles }) => {
            const res = await uploadFiles(tempFiles);
            if (type == 1) {
                // 上传营业执照
                params.licensePath = res[0].key;
            } else {
                // 上传法人身份证
                params.idCardPath = res[0].key;
            }
        }
    });
};

const appealInfoFn = () => {
    appealInfo().then(res => {
        if (res.data) {
            params.companyId = res.data.companyId;
            name.value = res.data.companyName;
            params.realName = res.data.realName;
            params.content = res.data.content;
            params.licensePath = res.data.licensePath;
            params.idCardPath = res.data.idCardPath;
            status.value = res.data.status;
        }
    });
};

const submit = () => {
    let flag = true;
    _.mapValues(params, value => {
        flag = !!value && flag;
        return value;
    });
    if (flag) {
        companyAppealApi(params).then(res => {
            if (res.code == 200) {
                uni.showToast({
                    title: "提交成功",
                    icon: "none"
                });
            }
            uni.switchTab({
                url: "/pages/user/index"
            });
        });
    } else {
        uni.showToast({
            title: "请填写完整信息",
            icon: "none"
        });
    }
};
</script>

<style lang="scss" scoped>
.appealing-name {
    padding: 32rpx;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 36rpx;
    color: #1b2026;
    border-bottom: 16rpx solid #f3f4f8;
}
.appealing-user-name {
    padding: 32rpx;
    view {
        font-size: 32rpx;
        font-weight: 600;
        line-height: 36rpx;
        color: #1b2026;
    }
    input {
        margin-top: 32rpx;
    }
}
.foot-btn {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 622rpx;
    height: 80rpx;
    color: #ffffff;
    background: #1f86ff;
    border-radius: 12rpx;
}
.appealing-content {
    padding: 32rpx;
    view {
        font-size: 32rpx;
        font-weight: 600;
        line-height: 36rpx;
        color: #1b2026;
    }
    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 {
    padding: 0 32rpx;
    .flex-between {
        margin-bottom: 40rpx;
        view {
            font-size: 24rpx;
            line-height: 36rpx;
            color: #1b2026;
            text-align: center;
        }
        image {
            width: 328rpx;
            height: 184rpx;
        }
    }
    .t1 {
        font-size: 24rpx;
        line-height: 48rpx;
        color: #1f86ff;
    }
}
.btn-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15rpx 0;
    border-top: 1px solid rgb(31 35 41 / 15%);
}
</style>
