<template>
  <div>
    <a-form-model :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-model-item label="调整优先级">
        <a-popover placement="right" trigger="click">
          <template slot="content">
            <div style="font-size: 16px">拖拽条件调整优先级顺序</div>
            <draggable
              style="width: 100%; min-height: 25px"
              :list="prioritySortList"
              :options="sortOption"
              :move="() => true"
            >
              <div
                v-for="(element, index) in prioritySortList"
                :key="element.id"
                class="drag-no-choose"
                :class="{ 'drag-hover': element.id === selectedNode.id }"
              >
                <a-tooltip :title="element.name">
                  <span style="max-width: 160px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                    {{ element.name }}
                  </span>
                </a-tooltip>
                <div>优先级 {{ index + 1 }}</div>
              </div>
            </draggable>
          </template>
          <a-button size="small">
            <i class="x-icon-sort x-iconfont"></i>
            第{{ nowNodeLeave + 1 }}级
          </a-button>
        </a-popover>
      </a-form-model-item>

      <a-form-model-item label="条件组关系">
        <a-switch
          :checked="groupsType === 'AND'"
          @change="val => groupsType = val ? 'AND' : 'OR'"
          checked-children="且"
          un-checked-children="或"
        />
      </a-form-model-item>

      <a-form-model-item label="条件组表达式">
        <a-input
          v-model="expression"
          size="small"
          placeholder="输入条件组关系表达式  &为与，|为或"
        />
        <div class="item-desc" style="margin-top: 8px;">使用表达式构建复杂逻辑，例如: (A & B) | C</div>
      </a-form-model-item>
    </a-form-model>

    <div style="margin: 0 0 15px;">
      <a-button type="primary" size="small" @click="addConditionGroup" style="margin-right: 15px;" shape="round">
        <i class="x-icon-plus x-iconfont"></i>
        添加条件组
      </a-button>
      <span>只有必填选项才能作为审批条件</span>
    </div>

    <InclusiveGroupItemConfig />
  </div>
</template>

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

export default {
  name: 'InclusiveNodeConfig',
  components: {
    draggable,
    InclusiveGroupItemConfig
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    ...mapState('workflow', ['selectedNode', 'nodeMap']),
    prioritySortList() {
      const parent = this.nodeMap.get(this.selectedNode.parentId);
      return parent ? parent.branchs || [] : [];
    },
    nowNodeLeave() {
      return this.prioritySortList.findIndex(n => n.id === this.selectedNode.id);
    },
    groupsType: {
      get() {
        return this.config.groupsType;
      },
      set(val) {
        this.$emit('update:config', {
          ...this.config,
          groupsType: val
        });
      }
    },
    expression: {
      get() {
        return this.config.expression;
      },
      set(val) {
        this.$emit('update:config', {
          ...this.config,
          expression: val
        });
      }
    }
  },
  data() {
    return {
      sortOption: {
        animation: 300,
        chosenClass: 'choose',
        scroll: true,
        sort: true
      }
    };
  },
  methods: {
    addConditionGroup() {
      const groups = this.config.groups || [];
      groups.push({
        cids: [],
        groupType: 'OR',
        conditions: []
      });

      this.$emit('update:config', {
        ...this.config,
        groups
      });
    }
  }
};
</script>

<style scoped lang="less">
.sortable-chosen {
  border-radius: 5px;
  margin-top: 2px;
  background: #f4f4f4;
  border: 1px dashed #1890ff !important;
}

.drag-hover {
  color: #1890ff;
}

.drag-no-choose {
  cursor: move;
  background: #f8f8f8;
  border-radius: 5px;
  margin: 5px 0;
  height: 25px;
  line-height: 25px;
  padding: 5px 10px;
  border: 1px solid #ffffff;

  div {
    display: inline-block;
    font-size: small;
  }

  div:nth-child(2) {
    float: right;
  }
}

.item-desc {
  color: #888;
  font-size: 12px;
}
</style>
