
<template>
  <div class="lang-input-wrapper">
    <el-input
      v-model="displayValue"
      v-bind="$attrs"
      :type="type"
    >
      <template #suffix>
        <el-popover
          placement="right"
          trigger="click"
          :width="300"
          popper-class="lang-popover"
          ref="popoverRef"
        >
          <template #reference>
            <Icon icon="fa:language" class="lang-icon" />
          </template>
          <div class="lang-popover-content">
            <div class="lang-item mt-10">
              <span class="flag-icon cn-flag"></span>
              <el-input v-model="chineseValue" disabled placeholder="中文" />
            </div>
            <div class="lang-item mt-10">
              <span class="flag-icon uk-flag"></span>
              <el-input v-model="englishValue" placeholder="英文" />
            </div>
            <div class="lang-item mt-10">
              <span class="flag-icon ru-flag"></span>
              <el-input v-model="russiaValue" placeholder="俄文" />
            </div>
            <div class="popover-footer">
              <el-button size="small" @click="closePopover">取消</el-button>
              <el-button size="small" type="primary" @click="saveAndClose">确认</el-button>
            </div>
          </div>
        </el-popover>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Edit } from '@element-plus/icons-vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  }
})

const emit = defineEmits(['update:modelValue'])
const popoverRef = ref(null)

const chineseValue = ref('')
const englishValue = ref('')
const russiaValue = ref('')

const displayValue = computed({
  get() {
    return props.modelValue.split('~~')[0] || ''
  },
  set(val) {
    // if (englishValue.value !== null&&englishValue.value !== undefined&&englishValue.value !== '') {
    //   emit('update:modelValue', val + '~~en**' + englishValue.value)
    // }else {
      emit('update:modelValue', val)
    // }
  }
})

watch(() => props.modelValue, (newVal) => {
  const [chinese, english, russia] = newVal.split('~~')
  chineseValue.value = chinese || ''
  englishValue.value = english?english.replace('en**','') : ''
  russiaValue.value = russia?russia.replace('ru**','') : ''
}, { immediate: true })

const saveLang = () => {
  emit('update:modelValue', chineseValue.value + '~~en**' + englishValue.value+'~~ru**'+russiaValue.value)
}

const closePopover = () => {
  popoverRef.value?.hide()
}

const saveAndClose = () => {
  saveLang()
  closePopover()
}
</script>

<style scoped>
.lang-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.lang-icon {
  cursor: pointer;
  color: var(--el-color-primary);
  margin-left: 8px;
  font-size: 20px;
}
.lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.flag-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.cn-flag {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3crect width='512' height='512' fill='%23de2910'/%3e%3cpath fill='%23ffde00' d='M106.7 106.7h298.7v298.7H106.7z'/%3e%3cpath fill='%23de2910' d='M256 167.5l-33.2 102-87.5-63.5h108.1L289.2 269.5z'/%3e%3c/svg%3e");
}
.uk-flag {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3e%3cpath fill='%23012169' d='M0 0h60v30H0z'/%3e%3cpath fill='%23fff' d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3e%3cpath fill='%23c8102e' d='M0 0l60 30m0-30L0 30' stroke='%23c8102e' stroke-width='4'/%3e%3cpath fill='%23c8102e' d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3e%3c/svg%3e");
}
.ru-flag {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3e%3crect width='60' height='10' fill='%23FFFFFF'/%3e%3crect y='10' width='60' height='10' fill='%230039A6'/%3e%3crect y='20' width='60' height='10' fill='%23D52B1E'/%3e%3c/svg%3e");
}
.mt-10 {
  margin-top: 10px;
}
.popover-footer {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  //gap: 3px;
}
</style>

<style>
.lang-popover {
  padding: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}
.lang-popover .el-input__wrapper {
  //padding: 8px 12px;
}
.lang-popover .el-input__inner {
  font-size: 12px;
}
</style>
