<template>
  <div>
    <navbar title="查关系"></navbar>
    <div class="wrapper" v-if="loading">
      <van-popup v-model:show="showFilter" closeable position="bottom" :style="{ height: '50%' }">
        <div class="pop-title">筛选</div>
        <div>
          <ul class="select-item-box">
            <li v-for=" (filterItem, filterIndex) in filterList " @click="filterSelect(filterIndex)"
                :class="[filterItem.isSelect ? 'select-item-active' : '']" :key="filterItem.name" class="select-item">{{
                filterItem.name }}
            </li>
          </ul>
        </div>
        <van-row class="more-screen-bottom-botton" gutter="16">
          <van-col span="12"><van-button type="primary" size="small" plain block
                                         @click="moreScreenCancel()">取消</van-button></van-col>
          <van-col span="12"><van-button type="primary" size="small" block
                                         @click="moreScreenOk()">确定</van-button></van-col>
        </van-row>
      </van-popup>
      <div ref="jsmindContainer" id="jsmind_container"></div>
      <div class="flot-box">
        <van-collapse v-model="activeNames" class="collapse-up">
          <van-collapse-item name="1">
            <!--            <div @click="saveImage" class="flot-title-box">-->
            <!--              <div><van-icon name="down" /></div>-->
            <!--              <div class="flot-title-font">保存</div>-->
            <!--            </div>-->

            <div @click="showFilter = true" class="flot-title-box">
              <div><van-icon name="filter-o" /></div>
              <div class="flot-title-font">筛选</div>
            </div>

            <!--            <div @click="refresh()" class="flot-title-box">-->
            <!--              <div><van-icon name="replay" /></div>-->
            <!--              <div class="flot-title-font">刷新</div>-->
            <!--            </div>-->
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
    <van-loading v-else />
  </div>
</template>

<script>
import { Collapse, CollapseItem, Icon, Popup, Button, Col, Row } from 'vant';//button组件
import html2canvas from "html2canvas";
import navbar from '../../../components/navbar/navbar.vue';
import domtoimage from 'dom-to-image';
import 'jsmind/style/jsmind.css'
import jsMind from 'jsmind/js-legacy/jsmind.js'
import { getRelationshipDetail } from "@/service/api/home";
window.jsMind = jsMind
require('jsmind/js-legacy/jsmind.draggable-node.js')
require('jsmind/js-legacy/jsmind.screenshot.js')


