<template>
    <view>
        <!-- 青年卡 -->
        <view v-if="id == 1"
            @click="handleTakePhoto('youth')"
            class="photo-item" style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx; background-color: #ffffff; border-radius: 12rpx; margin: 20rpx;">
            <view style="display: flex; align-items: center;">
                <image src="https://xh.stnav.com/uploads/sport/face2.png" style="width: 90rpx; height: 90rpx; margin-right: 20rpx;"></image>
                <view>人脸录入</view>
            </view>
            <view style="display: flex; align-items: center;">
                <text style="color: #666; font-size: 28rpx; margin-right: 10rpx;">{{ youthFace ? '已录入' : '去录入' }}</text>
                <image src="/static/icon/right.png" style="width: 32rpx; height: 32rpx;"></image>
            </view>
        </view>

        <!-- 成人卡 -->
        <view v-if="id == 2"
            @click="handleTakePhoto('adult')"
            class="photo-item" style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx; background-color: #ffffff; border-radius: 12rpx; margin: 20rpx;">
            <view style="display: flex; align-items: center;">
                <image src="https://xh.stnav.com/uploads/sport/face2.png" style="width: 90rpx; height: 90rpx; margin-right: 20rpx;"></image>
                <view>人脸录入</view>
            </view>
            <view style="display: flex; align-items: center;">
                <text style="color: #666; font-size: 28rpx; margin-right: 10rpx;">{{ adultFace ? '已录入' : '去录入' }}</text>
                <image src="/static/icon/right.png" style="width: 32rpx; height: 32rpx;"></image>
            </view>
        </view>

        <!-- 子女 -->
        <view v-if="id == 3 || id == 4" 
            @click="handleTakePhoto('child')"
            class="photo-item" style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx; background-color: #ffffff; border-radius: 12rpx; margin: 20rpx;">
            <view style="display: flex; align-items: center;">
                <image src="https://xh.stnav.com/uploads/sport/face2.png" style="width: 90rpx; height: 90rpx; margin-right: 20rpx;"></image>
                <view>子女录入</view>
            </view>
            <view style="display: flex; align-items: center;">
                <text style="color: #666; font-size: 28rpx; margin-right: 10rpx;">{{ childFace ? '已录入' : '去录入' }}</text>
                <image src="/static/icon/right.png" style="width: 32rpx; height: 32rpx;"></image>
            </view>
        </view>

        <!-- 亲子卡1 -->
        <view v-if="id == 3 || id == 4" 
            @click="handleTakePhoto('parent1')"
            class="photo-item" style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx; background-color: #ffffff; border-radius: 12rpx; margin: 20rpx;">
            <view style="display: flex; align-items: center;">
                <image src="https://xh.stnav.com/uploads/sport/face2.png" style="width: 90rpx; height: 90rpx; margin-right: 20rpx;"></image>
                <view>家长1录入</view>
            </view>
            <view style="display: flex; align-items: center;">
                <text style="color: #666; font-size: 28rpx; margin-right: 10rpx;">{{ parent1Face ? '已录入' : '去录入' }}</text>
                <image src="/static/icon/right.png" style="width: 32rpx; height: 32rpx;"></image>
            </view>
        </view> 
        
        <!-- 亲子卡2 -->
        <view v-if="id == 4"
            @click="handleTakePhoto('parent2')"
            class="photo-item" style="display: flex; align-items: center; justify-content: space-between; padding: 30rpx; background-color: #ffffff; border-radius: 12rpx; margin: 20rpx;">
            <view style="display: flex; align-items: center;">
                <image src="https://xh.stnav.com/uploads/sport/face2.png" style="width: 90rpx; height: 90rpx; margin-right: 20rpx;"></image>
                <view>家长2录入</view>
            </view>
            <view style="display: flex; align-items: center;">
                <text style="color: #666; font-size: 28rpx; margin-right: 10rpx;">{{ parent2Face ? '已录入' : '去录入' }}</text>
                <image src="/static/icon/right.png" style="width: 32rpx; height: 32rpx;"></image>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                id: 0,
                order_id: 0,
                youthFace: '',
                adultFace: '',
                childFace: '',
                parent1Face: '',
                parent2Face: '',
            }
        },
        onLoad(args) {
            this.id = args.id
            this.order_id = args.order_id

            this.handleGetGroupData()
        },
        methods: {
            /*获取开通会员信息*/
            handleGetGroupData() {
                let self = this;

                self._post(
                    'ground.group/getGroupData',
                    {group_id: self.id},
                    result => {
                        if (result.data && result.data.face_url) {
                            self.youthFace = result.data.face_url;
                            self.adultFace = result.data.face_url;
                            self.childFace = result.data.face_url;
                        }

                        if (result.data && result.data.parent.length > 0) {
                            self.parent1Face = result.data.parent[0].face_url;
                            if (result.data.parent.length > 1) {
                                self.parent2Face = result.data.parent[1].face_url;
                            }
                        }
                    },
                    false,
                    () => {
                    }
                );
            },

            /*去拍照*/
            handleTakePhoto(type) {
                if (type === 'youth' && this.youthFace) {
                    uni.previewImage({
                        urls: [this.youthFace]
                    });
                    return false;
                }

                if (type === 'adult' && this.adultFace) {
                    uni.previewImage({
                        urls: [this.adultFace]
                    });
                    return false;
                }

                if (type === 'child' && this.childFace) {
                    uni.previewImage({
                        urls: [this.childFace]
                    });
                    return false;
                }

                if (type === 'parent1' && this.parent1Face) {
                    uni.previewImage({
                        urls: [this.parent1Face]
                    });
                    return false;
                }

                if (type === 'parent2' && this.parent2Face) {
                    uni.previewImage({
                        urls: [this.parent2Face]
                    });
                    return false;
                }

                let self = this
                uni.navigateTo({
                    url: `/bundle/combo/face-photo?type=${type}`,
                    events:{
						data: (e) => {
                            self.uploadFile(e.path, e.type)
						}
					}
                });
            },

            /*上传图片*/
		    uploadFile: function(filePath, type) {
                console.log("🚀 ~ filePath:", filePath)
                let self = this;
                let params = {
                    token: uni.getStorageSync('token'),
                    app_id: self.getAppId()
                };
                uni.showLoading({
                    title: '图片上传中'
                });
                uni.uploadFile({
                    url: self.websiteUrl + '/index.php?s=/api/file.upload/image',
                    filePath: filePath,
                    name: 'iFile',
                    formData: params,
                    success: function(res) {
                        uni.hideLoading();

                        let result = typeof res.data === 'object' ? res.data : JSON.parse(res.data);
                        if (result.code === 1) {
                            setTimeout(() => {
                                uni.showLoading({
                                    title: '人脸录入中...'
                                });
                            }, 100);
                
                            self._post(
                                'ground.group/hikCreate',
                                {
                                    app_id: self.getAppId(),
                                    face_url: result.data.file_path,
                                    order_id: self.order_id,
                                },
                                function(res) {
                                    console.log("🚀 ~ res:", res)
                                    uni.hideLoading();
                                    setTimeout(() => {
                                        self.handleGetGroupData()
                                        uni.showToast({
                                            title: '操作成功',
                                            duration: 1500,
                                            icon: 'success'
                                        });
                                    }, 100);
                                }
                            );
                        } else {
                        }
                    },
                    complete: function() {
                        uni.hideLoading();
                    }
                });
            },
        }
    }
</script>