<template>
    <view class="cert-page">
        <view>
            <u-navbar back-icon-color="#000000" :background="background" title-color="#000" :border-bottom="false"
                title="证件上传" title-bold="true"></u-navbar>
        </view>
        <view class="content-body">
            <view class="notice-top">
                请上传您的：<text class="right">{{ imgList[key].typeName }}</text>
            </view>
            <view class="notice-two">
                请点击上传图片，图片大小不大于3M
            </view>
            <view class="upload-container">
                <view class="img-container" v-for="(item, index) in imgList[key].desc" :key="index">
                    <image class="upload-img" @click="handleClick(type, index)" :src="imgs[index]" mode="aspectFit">
                    </image>
                    <text class="img-desc">{{ item }}</text>
                </view>
            </view>
        </view>
        <view class="button-container">
            <view class="submit-button" :class="{'is-ok': isOk}" @click="submitCert()">提交</view>
        </view>
    </view>
</template>

<script>
    import base from '@/components/upload/index';
    export default {
        mixins: [base],
        data() {
            return {
                icon: process.uniEnv.qn_base_url + "tishi.png",
                categories: [],
                param: {
                    url: []
                },
                key: null,
                type: null,
                isOk: false,
                imgs: [
                    process.uniEnv.qn_base_url + "shangchuanzhaopian-big.png",
                    process.uniEnv.qn_base_url + "shangchuanzhaopian-big.png",
                ],
                imgList: [{
                        typeKey: 'id_card',
                        typeName: '身份证',
                        desc: ['上传身份证人像面', '上传身份证国徽面'],
                        maxImgs: 2
                    },
                    {
                        typeKey: 'electrician_certificate',
                        typeName: '电工证',
                        desc: ['上传电工证照片'],
                        maxImgs: 1
                    },
                    {
                        typeKey: 'driver_license',
                        typeName: '驾驶证',
                        desc: ['上传驾驶证照片'],
                        maxImgs: 1
                    },
                    {
                        typeKey: 'driving_license',
                        typeName: '行驶证',
                        desc: ['上传行驶证照片'],
                        maxImgs: 1
                    },
                    {
                        typeKey: 'vehicle',
                        typeName: '车辆照',
                        desc: ['车辆正面/看到车牌', '车辆侧面/看到外观'],
                        maxImgs: 2
                    },
                    {
                        typeKey: 'high_sky_license',
                        typeName: '高空证',
                        desc: ['上传高空证照片'],
                        maxImgs: 1
                    },
                    {
                        typeKey: 'refrigeration_license',
                        typeName: '制冷证',
                        desc: ['上传制冷证照片'],
                        maxImgs: 1
                    },
                    {
                        typeKey: 'business_license',
                        typeName: '营业执照',
                        desc: ['上传营业执照照片'],
                        maxImgs: 1
                    }
                ],
            }
        },
        onLoad(param) {
            this.type = param.type
            this.key = this.getListKey(this.type);
        },
        methods: {
            getListKey(typeKey) {
                let length = this.imgList.length
                for (let i = 0; i < length; i++) {
                    if (this.imgList[i].typeKey == typeKey) {
                        return i
                    }
                }
            },
            async handleClick(certType, key) {
                let self = this
                self.uploadType = certType || ''
                let attr = {
                    category: self.categories[1]
                }
                if (certType == 'id_card_front') {
                    attr = {
                        category: self.categories[2]
                    }
                }

                let src = await self.chooseImg({
                    count: 1
                })
                self.imgs[key] = src[0].path;
                self.param.url[key] = src[0].key;
                if(self.param.url.length == this.imgList[this.key].maxImgs){
                    
                    this.isOk = true;
                }else{
                    this.isOk = false;
                }
            },
            submitCert() {
                if(!this.isOk){
                    return;
                }
                this.param.url = this.param.url.toString();
                this.param.type = this.type;
                this.$u.api.submitCert(this.param)
                    .then((res) => {
                        if(res.code != 200){
                            uni.showToast({
                                icon: "none",
                                title: res.message,
                            });
                        }
                        wx.redirectTo({
                            url: '/pages/mine/cert/index'
                        });
                    })
            }
        }
    }
</script>

<style>
    page {
        background: #F4F5F7;
    }

    .cert-page {
        height: 70vh;
        margin: 20rpx 30rpx 0rpx;
    }

    .content-body {
        padding: 40rpx 30rpx 60rpx;
        background-color: #FFF;
        border-radius: 12rpx;
    }

    .notice-top {
        height: 32rpx;
        font-size: 32rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
        color: #333333;
        line-height: 32rpx;
    }

    .right {
        color: #2272FF;
    }

    .notice-two {
        height: 28rpx;
        font-size: 24rpx;
        font-family: PingFang-SC-Regular, PingFang-SC;
        font-weight: 400;
        color: #666666;
        line-height: 28rpx;
        margin-top: 18rpx;
    }

    .notice-bottom {
        height: 20rpx;
        font-size: 20rpx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: #999999;
        line-height: 20rpx;
        margin-top: 30rpx;
        display: flex;
    }

    .submit-button {
        width: 400rpx;
        height: 104rpx;
        background: #D1D4D4;
        border-radius: 52rpx;
        margin-top: 224rpx;
        text-align: center;
        line-height: 104rpx;
        display: inline-block;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 32rpx;
    }
    
    .is-ok {
        background: #2272FF;
    }

    .button-container {
        text-align: center;
        padding-bottom: 30rpx;
    }

    .upload-img {
        margin-top: 30rpx;
        width: 100%;
        height: 400rpx !important;
    }

    .two {
        margin-left: 30rpx;
    }

    .icon {
        width: 24rpx;
        height: 24rpx;
    }

    .img-container {
        position: relative;
    }

    .img-desc {
        position: absolute;
        bottom: 10rpx;
        left: 0;
        font-size: 20rpx;
        color: #c5bfbf;
        font-weight: 400;
        line-height: 28px;
        text-align: center;
        width: 100%;
    }
</style>