export default {
  components: {
    navbar: navbar,
    VanCollapse: Collapse,
    VanCollapseItem: CollapseItem,
    VanIcon: Icon,
    VanPopup: Popup,

    VanButton: Button,
    VanCol: Col,
    VanRow: Row,
  },
  data() {
    return {
      loading: true,
      getDetailsId: '',
      getDetailsIdNew: '',
      showFilter: false,
      activeNames: [],
      filterValue: [],

      filterList: [
        {
          name: '高管高联',
          isSelect: true,
        },
        {
          name: '法定代表人',
          isSelect: true,
        },
        {
          name: '股东',
          isSelect: true,
        },
      ],
      jm: '',
      mind: {
        /* 元数据，定义思维导图的名称、作者、版本等信息 */
        meta: {
          name: '思维导图',
          version: '0.2'
        },
        /* 数据格式声明 */
        format: 'node_tree',
        /* 数据内容 */
        data: {
          id: 'root',
          topic: 'jsMind',
          'background-color': '#1abc9c',
          'foreground-color': '#ffffff',
          children: [
            {
              id: 'easy', // [必选] ID, 所有节点的ID不应有重复，否则ID重复的结节将被忽略
              topic: 'Easy', // [必选] 节点上显示的内容
              direction: 'right', // [可选] 节点的方向，此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right
              expanded: true, // [可选] 该节点是否是展开状态，默认为 true
              'background-color': '#f0ad4e',
              'foreground-color': '#ffffff',
              children: [
                { id: 'easy1', topic: 'Easy to show', 'background-color': '#1abc9c', 'foreground-color': '#ffffff', },
                { id: 'easy2', topic: 'Easy to edit' },
                { id: 'easy3', topic: 'Easy to store' },
                {
                  id: 'easy4', topic: 'Easy to embed',
                  children: [
                    {
                      id: 'easy4-1', topic: 'Easy to embed',
                    }
                  ]

                }
              ]
            },
            {
              id: 'open',
              topic: 'Open Source',
              direction: 'right',
              expanded: true,
              'background-color': '#f0ad4e',
              'foreground-color': '#ffffff',
              children: [
                { id: 'open1', topic: 'on GitHub' },
                { id: 'open2', topic: 'BSD License' }
              ]
            },
            {
              id: 'powerful',
              topic: 'Powerful',
              direction: 'right',
              expanded: true,
              'background-color': '#f0ad4e',
              'foreground-color': '#ffffff',
              children: [
                { id: 'powerful1', topic: 'Base on Javascript' },
                { id: 'powerful2', topic: 'Base on HTML5' },
                { id: 'powerful3', topic: 'Depends on you' }
              ]
            },
            {
              id: 'other',
              topic: 'test node',
              direction: 'right',
              'background-color': '#f0ad4e',
              'foreground-color': '#ffffff',
              children: [
                { id: 'other1', topic: "I'm from local variable" },
                { id: 'other2', topic: 'I can do everything' }
              ]
            }
          ]
        }
      },
      options: {
        container: 'jsmind_container', // [必选] 容器的ID
        editable: true, // [可选] 是否启用编辑
        theme: '', // [可选] 主题
        view: {
          engine: 'canvas', // 思维导图各节点之间线条的绘制引擎
          hmargin: 120, // 思维导图距容器外框的最小水平距离
          vmargin: 50, // 思维导图距容器外框的最小垂直距离
          line_width: 2, // 思维导图线条的粗细
          line_color: '#ddd' // 思维导图线条的颜色
        },
        layout: {
          hspace: 100, // 节点之间的水平间距
          vspace: 20, // 节点之间的垂直间距
          pspace: 20 // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
        },
        shortcut: {
          enable: false // 是否启用快捷键 默认为true
        }
      }
    }
  },
  methods: {
    filterSelect(index) {
      this.filterList[index].isSelect = !this.filterList[index].isSelect;
    },

    // 筛选取消
    moreScreenCancel() {
      // for( let i=0;i<this.filterList.length;i++ ){
      //   this.filterList[i].isSelect = false;
      // }
      this.showFilter = false;
    },

    // 筛选确定
    async moreScreenOk() {
      // this.getRelationshipDetail();
      // this.showFilter = false;
      this.loading = false;


      let params = {
        companyId: this.getDetailsIdNew,
        managerFlag: this.filterList[0].isSelect ? '1' : '0',
        operNameFlag: this.filterList[1].isSelect ? '1' : '0',
        partnerFlag: this.filterList[2].isSelect ? '1' : '0',
      }
      let result = await getRelationshipDetail(params);
      if (result) {
        this.loading = true;
        result['background-color'] = '#1abc9c';
        result['foreground-color'] = '#ffffff';
        if( result.children.length > 2 ){
          result.children[2]['background-color'] = '#f0ad4e';
          result.children[2]['foreground-color'] = '#ffffff';
        }
        if( result.children.length > 1 ){
          result.children[1]['background-color'] = '#f0ad4e';
          result.children[1]['foreground-color'] = '#ffffff';
        }
        if( result.children.length > 0 ){
          result.children[0]['background-color'] = '#f0ad4e';
          result.children[0]['foreground-color'] = '#ffffff';
        }
        sessionStorage.setItem('relation-jsmind-data',JSON.stringify(result));
        sessionStorage.setItem('filterList',JSON.stringify(this.filterList));
        location.reload();
      }
    },

    // 刷新
    refresh() {
      this.getRelationshipDetail();
    },

    // 保存图片
    async saveImage() {
      this.jm.screenshot.shootDownload();
    },

    // 获取关系详情
    async getRelationshipDetail() {
      let params = {
        companyId: this.getDetailsId,
        managerFlag: this.filterList[0].isSelect ? '1' : '0',
        operNameFlag: this.filterList[1].isSelect ? '1' : '0',
        partnerFlag: this.filterList[2].isSelect ? '1' : '0',
      }
      let result = await getRelationshipDetail(params);
      result['background-color'] = '#1abc9c';
      result['foreground-color'] = '#ffffff';
      result.children[0]['background-color'] = '#f0ad4e';
      result.children[0]['foreground-color'] = '#ffffff';
      result.children[1]['background-color'] = '#f0ad4e';
      result.children[1]['foreground-color'] = '#ffffff';
      result.children[2]['background-color'] = '#f0ad4e';
      result.children[2]['foreground-color'] = '#ffffff';
      this.mind.data = result;
      this.jm = jsMind.show(this.options, this.mind);
    },

  },
  mounted() {
    // 初始化
    if (sessionStorage.getItem('getDetailsId')) {
      this.getDetailsId = sessionStorage.getItem('getDetailsId');
      sessionStorage.setItem('getDetailsIdNew',this.getDetailsId);
      this.getDetailsIdNew = sessionStorage.getItem('getDetailsIdNew');
      this.getRelationshipDetail();
      sessionStorage.removeItem('getDetailsId');
    }else{
      this.getDetailsIdNew = sessionStorage.getItem('getDetailsIdNew');
      this.filterList = JSON.parse(sessionStorage.getItem('filterList'));
      if( sessionStorage.getItem('relation-jsmind-data') ){
        this.mind.data = JSON.parse(sessionStorage.getItem('relation-jsmind-data'));
        this.jm = jsMind.show(this.options, this.mind);
      }
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  width: 100%;
  padding-top: 60px;
  height: 100vh;
}

#jsmind_container {
  width: 100%;
  height: 100vh;
  /* 或者其他合适的值 */
  overflow: auto;
  /* 允许内容滚动 */
}

.flot-box {
  // width: 68px;
  padding: 4px;
  background: #ffffff;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  border-radius: 2px;
}

.flot-title-box {
  text-align: center;
  margin-bottom: 8px;
}

.flot-title-font {
  color: #333333;
  font-size: 0.8rem;
}

.pop-title {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  border-bottom: solid 1px #f2f2f2;
  height: 46px;
  line-height: 46px;
}

.more-screen-bottom-botton {
  border-top: solid 1px #f2f2f2;
  height: 52px;
  width: 100%;
  padding: 10px 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
}

.select-item-box {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;
  width: 100%;
  padding: 1rem;
}

.select-item {
  padding: 2px 10px;
  background: #f2f2f2;
  font-size: 0.8rem;
  color: #333333;
  margin: 0 10px 10px 0;
  border-radius: 4px;
}

.select-item-active {
  color: #ffffff;
  background: #2372eb;
}

.van-collapse-item /deep/ .van-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.van-collapse-item /deep/ .van-cell__right-icon {
  margin-left: 0;
}
</style>
