<script setup lang="ts">
import { computed, Ref, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import yuyan from '@/static/image/user/yuyan.png'

const { t, locale } = useI18n()

type itmeType = {
  name: string
  val: string
  isShow: boolean
}
type listType = [itmeType]
const check1 = computed(() => locale.value === 'cn')
const check2 = computed(() => locale.value === 'jp')
const check3 = computed(() => locale.value === 'en')
const check4 = computed(() => locale.value === 'sp')
const check5 = computed(() => locale.value === 'fr')

const list: Ref<listType> = ref([
  {
    name: 'yuyan.zhongwenjianti',
    val: 'cn',
    isShwo: check1
  },
  {
    name: 'yuyan.ribenyu',
    val: 'jp',
    isShwo: check2
  },
  {
    name: 'yuyan.yinyu',
    val: 'en',
    isShwo: check3
  },
  {
    name: 'yuyan.xibanyayu',
    val: 'sp',
    isShwo: check4
  },
  {
    name: 'yuyan.fayu',
    val: 'fr',
    isShwo: check5
  }
])

const checkLocale = (val: string) => {
  uni.setStorageSync('locale', val)
  locale.value = val
  console.log(check1.value, 'check1')
  console.log(check2.value, 'check2')
  console.log(check3.value, 'check3')
  console.log(check4.value, 'check4')
  console.log(check5.value, 'check5')
}
</script>
<template>
  <Navigater :title="t('user.qiehuanyuyan')" />
  <view class="box">
    <view class="title">
      <img :src="yuyan" />
      <span>{{ t('user.qiehuanyuyan') }}</span>
    </view>
    <view class="list">
      <view v-for="(item, i) in list" :key="i" class="item" @click="checkLocale(item.val)"
        ><span>{{ t(item.name) }}</span>
        <!-- <van-switch v-model="item.isShow" size="18px" active-color="#6A69E9" /> -->
        <van-icon v-if="item.val === locale" name="success" size="20px" color="#EE2560" />
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.box {
  padding: 0 1.25rem;
}

.title {
  margin-top: 0.9375rem;
  display: flex;
  align-items: center;
  img {
    width: 2.125rem;
    height: 2.125rem;
    margin-right: 0.625rem;
  }
  span {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
  }
}

.list .item:last-child {
  border-bottom: none;
}
.list {
  width: 20.9375rem;
  height: 15.75rem;
  border-radius: 1.25rem;
  background: #08182b;
  margin-top: 0.9063rem;
  padding-left: 1rem;
  padding-right: 1.0625rem;
  .item {
    width: 100%;
    height: 3.125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    align-items: center;
    background: #08182b;
    border-bottom: 1px solid #686868;

    .link {
      width: 18.4375rem;
      height: 0.0313rem;
    }
    span {
      font-weight: 400;
      font-size: 0.875rem;
      color: #fff;
    }
  }
}
</style>
