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

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

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 scan = () => {
  if(props.controls[props.KEY].scan){
    uni.scanCode({
      success: (res:any) => {
        Value.value = res.result
        emit('change:data', res.result)
      },
    })
  }
}
onBeforeMount(async() => {
})
onMounted(()=>{
})
onUnmounted(() => {
})

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;
    }
  }
  .scan{
    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>
