<template>
    <view class="applyJoin">
        <view class="baseInfo">
            <view class="title">
                <view class="lineIcon">
                    <image src="/static/login/lineIcon.png" mode=""></image>
                </view>
                <view style="position: relative; z-index: 999!important;">基础信息</view>

            </view>
            <uni-list>
                <uni-list-item title="姓名" :rightText="baseInfo.name" />
                <uni-list-item title="性别" :rightText="baseInfo.name" />
                <uni-list-item title="手机号" :rightText="baseInfo.name" />
                <uni-list-item  showArrow title="昵称" :class="{'hasText': baseInfo.name}" clickable @click="introduceYourselfEdit(baseInfo.introduceYourself)"
                    :rightText="baseInfo.name ? baseInfo.name : '昵称'" style="color: red!important;"/>

                <uni-list-item title="入驻城市" :rightText="baseInfo.name" />
                <uni-list-item showArrow title="简介" :class="{'hasText': baseInfo.introduceYourself}" clickable @click="introduceYourselfEdit(baseInfo.introduceYourself)"
                    :rightText="baseInfo.introduceYourself ? baseInfo.introduceYourself : '简单的介绍您自己~'" />
            </uni-list>
        </view>
        <view class="baseInfo" style="margin-top: 16rpx;height: 69vh;">
            <view class="title">
                <view class="lineIcon">
                    <image src="/static/login/lineIcon.png" mode=""></image>
                </view>
                <view style="position: relative; z-index: 999!important;">入驻资料</view>

            </view>
            <uni-list>

                <uni-list-item title="形象照" :class="{'portraitPhotoRow': baseInfo.portraitPhoto}" showArrow clickable
                 @click="portraitPhotoFun" :rightText="baseInfo.portraitPhoto? '形象照' : '形象照'">
                    <template v-slot:footer v-if="baseInfo.portraitPhoto">
                        <image  class="slot-image"
                            :src="baseInfo.portraitPhoto ? baseInfo.portraitPhoto : '/static/logo.png'" mode="widthFix">
                        </image>
                    </template>
                </uni-list-item>
                <uni-list-item showArrow title="生活照" :rightText="baseInfo.cImgList.length > 0 ? baseInfo.cImgList.length+'项' : '去上传'"
                    :class="{'hasText': baseInfo.cImgList.length > 0}" clickable
                    @click="pictureUpLoad('cImgList', '生活照', 9)" />
                <uni-list-item showArrow title="宣传视频" :rightText="baseInfo.promotionalVideo.length > 0 ? '已上传' : '去上传'"
                    clickable @click="pictureUpLoad('promotionalVideo', '宣传视频')" />

                <uni-list-item showArrow title="身份证" :rightText="baseInfo.idCard.length > 2 ? '已上传' : '去上传'" clickable
                    @click="idCardEditFun('idCard')" />

                <uni-list-item showArrow title="健康证" :rightText="baseInfo.healthCertificate.length > 0 ? '已上传' : '去上传'"
                    clickable @click="pictureUpLoad('healthCertificate', '健康证', 3)" />
                <uni-list-item showArrow title="从业资格证" :rightText="baseInfo.certification.length > 0 ? '已上传' : '去上传'"
                    clickable @click="pictureUpLoad('certification', '从业资格证', 3)" />
                <uni-list-item showArrow title="无犯罪证明" :rightText="baseInfo.noCrime.length > 0 ? '已上传' : '去上传'"
                    clickable @click="pictureUpLoad('noCrime', '无犯罪证明', 9)" />

                <uni-list-item showArrow title="承诺文件" :rightText="baseInfo.commitDocment[0].length > 0 && baseInfo.commitDocment[1].length > 0 && baseInfo.commitDocment[2].length > 0
                    ? '已上传' : '去上传'" clickable @click="commitDocmentEditFun('commitDocment')" />

            </uni-list>
        </view>




        <!-- 提交按钮 pages/join/introduceYourselfEdit-->
        <view class="submit-box">
            <u-button @click="submitForm">提交</u-button>
        </view>

    </view>
</template>

