<template>
  <div id="jgkinfoid">
    <template>
      <el-backtop
        target="#jgkinfoid"
        :right="80"
        :bottom="70"
        :visibility-height="600"
        title="回到顶部"
      >
      </el-backtop>
    </template>
    <img class="back" :src="back" @click="goBack" />
    <div
      style="
        width: calc(100% - 340px);
        float: left;
        background: rgba(41, 60, 90, 0.49);
        padding: 10px;
      "
    >
      <div class="" style="width:100%">
          <div style="width:calc(100% - 100px);float:left"></div>
          <div>
            <div class="img-div">
                <img
                :src="
                    form.photos == '' || form.photos == undefined ? jh_bg : form.photos
                "
                class="rw-img" />
            </div>
          </div>
      </div>
      <div class="title-div">
        <span>关联账号:</span>
      </div>
      <div style="width: 100%; float: left; margin-bottom: 45px"></div>
    </div>

    <div style="width: 300px; float: left; margin-left: 20px">
      <div class="xgnr-span">
        <span>相关内容</span>
      </div>
      <div class="xgnr-div">
        <el-tabs type="border-card">
          <el-tab-pane label="人物">
            <ul>
              <li v-for="item in xgnr_wd">
                <span>{{ item.title }}</span>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="机构">
            <ul>
              <li v-for="item in xgnr_wd">
                <span>{{ item.title }}</span>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="舆情">
            <ul>
              <li v-for="item in xgnr_wd">
                <span>{{ item.title }}</span>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="法规">
            <ul>
              <li v-for="item in xgnr_wd">
                <span>{{ item.title }}</span>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
    

