<template>
  <div >
      <p class="title_pimg"> <img src="@/assets/images/gouxuan.png" alt=""> 请勾选需新增 {{type=='201'?'国家地区':'币种'}} 的层级</p>
    <el-row :gutter="10" style="padding-left:20px">
      <el-col :span="24">
        <div :style="{'height':'200px'}" class="flex-tree">
          <el-scrollbar style="height:100%">
            <el-tree
              class="my-tree"
              style="overflow-y: scroll;"
              :data="data"
              :indent="0"
              :props="defaultProps"
              default-expand-all
              :expand-on-click-node="false"
            >
                <span class="custom-tree-node"  slot-scope="{ node,data}">
                   <span class="custom-tree-node">
                    <span class="node-cnt">

                        <img class="node-img" :src="imgPathUrl(data)" />
                        <span class="node-sp"> <a style="margin-right: 30px;">{{data.nodeName}}</a><el-checkbox @change="treeCheckbox($event,data)" v-if="node.level==2" ></el-checkbox> </span>
                    </span>
                    </span>
                </span>
            </el-tree>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer" style="padding: 0 14px 20px 0;">
        <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" style="margin-right: 20px;" @click="sbumit">
            {{ $t('table.sbumit') }}
        </el-button>
        <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="cancelBut" >
            {{ $t('table.cancel') }}
        </el-button>
    </span>
  </div>
</template>

<script>
import waves from '@/directive/waves' // waves directive
// import bus from '@/utils/bus'
// import http from '@/api/http'
export default {
  name: '',
  directives: { waves },
  props: {
    data: Array,
    item:Object,
    type:String,
    dataSource:Object
  },
  data() {
    return {
        defaultProps: {
          children: 'chirdren',
          label: 'custName'
        },
        handleData:{},
        checkboxList:[],
        currentItem:this.item
    }
  },
  created() {

  },
  mounted() {
    // console.log(this.data);
  },
  methods: {
    sbumit(){
        // if(this.checkboxList.length>0){
            let obj = {
                nodeName:this.currentItem.name,
                chirdren:this.checkboxList,
                treePname:this.currentItem.isChildren?this.data[0].nodeName:this.data[0].treePname,
                pid:this.currentItem.isChildren?this.data[0].id:this.data[0].pid,
                property: this.type=='201'?11:12,
                propertyCode:this.currentItem.code,
                // liabilityCode:this.data[0].custCode,
                // custName:this.data[0].custName,
                custCode:this.data[0].custCode,
                custName:this.data[0].custName,
                utilizedAmount:'0',
                earmarkAmount:'0',
                frozenAmount:'0',
                propertyName:this.type=='201'?'国家':'币种',
                enterpriseId:this.currentItem.enterpriseId
            }
            if(this.type=='202'){
              obj.currencyCode = this.currentItem.code
            }
            this.checkboxList = []
            this.$emit('sbumitTree', obj, this.dataSource);
        // }else{
        //   this.$message.error('请选择节点层级')
        // }
    },
    treeCheckbox(a,b){
        // console.log(a,b);
        if(a){
            this.checkboxList.push(b)
        }else{
            for(let index in this.checkboxList){
                let item = this.checkboxList[index]
                if(item.id==b.id){
                    this.checkboxList.splice(index,1)
                    return false;
                }
            }
        }
    },
    cancelBut(){
        this.$emit('cancelBut');
    },
    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/CN.png');
        }else if (property === 11){//国家
            imgPath = require('@/assets/images/CN.png');
        }else if (property === 12){//货币
            imgPath = require('@/assets/images/CNY@2x.png');
        }else if (property === 13){//批复书
            imgPath = require('@/assets/images/pifushu.png');
        }else if (property === 14){//金融产品
            imgPath = require('@/assets/images/pifushu.png');
        }
        return imgPath
    }
  }
}
</script>
<style lang="scss" scoped>
.flex-tree {
  /* position: relative; */
//   padding: 8px;
  background-color: #fff;
}
.my-tree {
  overflow-y: scroll;
}
.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;
      top: 10px;
      left: -4px;
      border-right-color: #fff;
      border-left-width: 0;
    }
  }

}
.flex-tree {
  .el-scrollbar {
    ::v-deep.el-scrollbar__wrap {
      overflow-x: hidden!important;
    }
  }
}

// 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 solid #707070;
  }

  // // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  // ::v-deep & > .el-tree-node::after {
  //   // border-top: none;
  // }
  // ::v-deep & > .el-tree-node::before {
  //   // border-left: none;
  // }
  ::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.is-current >.el-tree-node__content>.custom-tree-node {
    background: #fff;
    // .node-cnt {
    //   padding: 4px 30px 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;
    //   }
    // }
  }
  ::v-deep .node-cnt {
    padding: 4px;
    display: flex;
    align-items: center;
    .node-img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
    .node-sp {
      color: #212121;
      font-size: 13px;
    }
  }

//   // 展开关闭的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; // 也可以去掉
//     }
//   }

}
.title_pimg{
    padding: 0;
    margin: 0;
    width: 100%;
    height: 24px;
    line-height: 24px;
    background: rgba(212,235,254 ,.3);
    padding-left: 10px;
    font-size: 12px;
    font-family: "SourceHanSansCN";
    font-weight: bold;
    color: #212121;
    display: flex;
    align-items: center;
    img{
        width: 12px;
        height: 14px;
        margin-right: 10px;
    }

}
</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: 24px;
    height: 24px;
    font-size: 16px;
    background-size: 24px;
}
/* 展开 */
.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: 24px;
    height: 24px;
    font-size: 16px;
    background-size: 24px;
}
.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;
}
</style>

