<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
        :noBoxShadowWhenFocused="true"
        v-if="showInput"
        class="input"
        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">
import { GO_URLS, syDialogInput as DialogInputVue } from "cqk-sy-ui";
import Icon from "@/components/Icon/index.vue";
/**
 * 以普通输入框为基础
 * @author yuanzeyu
 * @date 2019-05-29
 * @desc
 */
import { defineComponent } from "vue";
export default defineComponent({
  components: {
    DialogInputVue,
    Icon,
  },
  emits: ["changeValue"],
  props: {
    label: {
      type: String,
      required: true,
    },
    value: {
      type: String,
      default: "",
    },
    watchValue: {
      type: String,
      default: "",
    },
    showInput: {
      type: Boolean,
      default: true,
    },
    isDisabled: {
      type: Boolean,
    },
    iconDown: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return { inputValue: "" };
  },
  mounted() {
    this.inputValue = this.watchValue ? this.watchValue : this.value;
  },
  watch: {
    watchValue(val) {
      this.inputValue = this.watchValue;
    },
  },
  methods: {
    change() {
      this.$nextTick(() => {
        this.$emit(`changeValue`, this.inputValue, `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;
  top: 50%;
  transform: translateY(-50%) scale(0.67);
  color: #b8b8b8;
  font-size: 12px; /* todo ui图有空白 */
  cursor: pointer;
}
.input-box {
  position: relative;
  line-height: 65px;
  flex-grow: 1;
}

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

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