<template>
    <view class="idCardEdit">
        <view v-if="auditStatus == 0 || auditStatus == 2" class="checkBox" :style="{
            color: auditStatus === 2 ? '#F53F3F' : '#FF7D00',
            background: auditStatus === 2 ? '#FFF5F5' : '#FFF8EC'
        }">
            <view style="display: flex;align-items: center;justify-content: space-between;">
                <view class="checkStatus">
                    <image :src="auditStatus == 0 ? '/static/login/status1.png' : '/static/login/status2.png'" mode=""
                        style="width: 32rpx;height: 32rpx;margin-right: 8rpx;">
                    </image>
                    {{ auditStatus == 2 ? '审核驳回' : '审核中' }}
                </view>
                <view class="contactCustomer" :style="{
                    border: auditStatus === 2 ? '1px solid #F53F3F' : '1px solid #FF7D00',
                }">联系客服</view>
            </view>

            <view class="text">{{ auditStatus == 2 ? '审核驳回' : '审核中' }}，审核结果将会在X-X个工作日通知您</view>
        </view>
        <view class="content">
            <view class="id-upload-row" style="margin-bottom: 32rpx;">
                <view style="width: 334rpx;height: 264rpx;position: relative;">
                    <Upload name="idCardFront" width="334rpx" height="210rpx" :maxCount="1"
                        @fileList="onUpload($event, 'idCardFront')" :fileList="idCardFront">
                        <view class="upload-block" slot="content">

                            <view class="icon-bg">
                                <image src="/static/login/cameraIcon.png" mode="widthFix" width="54.64rpx"
                                    height="52rpx">
                                </image>
                                <!-- <u-icon name="camera-fill" color="#fff" size="20"></u-icon> -->
                            </view>

                        </view>

                    </Upload>
                    <view class="options">
                        <view style="display: flex;align-items: center;" @tap="delectImg('idCardFront')">
                            <image src="/static/login/deleteIcon.png" style="width: 24rpx; height: 24rpx;"
                                mode="widthFix">
                            </image>

                            <view class="options-text">删除</view>
                        </view>

                        <view style="height: 32rpx;border: 0.5rpx solid #FFFFFF;"></view>
                        <view style="display: flex;align-items: center;">
                            <image src="/static/login/lookGigIcon.png" style="width: 24rpx; height: 24rpx;"
                                mode="widthFix">
                            </image>
                            <view class="options-text">查看</view>
                        </view>
                    </view>
                    <view class="up-text">身份证人像面</view>
                </view>

                <view style="width: 334rpx;height: 204rpx;position: relative;">
                    <Upload name="idCardFront" width="334rpx" height="210rpx" :maxCount="1"
                        @fileList="onUpload($event, 'idCardBack')" :fileList="idCardBack">
                        <view class="upload-block" slot="content">

                            <view class="icon-bg">
                                <image src="/static/login/cameraIcon.png" mode="widthFix" width="54.64rpx"
                                    height="52rpx">
                                </image>
                                <!-- <u-icon name="camera-fill" color="#fff" size="20"></u-icon> -->
                            </view>

                        </view>

                    </Upload>
                    <view class="options">
                        <view style="display: flex;align-items: center;" @tap="delectImg('idCardBack')">
                            <image src="/static/login/deleteIcon.png" style="width: 24rpx; height: 24rpx;"
                                mode="widthFix">
                            </image>

                            <view class="options-text">删除</view>
                        </view>

                        <view style="height: 32rpx;border: 0.5rpx solid #FFFFFF;"></view>
                        <view style="display: flex;align-items: center;">
                            <image src="/static/login/lookGigIcon.png" style="width: 24rpx; height: 24rpx;"
                                mode="widthFix">
                            </image>
                            <view class="options-text">查看</view>
                        </view>
                    </view>

                    <view class="up-text">身份证国徽面</view>
                </view>
            </view>

            <view style="width: 334rpx;height: 264rpx;position: relative;">
                <Upload name="idCardBack" width="334rpx" height="210rpx" :maxCount="1"
                    @fileList="onUpload($event, 'idCardHand')" :fileList="idCardHand">
                    <view class="upload-block" slot="content">
                        <view class="icon-bg">
                            <image src="/static/login/cameraIcon.png" mode="widthFix" width="54.64rpx" height="52rpx">
                            </image>
                            <!-- <u-icon name="camera-fill" color="#fff" size="20"></u-icon> -->
                        </view>
                    </view>
                </Upload>
                <view class="options">
                        <view style="display: flex;align-items: center;" @tap="delectImg('idCardHand')">
                            <image src="/static/login/deleteIcon.png" style="width: 24rpx; height: 24rpx;"
                                mode="widthFix">
                            </image>

                            <view class="options-text">删除</view>
                        </view>

                        <view style="height: 32rpx;border: 0.5rpx solid #FFFFFF;"></view>
                        <view style="display: flex;align-items: center;">
                            <image src="/static/login/lookGigIcon.png" style="width: 24rpx; height: 24rpx;"
                                mode="widthFix">
                            </image>
                            <view class="options-text">查看</view>
                        </view>
                    </view>

                <view class="up-text">手持身份证照片</view>
            </view>

            <!-- <Upload name="idCardHand" width="187rpx" height="220rpx" :maxCount="1"
                @fileList="onUpload($event, 'idCardHand')" :fileList="idCardHand">
                <view class="upload-block full-width" slot="content">
                    <view class="icon-bg"><u-icon name="camera-fill" color="#fff" size="20"></u-icon></view>
                    <text class="up-text">手持身份证照片</text>
                </view>
            </Upload> -->

            <view class="footer-bar" v-if="auditStatus != 0 ">
                <u-button :customStyle="{
                    padding: '24rpx 48rpx',
                    color: '#fff',
                    background: 'var(--theme-color-gradient)',
                    width: '654rpx',
                    height: '88rpx',
                    background: '#333335',
                    borderRadius: '60rpx 60rpx 60rpx 60rpx',
                }" @click="onSubmit">保存</u-button>
            </view>
        </view>
    </view>
