<template>
    <div class="accountEdit_page">
		<div class="accountEdit_page_body">
			<div class="accountEdit_page_body_item">
				<div class="accountEdit_page_body_item_name">{{$t('account.Country')}}:</div>
				<div class="accountEdit_page_body_item_inut">
					<a-select
                        v-model:value="Country"
                        size="large"
                        optionFilterProp="label"
                        :options="countryList"
                        placeholder="Please select"
                        allowClear
                        show-search
                    ></a-select>
				</div>
			</div>
			<div class="accountEdit_page_body_item">
				<div class="accountEdit_page_body_item_name">{{$t('account.CompanyName')}}:</div>
				<div class="accountEdit_page_body_item_inut">
					<input type="text"  v-model="CompanyName">
				</div>
			</div>
			<div class="accountEdit_page_body_item">
				<div class="gallery_btn" @click="setSubmit">
					{{$t('account.Submit')}}
				</div>
			</div>
		</div>
		<div class="mark_loading" v-show="loadingShow">
            <a-spin size="large" />
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
import { Https } from "@/tool/https";
import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { country } from "@/tool/country";
import { useI18n } from 'vue-i18n'
export default defineComponent({
    components:{
    },
    setup() {
        const store = useStore();
        const {t} = useI18n();
		let userDetail:any= computed(()=>{
			return store.state.UserHabit.userDetail
		})
		let accountHomeData:any = reactive({
			Country:'',
			CompanyName:'',
			loadingShow:false,
			countryList:country
		})
		let setSubmit = ()=>{
			let data = {
				country:accountHomeData.Country,
				occupation:accountHomeData.CompanyName
			}
			accountHomeData.loadingShow = true
			Https.axiosGet(Https.httpUrls.updateUserInfo,{params:data}).
				then((rv:any)=>{
					let value = {
						userName:accountHomeData.editUserName
					}
					store.commit('upUserDetail',value)
					accountHomeData.loadingShow = false
					message.success(t('exportModel.jsContent7'))
				}).catch((err:any)=>{
					accountHomeData.loadingShow = false
				})
		}
		onMounted(()=>{
			let country = userDetail.value.country
			let CompanyName = userDetail.value.occupation
			accountHomeData.Country = country
			accountHomeData.CompanyName = CompanyName
		})
        return{
           ...toRefs(accountHomeData),
		   userDetail,
		   setSubmit,
        }
    },
    data(){
        return{
            
        }
    },
})
</script>
<style lang="less" scoped>
.accountEdit_page{
	height: 100%;
	overflow-y: auto;
	padding-bottom: 2rem;
	.accountEdit_page_body{
		width: 100%;
		// width: 85rem;
		.accountEdit_page_body_item{
			display: flex;
			margin-bottom: 20px;
			flex-direction: column;
			width: 100%;
			.gallery_btn{
				margin-left: auto;
			}
			input,textarea{
				padding-left: 11px;
				border-radius: 1.6rem;
				border: 2px solid #D0D0D0;
				width: 100%;
				font-size: 2rem;
			}
			input{
				height: 40px;
			}
			.accountEdit_page_body_item_name{
				color: #000;
				text-align: left;
				font-size: 2rem;
			}
			.accountEdit_page_body_item_inut{
				margin-top: 1.5rem;
				flex: 1;
				.ant-select-lg{
					font-size: 2rem;
				}
				.ant-select{
					width: 100%;
					border-radius: 1.6rem;
					border: 2px solid #D0D0D0;
					overflow: hidden;
					.ant-select-selector{
						border-radius: 1.6rem;
					}
					:deep(.ant-select-selector ){
						border: none !important;
					}
				}
				
			}
		}
		.accountEdit_page_body_item:last-child{
			justify-content: center;
		}
	}
}
</style>
