<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-24 15:45:01
-->
<template>
  <div class="page">
    <topBar v-if="topList.length > 0"
            :topList="topList"
            :moren="moren"></topBar>
    <div class="main">
      <div class="maintable">
        <div v-for="item,index in tabList" :class="checkEd==index?'act':'tabs'" :key="item.pkId" @click="getData(item.pkId,index)">{{ item.memberName }}</div>
      </div>
      <div  class="myImage">
        <vue2-org-tree 
        id="myImage"
 :data="treeData" 
 collapsable
 :render-content="renderContent"
 @on-expand="onExpand"
 @on-node-click="NodeClick"/>

      </div>
      <div class="footer">

<el-button size="small"
           @click="toCreated"
           class="thebtn1">下载图片</el-button>
</div>
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import * as api from '@/api/specialBusiness.js'
import html2canvas from "html2canvas";

export default {
  name: 'Bzpz',
  components: {
    topBar,
  },
  data() {
    return {
      moren: 'positionBuild',
      topList: [
        {
          name: '安置架构',
          path: 'positionBuild',
        },
      ],
      pkId:'',
      tabList:[],
      treeData:{},
      checkEd:0
    }
  },
  created(){
    
  },
  mounted() {
    this.pkId = this.$route.query.pkId
    // 获取列表
    this.getDataList()
  },
  methods: {
    toCreated(){
      const options = {
                backgroundColor: null,
                scale: window.devicePixelRatio,
                dpi: 300
            }
            html2canvas(document.querySelector('#myImage'), options).then(
                (canvas) => {
                    let url = canvas.toDataURL('image/png')
                    let a = document.createElement('a')
                    a.href = url
                    a.setAttribute('download', '安置架构')
                    a.click()
                }
            )
    },
    getDataList() {
      api
        .framework({
          pkId:this.pkId,
          type:1
        })
        .then((res) => {
          // this.tableData = res.rows
          // this.total = res.total
          this.tabList = res.data
          this.getData(this.tabList[0].pkId,0)
        })
    },
    getData(id,index) {
      this.checkEd = index
      api
        .framework_data({
          detailId:id,
          type:1
        })
        .then((res) => {
          let arr = []
         this.calleArr(res.data)
          this.treeData = res.data[0]
          this.toggleExpand(this.treeData,true);
          // this.total = res.total
          // this.tabList = res.data

        })
    },
    calleArr(array){
            for(let i in array){
              var data=array[i];
                if(data.children){
                   if(data.children.length<2){
                    data.children.push({
                      name:''
                    })
                    this.calleArr(data.children)
                   }else{
                    this.calleArr(data.children)
                   }
                }
            }
        },
    collapse(list) {
        list.forEach((child)=> {
          if (child.expand) {
            child.expand = false;
          }
          child.children && this.collapse(child.children);
      });
    },
    onExpand(e,data) {
      console.log(data,'data')
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    NodeClick(e,data){
      console.log(e)
        // e 为 event
      console.log(data)
        // 当前项的所有详情 如：id label children
    },
    renderContent(h, data) {
      return (
        <div class="treeItem">{data.name}</div>
      )
    },
    toggleExpand(data, val) {
        if (Array.isArray(data)) {
            data.forEach((item)=> {
              this.$set(item, "expand", val);
              if (item.children) {
                this.toggleExpand(item.children, val);
              }
            });
        } else {
            this.$set(data, "expand", val);
            if (data.children) {
              this.toggleExpand(data.children, val);
            }
        }
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
::v-deep .el-select {
  width: 100%;
}
.uploadIcon ::v-deep .el-upload--picture-card {
  display: none !important; /* 上传按钮隐藏 */
}
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    .form_all {
      padding: 0px 20px 0 20px;
      // margin-bottom: 20px;
      background: #fff;
      border-radius: 8px;
    }
    .maintop {
      display: flex;
      padding: 0px 0px;
      justify-content: space-between;
      align-items: center;

      background: #f8f8f8;
      .mainbtn {
        .thebtn1 {
          background: #3181e5;
          color: #ffffff;
        }
        .thebtn2 {
          background: #ffad41;
          color: #ffffff;
        }
      }
      .maintitle {
        font-size: 10px;
        font-family: MicrosoftYaHei;
        color: #999999;
      }
    }
  }
  .tem {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 28px;
      height: 20px;
      margin-right: 3px;
    }
  }
  .isRed {
    color: #ed1d25;
  }
  .isGreen {
    color: #1ab62b;
  }
  .bgImg {
    width: 48px;
    height: 48px;
  }
}
.openClose {
  text-align: right;
  margin-right: 10px;
  color: #3181e5;
}
.dizhi {
  ::v-deep .el-cascader {
    width: 100%;
  }
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.maintable{
  display: flex;
  align-items: center;
}
.act{
  width: 68px;
height: 32px;
background: #C8161D;
border-radius: 4px 4px 4px 4px;
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
line-height: 32px;
color: #FFFFFF;
text-align: center;
margin-right: 20px;
margin-bottom: 20px;
cursor: pointer;
}
.tabs{
  width: 68px;
height: 32px;
background: #FFFFFF;
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.1);
border-radius: 4px 4px 4px 4px;
font-size: 14px;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
line-height: 32px;
color: #666;
text-align: center;
margin-right: 20px;
margin-bottom: 20px;
cursor: pointer;
}
::v-deep .treeItem{
  min-width: 50px;
  min-height: 20px;
  line-height: 20px;
}
.footer {
  height: 68px;
  // background: #ffffff;
  // box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 3%;
  left: 0;
  right: 0;
  margin: 0 auto;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
.myImage{
  text-align: center;
}
::v-deep .org-tree-node-btn {
  display: none;
}

</style>
