import Buttons from "@/components/basic/Buttons";
import { clear, logout, update } from "@/services/user";
import { View, Text, Image, Button } from "@tarojs/components";
import { useDispatch, useSelector } from "react-redux";
import './ProfileSetting.scss'
import Box from "@/components/layout/Box";
import Taro from "@tarojs/taro";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { baseUrl } from "@/services/http/api";
import { updateSuccess } from "@/store/user";
import TableCell from "@/components/layout/TableCell";

export default function Page() {
    const dispatch = useDispatch();
    const user = useSelector((state: any) => state.user);
    const { t } = useTranslation()

    useEffect(() => {
        Taro.setNavigationBarTitle({
            title: t('page.user_profile.title')
        })
    }, [])

    function editNickname() {
        Taro.navigateTo({
            url: '/pages/account/EditPage'
        })
    }

    function chooseAvatar(e) {
        const { avatarUrl } = e.detail
        var dot = avatarUrl.lastIndexOf('.')
        var fileExt = dot > 0 ? avatarUrl.substring(dot) : ''
        // console.log(avatarUrl)
        Taro.request({
            method: 'GET',
            url: `${baseUrl}/api/thirdparty/aliyun/oss-form-upload`,
            header: {
                'Authorization': 'bearer ' + global.token
            },
            data: {
                type: 'AVATAR',
                file_ext: fileExt
            },
            success: (rsp) => {
                debugger
                Taro.uploadFile({
                    url: rsp.data.upload_url,
                    filePath: avatarUrl,
                    name: 'file',
                    formData: rsp.data.fields,
                    success: rlt => {
                        console.log(rlt)
                        uploadAvatar(rsp.data.view_url)
                        // _this.changeAvatar(rsp.data.view_url);
                    },
                    fail: rlt => {
                        Taro.showModal({
                            content: rlt.errMsg
                        })
                    }
                })
            }
        })
    }

    function uploadAvatar(url) {
        update({ avatar: url }).then(res => {
            dispatch(updateSuccess({ avatar: url }));
            Taro.showToast({
                title: '更新成功',
                icon: 'none'
            })


        })
    }

    return <View className="container">
        {/* <View className="row">
            <Text>头像</Text>
            <Image src={user.avatar} className="avatar" />
            <Button className="btn" openType="chooseAvatar" onChooseAvatar={chooseAvatar}></Button>
        </View> */}

        <View className="avatar_row">
            <View className="avatar_bg">
                <Image src={user.avatar} className="avatar" />
                
                <View className="camera_bg">
                    <Image className="camera" src={require('@assets/images/camera.png')} />
                </View>
                <Button className="btn" openType="chooseAvatar" onChooseAvatar={chooseAvatar}></Button>
            </View>
        </View>


        <View onClick={editNickname}>
            <TableCell title="昵称" showArrow={true} showMarginBottom={true}>
                <Text style={{ opacity: 0.8 }}>{user.nickname}</Text>
            </TableCell>
        </View>
        {/* <View className="row" onClick={editNickname}>
            <Text>昵称</Text>
            <Text>{user.nickname}</Text>
        </View> */}
        {/* <View className="row">
            <Text>用户名</Text>
            <Text>{user.username}</Text>
        </View> */}
        {/* <Buttons title='退出登录' onClick={logoutF} style={{ width: 289, marginBottom: 30 }} />

        <Buttons title='注销账号' onClick={clearF} style={{ width: 289, marginBottom: 30 }} /> */}


    </View>
}