<template>
  <el-form inline label-width="100px">
    <el-form-item label="调整优先级" prop="level">
      <el-popover placement="right" title="拖拽条件调整优先级顺序" width="250" trigger="click">
        <draggable style="width: 100%; min-height:25px" :list="prioritySortList" group="from"
                   @end="onEnd"
                   :options="sortOption">
          <template #item="{ index,element }">
            <div :class="{'drag-no-choose': true, 'drag-hover': element.id === selectedNode.id}">
              <ellipsis style="width: 80px;" hover-tip :content="element.name"/>
                          <div>优先级 {{ index + 1 }}</div>
            </div>
          </template>
        </draggable>

        <template #reference>
          <el-button slot="reference">第{{ nowNodeLeave + 1 }}级</el-button>
        </template>
      </el-popover>
    </el-form-item>
<!--    <el-form-item label="条件组关系" label-width="150px">-->
<!--      <el-switch v-model="selectedNode.props.groupsType" active-color="#409EFF"-->
<!--                 inactive-color="#c1c1c1" active-value="AND" inactive-value="OR"-->
<!--                 active-text="且" inactive-text="或">-->
<!--      </el-switch>-->
<!--    </el-form-item>-->
<!--    <el-form-item label="条件组表达式">-->
<!--      <el-input v-model="config.expression" placeholder="输入条件组关系表达式  &为与，|为或"/>-->
<!--      <span class="item-desc">使用表达式构建复杂逻辑，例如: (A & B) | C</span>-->
<!--    </el-form-item>-->
  </el-form>
<!--  <div>-->
<!--    <el-button type="primary" icon="Plus" style="margin: 0 15px 15px 0" round-->
<!--               @click="addConditionGroup">-->
<!--              添加条件组-->
<!--    </el-button>-->
<!--    <span class="item-desc">只有必填选项才能作为审批条件</span>-->
<!--  </div>-->
  <group-item/>
</template>

<script setup>
import draggable from 'vuedraggable';
import Ellipsis from '../common/Ellipsis.vue'
import {computed, defineProps, ref,defineEmits} from 'vue'
import {useProcessStore} from '@/stores/processStore.js'
const emit = defineEmits()

const processStore = useProcessStore()
import GroupItem from "./ConditionGroupItemConfig.vue"

const props = defineProps({
  config: {
    type: Object,
    default: {}
  }
})

const sortOption = reactive({
  animation: 300,
  chosenClass: 'choose',
  scroll: true,
  sort: true
})

const selectedNode = computed(() => {
  //当前选择的节点
  return processStore.getSelectedNode()
})


//条件节点
const prioritySortList = computed(() => {
  let node = processStore.nodeMap.get(processStore.getSelectedNode().parentId)
  if (node) {
    return node.branchs || []
  }
  return []
})

const nowNodeLeave = computed(() => {
  let node = processStore.nodeMap.get(processStore.getSelectedNode().parentId)
  let list = []
  if (node) {
    list = node.branchs || []
  }
  return list.indexOf(processStore.getSelectedNode())
})


const onEnd = () => {
  emit('initRender')
}
const addConditionGroup = (select) => {
  props.config.groups.push({
    cids: [],
    groupType: "OR",
    conditions: []
  })
}


// const selected = (select) => {
//   select.forEach(val => processStore.addAssignedUser(val))
// }


</script>

<style lang="scss" scoped>
.choose {
  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 !important;
  }

  div:nth-child(2) {
    float: right !important;
  }
}
</style>