<script>
import back from "../../assets/img/setting/back.png";
import SeeksRelationGraph from "relation-graph";
import { get, post } from "../../util/http_util";
import * as echarts from "echarts";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
export default {
  components: { SeeksRelationGraph },
  data() {
    return {
      back: back,
      form: {
        synopsis:
          "美国财政部（U.S. Department of The Treasury）成立于1789年。处理美国联邦的财政事务、征税、发行债券、偿付债务、监督通货发行，制定和建议有关经济、财政、税务及国库收入的政策，进行国际财务交易。",
        chinese_name: "美国财政部",
        foreign_name: "U.S. DEPARTMENT OF THE TREASURY",
        address: "美国华盛顿",
        clsj: "1789年",
        jgxz: "美国智库",
        concat_info: "200-556-2245",
        jggw: "https://home.treasury.gov/",
        photos: jh_bg,
      },
      url_: jh_bg,
      xgnr_wd: [
        { title: "专家解读延迟退休如何进行特朗普个人网站正式上线" },
        { title: "苏伊士运河搁浅货轮因潮汐脱困亚裔男子在纽约地铁遭黑人毒打" },
        { title: "香港基本附件一附件二完成修订苏伊士运河搁浅货轮因潮汐脱困" },
        { title: "完成修订苏伊士运河搁浅货轮因潮汐脱困" },
        { title: "特朗普个人网站正式上线专家解读延迟退休如何进行" },
        { title: "亚裔男子在纽约地铁遭黑人毒打香港基本附件一附件二完成修订" },
      ],
    };
  },
  methods: {
    goBack() {
      window.history.back();
    },
  },
  activated() {
    this.show = false;
    let data_s = this.$route.params.key;
    let id = this.$route.params.key.id;
    this.form = {
      synopsis: data_s.organizationInfo,
      chinese_name: data_s.chineseName,
      foreign_name: data_s.foreignName,
      address: data_s.address,
      jgxz: data_s.organizationType,
      concat_info: data_s.concatInfo,
      jggw: data_s.officialWebsiteAddress,
      photos:
        data_s.photos == null
          ? ""
          : "file_download/photos_org/" + data_s.photos,
    };
  },
};
</script>
<style lang="scss">
#jgkinfoid {
  width: 88%;
  height: 85%;
  margin: 4%;
  margin-left: 5%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  border: 2px solid #2d4c50;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #2a617b;
  padding: 20px 30px;
  #aa2 {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    border-radius: 19px;
    background-color: white;
    margin-top: -40px;
  }
  .rwjbxx-div {
    width: 100%;
    .img-div {
      width: 200px;
      float: left;
      .rw-img {
        width: 226px;
        // height: 315px;
        margin: 85px -14px 6px;
        border: 4px solid #26b7bdfa;
        box-shadow: 0px 0px 15px #28acca;
        border-radius: 117px;
        background-color: white;
      }
    }
    .rwsx-div {
      width: calc(100% - 255px);
      float: left;
      .name-div {
        width: 100%;
        color: #00ceff;
        font-size: 28px;
        padding-left: 30px;
      }
      .el-tag.el-tag--success {
        background-color: #05d4d0;
        border-color: #05d4d0;
        color: #ffff;
        margin-left: 30px;
        cursor: pointer;
        margin-top: 15px;
      }
      .xx-div {
        width: 100%;
        float: left;
        margin-top: 10px;
        .el-divider--horizontal {
          background-color: #05d4d0a3;
          float: left;
          margin: 10px 0;
        }
        .el-form-item {
          margin-bottom: 0px;
          width: 33%;
          float: left;
        }
        .el-input__inner {
          background-color: #1d2d46;
          border: 1px solid #05d4d06b;
          color: #ffff;
        }
        .el-textarea__inner {
          background-color: #1d2d46;
          border: 1px solid #05d4d06b;
          color: #ffff;
        }
        .el-radio-group {
          margin-top: 12px;
        }
        .synopsis-div {
          width: calc(100% - 32px);
          margin-bottom: 20px;
          margin-left: 14px;
          .el-form-item__content {
            margin-left: 0px !important;
            span {
              display: block;
              text-indent: 2em;
            }
          }
        }
      }
    }
  }
  .title-div {
    float: left;
    width: 100%;
    height: 25px;
    background-size: 100% 100%;
    position: relative;
    span {
      position: absolute;
      //   left: 50px;
      //   top: -10px;
      font-weight: 700;
      font-size: 18px;
      color: #50d7ec;
    }
  }
  .xgwd {
    .table-div {
      width: calc(100% - 50px);
      padding-top: 10px;
      padding-left: 20px;
      height: 100%;
      .el-table--group::after,
      .el-table--border::after,
      .el-table::before {
        background-color: unset;
        border: unset;
      }
      .el-table tr {
        background-color: #1d2d46 !important;
        color: #ffffffc7;
      }
      .el-table td {
        font-size: 12px;
        text-align: center;
        border-bottom: 1px solid #127a89;
        background-color: #1d2d46 !important;
      }
      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #9093991c;
      }
      .el-table th {
        border: unset;
        font-size: 14px;
        text-align: center;
        background-color: #5aa09a3d !important;
      }
      .el-table--fit {
        background: none !important;
      }
    }
  }
  .title-divs {
    float: left;
    height: 25px;
    width: calc(100% - 0px);
  }
  .fssl-div {
    width: calc(50% - 95px);
    height: 40px;
    float: left;
    margin: 40px 20px 0px 65px;
    .el-form-item {
      margin: 0px 20px;
      float: left;
    }
    .el-form-item__label {
      color: #05d4d0;
    }
    .el-avatar--square {
      float: left;
    }
    .zh-span {
      float: left;
      line-height: 40px;
      margin-left: 20px;
    }
  }
  
    .img-div {
      width: 200px;
      // height: 91%;
      float: left;
      .rw-img {
        width: 226px;
        // height: 315px;
        margin: 65px 0px;
        border: 4px solid #26b7bdfa;
        box-shadow: 0px 0px 15px #28acca;
        border-radius: 8px;
        background: white;
      }
    }
  .xgnr-span {
    height: 50px;
    line-height: 48px;
    padding-left: 20px;
    font-weight: 700;
    background: #293f63;
    color: #f1f1f1;
    font-size: 17px;
  }
  .xgnr-div {
    .el-tabs--border-card {
      background: #ececec;
      border: 1px solid #1d2d46;
      > .el-tabs__header {
        background-color: #c1c1c1;
        .el-tabs__item.is-active {
          color: #009df9;
          background-color: #ececec;
        }
        .el-tabs__item {
          color: #777777;
        }
      }
    }
    ul {
      padding: 0px 21px;
      margin: 0px;
      width: 100%;
      li {
        color: #26adcc;
        float: left;
        width: calc(100% - 20px);
        span {
          color: #71d4ff;
          float: left;
          cursor: pointer;
          width: calc(100% - 0px);
          font-size: 14px;
          line-height: 22px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        span:hover {
          color: #65add6;
        }
      }
    }
  }
  .back {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 11%;
    right: 80px;
    cursor: pointer;
  }
}
</style>
