<template>
  <div >
    <el-row :gutter="10">
      <el-col :span="24">
        <div ref="flexTree">
          <div :style="{'width': nodeWidth +'px', 'height':nodeHeight-30+'px'}" class="flex-tree" >
            <el-scrollbar style="height:100%;width: 100%;">
              <el-tree
                ref="my-tree"
                class="my-tree"
                :data="filterTree"
                :indent="0"
                :check-strictly="type == 3"
                :props="defaultProps"
                node-key="id"
                :show-checkbox="checkboxShow"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                @node-click="handleNodeClick"
                @node-contextmenu="nodeContextmenu"
                @check="nodeCheck"
                default-expand-all
                :current-node-key="defaultExpand"
                :default-expanded-keys="defaultShowKeys"
              >
                <span class="custom-tree-node"  slot-scope="{ node,data}" >
                    <el-tooltip
                      v-if="node.level==1&&data.nodeName&&(Number(data.nodeName.length) + Number((data.overalLimit+'').length))>42||
                        node.level==2&&data.nodeName&&(Number(data.nodeName.length) + Number((data.overalLimit+'').length))>36||
                        node.level==3&&data.nodeName&&(Number(data.nodeName.length) + Number((data.overalLimit+'').length))>30||
                        node.level==4&&data.nodeName&&(Number(data.nodeName.length) + Number((data.overalLimit+'').length))>25||
                        node.level==5&&data.nodeName&&(Number(data.nodeName.length) + Number((data.overalLimit+'').length))>20||
                        node.level==6&&data.nodeName&&(Number(data.nodeName.length) + Number((data.overalLimit+'').length))>16||
                        node.level==7&&data.nodeName&&(Number(data.nodeName.length) + Number((data.overalLimit+'').length))>12||
                        node.level>7&&data.nodeName&&(Number(data.nodeName.length) + Number((data.overalLimit+'').length))>8
                        " class="item" effect="dark"
                        :content="content(data)" placement="top">
                    <span :class="{
                      'node-cnt4': data.status=='4',
                      'node-cnt6': data.status=='6',
                      'node-cnt9': data.status=='9',
                      'node-cnt': data.status!='4' && data.status!='6' && data.status!='9',
                      'filter-select': data.isSelect}"
                      class="node-cnt2" >
                        <img class="node-img" :src="imgPathUrl(data)" />
                        <!-- 'max-width': node.level==1?'430px':
                          node.level==2?'400px':
                          node.level==3?'360px':
                          node.level==4?'320px':
                          node.level==5?'280px':
                          node.level==6?'240px':
                          node.level==7?'200px':'180px', -->
                        <span @dblclick="clickNode(node,data)" class="node-sp span_desc"
                          :style="{
                          'color':data.status=='4'?'#B76002':data.status=='6'?'#E85A5A':data.status=='9'?'#707070':''}"
                          >
                          {{node.label ||data.nodeName}} <span v-if="data.currencyCode">({{data.currencyCode}} {{data.overalLimit|numberToCurrency}})</span>
                          <!-- 集团额度维护，和非集团额度维护列表 中从详情 冻结 解冻 终止 进入的额度树节点 不用判断status，
                          如果isLock=1就是变更中。
                          从草稿和审核入口进入的不加isLock=1的逻辑，保持原逻辑不变 -->
                          <template v-if="type == 2 || type == 3 || type == 4 || type ==5 ">
                            <!-- 变更中 -->
                            <template v-if="data.isLock === 1">
                              <span class="text-changing">变更中</span>
                            </template>
                            <template v-else>
                              <template>
                                <img class="img-status" v-if="data.status=='4'||data.status=='6'||data.status=='9'" :src="data.status=='4'? require('@/assets/images/treedj.png'):data.status=='6'?require('@/assets/images/treezz.png'):data.status=='9'?require('@/assets/images/treesc.png'):''" alt="">
                                <span style="margin-right: 10px;">{{data.status=='4'?'已冻结':data.status=='6'?'已终止':data.status=='9'?'已删除':''}}</span>
                                <span v-if="mine&&data.operateStatus>0&&data.operateStatus!=2||mine&&data.operateStatus==2&&data.startDateOriginal" style="color:red;margin-right: 10px;">({{data.operateStatus|spanFilter}})</span>
                              </template>
                            </template>
                          </template>
                          <template v-else>
                            <template>
                              <img class="img-status" v-if="data.status=='4'||data.status=='6'||data.status=='9'" :src="data.status=='4'? require('@/assets/images/treedj.png'):data.status=='6'?require('@/assets/images/treezz.png'):data.status=='9'?require('@/assets/images/treesc.png'):''" alt="">
                              <span style="margin-right: 10px;">{{data.status=='4'?'已冻结':data.status=='6'?'已终止':data.status=='9'?'已删除':''}}</span>
                              <span v-if="mine&&data.operateStatus>0&&data.operateStatus!=2||mine&&data.operateStatus==2&&data.startDateOriginal" style="color:red;margin-right: 10px;">({{data.operateStatus|spanFilter}})</span>
                            </template>
                          </template>
                        </span>
                    </span>
                    </el-tooltip>
                    <span v-else :class="{
                      'node-cnt4': data.status=='4',
                      'node-cnt6': data.status=='6',
                      'node-cnt9': data.status=='9',
                      'node-cnt': data.status!='4' && data.status!='6' && data.status!='9',
                      'filter-select': data.isSelect}"
                      class="node-cnt2" >
                      <!-- 'max-width': node.level==1?'430px':
                        node.level==2?'400px':
                        node.level==3?'360px':
                        node.level==4?'320px':
                        node.level==5?'280px':
                        node.level==6?'240px':
                        node.level==7?'200px':'180px', -->
                      <img class="node-img" :src="imgPathUrl(data)" />
                      <span @dblclick="clickNode(node,data)"
                        class="node-sp span_desc"
                        :style="{
                        'color':data.status=='4'?'#B76002':data.status=='6'?'#E85A5A':data.status=='9'?'#707070':''}"
                        >
                          {{node.label ||data.nodeName}} <span v-if="data.currencyCode">({{data.currencyCode}} {{data.overalLimit|numberToCurrency}})</span>

                          <template v-if="type == 2 || type == 3 || type == 4 || type ==5 ">
                            <!-- 变更中 -->
                            <template v-if="data.isLock === 1">
                              <span class="text-changing">变更中</span>
                            </template>
                            <template v-else>
                              <template>
                                <img class="img-status" v-if="data.status=='4'||data.status=='6'||data.status=='9'" :src="data.status=='4'? require('@/assets/images/treedj.png'):data.status=='6'?require('@/assets/images/treezz.png'):data.status=='9'?require('@/assets/images/treesc.png'):''" alt="">
                                <span style="margin-right: 10px;">{{data.status=='4'?'已冻结':data.status=='6'?'已终止':data.status=='9'?'已删除':''}}</span>
                                <span v-if="mine" style="color:red;margin-right: 10px;">{{getMinestatus(data)}}</span>
                              </template>
                            </template>
                          </template>
                          <template v-else>
                            <template>
                              <img class="img-status" v-if="data.status=='4'||data.status=='6'||data.status=='9'" :src="data.status=='4'? require('@/assets/images/treedj.png'):data.status=='6'?require('@/assets/images/treezz.png'):data.status=='9'?require('@/assets/images/treesc.png'):''" alt="">
                              <span style="margin-right: 10px;">{{data.status=='4'?'已冻结':data.status=='6'?'已终止':data.status=='9'?'已删除':''}}</span>
                              <span v-if="mine" style="color:red;margin-right: 10px;">{{getMinestatus(data)}}</span>
                            </template>
                          </template>
                      </span>
                    </span>
                </span>
              </el-tree>
            </el-scrollbar>
              <div
                class="tree-menu"
                ref="treeMenu"
                id="tree-menu"
                v-show="treeMenuVisiable">
                <div class="tree-menu-body"  v-if="isShowMenu">
                  <menuList :indexNum="1"  :key="tmid" :level="1" :menuTop="menuTop"  :nodes="menuNode" ></menuList>
                </div>
              </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CircularJSON from 'circular-json'
