<!--
 * @Description : 全局语言选择组件
 * @Author      : jinxin
 * @Date        : 2022-10-12 14:26:54
-->
<template>
  <el-dialog :model-value="isShow" title="语言选择" center :show-close="false" width="440px">
    <el-form label-position="left" label-width="100px">
      <div class="change-la">请先选择需要修改资料的语言</div>
      <el-form-item label="目标语言" prop="languageList">
        <el-select v-model="data.languageValue" filterable placeholder="请选择" style="width: 83%;">
          <el-option v-for="item in data.languageList" :key="item.id" :label="item.name" :value="item.id" @click="changeCom(item)" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="text-r">
        <el-button type="primary" plain @click="closeClick">取消</el-button>
        <el-button type="primary" @click="comfirmClick({id:data.languageValue,name:data.languageName})">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { defineComponent, reactive, onMounted } from 'vue'
import Request from '@/utils/request.js'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'LanguageSelect',
  props: {
    isShow: Boolean
  },
  emits: ["update:isShow", 'getLanguageId'],
  setup (props, context) {
    // 生拿周期
    onMounted(() => {
      getList()
    })
    // 创建实例
    const request = new Request()
    // 定义变量
    let data = reactive({
      languageValue: '',
      languageName:'',
      languageList: []
    })
    // 取消弹窗
    const closeClick = () => {
      data.languageValue = ''
      context.emit("update:isShow", false);
    }
    // 确认 - 传值父级 - 往下跳转
    const comfirmClick = (val) => {
      if (val) {
        data.languageValue = ''
        context.emit('getLanguageId', val)
        context.emit("update:isShow", false);
      } else {
        ElMessage({
          type: 'error',
          message: '请先选择语言'
        })
      }
    }
    // 改变获取名字跟值
    const changeCom = (it) => {
      console.log('语言切换 --> it',it)
      data.languageValue = it.id
      data.languageName = it.name
    }
    // 获取语言
    const getList = () => {
      request.get('v1/lang').then(res => {
        if (res.status == 200) {
          data.languageList = res.data
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
    }
    return {
      data,
      props,
      closeClick,
      comfirmClick,
      changeCom
    }
  }
})
</script>
<style scoped>
.change-la {
  margin-bottom: 15px;
}
</style>
