<template>
  <div class="base_form">
    <div class="label">
      <Icon iconName="icondd" class="pre-tag" size="18"></Icon>
      <div class="label-text" :title="label">{{ label }}</div>
    </div>
    <div class="input-box">
      <DialogInputVue
        class="input"
        v-if="showInput"
        :noBoxShadowWhenFocused="true"
        v-model:value="inputValue"
        @update:value="change"
        type="text"
        :placeholder="'请输入' + label"
        :readonly="isDisabled"
      />
      <img
        v-if="iconDown"
        src="@/assets/img/arrow_down.png"
        class="icon_down"
        style="width: 20px"
      />
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref, watch } from "vue";
import Icon from "@/components/Icon/index.vue";
import { syDialogInput as DialogInputVue } from "cqk-sy-ui";
/**
 * 以普通输入框为基础
 * @author yuanzeyu
 * @date 2019-05-29
 * @desc
 */
const props = withDefaults(
  defineProps<{
    label: string;
    value?: string;
    watchValue?: string; // 用于显示的值
    showInput?: boolean;
    isDisabled?: boolean;
    iconDown?: boolean;
  }>(),
  {
    value: "",
    watchValue: "",
    showInput: true,
    iconDown: false,
  }
);

const $emit = defineEmits(["changeValue"]);

const inputValue = ref(``);
onMounted(() => {
  inputValue.value = props.watchValue ? props.watchValue : props.value;
});

watch(
  () => props.watchValue,
  () => {
    inputValue.value = props.watchValue;
  }
);

const change = () => {
  nextTick(() => {
    $emit(`changeValue`, inputValue.value, `value`);
  });
};
</script>

<style scoped lang="scss">
.base_form {
  flex-shrink: 0;
  padding-left: 18px;
  line-height: 65px;
  height: 65px;
  font-size: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.label {
  display: inline-block;
  width: 100px; /* 104 - 18 */
  flex-shrink: 0;
  height: 44px;
  cursor: pointer;
  line-height: 44px;
  color: #797d84; /* todo ui图颜色不一致 */
  font-size: 14px;
  font-weight: 300;
  position: relative;
}
.label-text {
  text-overflow: ellipsis;
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  overflow: hidden;
}

.icon_down {
  position: absolute;
  right: 26px;
  color: #b8b8b8;
  font-size: 12px; /* todo ui图有空白 */
  top: 50%;
  transform: translateY(-50%) scale(0.67);
  cursor: pointer;
}
.input-box {
  position: relative;
  line-height: 65px;
  width: 100%;
}

.input {
  box-sizing: border-box;
  width: 100%;
  flex-shrink: 0;
  margin-top: 11px;
}

.pre-tag {
  position: absolute;
  left: -50px;
  top: 14px;
  display: none;
}
</style>