import waves from '@/directive/waves' // waves directive
import menuList from './menuList.vue'
import bus from '@/utils/bus'
import http from '@/api/http'
import { number_format } from '@/utils'
export default {
  directives: { waves },
  components: { menuList },
  props: {
    dataTree: Array,
    type:String,
    mine:Boolean,
    // treeId:String
    filterText: {
      type: String,
      default: ''
    },
    isGroup: {
      type: String,
      default: ''
    },
  },
  filters: {
    spanFilter(status) {
      const titleMap = {
        0: '',
        1: '新增',
        2: '修改',
        3: '冻结',
        4: '取消冻结',
        5: '终止',
        8: '连接抵(质)押品',
        9: '删除',
        10:'新增下级'
      }
      return titleMap[status]
    }
  },
  data() {
    return {
      checkStrictly: false,
      checkedKeysArr: [],
      query: {},
      nodeHeight: 0,
      nodeWidth: 0,
      tableData: [],
      treeMenuVisiable: false,
      filterTree: [], // 过滤后的tree数据
      //   dataTree: [],
      defaultShowKeys:[],
      defaultExpand:'',
      checkboxShow:false,
      defaultProps: {
        children: 'chirdren',
        label: 'nodeName'
      },
      listNode: [{
          name: '新增同级',
          type:'1',
          level:'1',
          iconUrl: require('@/assets/images/newtongji.png'),
          nodes:[]
        },
        {
          name: '新增子级',
          type:'2',
          level:'1',
          iconUrl: require('@/assets/images/xinzengziji.png'),
          nodes: [
            {
              name: '国家地区',
              type:'201',
              iconUrl: require('@/assets/images/guojiadiqu.png'),
              nodes: [ ]
            },
            {
              name: '币种',
              type:'202',
              iconUrl: require('@/assets/images/bizhong.png'),
              nodes: [
              ]
            },
            {
              name: '分公司',
              type:'205',
              iconUrl: require('@/assets/images/fengongsi.png'),
              nodes: []
            },
            {
              name: '子公司',
              type:'206',
              iconUrl: require('@/assets/images/zigongsi.png'),
              nodes: []
            },
            {
              name: '批复书',
              type:'203',
              iconUrl: require('@/assets/images/pifushu.png'),
              nodes: []
            },
            {
              name: '多公司共享',
              type:'204',
              iconUrl: require('@/assets/images/gongxiang.png'),
              nodes: []
            },

          ]
        },
        {
          name: '节点编辑',
          type:'3',
          iconUrl: require('@/assets/images/jiedianbianji.png'),
          nodes: []
        },
        {
          name: '节点查询',
          type:'4',
          iconUrl: require('@/assets/images/jiedianchax.png'),
          nodes: []
        },
        {
          name: '节点删除',
          type:'5',
          iconUrl: require('@/assets/images/jiedianshanc.png'),
          nodes: []
        },
        {
          name: '节点冻结',
          type:'6',
          iconUrl: require('@/assets/images/jiediandongj.png'),
          nodes: []
        },
        {
          name: '节点解冻',
          type:'7',
          iconUrl: require('@/assets/images/jiedong.png'),
          nodes: []
        },
        {
          name: '节点终止',
          type:'8',
          iconUrl: require('@/assets/images/jiedianzhongzhi.png'),
          nodes: []
        }
      ],
      handleData:{},
      operationType:this.type,
      clickCount:0,
      isShowMenu:false,
      menuNode:[],
      dataN:this.dataTree,
      menuTop:0,
      tmid: +new Date(),
      checkedKeysIds:[],
      treeTileList: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs['my-tree'].filter(val);
      this.getFilterData()
    },
    dataTree: {
      handler() {
        this.$nextTick(() => {
          this.filterTree = [...this.dataTree]
          this.treeLevelList = [];
          // console.log('1111111111111111111111');
          // console.log('this.dataTree', this.dataTree);
          this.treeTileList = this.recursionArr([...this.dataTree], [])
          // console.log('treeTileList', this.treeTileList);
        })
      },
      deep: true
    },
    treeMenuVisiable(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  created() {

    console.log('type-------------', this.type);
    // type 1新增、变更 2冻结 3解冻 4终止 5详情
    this.getFilterData()
    //  this.filterTree = [...this.dataTree]
//    console.log(this.operationType);
  },
  mounted() {
    // this.defaultShowKeys = [Number(this.treeId)]
    this.$nextTick(() => {
      // this.defaultExpand = Number(this.treeId)
      // this.$refs["my-tree"].setCurrentKey(Number(this.treeId));
      this.nodeWidth = this.$refs.flexTree.clientWidth
      this.nodeHeight = window.innerHeight -220;
      // console.log('window.innerWidth', window.innerWidth);
      // console.log('flexTree的width', this.$refs.flexTree.clientWidth);
      let node = JSON.parse(JSON.stringify(this.listNode));
      if(this.operationType==1){
          this.menuNode = node.slice(0,5)
      }else if(this.operationType==2){
          this.menuNode = node.slice(5,6)
          this.checkboxShow = true
      }else if(this.operationType==3){
          this.menuNode = node.slice(6,7)
          this.checkboxShow = true
      }else if(this.operationType==4){
          this.menuNode = node.slice(7,8)
          this.checkboxShow = true
      }

      console.log('this.menuNode', this.menuNode);
    })
    bus.$on('treeMethod', (e) => {
        this.treeMenu(e)
    })
  },
  methods: {
    filterNode(value, data) {
      // console.log('value', value);
      // console.log('data', data);
      if (!value) return true;
      return data.nodeName.indexOf(value) !== -1;
    },

    /**
     * @description: 获取过滤后的数据
     */
    getFilterData() {
      if (this.filterText) {
        const rootData = this.$refs['my-tree'].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]
        if (this.filterTree.length !== 0) {
          this.treeLevelList = [];
          // console.log('1111111111111111111111');
          // console.log('this.dataTree', this.dataTree);
          this.treeTileList = this.recursionArr([...this.dataTree], [])
          // console.log('treeTileList', this.treeTileList);
        }
      }
    },
    /**
     * @description: 递归遍历数据
     * @param {array} nodes
     * @param {array} temp
     */
    recursionArr(json, temp) {
      for (let z=0;z<json.length;z++) {
        let item = json[z]
        temp.push(item)
        // console.log('item', item.nodeName);
        if (item.chirdren && item.chirdren.length !== 0) {
          this.recursionArr(item.chirdren, temp)
        }
      }
      // console.log('temp-------------------', temp);
      return temp
    },
    /**
     * @description: 递归遍历数据
     * @param {array} nodes
     */
    recursionNodes(childNodes, filterText) {
      const nodes = childNodes
      const result = []
      for (const item of nodes) {
        if (item.visible) {
          if (item.data.nodeName === filterText || item.data.nodeName.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.chirdren = tempResult.map((v) => {
            if (v.nodeName === filterText || v.nodeName.includes(filterText)) {
              return Object.assign(v, { isSelect: true })
            } else {
              return Object.assign(v)
            }
          })
        }
      }
      return result
    },

    treeMenu(item){
      let data = {
        handleData:this.handleData,
        item:item
      }
      this.menu = false
      this.$emit('operationMenu',data);
    },
    imgPathUrl(data){
        let { property, propertyCode } = data;
      let imgPath = ''

      if (property === 1) {
          if(propertyCode==1){
              imgPath = require('@/assets/images/zigongsi.png')
          }else if(propertyCode==2){
              imgPath = require('@/assets/images/mugongsi.png');
          }else if(propertyCode==3){
              imgPath = require('@/assets/images/zigongsi.png');
          }else if(propertyCode==4){
             imgPath = require('@/assets/images/fengongsi.png');
          }

      }else if (property === 10){//多公司
        imgPath = require('@/assets/images/gongxiang.png');
      }else if (property === 11){//国家
        imgPath = require(`@/assets/images/${data.propertyCode}.png`);
      }else if (property === 12){//货币
        imgPath = require(`@/assets/images/${data.currencyCode||data.propertyCode}@2x.png`);
      }else if (property === 13){//批复书
        imgPath = require('@/assets/images/pifushu.png');
      }else if (property === 14){//金融产品
        imgPath = require('@/assets/images/pifushu.png');
      }
      return imgPath
    },

    closeMenu() {
        this.isShowMenu = false
        this.treeMenuVisiable = false
    },
    clickNode(node,data){
        this.menu = false
        this.$emit('fatherMethod',data);
    },
    handleNodeClick(item,node,check) {
        this.isShowMenu = false
        this.treeMenuVisiable = false
    },
    // 当某一节点被鼠标右键点击时会触发该事件
    nodeContextmenu(event, data, Node) {
       this.isShowMenu = false
       this.$refs["my-tree"].setCurrentKey(Number(data.id));
       if(this.operationType==2||this.operationType==3||this.operationType==4){
         return false
       }
      //  this.defaultExpand = data.id
      //  this.menuNode[0].hide = true
        if(this.operationType==3){
            if(data.status!=4){
                return ''
            }
        }else if(data.status!=1){
            return ''
        }
        // console.log(data.propertyCode);
        // event.onclick = function() {

        // }
        if(this.operationType==1){
            this.$set(this.menuNode[0],'nodes',[])
            //币种
            http.post(`/share/currency/queryList`,{cpage:1,pageSize:99,quotaDisplay:'1'}).then((res)=>{
                let currency = [],cy=[],type = 20200;
                for(let item of res.data.list){
                    currency.push({
                        name: item.chineseName,
                        code:item.currencyCode,
                        type:type+1,
                        pType:'202',
                        isChildren:true,
                        iconUrl: require(`@/assets/images/${item.currencyCode}@2x.png`)
                    })
                    cy.push({
                        name: item.chineseName,
                        code:item.currencyCode,
                        type:type+1,
                        pType:'202',
                        isChildren:false,
                        iconUrl: require(`@/assets/images/${item.currencyCode}@2x.png`)
                    })
                }
                this.menuNode[1].nodes[1].nodes = currency
                if(data.property==12){
                 this.$set(this.menuNode[0],'nodes',cy)
                //  this.menuNode[0].nodes = currency
                }

                this.$forceUpdate()
            }).catch(err=>{});
            //国家
            http.post(`/share/CountryCode/queryList`,{cpage:1,pageSize:99,quotaDisplay:'1',status:'1'}).then((res)=>{
              // console.log(res);
                let country = [],ct=[],type = 20100;
                // console.log(res.data);
                for(let item of res.data.list){
                    // console.log(require(`@/assets/images/${item.countryCode}.png`));
                    country.push({
                        name: item.chineseDescription,
                        type:type+1,
                        code:item.countryCode,
                        pType:'201',
                        isChildren:true,
                        iconUrl: require(`@/assets/images/${item.countryCode}.png`)
                    })
                    ct.push({
                        name: item.chineseDescription,
                        type:type+1,
                        code:item.countryCode,
                        pType:'201',
                        isChildren:false,
                        iconUrl: require(`@/assets/images/${item.countryCode}.png`)
                    })
                }

                this.menuNode[1].nodes[0].nodes = country
                if(data.property==11){
                  this.$set(this.menuNode[0],'nodes',ct)
                }
                this.$forceUpdate()
            }).catch(err=>{});
            if(this.isGroup==1){
              //分公司
              http.post(`/cust/findByRootId`,{id:data.rootEnterpriseId,custType:4}).then((res)=>{
                  let nodeList = [],ns=[],type = 20500;
                  // let item = res.data[0]
                  // for(let i of 10){
                  for(let item of res.data){
                      nodeList.push({
                          name: item.custName,
                          type:type+1,
                          code:item.custCode,
                          pType:'205',
                          isChildren:true
                      })
                      ns.push({
                          name: item.custName,
                          type:type+1,
                          code:item.custCode,
                          pType:'205',
                          isChildren:false
                      })
                  }
                  this.menuNode[1].nodes[2].nodes = nodeList
                  if(data.property==1&&data.propertyCode==4){
                    this.$set(this.menuNode[0],'nodes',ns)
                  }
                  this.$forceUpdate()
              }).catch(err=>{});
              //子公司
              http.post(`/cust/findByRootId`,{id:data.rootEnterpriseId,custType:3}).then((res)=>{
                  let nodeList = [],nodeLt = [],type = 20600;
                  // let item = res.data[0]
                  // for(let i of 10){
                  for(let item of res.data){
                      nodeList.push({
                          name: item.custName,
                          type:type+1,
                          code:item.custCode,
                          pType:'206',
                          isChildren:true
                      })
                      nodeLt.push({
                        name: item.custName,
                        type:type+1,
                        code:item.custCode,
                        pType:'206',
                        isChildren:false
                      })
                  }
                  this.menuNode[1].nodes[3].nodes = nodeList
                  if(data.property==1&&data.propertyCode==3){
                    this.$set(this.menuNode[0],'nodes',nodeLt)
                    // this.menuNode[0].nodes = country
                  }
                  this.$forceUpdate()
              }).catch(err=>{});
            }
            if(this.isGroup==1){
              this.menuNode[1].nodes[2].hide = false
              this.menuNode[1].nodes[3].hide = false
              this.menuNode[1].nodes[5].hide = false
            }else{
              this.menuNode[1].nodes[2].hide = true
              this.menuNode[1].nodes[3].hide = true
              this.menuNode[1].nodes[5].hide = true
            }

            if(data.property==13){//1:公司机构，10多公司共享，11国家(country_code国家编码)，12币种，13批复书，14金融产品
              this.menuNode[1].hide = true
            }else{
              this.menuNode[1].hide = false
            }
            // if(data.property==11||data.property==12){
            //   this.menuNode[1].nodes[4].hide = true
            // }else{
            //   this.menuNode[1].nodes[4].hide = false
            // }
            if(data.pid==0){
              this.menuNode[0].hide = true
            }else if(data.property==13||data.property==12||data.property==11||data.property==10||data.property==1&&data.propertyCode==3||data.property==1&&data.propertyCode==4){
              this.menuNode[0].hide = false
            }else{
              this.menuNode[0].hide = true
            }
            // if(data.property==1){

            // }else{

            // }
            // if(data.id==this.dataTree[0].id){
            //   this.menuNode[0].hide = true
            // }else{
            //   this.menuNode[0].hide = false
            // }
            this.tmid = +new Date()
        }
        this.isShowMenu = true

        // console.log(this.menuNode);
    //   console.log(event, data, Node);
      let { clientX, clientY } = event
      let clientHeight = document.documentElement.clientHeight;
      let count = 0
      for(let item of this.menuNode){
        if(item.hide){
          count=+1
        }
      }
      let top = clientHeight - clientY- 160
      if(count>0&&top<0){
        top = top+(count*30)
      }
      let eventTop;
      if(top>0){
        eventTop = event.clientY-190
        this.menuTop = 0
      }else{
        eventTop = event.clientY-190+top
        this.menuTop = top
      }

      let treeMenu = document.getElementById('tree-menu');
      treeMenu.style.cssText = `left: ${event.clientX-202}px; top: ${eventTop}px`;
      this.treeMenuVisiable = true
      this.handleData = data
      // this.$refs.treeMenu.clientLeft = event.clientX
    },
    content(data){
      let status = data.status=='4'?'-已冻结':data.status=='6'?'-已终止':data.status=='9'?'-已删除':''
      let ss = data.operateStatus==1?'新增':data.operateStatus==2?'修改':data.operateStatus==3?'冻结':data.operateStatus==4?'取消冻结':data.operateStatus==5?'终止':data.operateStatus==9?'':'删除'
      let opst = this.mine&&data.operateStatus>0&&data.operateStatus!=2||this.mine&&data.operateStatus==2&&data.startDateOriginal?'('+ss+')':''
      let str =  data.nodeName+'（'+data.currencyCode +' '+ number_format(data.overalLimit)+'）'+status+opst
      return str
    },
    currentChange(data) {
      // console.log(data);
    },
    nodeCheck(checkedNodes,checkedKeys){
      // console.log(checkedNodes.id, checkedKeys.checkedKeys);
      // type 1新增、变更 2冻结 3解冻 4终止 5详情
      let nodeIsSel = checkedKeys.checkedKeys.includes(checkedNodes.id)

      // console.log(checkedKeys.checkedKeys);
      // console.log('nodeIsSel', nodeIsSel);
      // console.log(nodeIsSel);
      this.checkedKeysIds = checkedKeys.checkedKeys
      // log暂时保留
      // 此部分只更改了解除状态的逻辑，之前的代码不变 解除 冻结状态下 子节点选中nodeIsSel为true时，父节点所有的已冻结状态全部自动选中
      if (this.type == 3) {
        if (nodeIsSel) {
          const idArr = this.findCheckNodeId([...this.treeTileList], checkedNodes, [])
          // console.log('idArr', idArr);
          this.$nextTick(() => {
            this.$refs['my-tree'].setCheckedKeys([...new Set(idArr.concat(checkedNodes.id).concat(checkedKeys.checkedKeys))])
          })
          this.$emit('checkedNodes',[...new Set(idArr.concat(checkedNodes.id).concat(checkedKeys.checkedKeys))].join(','));
        } else {
          let tar = [...this.treeTileList].find(ele => ele.id === checkedNodes.id)
          // console.log('tar.chirdren', tar.chirdren);
          let idArr = []
          if (tar.chirdren && tar.chirdren.length !== 0) {
            idArr = this.findLeafNodeId(tar.chirdren, [])
          }
          // console.log('idArr', idArr);
          for (let i=0;i<idArr.length;i++) {
            if (this.checkedKeysIds.includes(idArr[i])) {
              this.checkedKeysIds.splice(this.checkedKeysIds.findIndex(ele => ele === idArr[i]), 1)
            }
          }
          // console.log('this.checkedKeysIds', this.checkedKeysIds);
          this.$nextTick(() => {
            this.$refs['my-tree'].setCheckedKeys([...this.checkedKeysIds])
          })
          this.$emit('checkedNodes',this.checkedKeysIds.join(','));
        }
      } else {
        this.clickTreeDeal(checkedNodes)
      }
    },

    findLeafNodeId(json, temp) {
      for (let i=0;i<json.length;i++) {
        let item = json[i]
        temp.push(item.id)
        if (item.chirdren && item.chirdren.length !== 0) {
          this.findLeafNodeId(item.chirdren, temp)
        }
      }
      return temp
    },

    findCheckNodeId(json, checkedNodes, temp) {
      let tar = json.find(ele => ele.id === checkedNodes.pid)
      if (tar) {
        if (tar.status === 4) {
          temp.push(tar.id)
        }
        this.findCheckNodeId(json, tar, temp)
      }
      return temp
    },
    clickTreeDeal(curObj) {
      // if(this.operationType==2||this.operationType==4){
        // 当前节点选中，父节点
        const parentNode = this.$refs['my-tree'].getNode(curObj).parent
        if (parentNode.key !== undefined) {
          this.$refs['my-tree'].setChecked(parentNode, false)
          let index = this.checkedKeysIds.indexOf(parentNode.data.id)
          if(index>-1){
            this.checkedKeysIds.splice(index,1)
          }
        }
        // 当前节点取消选中，所有子节点取消选中
        if (curObj.children !== undefined) {
          curObj.children.forEach((item, i) => {
            this.$refs['my-tree'].setChecked(item, false, true)
          })
        }
        this.$emit('checkedNodes',this.checkedKeysIds.join(','));
      // }else{

      // }
    },
    getLength(data){
      return Number(data.nodeName.length) + Number((data.overalLimit+'').length)
    },
    getMinestatus(data){
      let s = ''
      // console.log(data.operateStatus);
      if(data.operateStatus==2&&data.startDateOriginal){
        s='（修改）'
      }else if(data.operateStatus==2){
        s='（新增）'
      }else{
        switch (data.operateStatus) {
          case 1: s='（新增）'; break;
          case 3: s='（冻结）'; break;
          case 4: s='（取消冻结）'; break;
          case 5: s='（终止）'; break;
          case 8: s='（连接抵(质)押品）'; break;
          case 9: s='（删除）'; break;
          default: s=''
            break;
        }
      }
      // console.log(s);
      return s
    }
  }
}
</script>
<style lang="scss" scoped>
.flex-tree {
  /* position: relative; */
//   padding: 8px;
  background-color: #fff;
}
.my-tree ::v-deep .el-tree-node__content {
  height: 32px!important;
}
.my-tree::-webkit-scrollbar {
  width: 0 !important;
}

.tree-menu {
  position: absolute;
  top: 10px;
  width: 116px;
  background: #FFFFFF;
  box-shadow: 0px 3px 11px 0px rgba(0, 0, 0, 0.3);
  // transition: all .3s;
  .tree-menu-body {
    position: relative;
    .tree-menu-item {
      height: 28px;
      font-size: 12px;
      color: #212121;
      display: flex;
      align-items: center;
      padding: 0 10px;
      cursor: pointer;
      &:hover {
        background: #E5F3FF;
      }
    }
    // &:after{
      // content: " ";
      // border-width: 6px;
      // position: absolute;
      // display: block;
      // width: 0;
      // height: 0;
      // border-color: transparent;
      // border-style: solid;
      //   z-index: 9;
      //   margin-top: 7px;
      //   margin-left: -2px;
      // border-right-color: #fff;
      // border-left-width: 0;
    // }
  }

}
.flex-tree {
  .el-scrollbar {
    ::v-deep .el-scrollbar__wrap {
      overflow-x: auto!important;
      height: calc(100% + 20px);
      padding-bottom: 20px;
      .el-scrollbar__view {
        white-space: nowrap;
        // display: inline-block;
      }
    }
  }
}

// tree 提示线
.my-tree {
  ::v-deep .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }
  ::v-deep .el-tree-node__children {
    padding-left: 16px; // 缩进量
    overflow: inherit;
    background: #FFFFFF;
  }

  // 竖线
  ::v-deep .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: 0;
    top: -6px;
    border-width: 1px;
    border-left: 1px solid #707070;
  }
  // 当前层最后一个节点的竖线高度固定
  ::v-deep .el-tree-node:last-child::before {
    height: 21px; // 可以自己调节到合适数值
  }

  // 横线
  ::v-deep .el-tree-node::after {
    content: "";
    width: 24px;
    // height: 20px;
    position: absolute;
    left: 0;
    top: 15px;
    border-width: 1px;
    border-top: 1px dashed #707070;
  }

  // // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  ::v-deep & > .el-tree-node::after {
    border-top: none !important;
  }
  ::v-deep & > .el-tree-node::before {
    border-left: none !important;
  }
  ::v-deep .expanded:before {
    content: "\e722";
  }
  ::v-deep .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  ::v-deep .el-tree-node__expand-icon:hover {
    color: #2058c9;
  }
  ::v-deep .el-icon-caret-right::before {
    content: "\e723";
  }

