<template>
  <div>
    <el-form-item label-width="0">
      <el-divider class="custom-divider">详情打印设置</el-divider>
    </el-form-item>
    <!-- <el-form-item label="启用自定义按钮名称">
      <el-switch v-model="optionModel.customLabelEnabled"></el-switch>
    </el-form-item> -->
    <el-form-item label="打印自定义条件参数">
      <a
        href="javascript:void(0);"
        class="a-link link-oneLind"
        @click="editEventHandler('printCustomCondition', printConditionParams)"
      >
        <span>{{ optionModel.printCustomCondition }}</span>
        <i class="el-icon-edit"></i>
      </a>
    </el-form-item>
    <el-form-item label="输出模板编码"></el-form-item>
    <el-form-item label-width="0">
      <draggable
        tag="ul"
        class="draggable-box"
        :list="optionModel.printItems"
        v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.drag-option' }"
      >
        <li v-for="(item, index) in optionModel.printItems" :key="index" class="col-item">
          <i class="el-icon-s-operation drag-option"></i>
          <el-input
            v-model="item.code"
            class="cell-span-input"
            style="width: 160px !important"
          ></el-input>
          <el-button
            circle
            plain
            size="mini"
            type="danger"
            @click="deleteItem(index)"
            icon="el-icon-minus"
            class="col-delete-button"
            style="position: unset"
          ></el-button>
        </li>
      </draggable>
      <div>
        <el-button
          type="text"
          @click="addItem"
          icon="el-icon-circle-plus-outline"
          class="add-option"
        >
          新增
        </el-button>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import i18n from "../../../../../../components/xform/utils/i18n";
import eventMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
import Draggable from "vuedraggable";

export default {
  name: "print-detail-button-editor",
  mixins: [i18n, eventMixin],
  components: {
    Draggable,
  },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      eventParams: [],
      printConditionParams: ["dataId", "formCode", "exportTemplate"],
    };
  },
  methods: {
    deleteItem(index) {
      this.optionModel.printItems.splice(index, 1);
    },
    addItem() {
      this.optionModel.printItems.push({ code: null });
    },
  },
};
</script>

<style lang="scss" scoped>
.option-items-pane ul {
  padding-inline-start: 6px;
  padding-left: 6px; /* 重置IE11默认样式 */
}

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

.drag-option {
  cursor: move;
}

.small-padding-dialog ::v-deep .el-dialog__body {
  padding: 10px 15px;
}

.dialog-footer .el-button {
  width: 100px;
}
</style>
