<template>
  <div>
    <el-form-item :label="i18nt('designer.setting.tabPaneSetting')"></el-form-item>
    <el-form-item label-width="0" class="panes-setting">
      <draggable tag="ul" :list="selectedWidget.widgetList"
                 v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}" class="draggable-box">
        <li v-for="(tpItem, tpIdx) in selectedWidget.widgetList" :key="tpIdx" class="col-item">
          <el-input type="text" v-model="tpItem.options.label" style="width:calc(100% - 65px) !important;"></el-input>
          <i class="el-icon-s-operation drag-option"></i>
          <el-button circle plain size="mini" type="danger" @click="deleteTabPane(selectedWidget, tpIdx)"
                     icon="el-icon-minus" class="col-delete-button"></el-button>
        </li>
        <div>
          <el-button type="text" @click="addTabPane(selectedWidget)" icon="el-icon-circle-plus-outline" class="add-option">{{i18nt('designer.setting.addTabPane')}}</el-button>
        </div>
      </draggable>
    </el-form-item>
  </div>
</template>
<script>
import i18n from "@base/components/xform/utils/i18n";
import Draggable from 'vuedraggable'
import {deepClone} from "../../../../../../components/xform/utils/util";

export default {
  name: "dropdown-menu-editor",
  components: {Draggable},
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  methods: {
    onTabPaneActiveChange(evt, tpItem) {
      //TODO: !!!
    },

    addTabPane(curTabs) {
      this.designer.addDropdownItem(curTabs)
      this.designer.emitHistoryChange()
    },

    deleteTabPane(curTabs, tpIdx) {
      if (curTabs.widgetList.length === 1) {
        this.$message.info(this.i18nt('designer.hint.lastPaneCannotBeDeleted'))
        return
      }

      this.designer.deleteDropdownItem(curTabs, tpIdx)
      this.designer.emitHistoryChange()
    },

  }
}
</script>
<style scoped>

</style>