//   ::v-deep .el-tree-node__expand-icon::before {
    // box-shadow: 0px 1px 4px 0px #536183;
    // border-radius: 50%;
    // background: #FFFFFF;
    // margin-left: 2px;
//   }


  ::v-deep .el-tree-node >.el-tree-node__content>.custom-tree-node {
    .filter-select {
      padding: 4px 10px 4px 4px;
      background: #3D5596;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
      border-radius: 2px;
      transition: all .3s;
      .node-sp {
        color: #FFFFFF;
        font-family: 'SourceHanSansCN';
      }
    }
  }

  ::v-deep .el-tree-node.is-current >.el-tree-node__content>.custom-tree-node {
    background: #fff;
    .node-cnt {
      padding: 4px 10px 4px 4px;
      background: #3D5596;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
      border-radius: 2px;
      transition: all .3s;
      .node-sp {
        color: #FFFFFF;
        .text-changing {
          color: #FFFFFF;
          font-family: 'SourceHanSansCN';
        }
      }
    }
    .node-cnt4 {
      padding: 4px 10px 4px 4px;
      background: #fff;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
      border: 1px solid #D58912;
      border-radius: 2px;
      transition: all .3s;
      .node-sp {
        color: #FFFFFF;
        font-family: 'SourceHanSansCN';
      }
    }
    .node-cnt6 {
      padding: 4px 10px 4px 4px;
      background: #fff;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
       border: 1px solid #E85A5A;
      border-radius: 2px;
      transition: all .3s;
      .node-sp {
        font-family: 'SourceHanSansCN';
        color: #FFFFFF;
      }
    }
    .node-cnt9 {
      padding: 4px 10px 4px 4px;
      background: #fff;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
      border: 1px solid #8E8E8E;
      border-radius: 2px;
      transition: all .3s;
      .node-sp {
        font-family: 'SourceHanSansCN';
        color: #FFFFFF;
      }
    }
  }
  ::v-deep .node-cnt2 {
    // padding: 4px;
    display: flex;
    align-items: center;
    .node-img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
    .node-sp {
      color: #212121;
      font-size: 13px;
      font-family: 'SourceHanSansCN';
    }
  }

