<template>
  <div class="title">
    属性面板
    <el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search">
      <template #prefix>
        <component :is="renderIcon('element Search')"></component>
      </template>
    </el-input>
    <span class="close" @click="closeMe()">
      <component :is="renderIcon('element Close')" />
    </span>
  </div>
  <div class="calc-right-panel">
    <el-form label-position="right" label-width="60" class="property-panel-form" size="default" @submit.native.prevent>
      <template v-for="(itemMeta, idx) in selectedObjectMeta">

        <el-divider v-if="itemMeta.editor === '-'" />

        <TextInput v-else-if="itemMeta.editor === 'TextInput'"
                   :prop="itemMeta" :viewport="viewport" />

        <Transform v-else-if="itemMeta.editor === 'Transform'"
                   :prop="itemMeta" :viewport="viewport" />

        <SwitchItem v-else-if="itemMeta.editor === 'Switch'"
                    :prop="itemMeta" :viewport="viewport" />

        <ColorItem v-else-if="itemMeta.editor === 'Color'"
                   :prop="itemMeta" :viewport="viewport" />

        <UUIDItem v-else-if="itemMeta.editor === 'UUID'"
                  :prop="itemMeta" :viewport="viewport" />

        <NumberInput v-else-if="itemMeta.editor === 'Number'"
                     :prop="itemMeta" :viewport="viewport" />

        <template v-else>
          未知编辑器: {{ itemMeta.editor }}
        </template>
      </template>

    </el-form>
  </div>

</template>
<script>
import IWidgets from '../IWidgets.js'
import TextInput from '@/designer/metaComponents/TextInput.vue'
import Transform from '@/designer/metaComponents/Transform.vue'
import SwitchItem from '@/designer/metaComponents/SwitchItem.vue'
import ColorItem from '@/designer/metaComponents/ColorItem.vue'
import UUIDItem from '@/designer/metaComponents/UUIDItem.vue'
import NumberInput from '@/designer/metaComponents/NumberInput.vue'

export default {
  name: 'PropertyView',
  components: {
    NumberInput,
    UUIDItem,
    ColorItem,
    SwitchItem,
    TextInput, Transform
  },
  mixins: [IWidgets],
  data() {

    return {
      itemTypeMeta: null,
      searchKeyword: ''
    }
  },
  computed: {
    selectedObject() {
      return this.state?.selectedObject
    },
    selectedObjectMeta() {
      return this.state?.selectedObjectMeta
    }
  }
}
</script>
<style lang="less">
.property-panel-form{
  margin: 0;
  font-size: 14px;
  color:#606266;
  .el-form-item--default{
    margin:5px 3px 0 0;
    .el-form-item__label{
      height: 20px;
      line-height: 22px;
    }
  }
  .gui-toolbar {
    color: #333;
    background: #ffffff;
    border-top: 1px solid #dcdcdc;
    margin-top: 5px;

    .el-input-number.is-without-controls .el-input__wrapper {
      padding-left: 2px;
      padding-right: 2px;
    }

    .gui-row {
      display: flex;
      flex-direction: row;
      gap: 3px;
      padding: 3px 3px 3px 0;

      .gui-item-name {
        width: 26px;
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-icon {
          font-size: 16px;
        }
      }

      .gui-item {
        flex: 1;
        text-align: center;
        font-size: 12px;

        .el-input-number {
          width: 100%;

          .el-input__wrapper {
            background-color: #efefef;
            box-shadow: none
          }
        }
      }
    }
  }
  .el-divider{
    margin: 5px 0;
  }
}
</style>