<template>
  <ifbp-page class="ifbp-statements">
    <!-- breadcrumb -->
    <ifbp-breadcrumb></ifbp-breadcrumb>
    <!-- content -->
    <div class="statements-main-container">
      <div class="tree-container" v-if="showTree">
        <el-tree
          class="statements-tree"
          :data="treeData"
          :props="treeProps"
          default-expand-all
          highlight-current
          @node-click="treeNodeClicked"
          ref="funTree">
        </el-tree>
      </div>
      <iframe
        v-if="iframeUrl"
        class="statements-iframe"
        ref="iframe"
        style="height: auto;"
        :src="iframeUrl"
      ></iframe>
      <div
        v-else
        class="statements-noresult"
      >
        请选择左侧树节点
      </div>
    </div>
  </ifbp-page>
</template>
<script>
export default {
  data() {
    return {
      iframeUrl: null,
      tilecode: null,
      breadcrumbName: null,
      treeData: null,
      treeProps: {
        id: 'id',
        pid: 'pid',
        label: 'label',
        children: 'children'
      },
      showTree: true
    };
  },
  created() {
    this.getTreeData();
    // this.getPublicKey();
  },
  methods: {
    // 获取树数据
    getTreeData() {
      const tilecode = this.$context.getCurrentTileCode();
      if (tilecode) {
        const tileInfo = this.$context.getTileByCode(tilecode);
        if (tileInfo) {
          this.breadcrumbName = tileInfo.label;
        }
      }
      if (!tilecode) {
        this.$message({
          message: "未获取到tilecode",
          type: "error"
        });
        return;
      }
      // ajax 获取树数据
      // const requestUrl = '';
      // const requestData = {
      //   xxx: tilecode
      // };
      // this.$http({
      //   url: requestUrl,
      //   method: 'post',
      //   data: requestData,
      //   dataType: 'json'
      // })
      // .then(res => {
      //   resData = res.data;
      //   if (resData.success) {
      //     this.treeData = this.formatTreeData(resData.data);
      //   } else if (resData.error && resData.error.errorMessage) {
      //     this.$message({
      //       message: '信息获取失败: ' + resData.error.errorMessage,
      //       type: 'error'
      //     });
      //   }
      // })
      // .catch(() => {
      //   this.$message({
      //     message: '信息获取失败',
      //     type: 'error'
      //   });
      // });
      const mockResData = {"status":true,"success":true,"data":{"report_class":[{"pk_report_class":"parent1","group_order":2,"ts":1458633772000,"status":null,"name":"基础数据1","code":"2","dr":0},{"pk_report_class":"parent2","group_order":2,"ts":1458633772000,"status":null,"name":"基础数据2","code":"2","dr":0}],"report":[{"pk_report":"son1","pk_report_class":"parent1","report_name":"交易类型1","report_code":"transtype","url":"http://127.0.0.1//uapbd/transtype?funcode=transtype","dr":0},{"pk_report":"son2","pk_report_class":"parent1","report_name":"交易类型2","report_code":"transtype","url":"http://127.0.0.1//uapbd/transtype?funcode=transtype","dr":0},{"pk_report":"son3","pk_report_class":"parent2","report_name":"交易类型3","report_code":"transtype","url":"http://127.0.0.1//uapbd/transtype?funcode=transtype","dr":0},{"pk_report":"son4","pk_report_class":"parent2","report_name":"交易类型4","report_code":"transtype","url":"http://127.0.0.1//uapbd/transtype?funcode=transtype","dr":0}]}};
      this.treeData = this.formatTreeData(mockResData.data);
    },
    // 获取公钥
    getPublicKey() {},
    // 树节点变化
    treeNodeClicked(data, node, vueNode) {
      if (node && node.isLeaf) {
        const nodePk = data.data.pk_report;
        console.log('currentNodePk: ', nodePk);
        // ajax 获取 iframeUrl
        // const requestUrl = '';
        // const requestData = {
        //   xxx: nodePk
        // };
        // this.$http({
        //   url: requestUrl,
        //   method: 'post',
        //   data: requestData,
        //   dataType: 'json'
        // })
        // .then(res => {
        //   resData = res.data;
        //   if (resData.success) {
        //     this.iframeUrl = resData.data.xxx;
        //   } else if (resData.error && resData.error.errorMessage) {
        //     this.$message({
        //       message: '信息获取失败: ' + resData.error.errorMessage,
        //       type: 'error'
        //     });
        //   }
        // })
        // .catch(() => {
        //   this.$message({
        //     message: '信息获取失败',
        //     type: 'error'
        //   });
        // });
      }
    },
    // 格式化树数据
    formatTreeData(data) {
      if (!data || !Array.isArray(data.report_class) || !data.report_class.length || !Array.isArray(data.report) || !data.report.length) {
        this.$message({
          message: '数据错误',
          type: 'error'
        });
        return;
      }
      const copyData = JSON.parse(JSON.stringify(data));
      let formatedData = [];
      copyData.report_class.forEach(item => {
        item.id = item.pk_report_class;
        item.pid = '';
        item.label = item.name;
        formatedData.push(item);
      });
      copyData.report.forEach(item => {
        item.id = item.pk_report;
        item.pid = item.pk_report_class;
        item.label = item.report_name;
        formatedData.push(item);
      });
      return formatedData;
    }
  }
}
</script>
<style scoped>
  .ifbp-statements {
    min-height: 90%;
  }
  .statements-main-container {
    display: flex;
    flex: 1;
  }
  .tree-container {
    width: 250px;
    margin-right: 16px;
    background: #ffffff;
  }
  .statements-iframe {
    flex: 1;
    background: #ffffff;
    min-height: 100%;
  }
  .statements-noresult {
    flex: 1;
    background: #ffffff;
    text-align: center;
    padding-top: 16px;
    font-size: 14px;
  }
</style>
<style>
  .statements-tree .el-tree {
    border: none;
  }
  .ifbp-statements > div {
    display: flex;
    flex-direction: column;
    min-height: 90%;
  }
</style>
