<template>
  <div id="zchjjg">
    <div class="left-zchjjg">
      <div class="left-tree">
        <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false"
          @node-click="handleNodeClick" highlight-current>
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <!-- <span class="addOrMove">
              <el-button class="add" type="text" size="mini" @click="append(data)">
                <i class="el-icon-circle-plus"></i>
              </el-button>
              <el-button class="delete" type="text" size="mini" @click="remove(node, data)">
                <i class="el-icon-error"></i>
              </el-button>
              <el-button class="import" type="text" size="mini" @click="importExcelData(data)">
                <i class="el-icon-upload"></i>
              </el-button>
            </span> -->
          </span>
        </el-tree>
      </div>
    </div>
    <div class="right-zchjjg">
      <el-card class="box-card" v-for="(item,index) in dataShow" :key="index">
        <el-image style="width: 80%; height: 70%" :src="img"></el-image><br>
        <span v-text="item"></span>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss">
#zchjjg {
  width: 99%;
  height: 97%;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  .left-zchjjg {
    width: 15%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    float: left;
    background: url("../../assets/img/yqjc/01.png") no-repeat;
    background-size: 100% 100%;
    .left-tree {
      width: 100%;
      height: calc(100% - 30px);
      overflow-y: auto;
      .el-tree {
        margin-top: 10px;
        color: white;
        background: transparent;
        .el-tree-node__content {
          height: 40px;
        }
      }
      .el-tree > .el-tree-node > .el-tree-node__content {
        height: 40px;
        background-image: url(../../assets/img/yqjc/24.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .el-tree
        > .el-tree-node
        > .el-tree-node__children
        > .el-tree-node
        > .el-tree-node__content {
        height: 40px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .el-tree > .el-tree-node > .el-tree-node__content > .el-tree-node__label {
        font-size: 16px !important;
      }
      .el-tree > .el-tree-node > .el-tree-node__children {
        background-color: #1d2d46 !important;
      }
      .el-tree-node:focus > .el-tree-node__content {
        background-color: #00648a96 !important;
        // border-radius: 5px;
      }

      .el-tree-node__content:hover,
      .el-tree-node__content:focus {
        background-color: #00648a96 !important;
        // border-radius: 5px;
      }
      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        background-color: #00648a96 !important;
        // border-radius: 5px;
      }
      .addOrMove {
        display: none;
        .add {
          i {
            font-size: 16px;
            color: #00a6f5;
          }
        }
        .delete {
          i {
            font-size: 16px;
            color: #ff5454;
          }
        }
        .import {
          i {
            font-size: 16px;
            color: green;
          }
        }
      }
      .el-tree
        > .el-tree-node
        > .el-tree-node__content
        > .custom-tree-node
        > .addOrMove
        > button:nth-child(2),
      .el-tree
        > .el-tree-node
        > .el-tree-node__content
        > .custom-tree-node
        > .addOrMove
        > button:nth-child(3) {
        display: none;
      }
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
      }
      .el-tree-node__content:hover .addOrMove {
        display: block;
      }
    }
  }
  .right-zchjjg {
    width: calc(85% - 10px);
    height: 100%;
    margin-left: 10px;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    float: left;
    background: url("../../assets/img/yqjc/02.png") no-repeat;
    background-size: 100% 100%;
    .el-card {
      width: 20%;
      height: 200px;
      padding: 20px;
      color: #09e2e2;
      box-sizing: border-box;
      text-align: center;
      border: none;
      cursor: pointer;
      float: left;
      margin-left: 4%;
      margin-bottom: 4%;
      background: url("../../assets/img/yqjc/25.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>

<script> 
import img from "../../assets/img/main/jh.png";
export default {
  name: "zchjjg",
  data() {
    return {
      data: [
        {
          label: "国际组织",
          children: [
            {
              label: "联合国",
              children: [
                {
                  label: "安理会",
                },
                {
                  label: "秘书长",
                },
              ],
            },
          ],
        },
        {
          label: "友好国家",
          children: [
            {
              label: "俄罗斯",
              children: [
                {
                  label: "政府",
                },
                {
                  label: "政党",
                },
              ],
            },
          ],
        },
        {
          label: "媒体平台",
          children: [
            {
              label: "亚洲",
              children: [
                {
                  label: "中国",
                  children: [
                    {
                      label: "人民日报",
                    },
                    {
                      label: "中国网",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
      dataShow: [],
      img: img,
    };
  },
  methods: {
    handleNodeClick(node) {
      this.dataShow = [];
      this.dataShow.push(node.label);
      if (node.children != undefined && node.children.length > 0) {
        node.children.forEach((item) => {
          this.dataShow.push(item.label);
        });
      }
    },
  },
};
</script>