<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="container_item">
        <el-input v-model="filterText"  class="filter-item input_item" clearable  @keyup.enter.native="handleFilter" />
      </div>
      <!-- <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleFilter">
        {{ $t('table.search') }}
      </el-button> -->
      <el-button v-if="permission.includes('pwd_enable_or_close')" v-waves class="filter-item add_plus" type="primary" icon="el-icon-my-add" @click="addSameLevel">
        {{ $t('table.add') }}
      </el-button>
    </div>
    <el-row :gutter="10" style="background: #FFFFFF;">
      <el-col :span="12">
        <div ref="flexTree">
          <div :style="{'width': nodeWidth +'px', 'height':nodeHeight+'px'}" class="flex-tree">
            <el-scrollbar style="height:100%">
              <el-tree
                class="my-tree"
                id="myTree"
                ref="myTree"
                :data="filterTree"
                :indent="0"
                node-key="id"
                :current-node-key="currentNodeKey"
                :props="defaultProps"
                default-expand-all
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                @node-click="handleNodeClick"
                @node-contextmenu="nodeContextmenu"
                :render-content="renderContent"
              ></el-tree>
            </el-scrollbar>

            <div
                class="tree-menu"
                ref="treeMenu"
                id="tree-menu"
                v-show="treeMenuVisiable"
              >
                <div class="tree-menu-body">
                  <div v-if="permission.includes('financial_tree_add_some')" class="tree-menu-item" @click="addSameLevel"><img src="@/assets/images/add_same_level.png" alt="">新增同级</div>
                  <div class="tree-menu-item" @click="addChildLevel" v-if="nodeInfo.isProduct === 0 && permission.includes('financial_tree_add_child')"><img src="@/assets/images/add_child_level.png" alt="">新增子级</div>
                  <div v-if="permission.includes('financial_tree_node_update')" class="tree-menu-item" @click="nodeEdit"><img src="@/assets/images/node_edit.png" alt="">节点编辑</div>
                  <!-- <div class="tree-menu-item" @click="nodeQuery">节点查询</div> -->
                  <div v-if="permission.includes('financial_tree_node_del')" class="tree-menu-item" @click="nodeDel"><img src="@/assets/images/node_del.png" alt="">节点删除</div>
                  <div v-if="permission.includes('financial_tree_add_some')
                  || permission.includes('financial_tree_node_update')
                  || (nodeInfo.isProduct === 0 && permission.includes('financial_tree_add_child'))
                  || permission.includes('financial_tree_node_del')
                  " class="tree-menu__arrow" id="treeArrow"></div>
                </div>
              </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="node-det-d" v-if="nodeStatus1">
          <div class="node-det" >
            <Ntitle title="产品树节点属性配置" />
            <div class="node-det-cnt">
              <el-row :gutter="10">
                <el-col :span="15">
                  <el-form label-position="right" label-width="130px" :model="form1" >
                    <el-form-item v-if="nodeStatus1 === 'nodeEdit' || nodeStatus1 === 'nodeQuery'" :label="$t('financial.treeCode')+'：'" :label-width="formLabelWidth" class="unabled is-disabled">
                      <el-input v-model="form1.treeCode" utocomplete="off" disabled ></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('financial.productCode')+'：'" :label-width="formLabelWidth" :class="{'unabled is-disabled': nodeStatus1  === 'nodeQuery', 'require': nodeStatus1 !== 'nodeQuery'}">
                      <el-input v-model="form1.productCode" autocomplete="off" maxLength="100" :disabled="nodeStatus1  === 'nodeQuery'"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('financial.productDescribe')+'：'" :label-width="formLabelWidth" :class="{'unabled is-disabled': nodeStatus1  === 'nodeQuery', 'require': nodeStatus1 !== 'nodeQuery'}">
                      <el-input v-model="form1.productDescribe" autocomplete="off" maxLength="500" :disabled="nodeStatus1  === 'nodeQuery'"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('financial.isProduct')+'：'" :label-width="formLabelWidth" :class="{'unabled is-disabled': nodeStatus1  === 'nodeQuery' || !form1.leaf, 'require': nodeStatus1 !== 'nodeQuery' && form1.leaf}">
                      <el-select v-model="form1.isProduct" :disabled="nodeStatus1  === 'nodeQuery' || !form1.leaf">
                        <el-option
                          v-for="item in whetherList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('financial.productAttr')+'：'" :label-width="formLabelWidth" class="unabled is-disabled">
                      <el-input v-model="form1.productAttr" autocomplete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('financial.treePcode')+'：'" :label-width="formLabelWidth" class="unabled is-disabled">
                      <el-input v-model="form1.treePcode" autocomplete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('financial.parentProductCode')+'：'" :label-width="formLabelWidth" class="unabled is-disabled" >
                      <el-input v-model="form1.parentProductCode" autocomplete="off" disabled></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="dialog-footer node-btn" v-if="nodeStatus1 ==='nodeEdit'">
            <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="submit1Handle">
              {{ $t('table.sbumit') }}
            </el-button>
            <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="nodeStatus1 = 'nodeQuery'">
                {{ $t('table.cancel') }}
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 新增或者编辑弹框 -->
    <el-dialog
      :title="nodeStatus | statusFilter"
      :visible.sync="dialogFormVisible"
      v-el-drag-dialog
      :close-on-click-modal="false"
      width="499px">
      <div style="padding: 20px;">
        <el-form :model="form" :disabled="nodeStatus === 'nodeDel'">
          <el-form-item v-if="nodeStatus === 'nodeEdit' || nodeStatus === 'nodeDel'" :label="$t('financial.treeCode')+'：'" :label-width="formLabelWidth" class="unabled is-disabled">
            <el-input v-model="form.treeCode" utocomplete="off" disabled ></el-input>
          </el-form-item>
          <el-form-item :label="$t('financial.productCode')+'：'" :label-width="formLabelWidth" :class="{'unabled is-disabled': nodeStatus === 'nodeDel', 'require': nodeStatus !== 'nodeDel'}">
            <el-input v-model="form.productCode" autocomplete="off" maxLength="100"></el-input>
          </el-form-item>
          <el-form-item :label="$t('financial.productDescribe')+'：'" :label-width="formLabelWidth" :class="{'unabled is-disabled': nodeStatus === 'nodeDel', 'require': nodeStatus !== 'nodeDel'}">
            <el-input v-model="form.productDescribe" autocomplete="off" maxLength="500"></el-input>
          </el-form-item>
          <el-form-item :label="$t('financial.isProduct')+'：'" :label-width="formLabelWidth" :class="{'unabled is-disabled': nodeStatus === 'nodeDel', 'require': nodeStatus !== 'nodeDel'}">
            <el-select v-model="form.isProduct" >
              <el-option
                v-for="item in whetherList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('financial.productAttr')+'：'" :label-width="formLabelWidth" class="unabled is-disabled">
            <el-input v-model="form.productAttr" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item :label="$t('financial.treePcode')+'：'" :label-width="formLabelWidth" class="unabled is-disabled">
            <el-input v-model="form.treePcode" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item :label="$t('financial.parentProductCode')+'：'" :label-width="formLabelWidth" class="unabled is-disabled" >
            <el-input v-model="form.parentProductCode" autocomplete="off" disabled></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <template v-if="nodeStatus === 'nodeDel'">
            <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-delete" @click="submitHandle">
              {{ $t('table.delete') }}
          </el-button>
          </template>
          <template v-else>
            <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="submitHandle">
              {{ $t('table.sbumit') }}
            </el-button>
          </template>

          <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="dialogFormVisible=false">
              {{ $t('table.cancel') }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CircularJSON from 'circular-json'
import elDragDialog from '@/directive/el-drag-dialog'
import { mapGetters } from 'vuex'
import waves from '@/directive/waves' // waves directive
// import treeList from '../component/treeList.vue'
import http from '@/api/http'
import Ntitle from '@/components/Ntitle'
import { validatenull } from '@/utils/validate.js'
export default {
  name: '',
  // components: { treeList},
  directives: { waves, elDragDialog },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        'addSameLevel': '新增同级',
        'addChildLevel': '新增子级',
        'nodeEdit': '节点编辑',
        'nodeQuery': '节点查询',
        'nodeDel': '节点删除',
      }
      return statusMap[status]
    }
  },
  components: { Ntitle },
  data() {
    return {
      filterText: undefined,
      query: {},
      nodeHeight: 0,
      nodeWidth: 0,
      tableData: [],
      treeMenuVisiable: false,
      whetherList: [
        { id: 1, name: '是', value: 1 },
        { id: 0, name: '否', value: 0 }
      ],
      dataTree: [],
      filterTree: [],
      defaultProps: {
        children: 'childProductList',
        label: 'productCode'
      },
      currentNodeKey: undefined,
      dialogFormVisible: false,
      formLabelWidth: '110px',
      form: {
        treeCode: undefined, // '产品树节点',
        productCode: undefined, // '节点名称',
        productDescribe: undefined, // '节点说明',
        isProduct: undefined, // '是否是产品', （叶子节点为金融产品）：0否，1是
        productAttr: undefined, // '节点属性',
        treePcode: undefined, // '上层节点', 父节点code，无父级时为0
        parentProductCode: undefined, // '上层节点名称',
        leaf: undefined
      },
      form1: {
        treeCode: undefined, // '产品树节点',
        productCode: undefined, // '节点名称',
        productDescribe: undefined, // '节点说明',
        isProduct: undefined, // '是否是产品', （叶子节点为金融产品）：0否，1是
        productAttr: undefined, // '节点属性',
        treePcode: undefined, // '上层节点', 父节点code，无父级时为0
        parentProductCode: undefined, // '上层节点名称',
        leaf: undefined
      },
      nodeInfo: {},
      nodeStatus: undefined, //
      nodeStatus1: undefined,
      //定义点击次数,默认0次
      nodeClickCount: 0,
      nodePreCode: undefined,
      nodeCurCode: undefined
    }
  },
  watch: {
    filterText(val) {
      this.$refs.myTree.filter(val);
      this.getFilterData()
    },
    treeMenuVisiable(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  created() {
    this.getFinancialProductTree()
  },
  mounted() {
    this.$nextTick(() => {
      this.nodeHeight = window.innerHeight - 200
      this.nodeWidth = this.$refs.flexTree.clientWidth
    })
  },
  methods: {

    handleFilter() {
      if (this.filterText) {
        this.filterTree = this.returnFilterTree(this.dataTree, this.filterText, [])
        // console.log(this.returnFilterTree(this.dataTree, this.filterText, []));
      } else {
        this.filterTree = [...this.dataTree]
      }
    },
    /**
     * @description: 获取过滤后的数据
     */
    getFilterData() {
      if (this.filterText) {
        const rootData = this.$refs.myTree.root
        if (rootData.visible) {
          const childNodesStr = CircularJSON.stringify(rootData.childNodes)
          const childNodes = CircularJSON.parse(childNodesStr)
          const filterData = this.recursionNodes(childNodes, this.filterText)
          // console.log('filterData',filterData)
          this.filterTree = [...filterData]
        } else {
          // console.log('暂无数据')
        }
      } else {
        this.filterTree = [...this.dataTree]
      }
    },
    /**
     * @description: 递归遍历数据
     * @param {array} nodes
     */
    recursionNodes(childNodes, filterText) {
      const nodes = childNodes
      const result = []
      for (const item of nodes) {
        if (item.visible) {
          if (item.data.productCode === filterText || item.data.productCode.includes(filterText)) {
            result.push(Object.assign(item.data, { isSelect: true }))
          } else {
            result.push(Object.assign(item.data))
          }
        }
        if (item.childNodes && item.childNodes.length) {
          const tempResult = this.recursionNodes(item.childNodes, filterText)
          item.data.childProductList = tempResult.map((v) => {
            if (v.productCode === filterText || v.productCode.includes(filterText)) {
              return Object.assign(v, { isSelect: true })
            } else {
              return Object.assign(v)
            }
          })
        }
      }
      return result
    },
    filterNode(value, data) {
      // console.log('value data', value, data);
      if (!value) return true;
      return data.productCode.indexOf(value) !== -1;
    },
    submitHandle() {
      // let { isLeaf, data } = this.nodeInfo
      // // console.log(this.nodeInfo);
      let { productCode, productDescribe } = this.form
      if (validatenull(productCode)) {
        this.$message.error('节点名称不能为空')
        return
      }

      if (validatenull(productDescribe)) {
        this.$message.error('节点说明不能为空')
        return
      }
      let params = {
        isProduct: this.form.isProduct,
        productCode: this.form.productCode,
        treePcode: this.form.treePcode ? this.form.treePcode : 0,
        productDescribe: this.form.productDescribe
      }
      switch(this.nodeStatus) {
        case 'nodeEdit': {
          params = Object.assign(params, { id: this.nodeInfo.id })
          // 03、更新金融产品：只能更改产品说明
          http.post('/par/financialProduct/update', params).then(() => {
            this.$message.success('修改成功')
            this.dialogFormVisible = false
            this.getFinancialProductTree(); // 重新加载tree
          }).catch(() => {})
          break;
        }
        case 'nodeDel': {
          let paramsDel = Object.assign({}, { id: this.nodeInfo.id })
          // 04、删除金融产品
          http.post('/par/financialProduct/delete', paramsDel).then(() => {
            this.$message.success('删除成功')
            this.dialogFormVisible = false
            this.getFinancialProductTree(); // 重新加载tree
          }).catch(() => {})
          break;
        }
        default: {
          // 02、新增金融产品
          http.post('/par/financialProduct/create', params).then(() => {
            this.$message.success('新增成功')
            this.dialogFormVisible = false
            this.getFinancialProductTree(); // 重新加载tree
          }).catch(() => {})
          break;
        }
      }
    },

    submit1Handle() {
      let { productCode, productDescribe } = this.form1
      if (validatenull(productCode)) {
        this.$message.error('节点名称不能为空')
        return
      }

      if (validatenull(productDescribe)) {
        this.$message.error('节点说明不能为空')
        return
      }
      let params = {
        isProduct: this.form1.isProduct,
        productCode: this.form1.productCode,
        treePcode: this.form1.treePcode ? this.form1.treePcode : 0,
        productDescribe: this.form1.productDescribe
      }
      params = Object.assign(params, { id: this.nodeInfo.id })
      // 03、更新金融产品：只能更改产品说明
      http.post('/par/financialProduct/update', params).then(() => {
        this.$message.success('修改成功')
        this.dialogFormVisible = false
        this.nodeStatus1 = 'nodeQuery'
        // console.log(this.nodeInfo.id);
        this.getFinancialProductTree(this.nodeInfo.id); // 重新加载tree
      }).catch(() => {})
    },

    // 新增同级
    addSameLevel() {
      this.dialogFormVisible = true
      // let { level, data } = this.nodeInfo
      // console.log(this.nodeInfo);
      this.nodeStatus = 'addSameLevel';
      let { isProduct } = this.nodeInfo
      this.nodeInfo.productAttr = isProduct === 0 || !isProduct ?  '金融产品父节点' : '金融产品节点';
      Object.keys(this.form).forEach((v) => {
        this.form[v] = this.nodeInfo[v] ? this.nodeInfo[v] : undefined
        this.form.treeCode = undefined
        this.form.productCode = undefined
        this.form.productDescribe = undefined
        if (v === 'isProduct') {
          this.form[v] = this.nodeInfo.isProduct === 1 ? 1 : 0;
          this.form.productAttr = this.form[v] === 0 ? '金融产品父节点' : '金融产品节点';
        }
        if (v === 'treePcode') {
          this.form[v] = this.nodeInfo.treePcode ? this.nodeInfo.treePcode : 0
        }
      })
    },
    // 新增子级
    addChildLevel() {
      this.dialogFormVisible = true
      this.nodeStatus = 'addChildLevel'
      // let { level, data } = this.nodeInfo
      // console.log(data);
      let { isProduct } = this.nodeInfo
      this.nodeInfo.productAttr = isProduct === 0 ? '金融产品父节点' : '金融产品节点';
      Object.keys(this.form).forEach((v) => {
        this.form[v] = this.nodeInfo[v] ? this.nodeInfo[v] : undefined
        this.form.treeCode = undefined
        this.form.productCode = undefined
        this.form.productDescribe = undefined
        if (v === 'isProduct') { // （叶子节点为金融产品）：0否，1是
          this.form[v] = 1
          this.form.productAttr = this.form[v] === 0 ? '金融产品父节点' : '金融产品节点';
        }
        if (v === 'treePcode') {
          this.form[v] = this.nodeInfo.treeCode ? this.nodeInfo.treeCode : 0
        }
        if (v === 'parentProductCode') {
          this.form[v] = this.nodeInfo.productCode ? this.nodeInfo.productCode : 0
        }
      })
    },
    // 节点编辑
    nodeEdit() {
      // this.dialogFormVisible = true
      // this.nodeStatus = 'nodeEdit';
      this.nodeStatus1 = 'nodeEdit';
      let { isProduct } = this.nodeInfo
      this.nodeInfo.productAttr = isProduct === 0 ? '金融产品父节点' : '金融产品节点';
      ['form1'].forEach((f) => {
        Object.keys(this[f]).forEach((v) => {
          this[f][v] = this.nodeInfo[v] ? this.nodeInfo[v] : undefined
          if (v === 'isProduct') {
            this[f][v] = this.nodeInfo.isProduct === 1 ? 1 : 0
            this[f].productAttr = this[f][v] === 0 ? '金融产品父节点' : '金融产品节点';
          }
          if (v === 'treePcode') {
            this[f][v] = this.nodeInfo.treePcode ? this.nodeInfo.treePcode : 0
          }
        })
      })
    },
    // 节点查询
    nodeQuery() {
      // this.nodeStatus = 'nodeQuery';
      this.nodeStatus1 = 'nodeQuery';
      let { isProduct } = this.nodeInfo
      this.nodeInfo.productAttr = isProduct === 0 ? '金融产品父节点' : '金融产品节点';
      ['form1'].forEach((f) => {
        Object.keys(this[f]).forEach((v) => {
          this[f][v] = this.nodeInfo[v] ? this.nodeInfo[v] : undefined
          if (v === 'isProduct') {
            this[f][v] = this.nodeInfo.isProduct === 1 ? 1 : 0
            this[f].productAttr = this[f][v] === 0 ? '金融产品父节点' : '金融产品节点';
          }
          if (v === 'treePcode') {
            this[f][v] = this.nodeInfo.treePcode ? this.nodeInfo.treePcode : 0
          }
        })
      })
    },
    // 节点删除
    nodeDel() {
      this.dialogFormVisible = true
      this.nodeStatus = 'nodeDel'
      let { isProduct } = this.nodeInfo
      this.nodeInfo.productAttr = isProduct === 0 ? '金融产品父节点' : '金融产品节点';
      Object.keys(this.form).forEach((v) => {
        this.form[v] = this.nodeInfo[v] ? this.nodeInfo[v] : undefined
        if (v === 'isProduct') {
          this.form[v] = this.nodeInfo.isProduct === 1 ? 1 : 0
          this.form.productAttr = this.form[v] === 0 ? '金融产品父节点' : '金融产品节点';
        }
        if (v === 'treePcode') {
          this.form[v] = this.nodeInfo.treePcode ? this.nodeInfo.treePcode : 0
        }
      })
    },
    // 01、获取金融产品树
    getFinancialProductTree(id) {
      http.post('/par/financialProduct/tree').then((res) => {
        this.filterTree = [...res.data];
        this.dataTree = [...res.data];
        this.$nextTick(() => {
          if (id) {
            this.currentNodeKey = id
            this.$refs.myTree.setCurrentKey(id)
          }
        })
      }).catch(err => {});
    },

    // 节点渲染
    renderContent(h, { node, data, store }) {
      // console.log(node, data);
      let { isLeaf, level } = node;
      let { isProduct } = data;
      let imgPath = ''

      if (isProduct === 0) {
        imgPath = require('@/assets/images/tree/node_root.png')
      } else {
        imgPath = isLeaf ? require('@/assets/images/tree/node_leaf.png') : require('@/assets/images/tree/node_root.png');
      }
      return (
        <span class="custom-tree-node">
          <span class="node-cnt">
            <img class="node-img" src={imgPath} />
            <span class="node-sp">{node.label}</span>
          </span>
        </span>
      );
      // if (node.label.length > 30) {
      //   return (
      //     <span class="custom-tree-node">
      //       <el-tooltip class="item" effect="dark" content={node.label} placement="top">
      //         <span class="node-cnt">
      //           <img class="node-img" src={imgPath} />
      //           <span class="node-sp">{node.label}</span>
      //         </span>
      //       </el-tooltip>
      //     </span>
      //   );
      // } else {
      //   return (
      //     <span class="custom-tree-node">
      //       <span class="node-cnt">
      //         <img class="node-img" src={imgPath} />
      //         <span class="node-sp">{node.label}</span>
      //       </span>
      //     </span>
      //   );
      // }
    },

    closeMenu() {
      this.treeMenuVisiable = false
    },
    handleNodeClick(data) {
      // 进入点击node节点时，清除设置的定时器
      clearInterval(this.timer)
      // console.log(data);
      this.treeMenuVisiable = false
      this.nodeInfo = {};
      this.nodeInfo = { ...data }

      this.nodeCurCode = this.nodeInfo.productCode
      if (this.nodeCurCode === this.nodePreCode) {
        this.nodeClickCount ++
      } else {
        this.nodeClickCount = 1
        this.nodePreCode = this.nodeInfo.productCode
      }
      if (this.nodeClickCount > 2) {
        return;
      }

      //计时器,计算300毫秒为单位,可自行修改
      this.timer = window.setTimeout(() => {
        if (this.nodeClickCount === 1) {
          this.nodeClickCount = 0;
          //单击事件处理
          // console.log(data);
          this.nodeQuery()
        } else if (this.nodeClickCount === 2) {
          // this.nodeClickCount = 0;
          //双击事件
          if (this.permission.includes('financial_tree_node_update')) {
            this.nodeEdit()
          }
        }
      }, 500);

    },
    // 当某一节点被鼠标右键点击时会触发该事件
    nodeContextmenu(event, data, Node) {
      // console.log(event, data, Node);
      this.nodeInfo = {};
      this.nodeInfo = { ...data }
      let treeMenu = document.getElementById('tree-menu');
      this.treeMenuVisiable = true
      this.$nextTick(() => {
        let { clientX, clientY, screenY } = event
        let tHei = treeMenu.clientHeight || 84
        let xVal = document.body.clientHeight - clientY
        if (tHei === 84) {
          xVal -= 20
        } else {
          xVal = xVal + 0
        }
        if (xVal < tHei) {
          // console.log(event.clientX-178,event.clientY-186+xVal);
          treeMenu.style.cssText = `left: ${event.clientX-178}px; top: ${event.clientY-186-xVal}px`;
          document.getElementById('treeArrow').style.cssText = `top:${xVal-10}px`
        } else {
          treeMenu.style.cssText = `left: ${event.clientX-178}px; top: ${event.clientY-186}px`;
          document.getElementById('treeArrow').style.cssText = `top: 10px`
        }
      })
    },
    // /par/financialProduct/tree
    // 01、获取金融产品树
    getData() {
      http.post(`/par/financialProduct/tree`).then((res)=>{
          this.tableData = res.data;
      }).catch(err=>{});
    },
    handleAdd(){

    },
    handleEdit(){

    },
    selectStyle(){
      // console.log('1');
    },
    outStyle(){
      // console.log('2');
    },

    /**
     * tree数据遍历
     * @param {Array} json
     * @param {String} filterText
     * @param {Array} temp
     * @returns
     */
    returnFilterTree(json, filterText, temp) {
      for(let i=0; i<json.length; i++) {
        let item = json[i];
        console.log(item.productCode);
        if (item.productCode === filterText || item.productCode.includes(filterText)) {
          temp.push(item)
        }
        if (item.childProductList && item.childProductList.length !== 0) {
          this.returnFilterTree(item.childProductList, filterText, temp)
        }
      }
      return temp
    }
  }
}
</script>
<style lang="scss" scoped>
@import './tree.scss';
@import '~@/styles/font.scss';
</style>
<style scoped>
::v-deep .el-form .el-form-item .el-form-item__label{
  font-size: 14px;
}
  .el-table__header-wrapper{
    border-radius: 10px 10px 0 0;
  }
  .tree_node{
    overflow: auto;
  }
  #msgRightMenu{
    display: none;
  }
