<template>
  <view class="comp_form_input_input">
    <input :value="Value" :placeholder="getPlaceholder()" @change="change"  :type="controls[KEY].type"  :disabled="controls[KEY].disabled"/>
    <button class="icon" @click="clear" v-if="showClearIcon && !controls[KEY].disabled"><iconfont class="iconfont" icon="close-circle-fill" /></button>
    <button class="dialog" @click="openDialog" :disabled="controls[KEY].disabled" v-if="!controls[KEY].disabled"><iconfont class="iconfont" icon="right"/></button>
  </view>
  

<!--   
  <template v-if="isDynamicComp"> 
    <DynamicComp v-if="show" @close="show=false" :menuID="dialogType" @returnData="returnData" :field="KEY" :alias="props.controls.alias||''" :control="props.controls" :search="search"></DynamicComp>
  </template> -->
  <!-- <template v-else>
    <component 
      v-if="show" @close="show=false" 
      :data="props.data"
      :is="components[dialogType]" 
      @returnData="returnData"
    />
  </template> -->
</template>

<script setup lang="ts">
import { ref, reactive, computed, onBeforeMount, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { translate } from '@/common/utils/language/index'
import DynamicComp from '@/common/views/pages/dynamic/dialog.vue'
import { getCarryData, clearCarryData } from '../js/index'
import { setMappings_dialog } from '@/common/views/components/dialog'

const props = <any>defineProps({
  KEY: { type: String, required: true, }, // 组件字段
  data: { type: String, default: '', }, // 组件数据 v-modal
  controls: { type: Object, default: () => {}, }, // 组件配置
})
const Value:any = computed({ //v-modal:data
  get: () => props.data[props.KEY], 
  set: v => emit('update:data', v)
})
const emit = defineEmits(['update:data','change:data','focus','blur', 'clear'])


const showClearIcon = ref(false)

const change = (e:any) => {
  Value.value = e.detail.value.trim()
  emit('change:data', e.detail.value.trim())
}
const clear = () => {
  Value.value = ''
  emit('change:data', '')
  showClearIcon.value = false
}
const getPlaceholder = () => {
  let text:any = translate('please input')
  if(props.controls[props.KEY].placeholder){
    text = props.controls[props.KEY].placeholder
  }
  if(props.controls[props.KEY].disabled){
    text = ''
  }
  return text
}

const dialogType = <any>ref('')
const isDynamicComp = <any>ref('')
const show = <any>ref(false)
const search = <any>ref('')
const Name:any = ref('')
const noGetName = ref(false)
const openDialog = () => {
  let id = props.controls[props.KEY].dialog.type
  uni.$once('returnData',(res:any)=>{
    console.log(res);
    console.log(props.KEY)
    let arr = res.data
    if(arr.length==1){
      console.log(arr[0][props.KEY])
      Value.value = arr[0][props.KEY]
      emit('change:data', arr[0][props.KEY])
    }
  })
  uni.navigateTo({
    url: `/common/views/pages/dynamic/dialog?id=${id}`,
  })
}
onBeforeMount(async() => {
  // dialogType.value = props.controls.dialog?.type
  // isDynamicComp.value = true
})
onMounted(()=>{
})
onUnmounted(() => {
})


const getName = (data:any) => {
  if(data){
      if(isDynamicComp.value) {
          get_dialogName({ 
              key:props.KEY, 
              type: props.controls.dialog.type, 
              value: data, 
              label: props.controls.alias||props.KEY, 
              code_type: props.controls.dialog.type,
              field_id: props.controls.field_id,
              udf_param_json: JSON.stringify({
                  field_id: props.controls.field_id,
                  ...props.module_info,
              })
          }).then((result:any) => {
              let res = result['data'].result
              if(res.length == 1){
                  noGetName.value = true
                  let newLabel = res[0][props.controls.alias] || res[0][props.KEY] || res[0]['id']
                  props.controls.dialog.activeOption = res[0]
                  if(props.controls.alias && props.controls.dialog['mappings']){
                      let newLabelKey = '' 
                      for(let item of props.controls.dialog['mappings']){
                          if(item.control == props.controls.alias && item['param']){
                              newLabelKey = item['param']
                              break;
                          }
                      }
                      if(res[0][newLabelKey]){
                          newLabel = res[0][newLabelKey]
                      }
                  }
                  setTimeout(()=>{
                      Name.value =  newLabel
                      Value.value = res[0].id
                      emit('change:data', res[0].id)
                  }, 100)
                  setTimeout(()=>{
                      noGetName.value = false
                  }, 1000)
              }else{
                  if(props.isSetData){
                      Name.value = data
                  }else{
                      search.value = data
                      show.value = true
                  }
              }
              FromRuns.clear(props.module_id)
          })
      }else{
          Name.value = data
      }
  }else{
      Name.value = ''
  }
}

const returnData = (data:any) => {
  if(data || data.length>0){
    let _data:any = {}
    if(Array.isArray(data)){
        _data = { ...data[0] }
    }else{
        _data = { ...data } 
    }
    let nameKey = props.controls['alias'] || 'label'
    let valueKey = props.KEY 
    Name.value = _data[nameKey] || _data[valueKey] || _data['id']
    search.value = ''
    noGetName.value = true
    Object.assign(props.controls.dialog, { activeOption: _data })
    emit('change:data', _data['id']||_data[valueKey])
    setMappings_dialog(props.formData, props.controls)
    show.value = false
    let timer  = setTimeout(()=>{
        noGetName.value = false
        clearTimeout(timer)
    }, 0)
  }
}

watch(
  ()=>Value.value,
  ()=>{
    showClearIcon.value = Value.value ? true : false
    if(Value.value){
      getCarryData({ formData:props.data, key:props.KEY, carry: props.controls[props.KEY]['carry'],  })
    }else{
      clearCarryData({ formData:props.data, key:props.KEY, carry: props.controls[props.KEY]['carry'] })
    }
  },
  { 
    immediate: true,
  }
) 


</script>

<style lang="scss">
.comp_form_input_input{
  width: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  
  .icon{
    border: none;
    outline: none;
    background: none;
    height: 80rpx;
    color: #999;
    z-index: 2;
    padding: 0 0 0 20rpx;
    margin: 0;
    .iconfont{
      height: 80rpx;
      >view{
        height: 80rpx;
        line-height: 80rpx;
      }
    }
    &::after{
      border: none;
      outline: none;
      background: none;
    }
  }
  .dialog{
    border: none;
    outline: none;
    border-radius: 50%;
    background: $primary-color;
    height: 60rpx;
    width: 60rpx;
    color: #fff;
    z-index: 2;
    margin: 10rpx 0 10rpx 20rpx;
    padding: 0;
    text-align: center;
    line-height: 60rpx;
    .iconfont{
      height: 60rpx;
      >view{
        height: 60rpx;
        line-height: 64rpx;
      }
    }
    &::after{
      border: none;
      outline: none;
      background: none;
    }
  }
  input{
    line-height: 80rpx;
    height: 80rpx;
    text-align: right;
    flex-grow: 1;
    flex-shrink: 1;
  }
}
</style>
