<template>
    <div class="archives">
        <div class="user-info">
            <div class="avatar">
                <a-avatar :size="85" shape="circle" src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg">
                    <template v-slot:icon><UserOutlined /></template>
                </a-avatar>
                <div class="user-name">
                    <div class="value">{{ formData.name }}</div>
                    <div class="update-btn" @click="updateUserName">修改</div>
                </div>
            </div>
            <div class="form-box basic">
                <div class="title">基本信息</div>
                <div class="main-container">
                    <div class="input-box country">
                        <div class="label">来自国家</div>
                        <a-select
                            v-model:value="formData.country"
                            style="width: 171px"
                            size="small"
                            ref="select"
                        >
                            <a-select-option v-for="(item, index) in ['美国', '英国']" :key="index" :value="item">
                                {{ item }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="input-box address">
                        <div class="label">居住地</div>
                        <a-input size="small" v-model:value="formData.address" placeholder="请输入居住地" />
                    </div>
                    <div class="input-box teach-lang">
                        <div class="label">授课语言</div>
                        <a-select
                            v-model:value="formData.teachingLang"
                            style="width: 171px"
                            size="small"
                            ref="select"
                        >
                            <a-select-option v-for="(item, index) in ['英语', '法语']" :key="index" :value="item">
                                {{ item }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="input-box speak-lang">
                        <div class="label">我还会说</div>
                        <div class="speak-array">
                            <div class="lang-items">
                                <div class="speak-item" v-for="(lang, index) in formData.speakLang" :key="index">
                                    <a-select
                                        v-model:value="lang.lang"
                                        style="width: 171px"
                                        size="small"
                                        ref="select"
                                    >
                                        <a-select-option v-for="(item, index) in ['英语', '法语']" :key="index" :value="item">
                                            {{ item }}
                                        </a-select-option>
                                    </a-select>
                                    <div class="proficiency">
                                        <div class="p-title">熟练度</div>
                                        <div class="value">
                                            <a-rate v-model:value="lang.proficiency" style="fontSize: 15px">
                                                <template v-slot:character><SmileOutlined /></template>
                                            </a-rate>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="update-btn" @click="addSpeakLang">继续添加</div>
                        </div>
                    </div>
                    <div class="input-box native-lang">
                        <div class="label">母语</div>
                        <a-select
                            v-model:value="formData.nativeLang"
                            style="width: 171px"
                            size="small"
                            ref="select"
                        >
                            <a-select-option v-for="(item, index) in ['英语', '法语']" :key="index" :value="item">
                                {{ item }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="input-box video-lang">
                        <div class="label">短视频</div>
                        <a-upload
                            list-type="picture"
                            action="//jsonplaceholder.typicode.com/posts/"
                        >
                            <div class="upload-image">
                                <PlaySquareOutlined style="fontSize: 22px;" />
                            </div>
                        </a-upload>
                        <div class="demand">
                            <p class="one-line-hide">视频要求：</p>
                            <p class="one-line-hide"> 1.上传视频时间要求为30s之内</p>
                            <p class="one-line-hide">2.支持文件大小100M</p>
                            <p class="one-line-hide">3.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…</p>
                        </div>
                    </div>
                    <div class="input-box introduce">
                        <div class="label">自我介绍</div>
                        <a-textarea v-model:value="formData.introduce" />
                    </div>
                </div>
            </div>
            <div class="form-box contact">
                <div class="title">联系方式</div>
                <div class="main-container">
                    <div class="input-box mailbox">
                        <div class="label">邮箱</div>
                        <a-input size="small" v-model:value="formData.mail" placeholder="请输入邮箱" />
                    </div>
                    <div class="input-box phone-box">
                        <div class="label">手机号</div>
                        <div class="phone">{{ formData.phone }}</div>
                        <div class="update-btn" @click="updatePhoneNumber">更换手机号</div>
                    </div>
                </div>
            </div>
            <div class="form-box system-setting">
                <div class="title">系统设置</div>
                <div class="main-container">
                    <div class="input-box password-box">
                        <div class="label">密码</div>
                        <div class="password">{{ formData.password }}</div>
                        <div class="update-btn" @click="updateUserPassword">修改密码</div>
                    </div>
                    <div class="input-box time-zone-box">
                        <div class="label">时区</div>
                        <a-select
                            v-model:value="formData.timeZone"
                            style="width: 171px"
                            size="small"
                            ref="select"
                        >
                            <a-select-option v-for="(item, index) in ['北京 GMT +08:00']" :key="index" :value="item">
                                {{ item }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="input-box currency-box">
                        <div class="label">货币</div>
                        <a-select
                            v-model:value="formData.currency"
                            style="width: 171px"
                            size="small"
                            ref="select"
                        >
                            <a-select-option v-for="(item, index) in ['人民币']" :key="index" :value="item">
                                {{ item }}
                            </a-select-option>
                        </a-select>
                    </div>
                    <div class="input-box time-zone">
                        <div class="label">语言</div>
                        <a-select
                            v-model:value="formData.language"
                            style="width: 171px"
                            size="small"
                            ref="select"
                        >
                            <a-select-option v-for="(item, index) in ['英语', '中文']" :key="index" :value="item">
                                {{ item }}
                            </a-select-option>
                        </a-select>
                    </div>
                </div>
            </div>
            <div class="submit-btn" @click="submitInfo">保存信息</div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { UserOutlined, SmileOutlined, PlaySquareOutlined } from '@ant-design/icons-vue';

export default defineComponent({
    name: "Archives",
    components: {
        UserOutlined,
        SmileOutlined,
        PlaySquareOutlined,
    },
    setup(){
        interface SpeakItem{
            lang: string;
            proficiency: number;
        }
        const otherSpeak: Array<SpeakItem> = [{
            lang: '请选择',
            proficiency: 0,
        }];
        const formBasic = {
            name: 'Lorem Sum',
            country: '美国',
            address: '',
            teachingLang: '英语',
            speakLang: otherSpeak,
            nativeLang: '英语',
            shortVideo: '',
            introduce: '',
            mail: '',
            phone: '136 **** 6111',
            password: '***********',
            timeZone: '北京 GMT +08:00',
            currency: '人民币',
            language: '中文',
        }
        // 表单数据
        const formData = reactive(formBasic);
        /**
         * 修改用户名
         */
        function updateUserName (): void {
            console.log('修改');
            
        }
        /**
         * 添加我还会说语言
         */
        function addSpeakLang (): void {
            formData.speakLang.push({
                lang: '请选择',
                proficiency: 0,
            });
        }
        /**
         * 修改手机号
         */
        function updatePhoneNumber (): void {
            console.log('修改手机号');
            
        }
        /**
         * 修改密码
         */
        function updateUserPassword(): void {
            console.log('修改密码');
            
        }
        /**
         * 提交表单
         */
        function submitInfo (): void {
            console.log('12');
            
        }
        return {
            formData,
            updateUserName,
            addSpeakLang,
            updatePhoneNumber,
            updateUserPassword,
            submitInfo,
        }
    }
});
</script>

<style lang="scss" scoped>
.archives {
    width: 100%;
    background-color: #ffffff;
    padding: 46px;
    .update-btn {
        font-size: 11px;
        color: #08AE98;
        font-weight: 500;
    }
    .user-info {
        .avatar {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            .user-name {
                display: flex;
                align-items: flex-end;
                margin-top: 11px;
                font-weight: bold;
                .value {
                    font-size: 17px;
                    color: #111111;
                    margin-right: 10px;
                }
            }
        }
        .form-box {
            margin-bottom: 20px;
            .title {
                font-size: 11px;
                font-weight: bold;
                color: #111111;
                margin-bottom: 28px;
            }
            .main-container {
                margin-left: 17px;
                .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;
                    }
                }
                .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;
                                    }
                                }
                            }
                        }
                        .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;
                    }
                }
                .phone-box {
                    .phone {
                        font-size: 11px;
                        font-weight: bold;
                        color: #404040;
                        margin-right: 112px;
                    }
                }
                .password-box {
                    .password {
                        margin-right: 123px;
                    }
                }
            }
        }
        .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;
        }
    }
}
</style>