<template>
  <div>
    <!-- 拖拽优先级 -->
    <div class="mb-3">
      <span class="mr-3">调整优先级</span>
      <a-popover placement="right" trigger="click">
        <template slot="content">
          <div class="priority-tip">拖拽条件调整优先级顺序</div>
          <draggable
            :list="prioritySortList"
            :options="sortOption"
            item-key="id"
            group="from"
            class="priority-drag-wrapper"
          ><!-- todo 修复draggable渲染问题 -->
            <template slot="item" slot-scope="{ element, index }">
              <div
                v-if="index !== prioritySortList.length - 1"
                class="drag-item"
                :class="{ 'is-hover': element.id === selectedNode.id }"
              >
                <a-tooltip placement="topLeft">
                  <template slot="title">{{ element.nodeName }}</template>
                  <div class="drag-item-text">
                    {{ element.nodeName }}
                  </div>
                </a-tooltip>
                <div class="drag-item-priority">优先级 {{ index + 1 }}</div>
              </div>
            </template>
          </draggable>
        </template>
        <a-button size="small">
          <i class="x-icon-sort x-iconfont mr-1"></i>
          第{{ nowNodeLeave + 1 }}级
        </a-button>
      </a-popover>
    </div>

    <!-- 条件说明 -->
    <div class="text-gray-700 mb-3 condition-title">
      <span>满足以下条件时进入当前分支</span>
      <a-tooltip title="只有必填选项控件才能作为审批条件">
        <i class="x-iconfont x-icon-line-tips ml-1 tips-icon"></i>
      </a-tooltip>
    </div>

    <!-- 条件组组件 -->
    <GroupItem />

    <!-- 添加条件组按钮 -->
    <div class="add-group-btn">
      <a-button type="dashed" block size="small" @click="addConditionGroup">
        <i class="x-icon-plus x-iconfont mr-1"></i>
        添加条件组
      </a-button>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import GroupItem from './ConditionGroupItemConfig.vue';
import { mapState } from 'vuex';

export default {
  name: 'ConditionNodeConfig',
  components: {
    draggable,
    GroupItem
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    ...mapState({
      workflowStore: state => state.workflow
    }),
    selectedNode() {
      return this.workflowStore.selectedNode;
    },
    prioritySortList() {
      const parentNode = this.workflowStore.nodeMap.get(this.selectedNode.parentId);
      return parentNode && Array.isArray(parentNode.conditionNodes) ? [...parentNode.conditionNodes]  : [];
    },
    nowNodeLeave() {
      return this.prioritySortList.findIndex(n => n.id === this.selectedNode.id);
    }
  },
  data() {
    return {
      sortOption: {
        animation: 300,
        chosenClass: 'sortable-chosen',
        scroll: true,
        sort: true
      }
    };
  },
  methods: {
    addConditionGroup() {
      this.config.conditionList = this.config.conditionList || [];
      this.config.conditionList.push([]);
      this.$emit('update:config', {
        ...this.config,
        conditionList: this.config.conditionList
      });
    }
  }
};
</script>

<style scoped lang="less">
.priority-tip {
  font-size: 14px;
  margin-bottom: 8px;
  color: #555;
}

.priority-drag-wrapper {
  width: 100%;
  min-height: 40px;
}

.drag-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
  background: #fafafa;
  border-radius: 4px;
  margin: 5px 0;
  padding: 6px 10px;
  border: 1px solid #e8e8e8;
  transition: all 0.2s;
  font-size: 13px;

  &:hover {
    border-color: #1890ff;
  }
}

.drag-item-text {
  max-width: 160px;
  //overflow: hidden;
  //text-overflow: ellipsis;
  white-space: nowrap;
}

.drag-item-priority {
  color: #888;
  font-size: 12px;
}

.is-hover {
  border-color: #1890ff;
  background: #e6f7ff;
  color: #1890ff;
}

.sortable-chosen {
  border: 1px dashed #1890ff !important;
  background: #f0faff;
}

.condition-title {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.tips-icon {
  cursor: pointer;
  font-size: 14px;
  color: #999;
}

.add-group-btn {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
</style>
