<template>
  <div class="btn-group">
    <div class="table_style" @click="reverseShow">
      <span>字段设置</span>
    </div>
    <a-modal v-model:open="modal" :title="$t('lang.gridColumnDef.gridField')" :footer="null">
      <vuedraggable v-model="gridFields" item-key="id" class="wrapper" draggable=".column-dragable" @end="sortChaned()">
        <template #item="{ element }">
          <div class="column-dragable">
            <div class="column">
              <input
                :id="'GridFieldDefItem' + '_' + windowNo + '_' + tabIndex + '_' + element.fieldName + '_' + element.entityFieldIndex"
                v-model="element.visible" autocomplete="off" class="visible-checkbox" type="checkbox"
                :disabled="element.mandatory && element.visible" @change="visibleChanged(element)"
              />
              <label
                :for="'GridFieldDefItem' + '_' + windowNo + '_' + tabIndex + '_' + element.fieldName + '_' + element.entityFieldIndex"
                class="column-name" :class="{ 'column-red': element.mandatory == true }"
              >{{
                Language.getDisplayNameTrl($i18n.locale, element) }}</label>
            </div>
          </div>
        </template>
      </vuedraggable>
    </a-modal>
  </div>
</template>

<script>

import Common from '../../common/Common.js';

import GridColumnDef from './GridColumnDef.js';
import Language from '../../common/Language.js';
import { OrderedListOutlined } from '@ant-design/icons-vue';
import vuedraggable from 'vuedraggable';

export default {


  components: {
    vuedraggable, OrderedListOutlined,
  },
  /**
     * 页签表单字段
     */
  // eslint-disable-next-line
  props: ['windowNo', 'tabIndex', 'tabGridFields'],

  data: function () {
    this.Language = Language;
    return {
      gridFieldItemMap: {},
      gridFields: [],
      modal: false,
    };
  },
  watch: {
    'tabGridFields':{
      handler: function () {
        this.cloneTabGridFields();
      },
      deep: true,
      immediate: true,
    },
  },
  mounted: function () {
    this.cloneTabGridFields();
  },

  methods: {
    /**
         * 克隆页签表单字段
         */
    cloneTabGridFields: function () {
      const _self = this;
      if (!_self.tabGridFields) {
        return;
      }

      const rawTabGridFields = JSON.parse(JSON.stringify(_self.tabGridFields));

      _self.gridFields = rawTabGridFields
        .map(field => {
          return {
            'fieldName': field.fieldName,
            'displayName': field.displayName,
            'displayNameEng': field.displayNameEng,
            'entityFieldIndex': field.entityFieldIndex,
            'mandatory': field.mandatory,
            'visible': field.visible,
            'key': `GridFieldDef_${_self.windowNo}_${_self.tabIndex}_${field.fieldName}_${field.entityFieldIndex}`,
            'sortNo': field.sortNo === null ? 100 : field.sortNo,
            'width': field.width,
          };
        })
        .sort((a, b) => a.sortNo - b.sortNo);
    },

    /**
         * 表格字段的显示属性发生改变
         * @param { object } gridField 表格字段
         */
    visibleChanged: function (gridField) {
      var _self = this;
      if (gridField.mandatory) {
        gridField.visible = true;
        return;
      }
      GridColumnDef.saveGridFieldDef(_self.windowNo, _self.tabIndex, _self.gridFields).then(successData => {
        _self.$emit('propertyChanged', _self.gridFields);
      }, errorData => {
        Common.processException(errorData);
      });
    },

    /**
         * 显示表单编辑模态框
         */
    reverseShow: function () {
      this.modal = true;
    },

    /**
         * 排序发生改变
         */
    sortChaned: function () {
      console.log('sortChaned');
      var _self = this;
      for (var i = 0, len1 = _self.gridFields.length; i < len1; i++) {
        _self.gridFields[i].sortNo = i * 10;
      }
      GridColumnDef.saveGridFieldDef(_self.windowNo, _self.tabIndex, _self.gridFields).then(successData => {
        _self.$emit('propertyChanged', _self.gridFields);
      }, errorData => {
        console.log(errorData);
      });
    },
  },
};

</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;
}

.m-dropdown-menu {
  display: block;
}

ul label {
  cursor: pointer;
}

.table_style {
  cursor: pointer;
  color: #277fd0;
}
</style>