<template>
  <van-radio-group v-model="langStore.lang" @change="handleChange" class="radio-group">
    <van-cell-group inset>
      <van-cell v-for="(item, index) in langList" :key="index" :title="item.label" clickable  @click="langStore.lang = item.key" >
        <template #right-icon>
          <van-radio :name="item.key" checked-color="#4765dd"/>
        </template>
      </van-cell>
    </van-cell-group>
  </van-radio-group>
</template>

<script setup> 
import { langList } from "@/i18n/index.js" 
import { useLang } from "@/i18n/vant.js"
import { useLangStore } from "@/stores/modules/langStore"

const langStore = useLangStore() 
const router = useRouter()

const handleChange =  async (value) =>{
  await langStore.changeLang(value)
  useLang(value)
  router.go(0)
}

</script>

<style lang="less" scoped>
.radio-group{
  margin-top: 17px;
}
.van-cell{
  height: 44px;
  background: @bg-color1;
  border-bottom: 1px solid @bg-color1;
  font-size: 15px;
  align-items: center;
  &::after{
    border-bottom: 1px solid #F2F2F2;
  }
}
:deep(.van-cell__title){
  font-family: PingFang SC, PingFang SC;
  font-weight: 500 ;
  font-size: 15px;
  color: #000000;
}
</style>