
<template>
  <div class="set_bar">
    <h2 class="title">修改标题名</h2>
    <el-input
      class="edit"
      v-model="editTitle"
      placeholder="请输入标题名"
      :maxlength="titleLength"
      @input="changeEdit"
    ></el-input>
    <h2 class="title">设置表现形式</h2>
    <ul class="menu">
      <set-select-item
        label="输入框"
        :selected="type === PropertyType.Input"
        :disabled="selectedDisabled"
        @click.native="handleSelect(PropertyType.Input)"
      >
        <div class="menu-item-example menu-item-example_input"></div>
      </set-select-item>
      <set-select-item
        label="外部链接"
        :selected="type === PropertyType.Link"
        :disabled="selectedDisabled"
        @click.native="handleSelect(PropertyType.Link)"
      >
        <div class="menu-item-example menu-item-example_input"></div>
      </set-select-item>
      <set-select-item
        label="文本域"
        :selected="type === PropertyType.TextArea"
        :disabled="selectedDisabled"
        @click.native="handleSelect(PropertyType.TextArea)"
      >
        <div class="menu-item-example menu-item-example_input"></div>
      </set-select-item>
      <set-select-item
        label="下拉框"
        :selected="type === PropertyType.Select"
        :disabled="selectedDisabled"
        @click.native="handleSelect(PropertyType.Select)"
      >
        <div class="menu-item-example menu-item-example_select">
          <span>下拉框</span>
          <i class="iconfont iconxiangxia"></i>
        </div>
      </set-select-item>
      <set-select-item
        label="上传图片"
        :selected="type === PropertyType.Image"
        :disabled="selectedDisabled"
        @click.native="handleSelect(PropertyType.Image)"
      >
        <div class="menu-item-example menu-item-example_image">
          <i class="iconfont iconjiahao"></i>
        </div>
      </set-select-item>
      <set-select-item
        label="日期"
        :selected="type === PropertyType.Date"
        :disabled="selectedDisabled"
        @click.native="handleSelect(PropertyType.Date)"
      >
        <div class="menu-item-example menu-item-example_date">
          <i class="iconfont iconxingzhuang"></i>
        </div>
      </set-select-item>
      <set-select-item
        label="上传PDF"
        :selected="type === PropertyType.File"
        :disabled="selectedDisabled"
        @click.native="handleSelect(PropertyType.File)"
      >
        <div class="menu-item-example menu-item-example_up">
          <i class="iconfont iconshangchuanwenjianbeifen"></i>
        </div>
      </set-select-item>
      <set-select-item
        label="上传视频"
        :selected="type === PropertyType.Video"
        :disabled="selectedDisabled"
        @click.native="handleSelect(PropertyType.Video)"
      >
        <div class="menu-item-example menu-item-example_up">
          <i class="iconfont iconshangchuanwenjianbeifen"></i>
        </div>
      </set-select-item>
      <set-select-item
        label="上传语音"
        :selected="type === PropertyType.Audio"
        :disabled="selectedDisabled"
        @click.native="handleSelect(PropertyType.Audio)"
      >
        <div class="menu-item-example menu-item-example_up">
          <i class="iconfont iconshangchuanwenjianbeifen"></i>
        </div>
      </set-select-item>
      <set-select-item
        label="编辑器"
        :selected="type === PropertyType.Editor"
        :disabled="selectedDisabled"
        @click.native="handleSelect(PropertyType.Editor)"
      >
        <div class="editor"></div>
      </set-select-item>
    </ul>
    <div class="btn_wrapper">
      <button
        class="g-btn_primary"
        :class="{ 'js-btn_disabled': addDisabled }"
        @click="emitAddChild"
      >
        添加下一级
      </button>
      <button
        class="g-btn_primary"
        :class="{ 'js-btn_disabled': deleteDisabled }"
        @click="emitDelete"
      >
        删除
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { PropertyType } from "@/plugins/types";
import SetSelectItem from "./SetSelectItem.vue";
import { Property, Unit } from "@/plugins/types2";
@Component({
  components: {
    SetSelectItem,
  },
})
export default class SetBar extends Vue {
  @Prop() public selectTarget!: Unit | Property | null;
  public PropertyType = PropertyType;
  public editTitle = ``;
  public titleLength = 100;
  public get type() {
    const target = this.selectTarget;

    if (target) {
      if (target instanceof Property) {
        return target.type;
      }
    }
    return PropertyType.Input;
  }

  @Watch("selectTarget.title")
  public editTitleChange(val: string) {
    if (val) {
      this.editTitle = val;
    }
  }

