<template>
  <div>
    <el-form-item label-width="0">
      <el-divider class="custom-divider">{{ i18nt('designer.setting.columnSetting') }}</el-divider>
    </el-form-item>
    <el-form-item :label="i18nt('隐藏导航')">
      <el-switch v-model="optionModel.hideNav"></el-switch>
    </el-form-item>
    <el-form-item :label="i18nt('designer.setting.colsOfGrid')"></el-form-item>
    <el-form-item label-width="0">
      <draggable tag="ul" class="draggable-box" :list="selectedWidget.panes"
                 v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.drag-option' }">
        <li v-for="(colItem, colIdx) in selectedWidget.panes" :key="colIdx" class="col-item">
          <i class="el-icon-s-operation drag-option"></i>
          <el-input v-model="colItem.options.label" class="cell-span-input"></el-input>
          <el-button circle plain size="mini" type="danger" @click="deleteCol(selectedWidget, colIdx)"
                     icon="el-icon-minus" class="col-delete-button" style="position: unset;"></el-button>
        </li>
      </draggable>
      <div>
        <el-button type="text" @click="addNewCol(selectedWidget)" icon="el-icon-circle-plus-outline" class="add-option">
          {{ i18nt('designer.setting.addColumn') }}
        </el-button>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import Draggable from 'vuedraggable';
import i18n from "../../../../../../components/xform/utils/i18n"

export default {
  name: "detail-editor",
  mixins: [i18n],
  components: {
    Draggable,
  },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  methods: {
    deleteCol(curGrid, colIdx) {
      this.designer.deletePaneOfDetail(curGrid, colIdx)
      this.designer.emitHistoryChange()
    },

    addNewCol(curGrid) {
      this.designer.addNewPaneOfDetail(curGrid)
      this.designer.emitHistoryChange()
    },

  }
}
</script>

<style lang="scss" scoped>
li.col-item {
  list-style: none;

  span.col-span-title {
    display: inline-block;
    font-size: 13px;
    width: 120px;
  }

  .col-delete-button {
    margin-left: 6px;
  }
}

</style>