</template>

<script>

import Upload from '@/components/upload/index.vue';

export default {
    components: { Upload },
    data() {
        return {
            auditStatus: 1,
            fieldName: '',
            idCardFront: [],
            idCardBack: [],
            idCardHand: [],
        }
    },

    onLoad(query) {
        console.log(query)
        if (query.fieldName) this.fieldName = query.fieldName
        if (query.fieldVal) {
            let fieldVal = JSON.parse(query.fieldVal)
            this.idCardFront = fieldVal[0] ? fieldVal[0] : []
            this.idCardBack = fieldVal[1] ? fieldVal[1]: []
            this.idCardHand = fieldVal[2] ? fieldVal[2] : []
        }
        if (query.auditStatus) this.auditStatus = Number(query.auditStatus)
        
    },
    onReady() {

    },
    onShow() {
    },
    methods: {
        delectImg(t) {
            uni.showModal({
                title: '提示',
                content: '是否要删除此照片',
                success: res => {
                    if (res.confirm) {
                        this[t] = [];
                    }
                },
            })
        },
        // upload事件
        onUpload(e, t) {
            this[t] = e;
            console.log(this[t])
        },
        goBack() {
            uni.navigateBack()
        },
        onSubmit() {
            // 获取页面栈
            const pages = getCurrentPages()
            // 上一页实例
            const prevPage = pages[pages.length - 2]
            // 直接修改上一页data里的字段
            prevPage.$data.baseInfo[this.fieldName] = [this.idCardFront, this.idCardBack, this.idCardHand]
            uni.navigateBack()
        }

    }
}
</script>

<style scoped lang="scss">
.idCardEdit {
    height: 100vh;
    background-color: #F7F8FA;
    .checkBox {
        padding: 30rpx 32rpx 24rpx 32rpx;
        height: 134rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;

        //color: #FF7D00;
        .checkStatus {
            font-weight: 500;
            font-size: 30rpx;
            text-align: left;
            display: flex;
            align-items: center;

        }

        .contactCustomer {
            width: 144rpx;
            height: 44rpx;
            border-radius: 24rpx 24rpx 24rpx 24rpx;

            font-weight: 400;
            font-size: 26rpx;
            text-align: center;

        }

        .text {
            margin-top: 8rpx;
            font-weight: 400;
            font-size: 26rpx;
            text-align: left;
        }
    }

    .content {
        width: 100%;
        background-color: #fff;
        padding: 32rpx;

        .up-text {
            margin-top: 16rpx;
            font-weight: 400;
            font-size: 28rpx;
            color: #86909C;
            line-height: 28rpx;
            text-align: center;
        }

        .options {
            padding: 0 44rpx;
            position: absolute;
            top: 158rpx;
            width: 334rpx;
            height: 52rpx;
            background: rgba(0, 0, 0, 0.1);
            border-radius: 0rpx 0rpx 12rpx 12rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .options-text{
                margin-left: 4rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: #FFFFFF;
            }
        }

    }

}

::v-deep .u-upload__success {
    display: none;
}

/* 身份证上传样式 */
.id-upload-row {
    display: flex;
    justify-content: space-between;
}

.upload-block {
    // width: 100%;
    height: 210rpx;
    background-color: #f9f9f9;
    border-radius: 12rpx;
    border: 1rpx dashed #eee;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;

   

    .icon-bg {
        width: 60rpx;
        height: 54rpx;

        display: flex;
        align-items: center;
        justify-content: center;
    }



}


::v-deep .u-upload__deletable {
    display: none;
    
}

</style>
