<template>
  <div>
    <el-form-item :label="i18nt('designer.setting.customClass')">
      <el-select v-model="optionModel.customClass" multiple filterable allow-create
                 default-first-option>
        <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="禁用本地筛选">
      <el-switch v-model="optionModel.disLocalFilter"></el-switch>
    </el-form-item>
    <el-form-item label="筛选类型">
      <el-select v-model="optionModel.treeFilterType">
        <el-option :value="0" label="文本"></el-option>
        <el-option :value="1" label="日期"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="筛选图标点击事件">
      <a
        href="javascript:void(0);"
        class="a-link link-oneLind"
        @click="editEventHandler('onFilterIconClick', ['dataId', 'formCode','keyword'])"
      >
        <span>{{ optionModel.onFilterIconClick }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-form-item label="筛选内容值变化事件">
      <a
        href="javascript:void(0);"
        class="a-link link-oneLind"
        @click="editEventHandler('onFilterTextChange', ['dataId', 'formCode','keyword'])"
      >
        <span>{{ optionModel.onFilterTextChange }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
  </div>
</template>
<script>
import i18n from "../../../../../../components/xform/utils/i18n"
import {deepClone} from "../../../../../../components/xform/utils/util";
import eventMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";

export default {
  name: "tree-customClass-editor",
  componentName: "PropertyEditor",
  mixins: [i18n,eventMixin],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {cssClassList: [], dataSetList: []};
  },
  created() {
    (this.cssClassList = deepClone(this.designer.getCssClassList())),
      this.designer.handleEvent("form-css-updated", (o) => {
        this.cssClassList = o;
      });
  },
  methods: {

  },
}
</script>
<style scoped>

</style>
