<template>
  <div :style="'display: inline-block;' + (type == '3' ? 'width:100%;' : '')">
    <el-popover v-if="type != '2'" placement="bottom-start" v-model="visible">
      <ht-tree
        :style="
          'max-height:400px;;overflow: auto;' +
            (type == '1' ? 'width:300px' : '')
        "
        v-if="visible"
        :data="data"
        node-key="id"
        :expand-on-click-node="false"
        :props="defaultProps"
        support-filter
        default-expand-all
        @node-click="handleNodeClick"
      ></ht-tree>
      <el-button :size="size || 'small'" v-if="type != '3'" slot="reference"
        >选择变量
        <i class="expanded  el-tree-node__expand-icon  el-icon-caret-right"></i
      ></el-button>
      <el-input
        :size="size || 'small'"
        v-if="type == '3'"
        style="width: 100%;"
        slot="reference"
        v-model="value"
        placeholder="选择变量"
        :readonly="true"
      />
    </el-popover>
    <ht-tree
      v-if="type == '2'"
      style="height:100%;width:300px;overflow: auto;"
      :data="data"
      node-key="id"
      :expand-on-click-node="false"
      :props="defaultProps"
      support-filter
      default-expand-all
      @node-click="handleNodeClick"
      :highlight-current="true"
    ></ht-tree>
  </div>
</template>

<script>
import req from '@/request.js'
import {mapState} from 'vuex'
import FlowNodeCusersSelector from '@/components/flow/FlowNodeCusersSelector.vue'
import utils from '@/hotent-ui-util.js'
export default {
  props: [
    'defId',
    'nodeId',
    'type',
    'value',
    'removeSub',
    'includeBpmConstants',
    'isBpmForm',
    'varData',
    'appendVarData',
    'isMore',
    'size',
    'isNewFlow',
    'isSubOrSunTable'
  ], //type 1，流程其它设置，2，流程人员规则设置
  components: {FlowNodeCusersSelector},
  data() {
    return {
      visible: false,
      dialogVisible: false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'desc'
      },
      thisDefId: ''
    }
  },
  computed: mapState({
    defConfigData: state => state.flow.defConfigData
  }),
  watch: {
    data: {
      handler(val) {
        
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleNodeClick(selection, node, nodeCompent) {
      console.log('selection, node: ', selection, node);
      
      if (selection && selection.children && selection.children.length > 0) {
        return
      }
      const isMainTable =
        selection.path && selection.path.split('.').length === 1
      if (this.isNewFlow && this.isSubOrSunTable && isMainTable) {
        return this.$message.warning(
          '主流程字段为子表或孙表时新流程字段不允许选择主表字段'
        )
      }
      this.visible = false
      this.handleValue(node, selection)
      this.$emit('node-click', selection, node)
    },
    handleValue(node, selection) {
      var keyStr = node.data.name
      var parentNode = node.parent
      let nodeType = parentNode.data.nodeType
      var boDefAlias = parentNode.data.boDefAlias
      var typeMoth =
        node.data.dataType == 'number' ? '.getDouble' : '.getString'
      if (node.data.nodeType != 'var') {
        while (parentNode && !boDefAlias) {
          let pParentNode = parentNode.parent
          if (!pParentNode) {
            break
          }
          parentNode = pParentNode
          boDefAlias = pParentNode.data.boDefAlias
        }
      }

      // 子表情况做提示
      if (node.data.nodeType == 'sub') {
        keyStr =
          boDefAlias +
          ".getSubByKey('" +
          node.data.name +
          "') /* 获取子表,return List<BoData> */"
      } // 主表bo
      else if (parentNode.data.nodeType == 'main') {
        if (this.type == '1') {
          keyStr = boDefAlias + '.' + node.data.name
        } else if (this.type == '2') {
          keyStr = boDefAlias + '.' + node.data.name
        } else {
          keyStr =
            boDefAlias +
            typeMoth +
            '("' +
            node.data.name +
            '") /*数据类型：' +
            node.data.dataType +
            '*/'
        }
      } else if (parentNode.nodeType == 'sub') {
        var mainTableName = boDefAlias
        keyStr =
          mainTableName +
          '.getSubByKey("' +
          parentNode.name +
          '") /*获取子表数据 ，返回数据：return List<BoData> 。子表字段：' +
          node.name +
          ', 请根据实际情况处理子表数据的获取*/'
      } else if (node.data.nodeType == 'var') {
        keyStr = node.data.name
      }
      if (this.type == '1') {
        keyStr = '{' + node.data.desc + ':' + keyStr + '}'
      } else if (this.type == '3') {
        keyStr =
          node.data.desc +
          '【' +
          node.data.path +
          '.' +
          node.data.name +
          '】-' +
          node.data.dataType
      }

      node.data.pathValue = keyStr
      selection.pathValue = keyStr
      console.log('keyStr: ', keyStr);
      this.$emit('input', keyStr)
    }
  },
  mounted() {
    if (this.varData) {
      this.data = this.varData
      this.$emit('getData', this.data, this.isNewFlow)
      return
    }
    this.utils = utils
    let this_ = this
    this.thisDefId = this.defId
    if (!this.thisDefId && this.defConfigData && this.defConfigData.initData) {
      this.thisDefId = this.defConfigData.initData.bpmDefinition.defId
    }
    let isRemoveSub = this.removeSub
    if (isRemoveSub !== false) {
      isRemoveSub = true
    }

    let includeBpmConst = this.includeBpmConstants
    if (includeBpmConst !== false) {
      includeBpmConst = true
    }
    let bpmForm = this.isBpmForm
    if (bpmForm !== false) {
      bpmForm = true
    }

    req
      .post(window.context.bpmModel + '/flow/node/v1/varTree', {
        defId: this.thisDefId,
        nodeId: this.nodeId,
        includeBpmConstants: includeBpmConst,
        removeSub: isRemoveSub,
        bpmForm: bpmForm
      })
      .then(response => {
        if (this_.type == '1') {
          for (const d of response.data) {
            if (d.desc == '流程变量' && d.nodeType == 'root') {
              d.children.push({
                desc: '流程标题',
                name: 'title',
                nodeType: 'var'
              })
              d.children.push({
                desc: '发起时间',
                name: 'startDate',
                nodeType: 'var'
              })
              if (this.isMore) {
                d.children.push({
                  desc: '流程名称',
                  name: 'flowName',
                  nodeType: 'var'
                })
              }
            }
          }
        }
        this_.data = response.data
        
        if (this_.appendVarData) {
          this_.data.push(this_.appendVarData)
        }
        this.$emit('getData', this.data, this.isNewFlow)
      })
  }
}
</script>

<style scoped>
div >>> .el-dialog__body {
  padding: 10px;
}

.table > thead > tr > th,
.table > thead > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-top: 1px solid #e7eaec;
  border-left: 1px solid #e7eaec;
  line-height: 1.42857;
  padding: 8px;
  vertical-align: middle;
}

.table {
  border-bottom: 1px solid #e7eaec;
  border-right: 1px solid #e7eaec;
}

.table >>> .el-button {
  padding: 6px 8px;
  margin-left: 0px;
  margin-right: 5px;
}

div >>> .el-tabs__content {
  height: 450px;
  overflow: auto;
}
::v-deep .el-tree-node__expand-icon {
  color: #333333;
}
::v-deep .el-tree-node__expand-icon.is-leaf {
  color: transparent !important;
}
</style>