  @Watch("selectTarget.label")
  public editLabelChange(val: string) {
    if (val) {
      this.editTitle = val;
    }
  }

  public changeEdit() {
    this.$nextTick(() => {
      if (this.selectTarget) {
        if (this.selectTarget.hasOwnProperty("title"))
          (this.selectTarget as Unit).title = this.editTitle;
        if (this.selectTarget.hasOwnProperty("label"))
          (this.selectTarget as Property).label = this.editTitle;
      }
    });
  }

  public get selectedDisabled() {
    return !(this.selectTarget && this.selectTarget instanceof Property);
  }

  public get addDisabled() {
    const target = this.selectTarget;
    const isL3 = target && (target as Property).parent;
    // (target as Property).parent.parent;

    return !(this.selectTarget && !isL3);
  }

  public get deleteDisabled() {
    const target = this.selectTarget;
    return !target || (target instanceof Unit && target.children.length > 0);
  }

  public handleSelect(val: PropertyType) {
    if (this.selectedDisabled) return;
    this.$emit("select-type", val);
  }

  public emitAddChild() {
    if (this.addDisabled) {
      return;
    }
    this.$emit("add-child");
  }

  public emitDelete() {
    if (this.deleteDisabled) {
      return;
    }
    this.$emit("delete");
  }
}
</script>
<style scoped lang="less">
.set_bar {
  position: relative;
  height: 100%;
  padding: 0 5px;
  background: #fff;
  border-left: 1px solid #f0f0f0;
}
.editor {
  width: 125px;
  vertical-align: middle;
  display: inline-block;
  background: white;
  vertical-align: middle;
  box-sizing: border-box;
  margin-left: 10px;
  display: inline-block;
  height: 35px;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  color: rgba(53, 53, 53, 0.4);
  font-size: 12px;
}
.edit {
  width: 220px;
  margin-left: 19px;
  margin-top: 19px;
  /deep/.el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px;
    &::-webkit-input-placeholder {
      /* WebKit browsers */
      // color: #999;
      font-size: 12px;
    }
    &::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      // color: #999;
      font-size: 12px;
    }
  }
}
.g-btn_primary {
  border: none;
  background: #5779f4;
  font-size: 14px;
  color: #fff;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
}
.title {
  margin: 0;
  padding-left: 19px;
  padding-top: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 44px;
  border-bottom: 1px solid #f1f1f1;
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-item {
  padding-left: 23px;
  line-height: 35px;
  font-size: 0;
  margin-top: 18px; /* todo ui间距不统一,文字非对齐 */
}

.menu-item-icon_check {
  vertical-align: middle;
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #d1d1d1;
  border-radius: 50%;
  cursor: pointer;
}

.menu-item_icon_check_active {
  vertical-align: middle;
  color: #50b74d;
  font-size: 17px;
}

.menu-item-name {
  vertical-align: middle;
  display: inline-block;
  width: 56px;
  margin-left: 9px;
  font-size: 14px;
}

.menu-item-name_active {
  color: #4fb64c;
}

.menu-item-example {
  vertical-align: middle;
  box-sizing: border-box;
  margin-left: 10px;
  display: inline-block;
  height: 35px;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  color: rgba(53, 53, 53, 0.4);
  font-size: 12px;
}

.menu-item-example_input {
  width: 125px;
  padding-left: 13px;
  height: 25px;
  background: white;
  line-height: 25px;
}

.menu-item-example_select {
  width: 125px;
  padding: 0 5px 0 12px;
  height: 25px;
  line-height: 25px;
  background: white;
  i {
    float: right;
    font-size: 12px;
    transform: scale(0.46);
  }
}

.menu-item-example_image {
  width: 25px;
  height: 25px;
  text-align: center;
  background: white;
  line-height: 23px;
  font-size: 12px;
  i {
    font-size: 12px;
  }
}
.menu-item-example_up {
  width: 35px;
  height: 25px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  text-align: center;
  line-height: 25px;
  border: 1px solid rgba(231, 231, 231, 1);
}
.menu-item-example_date {
  width: 125px;
  padding: 0 8px 0 12px;
  height: 25px;
  line-height: 25px;
  background: white;
  & i {
    float: right;
    font-size: 13px;
  }
}

.btn_wrapper {
  position: absolute;
  right: 0;
  bottom: 39px;
  left: 0;
  text-align: center;

  & > button {
    margin-top: 20px;
    width: 220px;
    height: 35px;
  }
}

.js-btn_disabled {
  background: #c5cfe8;
  cursor: not-allowed;
}
</style>
