<template>
    <div class="archives">
        <div class="user-info">
            <div class="avatar">
                <a-upload
                    v-model:fileList="fileList"
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    :customRequest="uploadspic"
                    @change="handleChange"
                >
                    <a-avatar :size="85" shape="circle" :src="userinfo.img">
                        <template v-slot:icon><UserOutlined /></template>
                    </a-avatar>
                    <div class="mengceng" style="width: 85px; height: 85px">
                        {{ lan.$t("xiugaitouxiang") }}
                    </div>
                </a-upload>

                <div class="user-name" v-if="showname">
                    <div
                        class="update-btn"
                       
                        style="color: #fff; cursor: unset"
                    >
                        {{ lan.$t("xiugai") }}
                    </div>
                    <div class="value">{{ userinfo.name }}</div>
                    <div class="update-btn" @click="updateUserName">
                        {{ lan.$t("xiugai") }}
                    </div>
                </div>
                <div class="user-name" v-else>
                    <a-input
                        size="small"
                        v-model:value="userinfo.name"
                        :placeholder="lan.$t('shuruxinnicheng')"
                    />
                </div>
            </div>
            <div class="form-box basic">
                <div class="title">{{ lan.$t("jibenxinxi") }}</div>
                <div class="main-container">
                    <div class="input-box country">
                        <div class="label">{{ lan.$t("laiziguojia") }}</div>
                        <a-select
                            v-model:value="userinfo.country"
                            style="width: 171px"
                            size="small"
                            ref="select"
                            show-search
                            :getPopupContainer="
                                (triggerNode) => triggerNode.parentNode
                            "
                        >
                            <a-select-option
                                v-for="(item, index) in chiveslist[0]"
                                :key="index"
                                :value="item.name"
                            >
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="input-box address">
                        <div class="label">{{ lan.$t("juzhudi") }}</div>
                        <a-input
                            size="small"
                            v-model:value="userinfo.live"
                            :placeholder="lan.$t('shurujuzhudi')"
                        />
                    </div>
                    <div class="input-box teach-lang">
                        <div class="label">{{ lan.$t("jiaoshou") }}</div>
                        <a-select
                            v-model:value="userinfo.tlanguageValue"
                            style="width: 171px"
                            size="small"
                            show-search
                            ref="select"
                            :getPopupContainer="
                                (triggerNode) => triggerNode.parentNode
                            "
                        >
                            <a-select-option
                                v-for="(item, index) in interestslist"
                                :key="index"
                                :value="parseInt(item.value)"
                            >
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="input-box speak-lang">
                        <div class="label">{{ lan.$t("wohaihuishuo") }}</div>
                        <div class="speak-array">
                            <div class="lang-items">
                                <div
                                    class="speak-item"
                                    v-for="(lang, indexs) in userinfo.willsay"
                                    :key="indexs"
                                >
                                    <a-select
                                        v-model:value="lang.name"
                                        style="width: 171px"
                                        size="small"
                                        ref="select"
                                        show-search
                                        @change="choosewillsay"
                                        :getPopupContainer="
                                            (triggerNode) =>
                                                triggerNode.parentNode
                                        "
                                    >
                                        <a-select-option
                                            v-for="(item,
                                            index) in chiveslist[1]"
                                            :key="index"
                                            :value="item.name"
                                        >
                                            {{ item.name }}
                                        </a-select-option>
                                    </a-select>
                                    <div class="proficiency">
                                        <div class="p-title">
                                            {{ lan.$t("shuliandu") }}
                                        </div>
                                        <div class="value">
                                            <!-- <a-rate v-model:value="lang.proficiency" style="fontSize: 15px">
                                                <template v-slot:character><img src="" style="width: 10px;height: 10px;background-color: #0f0;"/>{{}}</template>
                                            </a-rate> -->
                                            <img
                                                @click="setlevel(indexs, i)"
                                                v-for="i in 5"
                                                :key="i"
                                                :src="
                                                    lang.level >= i
                                                        ? smilet
                                                        : smile
                                                "
                                                alt=""
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="update-btn" @click="addSpeakLang">
                                {{ lan.$t("jixutianjia") }}
                            </div>
                        </div>
                    </div>
                    <div class="input-box native-lang">
                        <div class="label">{{ lan.$t("muyu") }}</div>
                        <!-- <a-select
                            v-model:value="userinfo.mtongue"
                            style="width: 171px"
                            size="small"
                            ref="select"
                            :getPopupContainer="triggerNode => triggerNode.parentNode"
                        >
                            <a-select-option v-for="(item, index) in chiveslist[1]" :key="index" :value="item.name">
                                {{ item.name }}
                            </a-select-option>
                        </a-select> -->
                        <a-input
                            size="small"
                            v-model:value="userinfo.mtongue"
                            :placeholder="lan.$t('xindemuyu')"
                        />
                    </div>
                    <div class="input-box video-lang">
                        <div class="label">{{ lan.$t("duanshipin") }}</div>
                        <a-upload
                            list-type="picture"
                            :customRequest="uploads"
                            :beforeUpload="beforeVideoUpload"
                        >
                            <div class="upload-image">
                                <PlaySquareOutlined
                                    style="fontsize: 22px"
                                    v-if="uploadprogress == 0"
                                />
                                <a-progress
                                    type="circle"
                                    :percent="uploadprogress"
                                    :width="80"
                                    v-else
                                />
                            </div>
                        </a-upload>
                        <div class="demand">
                            <p class="one-line-hide">
                                {{ lan.$t("shipinyaoqiu") }}
                            </p>
                            <p class="one-line-hide">
                                1.{{ lan.$t("shipinyaoqiu1") }}
                            </p>
                            <p class="one-line-hide">
                                2.{{ lan.$t("shipinyaoqiu2") }}
                            </p>
                            <p class="one-line-hide">
                                3.{{ lan.$t("shipinyaoqiu3") }}
                            </p>
                        </div>
                    </div>
                    <div class="input-box introduce">
                        <div class="label">{{ lan.$t("ziwojieshao") }}</div>
                        <a-textarea
                            v-model:value="userinfo.desc"
                            class="introduce-textarea"
                            :placeholder="lan.$t('gerenjieshao')"
                        />
                    </div>
                </div>
            </div>
            <div class="form-box contact">
                <div class="title">{{ lan.$t("lianxifangshi") }}</div>
                <div class="main-container">
                    <div class="input-box mailbox">
                        <div class="label">{{ lan.$t("youxiang") }}</div>
                        <a-input
                            size="small"
                            v-model:value="userinfo.email"
                            :placeholder="lan.$t('shuruyouxiang')"
                        />
                    </div>
                    <div class="input-box phone-box">
                        <div class="label">{{ lan.$t("shoujihao") }}</div>
                        <div class="phone">{{ userinfo.mobile }}</div>
                        <div class="update-btn" @click="togglePhoneModal(true)">
                            {{ lan.$t("genghuanshoujihao") }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-box system-setting">
                <div class="title">{{ lan.$t("xitongshezhi") }}</div>
                <div class="main-container">
                    <div class="input-box password-box">
                        <div class="label">{{ lan.$t("mima") }}</div>
                        <div class="password">************</div>
                        <div
                            class="update-btn"
                            @click="togglePasswordModal(true)"
                        >
                            {{lan.$t("xiugaimima")}}
                        </div>
                    </div>
                    <div class="input-box time-zone-box">
                        <div class="label">{{ lan.$t("shiqu") }}</div>
                        <a-select
                            v-model:value="userinfo.zoneStr"
                            style="width: 171px"
                            size="small"
                            ref="select"
                            show-search
                            :getPopupContainer="
                                (triggerNode) => triggerNode.parentNode
                            "
                        >
                            <a-select-option
                                v-for="(item, index) in zonelist"
                                :key="index"
                                :value="item.city + item.gmt"
                            >
                                {{ item.city }}{{ item.gmt }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="input-box currency-box">
                        <div class="label">{{ lan.$t("huobi") }}</div>
                        <a-select
                            style="width: 171px"
                            size="small"
                            ref="select"
                            :getPopupContainer="
                                (triggerNode) => triggerNode.parentNode
                            "
                            @change="currencychange"
                            v-model:value="currencyindex"
                        >
                            <a-select-option
                                v-for="(item, index) in currencylist"
                                :key="index"
                                :value="item.value"
                            >
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="input-box time-zone">
                        <div class="label">{{ lan.$t("yuyan") }}</div>
                        <a-select
                            v-model:value="userinfo.languageValue"
                            style="width: 171px"
                            size="small"
                            ref="select"
                            :getPopupContainer="
                                (triggerNode) => triggerNode.parentNode
                            "
                        >
                            <a-select-option
                                v-for="(item, index) in languages"
                                :key="index"
                                :value="item.value"
                            >
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                    </div>
                </div>
            </div>
            <div class="modal-container">
                <a-modal
                    centered
                    :footer="null"
                    :getContainer="modalNode"
                    dialogClass="modal-dialog"
                    v-model:visible="updatePhoneVisible"
                    @cancel="hidePhoneModal"
                >
                    <template v-slot:closeIcon>
                        <img src="@/static/images/delete.png" class="close" />
                    </template>
                    <!-- 换绑手机号第一步 -->
                    <div
                        class="public-class phone-container"
                        v-if="!isSecondStep"
                    >
                        <div class="title">
                            {{ lan.$t("wanchengrenzheng") }}
                        </div>
                        <div class="title sub-title">
                            {{ lan.$t("shuru") }} {{ userinfo.mobile }}
                            {{ lan.$t("shoudaodeyzm") }}
                        </div>
                        <div class="form-box">
                            <div class="form-item">
                                <label class="label">{{
                                    lan.$t("shoujiyanzhengma")
                                }}</label>
                                <a-input
                                    size="small"
                                    v-model:value="verificationCode"
                                />
                                <div
                                    @click="
                                        sendVerificationCode(
                                            userinfo.code + userinfo.mobile
                                        )
                                    "
                                    class="confirm-btn"
                                >
                                    {{ lan.$t("huoquyanzhengma")
                                    }}<span v-if="remainTime > 0"
                                        >（{{ remainTime }}s）</span
                                    >
                                </div>
                            </div>
                        </div>
                        <div @click="nextPhoneStep" class="confirm-btn">
                            {{ lan.$t("xiayibu") }}
                        </div>
                    </div>
                    <!-- 换绑手机号第二步 -->
                    <div
                        class="public-class phone-container second-step"
                        v-else
                    >
                        <div class="title">
                            {{ lan.$t("bangdingxinhaoma") }}
                        </div>
                        <div class="form-box">
                            <div class="form-item">
                                <label class="label">{{
                                    lan.$t("shoujihao")
                                }}</label>
                                <!-- <a-input size="small" v-model:value="bindPhone.number" /> -->
                                <a-input-group compact class="telbox">
                                    <a-select
                                        :default-value="quhaolist[0].code"
                                        size="small"
                                        @change="getquhao"
                                    >
                                        <a-select-option
                                            v-for="(i, j) in quhaolist"
                                            :key="j"
                                            :value="i.code"
                                        >
                                            {{ i.name }}+{{ i.code }}
                                        </a-select-option>
                                        <!-- <a-select-option value="Jiangsu"> Jiangsu </a-select-option> -->
                                    </a-select>
                                    <div class="line"></div>
                                    <a-input
                                        v-model:value="mynewtel"
                                        size="small"
                                        :placeholder="lan.$t('shurushouji')"
                                    />
                                </a-input-group>
                            </div>
                            <div class="form-item">
                                <label class="label">{{
                                    lan.$t("shoujiyanzhengma")
                                }}</label>
                                <a-input
                                    size="small"
                                    v-model:value="bindPhone.code"
                                />
                                <div
                                    @click="
                                        sendVerificationCode(myquhao + mynewtel)
                                    "
                                    class="confirm-btn"
                                >
                                    {{ lan.$t("huoquyanzhengma")
                                    }}<span v-if="remainTime > 0"
                                        >（{{ remainTime }}s）</span
                                    >
                                </div>
                            </div>
                        </div>
                        <div @click="updatePhoneNumber" class="confirm-btn">
                            {{ lan.$t("bangdingshouji") }}
                        </div>
                    </div>
                </a-modal>
                <!-- 修改密码 -->
                <a-modal
                    centered
                    :footer="null"
                    :getContainer="modalNode"
                    dialogClass="modal-dialog"
                    v-model:visible="updatePasswordVisible"
                    @cancel="hidePasswordModal"
                >
                    <template v-slot:closeIcon>
                        <img src="@/static/images/delete.png" class="close" />
                    </template>
                    <div class="public-class password-container">
                        <div class="title">
                            {{ lan.$t("xiugaizhanghaomima") }}
                        </div>
                        <div class="form-box">
                            <div class="form-item">
                                <label class="label">{{
                                    lan.$t("yuanmima")
                                }}</label>
                                <a-input-password
                                    size="small"
                                    :visibilityToggle="false"
                                    v-model:value="passwordForm.original"
                                />
                            </div>
                            <div class="form-item">
                                <label class="label">{{
                                    lan.$t("xinmima")
                                }}</label>
                                <a-input-password
                                    size="small"
                                    :visibilityToggle="false"
                                    v-model:value="passwordForm.password"
                                />
                            </div>
                            <div class="form-item">
                                <label class="label">{{
                                    lan.$t("xinmimatwo")
                                }}</label>
                                <a-input-password
                                    size="small"
                                    :visibilityToggle="false"
                                    v-model:value="passwordForm.topassword"
                                />
                            </div>
                        </div>
                        <div @click="updateUserPassword" class="confirm-btn">
                            {{ lan.$t("xiugaimima") }}
                        </div>
                    </div>
                </a-modal>
            </div>
            <div class="submit-btn" @click="submitInfo">
                {{ lan.$t("baocun") }}
            </div>
        </div>
        <nav-bottom></nav-bottom>
    </div>
</template>

<script lang="ts">
import {
    computed,
    defineComponent,
    onMounted,
    reactive,
    Ref,
    ref,
    toRaw,
    watch,
} from "vue";
import { UserOutlined, PlaySquareOutlined } from "@ant-design/icons-vue";
import NavBottom from "@/components/NavBottom.vue";
import { uploadflie } from "@/utils/vod";
import store from "@/store";
import smile from "@/static/images/smile.png";
import smilet from "@/static/images/smilet.png";
import {
    changetel,
    checksmscode,
    editpassword,
    editsystemsetting,
    getarchives,
    getcurrencys,
    getlanguages,
    getquhaolist,
    getzonelist,
    interests,
    putmember,
    sendsms,
} from "@/api/index";
import { message } from "ant-design-vue";
import { useI18n } from "@/utils/i18n";

export default defineComponent({
    name: "Archives",
    components: {
        UserOutlined,
        PlaySquareOutlined,
        NavBottom,
    },
    setup() {
        const lan: any = useI18n();
        interface SpeakItem {
            lang: string;
            proficiency: number;
        }
        const otherSpeak: Array<SpeakItem> = [
            {
                lang: "请选择",
                proficiency: 0,
            },
        ];
        const userinfo = computed(() => {
            return store.state.userinfo;
        });
        // 表单数据
        const currencyindex = ref<string>(userinfo.value.currency);
        const formData = ref(toRaw(userinfo.value));
        watch(userinfo, () => {
            formData.value = toRaw(userinfo.value);
            // console.log(lan.$s(), formData.value.languageValue)
            if(lan.$s() != formData.value.languageValue){
                location.reload();
            }
            console.log(userinfo.value.currencyValue, "listsssss");
            currencyindex.value = userinfo.value.currency;
            console.log(currencyindex.value, "listsssss");
        });
        const modalNode = () =>
            document.getElementsByClassName("modal-container")[0];

        const chiveslist = ref<any>([[], []]);
        const languages = ref<unknown>([]);
        const quhaolist = ref<any>([]);
        const myquhao = ref<string>("");

        const mynewtel = ref<string>("");

        const isSecondStep: Ref<boolean> = ref(false);
        const currencylist = ref<any>([
            {
                alias: "CNY",
                code: "104110041000",
                createdAt: "2020-08-19 11:54:59",
                deletedAt: null,
                dictionaryid: 241,
                name: "人民币￥",
                position: 1,
                publish: 1,
                updatedAt: "2020-08-19 11:54:59",
                value: "1",
            },
        ]);
        const zonelist = ref<any>([
            {
                city: "中途岛",
                gmt: "GMT-11:00",
                id: "Pacific/Midway",
                zoneid: 1,
            },
        ]);
        const interestslist = ref<any>([
            {
                "dictionaryid": 202,
                "name": "中文",
                "alias": "",
                "code": "104110001000",
                "position": 1,
                "publish": 1,
                "value": "1",
                "deleted_at": null,
                "created_at": "2020-08-13 18:17:18",
                "updated_at": "2020-08-13 18:17:18"
            }
        ])
        onMounted(async () => {
            chiveslist.value = await getarchives();
            languages.value = await getlanguages();
            quhaolist.value = await getquhaolist();
            myquhao.value = quhaolist.value[0].code;
            currencylist.value = await getcurrencys();
            zonelist.value = await getzonelist();
            interestslist.value = await interests();
            // currencyindex.value=userinfo.value.currencyValue
            console.log(userinfo.value);
        });

        /**
         * 修改用户名
         * @return { void }
         */
        const showname = ref(true);
        function updateUserName(): void {
            console.log("修改");
            showname.value = false;
        }
        /**
         * 添加我还会说语言
         * @return { void }
         */
        function addSpeakLang(): void {
            formData.value.willsay.push({
                name: "请选择",
                level: 0,
            });
            formData.value.willsayValue.push({
                name: "",
                level: 0,
            });
        }
        // 验证码
        const verificationCode: Ref<string> = ref(""),
            updatePhoneVisible: Ref<boolean> = ref(false);
        /**
         * 关闭手机对话框 清空数据
         */
        function hidePhoneModal(): void {
            verificationCode.value = "";
            isSecondStep.value = false;
            console.log("close");
        }
        /**
         * 显示修改手机号对话框
         */
        function togglePhoneModal(value: boolean): void {
            updatePhoneVisible.value = value;
            if (!value) {
                hidePhoneModal();
            }
        }
        // 获取验证码间隔
        const remainTime: Ref<number> = ref(0);
        /**
         * 计算验证码倒计时
         */
        function computedVerificationCode(): void {
            remainTime.value = 60;
            const timer = setInterval(() => {
                if (remainTime.value > 0) {
                    remainTime.value--;
                } else {
                    clearInterval(timer);
                }
            }, 1000);
        }
        /**
         * 发送验证码
         */
        function sendVerificationCode(tel: string): void {
            if (remainTime.value === 0) {
                computedVerificationCode();
                console.log(tel, "send");
                sendsms(tel, 0);
            }
        }
        // 绑定手机号是否是第二步
        interface BindPhoneItem {
            number: string | number;
            code: string | number;
        }
        const bindPhone: BindPhoneItem = reactive({
            number: "",
            code: "",
        });
        /**
         * 绑定手机号下一步
         */
        async function nextPhoneStep(): Promise<void> {
            remainTime.value = 0;
            if (!isSecondStep.value) {
                console.log(formData.value.code);
                if (verificationCode.value == "") {
                    return;
                }
                const res = await checksmscode(
                    formData.value.code + formData.value.mobile,
                    verificationCode.value
                );
                console.log(res, "0.0");
                if (res) {
                    isSecondStep.value = true;
                }
                // isSecondStep.value = true;
            }

            // isSecondStep.value = true;
        }
        /**
         * 修改手机号
         * @return { void }
         */
        async function updatePhoneNumber(): Promise<void> {
            console.log("修改手机号");
            console.log(mynewtel.value, myquhao.value, bindPhone.code);
            const res = await checksmscode(
                myquhao.value + mynewtel.value,
                bindPhone.code.toString()
            );
            console.log(res, "xiugai");
            if (res) {
                const res1 = await changetel(mynewtel.value);
                if (res1) {
                    store.dispatch("setUserInfo");
                    updatePhoneVisible.value = false;
                }
            }
        }
        function getquhao(e?: any) {
            console.log(e);
            myquhao.value = e.toString();
        }
        // 是否显示修改密码框
        const updatePasswordVisible: Ref<boolean> = ref(false);
        interface PassWord {
            original?: string;
            password?: string;
            topassword?: string;
        }
        const passwordForm: PassWord = reactive({
            original: "",
            password: "",
            topassword: "",
        });
        /**
         * 密码对话框清空数据
         */
        function hidePasswordModal(): void {
            passwordForm.original = "";
            passwordForm.password = "";
            passwordForm.topassword = "";
        }
        /**
         * 显示修改密码对话框
         */
        function togglePasswordModal(value: boolean): void {
            updatePasswordVisible.value = value;
            if (!value) {
                hidePasswordModal();
            }
        }
        /**
         * 修改密码
         * @return { void }
         */
        function updateUserPassword(): void {
            console.log(toRaw(passwordForm));
            if (
                toRaw(passwordForm).password === toRaw(passwordForm).topassword
            ) {
                if (toRaw(passwordForm).original != "") {
                    // console.log(toRaw(passwordForm).password);
                    editpassword(toRaw(passwordForm));
                    togglePasswordModal(false);
                } else {
                    message.error(lan.$t('yuanmimaweikong'));
                }
            } else {
                message.error(lan.$t('mimabuyizhi'));
            }
        }
        /**
         * 提交表单
         * @return { void }
         */
        async function submitInfo(): Promise<void> {
            //  for(let i in toRaw(formData.value).willsay){
            //     console.log(toRaw(formData.value).willsay[i])
            // }
            const uesrinfo = toRaw(formData.value);
            // for (let m = 0; m < toRaw(chiveslist.value).length; m++) {
            //     for (const i in uesrinfo.willsayValue) {
            //         // console.log(toRaw(formData.value).willsayValue[i])

            //         if (typeof uesrinfo.willsay[i].name == "string") {
            //             // console.log(toRaw(chiveslist.value))
            //             if (
            //                 uesrinfo.willsay[i].name ==
            //                 toRaw(chiveslist.value)[m].name
            //             ) {
            //                 uesrinfo.willsayValue[i].name = toRaw(
            //                     chiveslist.value
            //                 )[m].languageid;
            //             }
            //         } else {
            //             uesrinfo.willsayValue[i].name =
            //                 uesrinfo.willsay[i].name;
            //         }

            //         uesrinfo.willsayValue[i].level = uesrinfo.willsay[i].level;
            //     }
            // }

            for(const i in uesrinfo.willsay){
                if(uesrinfo.willsay[i].name == '请选择'){
                    console.log(111)
                    break;
                }
                for(const j in chiveslist.value[1]){
                    if(uesrinfo.willsay[i].name == chiveslist.value[1][j].name){
                        uesrinfo.willsay[i].name = chiveslist.value[1][j].languageid
                    }
                    console.log(uesrinfo.willsay[i].name, chiveslist.value[1][j].name)
                }
            }
            const arr: any = {};
            for(const i in uesrinfo.willsay){
                // const a: any = {};
                if(uesrinfo.willsay[i].name == '请选择'){
                    console.log(111)
                    break;
                }
                arr[uesrinfo.willsay[i].name] = uesrinfo.willsay[i].level
                // arr.push(a);
                // arr.push({uesrinfo.willsay[i].name})
            }
            uesrinfo.willsay = arr;
            console.log(uesrinfo);

            // console.log(toRaw(formData.value));
            // if (uesrinfo.currency == "") {
            //     if (uesrinfo.currencyValue != "") {
            //         for (let i = 0; i < currencylist.value.length; i++) {
            //             if (
            //                 uesrinfo.currencyValue ==
            //                 currencylist.value[i].name
            //             ) {
            //                 uesrinfo.currency = currencylist.value[i].value;
            //             }
            //         }
            //     }
            // }
            // eslint-disable-next-line
            const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            console.log(userinfo.value.email);
            // console.log();
            // for (let i = 0; i < currencylist.value.length; i++) {
            //     if (
            //         uesrinfo.currencyValue ==
            //         currencylist.value[i].name
            //     ) {
            //         uesrinfo.currency = currencylist.value[i].value;
            //     }
            // }
            for(const i in chiveslist.value[0]){
                if(chiveslist.value[0][i].name == uesrinfo.country){
                    uesrinfo.countryValue = chiveslist.value[0][i].id
                }
            }
            for(const i in zonelist.value){
                if((zonelist.value[i].city + zonelist.value[i].gmt) == uesrinfo.zoneStr){
                    uesrinfo.zoneid = zonelist.value[i].zoneid
                }
                // console.log(zonelist.value[i].city + zonelist.value[i].gmt, uesrinfo.zoneStr)
            }
            if (reg.test(userinfo.value.email)) {
                putmember(uesrinfo);
            } else {
                message.error(lan.$t('youxiangcuowu'));
            }
        }

        // uploadflie()3.

        function setlevel(index: number, level: number) {
            store.state.userinfo.willsay[index].level = level;
        }

        /**
         * 上传视频
         */
        interface AntUpload {
            action: string;
            data: unknown;
            file: File;
        }
        const uploadprogress: Ref<number> = ref(0);
        async function uploads(file: AntUpload) {
            uploadprogress.value = 0;

            const res = await uploadflie(file.file, (info: any) => {
                console.log(info);
                uploadprogress.value = info.percent.toFixed(2) * 100;
            });
            userinfo.value.video = res.video.url;
        }

        if (formData.value.video != "") {
            uploadprogress.value = 100;
        }
        watch(formData, () => {
            if (formData.value.video != "" && uploadprogress.value == 0) {
                uploadprogress.value = 100;
            }
            console.log(formData.value.country)
        });

        function choosewillsay(e?: any) {
            console.log(formData.value.willsayValue);
            console.log(e);
        }

        function currencychange(e?: any) {
            console.log(e);
            userinfo.value.currencyValue = e;
            // editsystemsetting({currency:e})
        }
        async function uploadspic(file: AntUpload) {
            const res = await uploadflie(file.file, (info: any) => {
                console.log(info);
                // uploadpicprogress.value = info.percent.toFixed(2) * 100;
            });
            console.log(res);

            //  picinfo.fileId=res.fileId
            //  picinfo.url=res.video.url
            formData.value.img = res.video.url;
        }
        // function selguojia(e: any){
        //     userinfo.value.countryValue = e;
        //     console.log(e)
        // }

        return {
            modalNode,
            formData,
            updateUserName,
            addSpeakLang,
            verificationCode,
            updatePhoneVisible,
            hidePhoneModal,
            sendVerificationCode,
            remainTime,
            isSecondStep,
            nextPhoneStep,
            bindPhone,
            updatePhoneNumber,
            togglePhoneModal,
            updatePasswordVisible,
            togglePasswordModal,
            hidePasswordModal,
            passwordForm,
            updateUserPassword,
            submitInfo,
            userinfo: formData,
            uploads,
            smile,
            smilet,
            setlevel,
            chiveslist,
            languages,
            uploadprogress,
            choosewillsay,
            mynewtel,
            quhaolist,
            getquhao,
            myquhao,
            currencylist,
            zonelist,
            currencychange,
            currencyindex,
            showname,
            uploadspic,
            lan,
            interestslist
        };
    },
});
</script>

<style lang="scss" scoped>
.archives {
    width: 100%;
    min-width: 700px;
    background-color: #ffffff;
    padding: 46px;
    border-radius: 17px;
    position: relative;
    .telbox {
        margin-left: 15px;
        font-size: 12px;
    }
    .update-btn {
        font-size: 11px;
        color: #08ae98;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
    }
    .user-info {
        margin-bottom: 42px;
        .avatar {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin-bottom: 30px;
            .user-name {
                display: flex;
                align-items: flex-end;
                margin-top: 11px;
                font-weight: bold;
                .value {
                    font-size: 17px;
                    color: #111111;
                    margin: 0 10px;
                    line-height: 1;
                }
            }
        }
        .form-box {
            margin-bottom: 20px;
            .title {
                font-size: 11px;
                font-weight: bold;
                color: #111111;
                margin-bottom: 28px;
            }
            .main-container {
                margin-left: 17px;
                ::v-deep(.input-box) {
                    display: flex;
                    align-items: center;
                    margin-bottom: 28px;
                    .label {
                        width: 60px;
                        font-size: 11px;
                        font-weight: 500;
                        color: #808080;
                        margin-right: 30px;
                        line-height: 23px;
                        align-self: flex-start;
                    }
                    .ant-input {
                        width: 171px;
                        padding: 6px 11px;
                        border-radius: 3px;
                        border: 1px solid #dcdfe0;
                        font-size: 11px;
                        color: #3f3f3f;
                    }
                    .ant-select {
                        font-size: 12px;
                        color: #3f3f3f;
                    }
                    .ant-select-dropdown {
                        .ant-select-dropdown-menu-item {
                            font-size: 12px;
                        }
                    }
                }
                .speak-lang {
                    .speak-array {
                        display: flex;
                        .lang-items {
                            .speak-item {
                                display: flex;
                                align-items: center;
                                &:not(:last-child) {
                                    margin-bottom: 28px;
                                }
                                .proficiency {
                                    margin: 0 107px 0 17px;
                                    display: flex;
                                    align-items: center;
                                    .p-title {
                                        font-size: 11px;
                                        font-weight: 500;
                                        color: #808080;
                                        margin-right: 14px;
                                    }
                                    .value {
                                        display: flex;
                                        > img {
                                            width: 15px;
                                            height: 15px;
                                            margin-right: 6px;
                                            cursor: pointer;
                                        }
                                    }
                                }
                            }
                        }
                        .update-btn {
                            align-self: flex-end;
                        }
                    }
                }
                .video-lang {
                    .upload-image {
                        width: 171px;
                        height: 96px;
                        border: 1px solid #dcdfe0;
                        border-radius: 3px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: 17px;
                    }
                    .demand {
                        line-height: 17px;
                        font-size: 10px;
                        font-weight: 500;
                        color: #808080;
                        // width: 134px;
                        p {
                            margin: 0;
                        }
                    }
                }
                .introduce {
                    .ant-input {
                        width: 359px;
                    }
                    .introduce-textarea {
                        height: 85px;
                        min-height: 85px;
                        max-height: 85px;
                    }
                }
                .phone-box {
                    .phone {
                        font-size: 11px;
                        font-weight: bold;
                        color: #404040;
                        margin-right: 112px;
                    }
                }
                .password-box {
                    .password {
                        margin-right: 123px;
                    }
                }
            }
        }
        ::v-deep(.modal-dialog) {
            .close {
                width: 14px;
                height: 14px;
            }
            .ant-modal-content {
                box-sizing: border-box;
                padding: 25px 30px;
                width: 569px;
                background: #ffffff;
                box-shadow: 0px 4px 6px 0px rgba(102, 102, 102, 0.07);
                border-radius: 28px;
                .public-class {
                    .title {
                        font-size: 11px;
                        font-weight: bold;
                        color: #111111;
                    }
                    .form-box {
                        .form-item {
                            display: flex;
                            align-items: center;
                            .label {
                                font-size: 11px;
                                font-weight: 500;
                                color: #7f7f7f;
                            }
                        }
                    }
                    .confirm-btn {
                        display: inline-block;
                        border-radius: 2px;
                        background: #07ad97;
                        font-size: 9px;
                        font-weight: 500;
                        color: #ffffff;
                        text-align: center;
                        cursor: pointer;
                        user-select: none;
                        height: 22px;
                        line-height: 22px;
                        padding: 0 17px;
                    }

                    // .confirm-btn:hover {
                    //     background: #07ad97;
                    // }
                }
                .password-container {
                    .title {
                        margin-bottom: 30px;
                    }
                    .form-box {
                        margin-bottom: 50px;
                        .form-item {
                            .label {
                                width: 90px;
                                margin-right: 10px;
                            }
                            &:not(:last-child) {
                                margin-bottom: 28px;
                            }
                            .ant-input-password {
                                width: 170px;
                                font-size: 11px;
                                color: #3f3f3f;
                                // .ant-input {
                                //     letter-spacing: 0;
                                // }
                            }
                        }
                    }
                }
                .phone-container {
                    .sub-title {
                        margin: 16px 0 40px;
                    }
                    .form-box {
                        margin-bottom: 50px;
                        .form-item {
                            .label {
                                width: 80px;
                                margin-right: 10px;
                            }
                            .ant-input {
                                width: 170px;
                                font-size: 11px;
                                color: #3f3f3f;
                                margin-right: 28px;
                            }
                        }
                    }
                }
                .second-step {
                    .title {
                        margin-bottom: 33px;
                    }
                    .form-box {
                        .form-item {
                            &:not(:last-child) {
                                margin-bottom: 28px;
                            }
                        }
                    }
                }
            }
        }
        .submit-btn {
            width: 63px;
            height: 23px;
            background: #08ae98;
            border-radius: 3px;
            font-size: 10px;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            line-height: 23px;
            cursor: pointer;
            user-select: none;
        }
        // .submit-btn:hover {
        //     background: #08ae98;
        // }
    }
    ::v-deep(.ant-upload-list) {
        display: none;
    }
    .avatar-uploader {
        width: unset;
        padding: 0;
        border: none;
        background-color: none;
        position: relative;
        &::v-deep(.ant-upload) {
            padding: 0;
            border: none;
            background-color: #fff;
            width: unset;
            height: unset;
        }
        .mengceng {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            background-color: #000;
            border-radius: 50%;
            line-height: 1;
            &:hover {
                opacity: 0.5;
            }
        }
    }
}
</style>