<template>
  <div>
    <el-form-item label-width="0">
      <el-divider class="custom-divider">下拉按钮设置</el-divider>
    </el-form-item>
    <el-form-item label="按钮样式">
      <el-select
        v-model="optionModel.dropdownType"
        placeholder="请选择按钮样式"
      >
        <el-option label="按钮" value="button"></el-option>
        <el-option label="链接" value="link"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="下拉触发方式">
      <el-select
        v-model="optionModel.dropdownTrigger"
        placeholder="请选择下拉触发方式"
      >
        <el-option label="点击" value="click"></el-option>
        <el-option label="悬停" value="hover"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="下拉按钮选项"></el-form-item>
        <li
          v-for="(colItem, colIdx) in selectedWidget.widgetList"
          :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="button"
            icon="el-icon-edit"
            class="col-delete-button"
            style="position: unset"
            @click="openEditFormatConfigDialog(colItem, colIdx)"
          ></el-button>
          <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"
        >
          增加
        </el-button>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import Draggable from "vuedraggable";
import i18n from "../../../utils/i18n";
import { deepClone, generateId } from "../../../utils/util";

export default {
  name: "dropdownFlag-editor",
  mixins: [i18n],
  components: {
    Draggable,
  },
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ["openWidgetPropertyDialog"],
  methods: {
    deleteCol(gridWidget, colIdx) {
      if (!!gridWidget && !!gridWidget.widgetList) {
        gridWidget.widgetList.splice(colIdx, 1);
      }
      this.designer.emitHistoryChange();
    },

    addNewCol(gridWidget) {
      let newGridCol = deepClone(
        this.designer.getFieldWidgetByType("dropdown-item")
      );
      let tmpId = generateId();
      newGridCol.id = "dropdown-item-" + tmpId;
      newGridCol.options.name = "dropdownItem" + tmpId;
      newGridCol.options.label = "dropdownItem" + tmpId;
      gridWidget.widgetList.push(newGridCol);
      this.designer.emitHistoryChange();
    },
    openEditFormatConfigDialog(fieldWidget, index) {
      this.openWidgetPropertyDialog({
        columnSelectedWidget: deepClone(fieldWidget),
        callback: (columnSelectedWidget) => {
          fieldWidget.options = columnSelectedWidget.options;
        },
      });
    },
  },
};
</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>
