<template>
  <div class="node-panel">
    <div class="node-type" v-for="(item, index) in treeList" :key="index" @mousedown="mousedownFunc(item)">
      <SvgIcon style="width: 30px;height: 30px" :icon-class="item.type" color="#67C23A"/>
      <span style="display: block;">{{ item.name }}</span>
    </div>
   
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, watch } from 'vue';
import { randomNumber } from '@/utils/index';
import SvgIcon from '@/components/SvgIcon/index.vue';

const props = defineProps({
  lf: {
    type: Object,
  },
});

let treeList = ref([
  {
    id: 'START',
    name: '开始',
    type: 'start',
    show: false,
  },
  {
    id: 'DEFINEVAR',
    name: '变量',
    type: 'definevar',
  },
  {
    id: 'SQL',
    name: '查询',
    type: 'sql',
  },
  {
    id: 'AUDIO',
    name: '放音',
    type: 'audio',
  },
  {
    id: 'AUDIODTMF',
    name: '放音收号',
    type: 'audiodtmf',
  },
  {
    id: 'BRANCH',
    name: '分支',
    type: 'branch',
  },
  {
    id: 'QUEUE',
    name: '队列',
    type: 'queue',
  },
  // {
  //   id: 'WAIT',
  //   name: '人工',
  //   type: 'wait',
  // },
  {
    id: 'TRANSFEROUT',
    name: '呼叫转移',
    type: 'transferout',
  },
  {
    id: 'LEAVEWORD',
    name: '留言',
    type: 'leaveword',
  },
  {
    id: 'HANGUP',
    name: '挂机',
    type: 'hangup',
  },

]);


let filterText = ref('');
let dragRow = reactive({
  type: '',
}); //拖拽的行
let randomNum = ref(null);

let treeRef = ref(null);

watch(filterText, (val) => {
  treeRef.value.filter(val);
});

const mousedownFunc = (val) => {
  let typeList = ['start', 'definevar', 'sql', 'audio', 'audiodtmf', 'branch', 'queue', 'wait', 'transferout', 'leaveword', 'hangup'];
  console.log(val);
  if (typeList.includes(val.type)) {
    dragRow = val;
    randomNum.value = randomNumber();
    props.lf.dnd.startDrag({
      type: val.type, 
      // text: val.name,
      id: randomNum.value,
    });
  }
};

// 停止拖拽时节点可放置的位置
const allowDrop = () => {
  return false; // 停止拖拽后树节点位置不发生改变
};

const filterNodeMethod = (value, data) => {
  if (!value) return true;
  return data.name.toLowerCase().indexOf(value.toLowerCase()) !== -1; //支持大小写模糊搜索
};

onMounted(() => {
  // props.lf.on('edge:add', (data) => {
  //   console.log(data, 'edge:add');
  // });
  props.lf.on('node:dnd-add', () => {

    const properties = {
      name: dragRow.name,
      desc: '',
      frontend_status: '0',
    };

    if (['wait'].includes(dragRow.type)) {
      properties.anchors = [{
        id: randomNumber(),
        text: '成功',
        checked: true,
        isDefault: true,
        outParams: {
          type: 'queue',
        },
      }, {
        id: randomNumber(),
        text: '失败',
        checked: true,
        isDefault: true,
        outParams: {
          type: 'queue',
        },
      }]
    }

    props.lf.setProperties(randomNum.value, properties);

    // if (dragRow.type == 'leaveword') {
    //   props.lf.setProperties(randomNum.value, {
    //     anchors: [{
    //     id: randomNumber(),
    //     text: '成功',
    //     checked: true,
    //     isDefault: true,
    //     outParams: {
    //       type: 'wait',
    //     },
    //   }, {
    //     id: randomNumber(),
    //     text: '失败',
    //     checked: true,
    //     isDefault: true,
    //     outParams: {
    //       type: 'wait',
    //     },
    //   }],
    //     frontend_status: '0', //0配置错误，1配置正常
    //   });
    // } 
    // if (dragRow.type == 'start') {
    //   props.lf.setProperties(randomNum.value, {
    //     frontend_status: '0', //0配置错误，1配置正常
    //   });
    // } else if (dragRow.type == 'assignment') {
    //   props.lf.setProperties(randomNum.value, {
    //     name: dragRow.name,
    //     desc: '',
    //     frontend_status: '1',
    //   });
    // } else if (dragRow.type == 'decision') {
    //   props.lf.setProperties(randomNum.value, {
    //     name: dragRow.name,
    //     desc: '',
    //     frontend_status: '1',
    //     decisions: {
    //       decisionConditions: [],
    //       id: randomNumber(),
    //       defaultDecision: 'defaultDecision',
    //     },
    //   });
    // } else if (dragRow.type == 'startParallel') {
    //   props.lf.setProperties(randomNum.value, {
    //     name: dragRow.name,
    //     desc: '',
    //     frontend_status: '0',
    //   });
    // } else if (dragRow.type == 'endParallel') {
    //   props.lf.setProperties(randomNum.value, {
    //     name: dragRow.name,
    //     desc: '',
    //     frontend_status: '0',
    //   });
    // } else if (dragRow.type == 'machineLearning') {
    //   props.lf.setProperties(randomNum.value, {
    //     name: dragRow.name,
    //     desc: '',
    //     inputParams: [],
    //     outputParams: {
    //       output: '',
    //       assignTo: '',
    //     },
    //     frontend_status: '0',
    //   });
    // } else if (dragRow.type == 'deepLearning') {
    //   props.lf.setProperties(randomNum.value, {
    //     name: dragRow.name,
    //     desc: '',
    //     inputParams: [],
    //     outputParams: {
    //       output: '',
    //       assignTo: '',
    //     },
    //     frontend_status: '0',
    //   });
    // }
  });
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';
@import '@/assets/styles/variables.module.scss';

.node-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 80px;
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 25px;
  // text-align: center;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  user-select: none; /* Standard syntax */
  z-index: 101;

  .node-type {
    width: 30px;
    height: 60px;
    width: 100%;
    font-size: 13px;
    text-align: center;
    justify-items: center;
  }

  .node-type:hover {
    cursor: pointer;
  }
}

.node-item {
  margin-bottom: 20px;
}

.node-item-icon {
  width: 40px;
  height: 40px;
  margin-left: 20px;
  background-size: cover;
}

.node-label {
  font-size: 12px;
  margin-top: 5px;
  user-select: none;
}

.custom-tree-node {
  .drag-label {
    user-select: none; //禁止选择文本
    @include ellipsis(160px);
  }

  //赋值
  .assignment {
    color: $--color-primary;
    margin: 0 2px 0 0;
    font-size: 17px;
    position: relative;
    bottom: 4px;
  }

  //决策
  .decision {
    color: #fba905;
    margin: 0 3px 0 0;
    font-size: 15px;
    position: relative;
    bottom: 5px;
    left: 0px;
  }

  .startParallel {
    margin: 0 4px 0 0;
    font-size: 14px;
    position: relative;
    bottom: 5px;
  }

  .endParallel {
    margin: 0 4px 0 0;
    font-size: 14px;
    position: relative;
    bottom: 5px;
  }

  .machineLearning {
    margin: 0 4px 0 0;
    font-size: 14px;
    position: relative;
    bottom: 5px;
  }

  .deepLearning {
    margin: 0 4px 0 0;
    font-size: 14px;
    position: relative;
    bottom: 5px;
  }
}

.panelLayout {
  left: -10px;
}
</style>
