<template v-if="state.selectDto.length">
  <el-select v-model="localSelect" :placeholder="localTextPla" @change="onChange">
    <el-option v-for="item in state.selectDto" :key="item.id" :label="item.name" :value="item.value" />
  </el-select>
</template>

<script setup lang="ts" name="my-select-request">
import {onMounted, reactive, ref, watch} from "vue";
import {sessionStorageSet} from "/@/utils/sessionStorageSet";
import {DictApi} from "/@/api/admin/Dict";
import {DictGetListDto} from "/@/api/admin/data-contracts";
  /**
   * 接受父组件中传过来的数据字典id,
   * 根据id去查询
   * */
  const props = defineProps({
    textPla:String,
    select:String,
    code:String
  })

  const localSelect = ref(props.select)
  const localTextPla = ref(props.textPla)

  /**
   * ref为局部变量，需要监听组件的值来改变子组件的值，
   * 实现重置表单的问题
   * */
  watch(()=>props.select,(newVal)=>{
    localSelect.value = newVal
  })

  const emits = defineEmits(['search'])

  const state = reactive({
    /**选择选择值*/
    selectDto: <DictGetListDto>[],
  })

  const onChange = () =>{
    emits('search',localSelect)
  }
  /**
   * 获取缓存，缓存不存在就发送请求
   * */
  const init = async () => {
    state.selectDto = sessionStorageSet.getItemWithExpiration(props.code as string)
    if (!state.selectDto){
      const res = await new DictApi().getList([props.code] as string[])
      /**存一天的缓存*/
      sessionStorageSet.setItemWithExpiration(props.code as string, res?.data,1)
      state.selectDto = sessionStorageSet.getItemWithExpiration(props.code as string)
    }
  }


  onMounted( () => {
    init()
  })
</script>

<style scoped lang="scss">

</style>
