<template>
  <div id="relevance_moudule">
    <div class="rwxx">
      <div class="rwxx-div" @click="rwxq(item, index)" v-for="(item, index) in mb_table">
        <div class="img-div">
          <img class="tx-bg" :src="!types_?(item.info.avatarUrl==null?'':item.info.avatarUrl):(item.avatarUrl==null?'':item.avatarUrl)" :onerror="errimg" />
        </div>
        <div class="text-div">
          <div class="name-div">
            <div class="class1">{{ types_?item.xm.value:item.info.jgfh.value }}</div>
            <div class="class1" style="margin-left: 20px">
              {{ types_?item.wwm.value:item.info.jgjc.value }}
            </div>
          </div>
          <div class="synopsis-div">
            <span v-text='
              types_?item.textareaProperty["人物简介"].value:item.info.textareaProperty["机构简介"].value == "" ||
              types_?item.textareaProperty["人物简介"].value:item.info.textareaProperty["机构简介"].value == undefined
                ? "暂无简介"
                : types_?item.textareaProperty["人物简介"].value:item.info.textareaProperty["机构简介"].value'></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get, post } from "../../util/http_util";
import jh_bg from "../../assets/img/dfzy/zwtp.png";
import { imgUrl } from "../../api/publicUrl";
export default {
  name: "",
  data() {
    return {
      errimg: "this.src='" + jh_bg + "'",
      mb_table: [],
      option_rwmb: [],
      types_:true,
    };
  },
  methods: {
    csh(){
      this.mb_table = [];
    },
    rwxq(item) {
      if(this.types_){
          this.$router.push({ name: "人物详情" + this.$route.meta.type_name, params: { key: item,types:true } });
      }else{
          this.$router.push({ name: "敌方资源机构详情" + this.$route.meta.type_name, params: { key: item ,types:true } });
      }
    },
    query(name, module_name) {
      post(
        `api/rest/mongo/character/query?pageNum=1&pageSize=100`,
        {
          module: "DFWW",
          name:name,
        }
      )
        .then((res) => {
          res.records.forEach((item) => {
            // item.module_names = module_name;
            this.mb_table.push(item);
          });
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    query_tree(type) {
      get("api/rest/resource/queryCharacterMould")
        .then((datas) => {
          this.option_rwmb = [];
          if (datas.length > 0) {
            datas.forEach((item) => {
              this.option_rwmb.push({ value: item.id, label: item.name });
            });
          }
        })
        .catch((err) => {
          this.$message.warning(err.message);
        });
    },
    jsonToArray(nodes) {
      var r = [];
      if (Array.isArray(nodes)) {
        for (var i = 0, l = nodes.length; i < l; i++) {
          r.push(nodes[i]); // 取每项数据放入一个新数组
          if (
            Array.isArray(nodes[i]["children"]) &&
            nodes[i]["children"].length > 0
          )
            // 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
            r = r.concat(this.jsonToArray(nodes[i]["children"]));
          delete nodes[i]["children"];
        }
      }
      return r;
    },
    query_qb(name) {
      this.type_qf = true;
      post(
        `api/rest/mongo/organization/queryOrganization?pageNum=1&pageSize=100`,
        {
          module: "DFWW",
          name:name,
        }
      )
        .then((res) => {
          this.mb_table = [];
          if (res.records.length > 0) {
            res.records.forEach((item) => {
              this.mb_table.push(item);
            });
          }
        })
    },

  },
  props: {
    clientDetails: {
      type: Object,
      default: {},
    },
  },
  watch: {
    clientDetails: function (val) {
      let name = val.name_relevance;
      this.types_ = val.name_relevance_type;
      this.mb_table = [];
      this.types_?this.query(name, "敌方资源机构"):this.query_qb(name);
    },
  },
};
</script>

<style lang="scss" >
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#relevance_moudule {
  width: 100%;
  height: 400px;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
  .rwxx {
    overflow-y: auto;
    height: 100%;
  }
  .rwxx-div {
    width: 46%;
    height: 160px;
    float: left;
    background-image: url("../../assets/img/dfzy/01.png");
    background-size: 100% 100%;
    cursor: pointer;
    margin-left: 20px;
    .img-div {
      width: 22%;
      height: 100%;
      float: left;
      .tx-bg {
        width: 80%;
        max-height: 70%;
        margin-top: 21%;
        margin-left: 17%;
        background: white;
        border-radius: 5px;
        border: 2px solid #34c3c3;
      }
    }
    .text-div {
      margin: 24px 0px;
      width: calc(78% - 13px);
      float: left;
      height: calc(100% - 47px);
      cursor: pointer;
      position: relative;
      .name-div {
        cursor: pointer;
        width: calc(100% - 20px);
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        color: #ffff;
        padding-left: 20px;
        span {
          font-size: 14px;
          color: aquamarine;
        }
        .class1 {
          max-width: calc(50% - 20px);
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          float: left;
        }
      }
      .synopsis-div {
        color: #ffffff87;
        font-size: 15px;
        padding-right: 20px;
        padding-left: 20px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-indent: 2em;
        word-break: break-all;
        white-space: pre-line;
      }
      .xq-div {
        bottom: 15px;
        width: calc(100% - 40px);
        padding-left: 20px;
        height: 20px;
        overflow: hidden;
        position: absolute;
      }
      .el-tag {
        float: left;
        margin-right: 10px;
        height: 20px;
        padding: 0px 8px;
        line-height: 19px;
      }
    }
  }
}
</style>