//   // 展开关闭的icon
//   ::v-deep .el-tree-node__expand-icon {
//     font-size: 18px;
//     color: #212121;
//     // 叶子节点（无子节点）
//     &.is-leaf{
//       color: transparent;
//       // display: none; // 也可以去掉
//     }
//     &.is-leaf:before{
//       font-size: 0;
//       content: "\e722";
//       // display: none; // 也可以去掉
//     }
//   }
}
.span_desc{
    display: inline-block;
    // overflow: hidden;
    // white-space: nowrap;
    // text-overflow:ellipsis;
}

</style>
<style scoped>
/* 未展开 */
.el-tree /deep/ .el-icon-caret-right:before
{
    background: url("../../../assets/images/zijiadd.png") no-repeat 0 0px;
    content: '' !important;
    display: block;
    width: 16px;
    height: 16px;
    /* font-size: 16px; */
    background-size: 16px;
}
/* 展开 */
.el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
{
    background: url("../../../assets/images/zijicut.png") no-repeat 0 0px;
    content: '' !important;
    display: block;
    width: 16px;
    height: 16px;
    /* font-size: 16px; */
    background-size: 16px;
}
.el-tree /deep/.el-tree-node__expand-icon.is-leaf::before
{
    background: none !important;
    content: '' !important;
    display: block;
    width: 0px;
    height: 0px;
    font-size: 0px;
    background-size: 0px;
}
.el-tree /deep/ .el-tree-node__content:hover {
  background-color: #fff;
}
.el-tree /deep/ .el-tree-node__content{
  padding-left: 4px !important;
}
.el-tree /deep/  .el-tree-node.is-current > .el-tree-node__content {
  background-color: #fff;
}

.el-tree /deep/ .el-tree-node:focus>.el-tree-node__content,
.el-tree /deep/ .el-tree-node.is-expanded > .el-tree-node__content,
.el-tree /deep/ .el-tree-node.is-focusable > .el-tree-node__content {
  background-color: rgba(0,0,0,0);
}
.el-tree /deep/ .el-tree-node__content > .el-tree-node__expand-icon {
  padding: 4px !important;
}

/* 2022-02-21 scss */
.img-status {
  width: 12px;
  height: 12px;
  margin-left: 20px;
  margin-right: 6px;
}
.text-changing {
  margin-left: 10px;
  color: #0d88e9;
}
</style>