<script>
export default {

    data() {
        return {
            // 任务数据
            tasks: [
                { taskName: '222' }
            ],
            baseInfo: {
                portraitPhoto: '',
                name: '萧然然',
                gender: '女',
                phone: '18366668888',
                nickName: '苒苒',
                city: '朝阳区',
                intro: '',
                avatar: '',
                lifeImg: [],
                idCard: '',
                introduceYourself: '',
                cImgList: [],
                healthCertificate: [],
                certification: [],
                noCrime: [],
                promotionalVideo: [],
                idCard: [],
                commitDocment: [[], [], []],
            }

        }
    },
    onLoad() {
    },
    onShow() {
    },
    methods: {
        commitDocmentEditFun(value) {
            let str = uni.$u.queryParams({
                fieldName: value,
                fieldVal: JSON.stringify(this.baseInfo[value])
            })
            uni.navigateTo({ url: `/pages/join/commitDocumentEdit${str}` })
        },
        idCardEditFun(value) {
            let str = uni.$u.queryParams({
                fieldName: value,
                fieldVal: JSON.stringify(this.baseInfo[value])
            })
            uni.navigateTo({ url: `/pages/join/idCardEdit${str}` })
        },
        pictureUpLoad(value, title, maxlength) {
            let str = uni.$u.queryParams({
                fieldName: value,
                fieldVal: JSON.stringify(this.baseInfo[value]),
                title: title,
                maxlength: maxlength
            })
            console.log(str)
            uni.navigateTo({ url: `/pages/join/lifePhotosEdit${str}` })

        },
        //简介
        introduceYourselfEdit() {
            uni.navigateTo({ url: '/pages/join/introduceYourselfEdit?introduceYourself=' + this.baseInfo.introduceYourself })
        },
        portraitPhotoFun() {
            // const perResult = requestAndroidPermission('android.permission.CAMERA', {
            //     title: '相册/相机权限申请说明',
            //     content: '为了修改个人头像和订单评价发布信息图片视频等, 我们需要申请您设备的相机和存储权限',
            // }, true);
            console.log('8888888')
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album'],
                success: (res) => {
                    if (res) {
                        this.baseInfo.portraitPhoto = res.tempFilePaths[0]
                    }
                }
            });
        },

        // 提交表单
        submitForm() {
            // 接口请求提交入驻资料
            console.log('提交入驻', this.form)
        }
    },
    mounted() {


    }
}
</script>

<style lang="scss" scoped>
::v-deep .uni-list--border-top {
    display: none;
}

::v-deep .uni-list-item {
    .uni-icon-wrapper {
        padding: 0 !important;

    }
    .uni-icons {
        color: #1D2129 !important;
        font-size: 26rpx !important;
        margin-right: -10rpx!important;
        margin-top: 6rpx;
    }

}


::v-deep .uni-list-item__container {
    padding: 0;

    .uni-list-item__content-title {
        font-weight: 400;
        font-size: 30rpx;
        color: #1D2129;
        text-align: left;
    }

    .uni-list-item__extra-text {
        font-weight: 400;
        font-size: 30rpx;
        color: #4E5969;
        text-align: right;
    }



    

}

::v-deep .container--right {

    .uni-list-item__extra-text {
        font-weight: 400;
        font-size: 30rpx !important;
        color: #C9CDD4 !important;
    }
}
::v-deep .hasText {
    .uni-list-item__extra-text {
        color: #4E5969!important;
    }
   
}
::v-deep .slot-image{
    width: 58px;
    height: 58px;
    border-radius: 50%;

}
::v-deep .portraitPhotoRow{
    .uni-list-item__content-title{
        margin-top: 13rpx;
    }

}

.applyJoin {
    background-color: #F7F8FA;
    min-height: 100vh;
  

    ::v-deep .uni-list-item {
        height: 106rpx;
    }

    .baseInfo {
        margin: 16rpx 32rpx;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        padding: 32rpx;

        .title {
            font-weight: 500;
            font-size: 36rpx;
            color: #1D2129;
            line-height: 36rpx;
            position: relative;

            .lineIcon {
                position: absolute;
                top: 8rpx;
                width: 144rpx;
                height: 24rpx;
                z-index: 5 !important;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }

    }

    .slot-box {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        align-items: center;
    }

    .slot-image {
        /* #ifndef APP-NVUE */
        display: block;
        /* #endif */
        margin-right: 10px;
        width: 30px;
        height: 30px;
    }

    .slot-text {
        flex: 1;
        font-size: 14px;
        color: #4cd964;
        margin-right: 10px;
    }

    .submit-box {
        width: 100%;
        padding: 30rpx;
        font-size: 32rpx;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        height: 136rpx;
        button {
            color: #FFFFFF;
            width: 654rpx;
            height: 88rpx;
            background: #333335;
            border-radius: 60rpx 60rpx 60rpx 60rpx;
        }
    }
}
</style>