.dropdown-menu {
  position: absolute;
  top: 100px;
  left: 150px;
  z-index: 1000;
  /* display: none; */
  float: left;
  /* min-width: 80px; */
  /* padding: 5px 0; */
  /* margin: 2px 0 0; */
  font-size: 14px;
  text-align: left;
  list-style: none;
  background: #fff;
  /* background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175); */
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #428bca;
  outline: 0;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  color: #777;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}
.dropdown-menu-right {
  right: 0;
  left: auto;
}
.dropdown-menu-left {
  right: auto;
  left: 0;
}
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777;
  white-space: nowrap;
}
.dropdown-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 990;
}
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}
.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
  content: "";
  border-top: 0;
  border-bottom: 4px solid;
}
.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 1px;
}
@media (min-width: 768px) {
  .navbar-right .dropdown-menu {
    right: 0;
    left: auto;
  }
  .navbar-right .dropdown-menu-left {
    right: auto;
    left: 0;
  }
}
.erji{
    width: 98px;
    background: red;
    /* margin-left: 240px; */
    position: absolute;
    top: 150px;
    left: 250px;
    z-index: 1000;
}

.tree-container{
  overflow: auto;
}
.tree-container /deep/ .el-tree-node__expand-icon.expanded {
		-webkit-transform: rotate(90deg);
  		transform: rotate(90deg);
	}

	.tree-container /deep/ .el-icon-caret-right:before {
		content: "\e791";
		font-size: 18px;
	}

	.tree-container /deep/ .el-tree-node__expand-icon{
		margin-left: 15px;
		padding: 0px;
	}

	.tree-container /deep/ .el-tree-node__expand-icon.is-leaf{
		margin-left: 0px;
	}

	.tree-container /deep/ .el-tree-node {
		position: relative;
		padding-left: 16px;
	}

	.tree-container /deep/ .el-tree-node__children {
		padding-left: 16px;
	}


	/* .tree-container /deep/ .el-tree > .el-tree-node:before {
      	border-left: none;
    }

    .tree-container /deep/ .el-tree > .el-tree-node:after {
      	border-top: none;
    }
	.tree-container /deep/ .el-tree > .el-tree-node:before {
		border-left: none;
	}

	.tree-container /deep/ .el-tree > .el-tree-node:after {
		border-top: none;
	} */

	.tree-container /deep/ .el-tree-node:before {
		content: "";
		left: 10px;
		position: absolute;
		right: auto;
		border-width: 1px;
	}

	.tree-container /deep/ .el-tree-node:after {
		content: "";
		left: 10px;
		position: absolute;
		right: auto;
		border-width: 1px;
	}

	.tree-container /deep/ .el-tree-node:before {
		border-left: 1px solid #e6e6e6;
		bottom: 0px;
		height: 100%;
		top: -19px;
		width: 1px;
	}

	.tree-container /deep/ .el-tree-node:after {
		border-top: 1px solid #e6e6e6;
		height: 25px;
		top: 20px;
		width: 20px;
	}

	.tree-container /deep/ .el-tree-node :last-child:before {
      	height: 40px;
    }
   /* .el-tree-node:last-child::before {
    height: 38px;
  } */

	.tree-container {
		margin: 10px;
	}
	.tree-container /deep/ .el-tree .el-tree-node {
		position: relative;
	}
	.tree-container /deep/ .el-tree-node .el-tree-node__content {
    	height: 40px;
		padding-left: 18px;
	}
	.tree-container /deep/ .el-tree-node .el-tree-node__content::before {
		border-left: 1px solid #e6e6e6;
		height: 100%;
		top: 0;
		width: 1px;
		margin-left: 1px;
		margin-top: 0px;
		z-index: 8;
	}
	.tree-container /deep/ .el-tree-node .el-tree-node__children .el-tree-node__content::before {
		border-left: 0px solid #e6e6e6;
		height: 100%;
		top: 0;
		width: 1px;
		margin-left: 1px;
		margin-top: 0px;
		z-index: 8;
	}

	.tree-container /deep/ .el-tree-node .el-tree-node__content::after {
		border-top: 1px solid #e6e6e6;
		height: 1px;
		top: 18px;
		width: 13px;
		margin-left: 1px;
		z-index: 8;
	}

	.tree-container /deep/ .el-tree-node .el-tree-node__children  .el-tree-node__content::after {
		border-top: 0px solid #e6e6e6;
	}

	.tree-container .el-tree-node .el-tree-node__content::before, .tree-container .el-tree-node .el-tree-node__content::after {
		content: '';
		position: absolute;
		right: auto;
	}
</style>
<style>

.tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.tree .el-icon-caret-right:before {
  content: "\E602";
  font-size: 18px;
}
.tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  content: "\E63c";
  font-size: 18px;
}

</style>

