<template>
  <div class="btn-group">
    <button
      id="filter-column-def"
      type="button"
      class="btn btn-default dropdown-toggle"
      aria-haspopup="true"
      aria-expanded="false"
      @click="showDropdown = true"
    >
      <span id="filter-column-def-span" class="fa fa-bars" />
    </button>
    <ul
      v-show="showDropdown"
      v-click-outside="onClickOutside"
      class="dropdown-menu dropdown-menu-right dropmenu-userdefined column-prop"
    >
      <li
        v-for="(filterSchemaLine, index) in filterSchemaLines"
        :key="windowNo + '_' + tabIndex + '_' + filterSchemaLine.fieldName"
      >
        <div class="column">
          <input
            autocomplete="off"
            class="visible-checkbox"
            type="checkbox"
            :checked="filterSchemaLine.visible"
            @change="visibleChanged(filterSchemaLine)"
          />
          <label
            class="column-name"
            :class="{'column-red' : filterSchemaLine.mandatory == true}"
          >{{ Language.getDisplayNameTrl($i18n.locale, filterSchemaLine) }}</label>
          <span>
            <span
              class="fa fa-arrow-up"
              @click="fieldUp(filterSchemaLine,index)"
            />
            <span
              class="fa fa-arrow-down"
              @click="fieldDown(filterSchemaLine,index)"
            />
            <div class="clear-fix" />
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import FilterSchema from './FilterSchema.js';
import Language from '../../common/Language.js';
import vClickOutside from 'click-outside-vue3';

export default {

  directives: {
    clickOutside: vClickOutside.directive,
  },

  components: {

  },
  
  props: {
   
    windowNo: {
      type: String,
      default: null,
    },
    tabIndex: {
      type: Number,
      default: null,
    },
    filterSchemaLines: {
      type: Array,
      default : function(){
        return null;
      },
    },
  },

  
  emits: ['propertyChanged'],


  data: function () {
    this.Language = Language;
    return {
      showDropdown: false,
    };
  },

  methods: {
    /**
         * 过滤字段显示属性发生改变
         */
    visibleChanged: function (filterSchemaLine) {
      var _self = this;
      var filterSchemaLineClone = FilterSchema.cloneFilterSchemaLine(filterSchemaLine);
      filterSchemaLineClone.visible = !filterSchemaLineClone.visible;
      this.$emit('propertyChanged', filterSchemaLineClone);
    },

    /**
         * 过滤字段排序属性，上移
         */
    fieldUp: function (filterSchemaLine, index) {
      var _self = this;
      if (index > 0) {
        var temp = _self.filterSchemaLines[index].sortNo;

        //交换sortNo
        var filterSchemaLineClone1 = FilterSchema.cloneFilterSchemaLine(_self.filterSchemaLines[index]);
        filterSchemaLineClone1.sortNo = _self.filterSchemaLines[index - 1].sortNo;
        var filterSchemaLineClone2 = FilterSchema.cloneFilterSchemaLine(_self.filterSchemaLines[index - 1]);
        filterSchemaLineClone2.sortNo = temp;

        this.$emit('propertyChanged', filterSchemaLineClone1);
        this.$emit('propertyChanged', filterSchemaLineClone2);
      }
    },

    /**
         * 过滤字段排序属性，下移
         */
    fieldDown: function (filterSchemaLine, index) {
      var _self = this;

      if (index < _self.filterSchemaLines.length - 1) {
        var temp = _self.filterSchemaLines[index].sortNo;

        //交换sortNo
        var filterSchemaLineClone1 = FilterSchema.cloneFilterSchemaLine(_self.filterSchemaLines[index]);
        filterSchemaLineClone1.sortNo = _self.filterSchemaLines[index + 1].sortNo;
        var filterSchemaLineClone2 = FilterSchema.cloneFilterSchemaLine(_self.filterSchemaLines[index + 1]);
        filterSchemaLineClone2.sortNo = temp;

        this.$emit('propertyChanged', filterSchemaLineClone1);
        this.$emit('propertyChanged', filterSchemaLineClone2);
      }
    },

    
    /**
     * 当点击'搜索范围'以外的DOM，隐藏'搜索范围'以外
     */
    onClickOutside: function(e) {
      if(e.srcElement != null && (e.srcElement.id == 'filter-column-def' || e.srcElement.id == 'filter-column-def-span')){
        return;
      }
      this.showDropdown = false;
    },
  },
};
</script>
<style scoped>
.visible-checkbox {
    width: 17px;
    height: 17px;
    text-align: center;
    margin-right: 15px;
    margin-left: 15px;
    margin-top: 8px;
}

.column-name {
    height: 25px;
    line-height: 25px;
}

.column-red {
    color: red;
}

.fa-arrow-up {
    float: right;
    height: 25px;
    line-height: 25px;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
}

.fa-arrow-down {
    float: right;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    margin-left: 10px;
}

.column-prop {
    display: block;
    width: 260px;
}

.clear-fix {
    clear: both;
}
</style>