<template>
  <span v-if="_readonly" v-text="value"></span>
  <div v-else>
    <Input
      v-bind="bindAttr"
      v-model="value[0]"
      :placeholder="_placeholder[0]"
      :disabled="disabled" 
    /> 
    <span class='ks-connectline' v-if='type!=="vertical"'> - </span>
    <p v-else :style="{marginBottom:'24px'}"></p>
    <Input
      v-bind="bindAttr"
      v-model="value[1]"
      :placeholder="_placeholder[1]"
      :disabled="disabled" 
    /> 
  </div>
</template>
<script setup>
import { inject, useAttrs, onMounted, computed} from 'vue';
import { useFieldBasics } from '../usefieldBasics';
import { Input } from '@king-design/vue';
import { useRoute } from 'vue-router';
import { toNumber } from 'lodash-es';
const route = useRoute();
const $Attrs = useAttrs();
const formInfo = inject('formInfo');
const emit = defineEmits(['change']);

const { value, _placeholder, _readonly, disabled, onLinkage,_fieldProps } = useFieldBasics(
	$Attrs,
	formInfo,
	route,
	emit
);
const type = computed(() => _fieldProps.value?.type)
const bindAttr = computed(() => {
  const width = _fieldProps.value?.style?.width 
  const horizWidth = width ? toNumber(width.split('px')[0]) : 300
  const halfWidth = (horizWidth / 2 - 16 ) + 'px'
  // horizontal 水平  vertical 垂直
  const lastwidth = type.value === 'vertical' ? width : halfWidth
  return {
    ..._fieldProps,
    style: {
      ..._fieldProps.style,
      width: lastwidth,
    }
  }
})

onMounted(async () => {
	onLinkage();
});
</script>
<style lang="less">
.ks-connectline {
  margin: 0px 8px;
}
</style>
