<template>
  <t-popup v-model="dialog_visible" placement="bottom" :lock-scroll="false">
    <div class="custom-change-language-popup">
      <template v-for="item in options" :key="item.value">
        <div class="btn" @click="onChange(item.value)">{{ item.label }}</div>
      </template>
    </div>
  </t-popup>
</template>

<script lang="ts" setup>
import { ref } from "@vue/reactivity";
import { watch } from "@vue/runtime-core";
const props = defineProps({
  visible: Boolean,
  options: Object as any,
});
const emit = defineEmits(["update:visible", "change"]);
const dialog_visible = ref(false);
watch(
  () => props.visible,
  (v) => {
    dialog_visible.value = v;
  }
);
watch(
  () => dialog_visible.value,
  (v) => {
    emit("update:visible", v);
  }
);
const onChange = (value: string) => {
  emit("update:visible", false);
  emit("change", value);
};
</script>

<style lang="less" scoped>
@import url(~@/style/flex.less);
.custom-change-language-popup {
  width: 100vw;
  background: var(--theme-color2);
  .btn {
    border-bottom: 1px solid var(--theme-color38);
    font-size: 15px;
    color: var(--theme-color9);
    height: 60px;
    .dja();
  }
  .btn:last-child {
    border-bottom: none;
  }
}
</style>
