<!--
 * @Description:
 * @Autor:
 * @LastEditTime: 2023-12-24 17:18:02
-->
<template>
  <div class="clxx">
    <div class="left">
      <div class="slxx_title title-block">
        附件扫描信息
        <div class="triangle"></div>
      </div>
      <div class="preview-content">
        <img id="tifImage" alt="TIF Image"/>
      </div>

    </div>
    <div class="right">
      <div class="slxx_title title-block">
        收件材料
        <div class="triangle"></div>
      </div>
      <div class="tree-content">
        <el-tree
          :data="tableData"
          :props="defaultProps"
          accordion
          @node-click="handleNodeClick">
        </el-tree>
      </div>
    </div>
  </div>
</template>
<script>
  import 'tiff.js';
  import store from '@/store/index.js'
  import { getTreeNodeList, getFjnrById } from "@/api/ycsl.js";
  export default {
    components: { },
    props: {
      formData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data () {
      return {
        imgKey: 0,
        isDialog: false,
        iclass: "",
        // 材料目录选中
        treeCheckIndex: 0,
        treeCheckId: "",
        key: 0,
        tableData: [],
        defaultProps: {
          children: 'nodeList',
          label: 'text'
        },
        previewImg: {
          bsmMaterial: "",
          index: 0,
          selectedIndex: 0,
          imgList: []
        }
      }
    },
    computed: {
      workFresh () {
        return store.state.user.workFresh
      }
    },
    watch: {},
    created () {

    },
    mounted () {
      console.log(this.formData)
      this.getTreeNodeList(this.formData.ywh)
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
        this.getFjnrById(data.id)
      },
      /**
       * @description: 获取详情信息
       * @author:
       * @param ywh
       */
      getTreeNodeList (ywh) {
        getTreeNodeList(ywh).then(res => {
          if (res.code == 200) {
            this.tableData = res.result;
            // this.tableData = [
            //   {
            //     "id": "4501904998761472",
            //     "text": "不动产登记申请书",
            //     "leaf": false,
            //     "nodeList": [
            //       {
            //         "id": "4501904999629824",
            //         "text": "001.tif",
            //         "leaf": true,
            //         "nodeList": []
            //       },
            //       {
            //         "id": "4501905001399296",
            //         "text": "002.tif",
            //         "leaf": true,
            //         "nodeList": []
            //       },
            //       {
            //         "id": "4501905004954624",
            //         "text": "003.tif",
            //         "leaf": true,
            //         "nodeList": []
            //       },
            //       {
            //         "id": "4501905007002624",
            //         "text": "004.tif",
            //         "leaf": true,
            //         "nodeList": []
            //       }
            //     ]
            //   },
            //   {
            //     "id": "4501905008690176",
            //     "text": "商品房预售合同",
            //     "leaf": false,
            //     "nodeList": [
            //       {
            //         "id": "4501905009443840",
            //         "text": "005.tif",
            //         "leaf": true,
            //         "nodeList": []
            //       },
            //       {
            //         "id": "4501905011491840",
            //         "text": "006.tif",
            //         "leaf": true,
            //         "nodeList": []
            //       },
            //       {
            //         "id": "4501905015194624",
            //         "text": "007.tif",
            //         "leaf": true,
            //         "nodeList": []
            //       }
            //     ]
            //   }
            // ];
            console.log(this.tableData)
          }
        })
      },

      /**
       * @description: 获取详情信息
       * @author:
       * @param datumId
       */
      getFjnrById (datumId) {
        getFjnrById(datumId).then(res => {
          if (res.code == 200) {
            const tiff = new Tiff({
              buffer: res.result,
            });
            //转成png格式的base64图片，将其用img标签展示即可
            console.log(tiff.toDataURL("image/png"))
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  .left {
    width: 48%;
    float: left;
    .preview-content {
      height: 500px;
      border: 1px solid grey;
    }

  }

  .right {
    width: 48%;
    float: right;
    .tree-content {
      height: 500px;
      overflow-y: scroll;
    }
  }

</style>