<template>
  <div>
    <hr />
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">内容</div>
      <div class="panel-value">
        <Select v-model="activeElement.selectValue">
          <Option
            v-for="item in selectValueList"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</Option>
        </Select>
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">选择框大小</div>
      <div class="panel-value">
        <Select v-model="activeElement.sizeType">
          <Option
            v-for="item in sizeTypeList"
            :value="item.value"
            :key="item.value"
          >{{ item.label }}</Option>
        </Select>
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <Tooltip content="是否多选">
        <div class="panel-label">是否多选</div>
      </Tooltip>
      <div class="panel-value">
        <Switch v-model="activeElement.isMulti" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">是否支持搜索</div>
      <div class="panel-value">
        <Switch v-model="activeElement.filterable" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label" style="width:80%">是否将弹窗放在本页面内</div>
      <div class="panel-value">
        <Switch v-model="activeElement.transfer" />
      </div>
    </div>
    <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">禁用状态</div>
      <div class="panel-value">
        <Switch v-model="activeElement.disabled" />
      </div>
    </div>
     <div class="panel-row">
      <vpd-icon name="target" />
      <div class="panel-label">是否只读</div>
      <div class="panel-value">
        <Switch v-model="activeElement.readonly" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BraidSelectStyle",
  props: ["activeElement"],
  data() {
    return {
      sizeTypeList: [
        {
          value: "small",
          label: "small"
        },
        {
          value: "default",
          label: "default"
        },
        {
          value: "large",
          label: "large"
        }
      ],
      selectValueList: [
         {
          value: "ok",
          label: "ok"
        },
        {
          value: "yes",
          label: "yes"
        },
        {
          value: "uhhh",
          label: "uhhh"
        }
      ]
    };
  },
  methods: {
    addPic() {
      this.$parent.$vpd.$emit("upload", payload => {
        this.$parent.$vpd.commit("addContainerBackPic", payload);
      });
    }
  }
};
</script>
