<template>
  <div class="operate-panel" :style="operatePanelData.coord" v-if="operatePanelData.isShow" @click.stop>
    <el-cascader-panel
      :options="options"
      :props="props"
      @change="handleOperate">
      <template slot-scope="{ data }">
        <i v-if="data.icon" class="mr-5" :class="data.icon" />
        <span>{{ data.name }}</span>
      </template>
    </el-cascader-panel>
  </div>
</template>

<script>
// import { listAvailableNodes } from '@/api/esb_service'
import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapMutations } = createNamespacedHelpers('app')
export default {
  name: 'OperatePanel',
  data() {
    return {
      isShow: false,
      props: {
        expandTrigger: 'hover',
        label: 'name',
        value: 'type',
        children: 'subNodes'
      },
      // baseOptions: [
      //   {
      //     type: 'reportmain',
      //     name: '报告',
      //     subNodes: [
      //       {
      //         type: 'reportitem',
      //         name: '报告'
      //       },
      //       {
      //         type: 'LogNodeDTO',
      //         name: '日志'
      //       },
      //       {
      //         type: 'warning',
      //         name: '预警'
      //       }
      //     ]
      //   },
      //   {
      //     type: 'flowcontrol',
      //     name: '流控制',
      //     subNodes: [
      //       {
      //         type: 'LoopNodeDTO',
      //         name: 'For Each'
      //       },
      //       {
      //         type: 'ChoiceNodeDTO',
      //         name: 'If...Then...'
      //       }
      //     ]
      //   },
      //   {
      //     type: 'messagehandling',
      //     name: '消息处理',
      //     subNodes: [
      //       {
      //         type: 'AssignNodeDTO',
      //         name: '分配'
      //       },
      //       {
      //         type: 'InsertNodeDTO',
      //         name: '插入'
      //       },
      //       {
      //         type: 'ReplaceNodeDTO',
      //         name: '替换'
      //       }
      //     ]
      //   },
      //   {
      //     type: 'communication',
      //     name: '通信',
      //     subNodes: [
      //       {
      //         type: 'RouteNodeDTO',
      //         name: '服务标注'
      //       }
      //     ]
      //   }
      // ],
      // baseOptions: [],
      // operateNode: [], // 接口数据
      options: [],
      delOption: [],
      disableOption: []
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    coord: {
      type: Object,
      default: () => {
        return {
          top: 0,
          left: 0
        }
      }
    },
    operateType: {
      type: String,
      default: '0'
    }
  },
  computed: {
    ...mapGetters(['operatePanelData', 'operateNode', 'currenStageIndex', 'currenStageList', 'currenStageData']),
    baseOptions() {
      return this.operateNode && this.operateNode.length > 0 ? this.operateNode[0].subNodes : []
    },
    comOptions() {
      var arr = [
        {
          type: 'AddOperate',
          name: '添加操作',
          icon: 'el-icon-document-add',
          subNodes: this.baseOptions
        },
        {
          type: 'DeleteOperate',
          name: '删除此操作',
          icon: 'el-icon-delete'
        },
        {
          type: 'MoveUpOperate',
          name: '上移',
          icon: 'el-icon-top'
        },
        {
          type: 'MoveDownOperate',
          name: '下移',
          icon: 'el-icon-bottom'
        },
        {
          type: 'CopyOperate',
          name: '复制',
          icon: 'el-icon-document-copy'
        },
        {
          type: 'PasteOperate',
          name: '粘贴',
          icon: 'el-icon-document-checked',
          disabled: true
        }

      ]

      if (this.delOption.length > 0) {
        arr.push(this.delOption[0])
      }
      if (this.disableOption.length > 0) {
        arr.push(this.disableOption[0])
      }
      return arr
    }
  },
  watch: {
    value(val) {
      this.isShow = val
    },
    isShow(val) {
      this.$emit('input', val)
    },
    // currenStageIndex(val){
    'operatePanelData.isShow'(val) {
      val = this.currenStageIndex
      if (typeof (this.currenStageList[val]) !== 'undefined' && this.currenStageList[val].enable === false) {
        this.disableOption = [{
          type: 'EnableOperate',
          name: '启用此操作',
          icon: 'el-icon-refresh'
        }]
        this.delOption = []
      } else {
        this.disableOption = []
        this.delOption = [{
          type: 'DisabledOperate',
          name: '禁用此操作',
          icon: 'el-icon-close-notification'
        }]
      }
      // 若有有复制的对象，允许粘贴
      if (this.currenStageData && this.currenStageData.type) {
        this.comOptions[this.comOptions.length - 2].disabled = false
        console.log(1111, this.comOptions)
      } else {
        this.comOptions[this.comOptions.length - 2].disabled = true
      }
      if (this.currenStageList.length) {
        this.options = this.comOptions
      } else {
        this.options = JSON.parse(JSON.stringify(this.baseOptions))
      }
    },
    'operatePanelData.type': {
      handler: function(val) {
        if (val === '0') {
          this.options = JSON.parse(JSON.stringify(this.comOptions))
          console.log('options2', this.options)
        } else if (val === 'AddIfElseAll') {
          this.options = [
            ...JSON.parse(JSON.stringify(this.comOptions)),
            {
              type: 'AddElseIf',
              name: '添加 else-if 条件'
            },
            {
              type: 'AddElse',
              name: '添加 else 条件'
            }
          ]
        } else if (val === 'AddIfElse') {
          this.options = [
            {
              type: 'AddElseIf',
              name: '添加 else-if 条件'
            },
            {
              type: 'AddElse',
              name: '添加 else 条件'
            },
            {
              type: 'DeleteCondition',
              name: '删除此条件',
              icon: 'el-icon-delete'
            }
          ]
        } else if (val === 'OnlyAddElseIf') {
          this.options = [
            {
              type: 'AddElseIf',
              name: '添加 else-if 条件'
            },
            {
              type: 'DeleteCondition',
              name: '删除此条件',
              icon: 'el-icon-delete'
            }
          ]
        } else if (val === 'DeleteCondition') {
          this.options = [
            {
              type: 'DeleteCondition',
              name: '删除此条件',
              icon: 'el-icon-delete'
            }
          ]
        } else {
          this.options = JSON.parse(JSON.stringify(this.baseOptions))
        }
      },
      immediate: true
    }
  },
  mounted() {
    const that = this
    window.addEventListener('click', function(e) {
      that.initOperatePanelData()
    })
    // this.$nextTick(() => {
    //   listAvailableNodes().then((rt) => {
    //     if (rt.status === '200' && rt.data) {
    //       this.setOperateNode(rt.data)
    //     }
    //   }).catch(() => {
    //   })
    // })
  },
  methods: {
    ...mapMutations(['setOperatePanelData', 'setCurrentOperate', 'setOperateNode', 'setCurrenStageList']),
    handleOperate(data) {
      console.log('data1111', data)
      const val = data[data.length - 1]
      console.log(val,'iiiiiiiiiiiiiiiii')
      this.initOperatePanelData()
      if (typeof (this.currenStageList[this.currenStageIndex]) !== 'undefined') {
        // if (!this.currenStageList[this.currenStageIndex].enable) {
        // } else {
        //   this.currenStageList[this.currenStageIndex].enable = true
        // }
      }
      if (typeof (this.currenStageList[this.currenStageIndex]) !== 'undefined' && val === 'DisabledOperate') {
        // 禁用
        // var list=this.currenStageList
        // enable=false;禁用
        console.log(3, this.currenStageList[this.currenStageIndex])
        this.currenStageList[this.currenStageIndex].enable = false
      } else if (typeof (this.currenStageList[this.currenStageIndex]) !== 'undefined' && val === 'EnableOperate') {
        // var list=this.currenStageList
        console.log(2, this.currenStageList[this.currenStageIndex])
        this.currenStageList[this.currenStageIndex].enable = true
      } else {
        // 删除或者新增
        this.setCurrentOperate(val)
        this.$emit('confirm', val)
      }
    },
    //设置操作数据
    initOperatePanelData() {
      this.setOperatePanelData({
        isShow: false,
        coord: {
          top: 0,
          left: 0
        },
        type: this.operatePanelData.type
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('click', null)
  }
}
</script>

<style lang="scss" scoped>
  .operate-panel {
    overflow: hidden;
    position: absolute;
    z-index: 20;
    .el-cascader-panel {
      float: left;
      border-color: #666666;
      background-color: #ffffff;
      /deep/ .el-cascader-menu {
        min-width: 140px;
        border-color: #666666;
        .el-cascader-menu__wrap {
          height: auto;
          overflow: auto;
          margin: 0 !important;
          .el-cascader-node {
            padding: 0 20px 0 12px;
            height: 26px;
            line-height: 26px;
            color: #333333;
            font-size: 13px;
            .el-cascader-node__label {
              padding: 0 5px 0 0;
              [class^="el-icon-"] {
                margin-right: 4px;
              }
            }
          }
          .el-cascader-node.in-active-path {
            color: $active-color;
          }
        }
        .el-scrollbar__bar {
          display: none;
        }
      }
    }
  }
</style>
