<template>
  <mobile-sub-layout
    :title="$t('pages/account/Language')"
    :lineHeight="4"
  >
    <view class="ptb30 plr30">
      <view v-for="(item, index) in langStore.languageList" :key="index" @click.stop="handleChange(item)">
        <view class="ft16 ptb24 flex-acenter flex-sbetween">
          <view class="">
            {{ item.name }}
          </view>
          <theme-image v-if="item.key === langStore.lang" src="@/static/app/icon-check-white.png" style="width: 24rpx; height: 24rpx;" />
        </view>
      </view>
    </view>
    <ConfirmPopup
      ref="confirmPopupRef"
      :text="t('app.languageChange')"
      @confirm="confirmChange"
    />
  </mobile-sub-layout>
</template>

<script setup>
import { useAppStore } from '@/store/useAppStore'
import { useLangStore } from '@/store/useLangStore'
import { useI18n } from 'vue-i18n'
import ConfirmPopup from '@/components/popup/ConfirmPopup.vue'
import { reactive, ref } from 'vue';

const appStore = useAppStore()
const langStore = useLangStore()
const { t } = useI18n()
const confirmPopupRef = ref(null)

const pageData = reactive({
  selectItem: {}
})

const handleChange = (item) => {
  pageData.selectItem = item
  confirmPopupRef.value.show()
}

const confirmChange = () => {
  langStore.changeLang(pageData.selectItem)
}

</script>

<style lang="scss" scoped>

</style>
