<template>
  <div class="node-com">
    <div v-if="!flag" class="nodeTitle" :title="getAllName(item[areaName])">{{ spliceNameFun(item[areaName], 8) }}</div>
    <div class="name_more peoName" v-if="item[peopleName] && !item[peopleName].includes(',')" @click="gotoPersonnel(item.resiId)" :title="getAllName(item[peopleName])">{{ spliceNameFun(item[peopleName], 12) }}</div>
    <div class="name_more" v-if="item[peopleName] && item[peopleName].includes(',')">
      <span v-for="(i, k) in getItemNameArr(item[peopleName])" :key="i" @click="gotoPersonnel(item.resiId.split(',')[k])" :title="getAllName(i)">{{ spliceNameFun(i, 12) }}{{ k === getItemNameArr(item[peopleName]).length - 1 ? "" : "," }}</span>
      <!-- 多个人员展示 -->
      <!-- <popTips :item="item" :pageName="pageName" /> -->
    </div>
    <div v-if="item.partyOrgLevel < 9" class="peoPosition">({{ getPeopositionMap(item.partyOrgLevel) }})</div>
  </div>
</template>

<script>
export default {
  name: "NameSplit",
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    areaName: {
      type: String,
      default: "partyOrgName",
    },
    peopleName: {
      type: String,
      default: "principalName",
    },
    flag: {
      type: Boolean,
      default: false,
    },
    pageName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    getAllName(item) {
      return item;
    },

    getItemNameArr(str) {
      return str.split(",").slice(0, 1);
    },

    spliceNameFun(row, num) {
      return row.substring(0, num);
    },
    gotoPersonnel(id) {
      if (id) {
        this.$router.push({ path: `/organizational/orgPersonnel/${this.pageName}`, query: { user_id: id } });
      } else {
        this.$message.error("该人员暂无居民信息！");
      }
    },
    getPeopositionMap(type) {
      const positionMap = new Map([
        [1, "省委"],
        [2, "市委"],
        [3, "区委书记"],
        [4, "党工委书记"],
        [5, "党委书记"],
        [6, "党总支书记"],
        [7, "支部书记"],
        [8, "组长"],
      ]);
      return positionMap.get(type);
    },
  },
};
</script>

<style scope lang="scss">
.node-com {
  // padding: 0 12px;
  .nodeTitle {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
  .peoName {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    opacity: 0.8;
  }
  .name_more {
    cursor: pointer;
    span {
      &:hover {
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}
</style>
