<!--
  因panes属性并不包含于options属性之中，故只能跟其他options属性之内的属性值合并设置，此处选择与customClass合并！！
-->

<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.panes"
                 v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}" class="draggable-box">
        <li v-for="(tpItem, tpIdx) in selectedWidget.panes" :key="tpIdx" class="col-item">
          <!-- span style="margin-right: 12px">{{tpIdx + 1}}</span -->
          <el-checkbox v-model="tpItem.options.active" disabled @change="(evt) => onTabPaneActiveChange(evt, tpItem)"
                       style="margin-right: 8px">{{ i18nt('designer.setting.paneActive') }}
          </el-checkbox>
          <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 "../../../../../../components/xform/utils/i18n"
import Draggable from 'vuedraggable'
import {deepClone, generateId} from "../../../../../../components/xform/utils/util";

export default {
  name: "h5-card-editor",
  componentName: 'PropertyEditor',
  mixins: [i18n],
  components: {
    Draggable,
  },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      cssClassList: [],
    }
  },
  created() {
    this.cssClassList = deepClone(this.designer.getCssClassList())
    //监听表单css代码改动事件并重新加载！
    this.designer.handleEvent('form-css-updated', (cssClassList) => {
      this.cssClassList = cssClassList
    })
  },
  methods: {
    onTabPaneActiveChange(evt, tpItem) {
      //TODO: !!!
    },

    addTabPane(tabsWidget) {
      // this.designer.addTabPaneOfTabs(curTabs)

      const tabPanes = tabsWidget.panes;
      let newTabPane = deepClone(this.designer.getContainerByType('h5-card-pane'));
      newTabPane.id = 'h5-card-pane-' + generateId();
      newTabPane.options.name = newTabPane.id;
      newTabPane.options.label = 'h5-card ' + (tabPanes.length + 1);
      tabPanes.push(newTabPane);

      this.designer.emitHistoryChange()
    },

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

      curTabs.panes.splice(tpIdx, 1);
      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;
  }
}

.panes-setting {
  ul {
    padding-inline-start: 0;
    padding-left: 0; /* 重置IE11默认样式 */
    margin: 0;
  }

  .drag-option {
    cursor: move;
  }

  li.ghost {
    background: #fff;
    border: 2px dotted $--color-primary;
  }
}

</style>
