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

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import BaseForm from "./BaseForm.vue";
import { Property } from "@/plugins/types2";
import { getUuid } from "@/utils/tool";

/**
 * 选项表单项
 * @author yuanzeyu
 * @date 2019-05-29
 * @desc
 */
@Component({
  components: {
    BaseForm
  }
})
export default class SelectForm extends Vue {
  // todo 需求ui未给清，已第一行显示添加按钮实现,第一行删不了，无查重和必填
  @Prop() label!: string;
  @Prop() property!: Property;
  @Prop() isDisabled!: boolean;

  public selectShowing: boolean = false;
  created() {}
  public addOptions() {
    this.property.options.push("");
  }

  public deleteOption(index: number) {
    this.property.options.splice(index, 1);
  }

  chooseLabel(index: number) {
    if (index === 0 || this.isDisabled || this.property.options[index] === ``)
      return;
    this.$emit(`changeValue`, this.property.options[index], `value`);
    this.onHindOptions();
  }
  // 展开ul
  public showOptions() {
    this.selectShowing = true;
    this.property.options.unshift("");
    document.addEventListener("mousedown", this.onHindOptions);
  }

  public onHindOptions() {
    this.property.options = this.property.options.filter(
      item => item.length > 0
    );
    this.selectShowing = false;
    document.removeEventListener("mousedown", this.onHindOptions);
  }
}
</script>

<style scoped lang="less">
.menu {
  z-index: 1;
  position: absolute;
  top: 64px; /* (65 - 44)/2 + 44 + 9 */
  left: 168px;
  width: 800px;
  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;
}

.menu-item {
  height: 46px;
  line-height: 46px;

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

.menu-item:hover {
  background: #f2f2f2;
}

.menu-item-input {
  vertical-align: top;
  box-sizing: border-box;
  width: 760px;
  padding: 0 15px;
  border: none;
  background: transparent;
  line-height: 46px;
  font-size: 13px;

  outline: none;

  &::placeholder {
    color: #8796a8;
  }
}

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

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