<template>
  <base-form
    class="relative"
    :label="label"
    :watchValue="propertyValue"
    @click="showOptions"
    :isDisabled="true"
    :iconDown="true"
  >
    <ul v-if="selectShowing" class="sy-select-menu" @click.stop @mousedown.stop>
      <li
        v-for="(item, index) in property.options"
        class="sy-select-menu-item"
        :key="index"
      >
        {{ index }}
        <input
          class="sy-select-menu-item-input"
          :value="property.options[index]"
          @input="
            (e) => {
              changePropertyOptions(index, e);
            }
          "
          type="text"
          placeholder="请输入下拉内容"
          @click="chooseLabel(index)"
        />
        <i
          v-if="index === 0"
          class="iconfont icontianjiafenlei sy-menu-item-icon_add"
          @click="addOptions"
        ></i>
        <i
          v-else
          class="iconfont iconshanchu2 sy-menu-item-icon_delete"
          @click.stop="deleteOption(index)"
        ></i>
      </li>
    </ul>
  </base-form>
</template>

<script lang="ts">
import BaseForm from "./BaseForm.vue";
import { Property } from "../types2";
import { defineComponent, PropType } from "vue";

/**
 * 选项表单项
 * @author yuanzeyu
 * @date 2019-05-29
 * @desc
 */

export default defineComponent({
  components: {
    BaseForm,
  },
  // todo 需求ui未给清，已第一行显示添加按钮实现,第一行删不了，无查重和必填
  props: {
    label: {
      type: String,
      required: true,
    },
    property: {
      required: true,
      type: Object as PropType<Property>,
    },
    setPropertyOptions: Function as PropType<any>,
    isDisabled: Boolean,
  },
  data() {
    return {
      selectShowing: false,
    };
  },
  computed: {
    propertyValue() {
      return this.property.value as string;
    },
  },
  methods: {
    changePropertyOptions(i: number, e: any) {
      const options = [...this.property.options];
      options[i] = e.target.value;
      this.setPropertyOptions(options);
    },
    addOptions() {
      this.setPropertyOptions(["", ...this.property.options]);
    },
    deleteOption(index: number) {
      const bak = [...this.property.options];
      bak.splice(index, 1);
      this.setPropertyOptions(bak);
    },
    chooseLabel(index: number) {
      if (index === 0 || this.isDisabled || this.property.options[index] === ``)
        return;
      this.$emit(`changeValue`, this.property.options[index], `value`);
      this.onHindOptions();
    },
    // 展开ul
    showOptions() {
      this.selectShowing = true;
      const bak = [...this.property.options];
      bak.unshift("");
      this.setPropertyOptions(bak);
      document.addEventListener("mousedown", this.onHindOptions);
    },
    onHindOptions() {
      const options = [...this.property.options];
      this.setPropertyOptions(options.filter((item) => item.length > 0));
      this.selectShowing = false;
      document.removeEventListener("mousedown", this.onHindOptions);
    },
  },
});
</script>

<style scoped lang="scss">
:deep(input) {
  padding-right: 60px;
}

.sy-select-menu {
  z-index: 1;
  position: absolute;
  top: 64px;
  right: 0;
  width: calc(100% - 18px - 100px);
  flex-shrink: 0;
  background: #fff;
  margin: 0;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(224, 231, 238, 1);
  border-radius: 5px;
  list-style: none;
}

.sy-select-menu-item {
  height: 36px;
  line-height: 36px;
  display: flex;
  align-items: center;

  &:not(:last-child) {
    border-bottom: 1px solid #e0e7ee;
  }
}

.sy-select-menu-item:hover {
  background: #f2f4f6;
}

.sy-select-menu-item-input {
  flex-grow: 1;
  vertical-align: top;
  box-sizing: border-box;
  padding: 0 15px;
  border: none;
  background: transparent;
  line-height: 36px;
  font-size: 13px;
  color: #353535;

  outline: none;

  &::placeholder {
    color: #a3a7aa;
  }
}

.sy-menu-item-icon_add {
  color: var(--normal-blur);
  font-size: 14px; /* todo ui选区错误 */
  cursor: pointer;
  margin-right: 10px;
}

.sy-menu-item-icon_delete {
  color: #c5cfe8;
  font-size: 15px;
  cursor: pointer;
  margin-right: 10px;
}
</style>
