<template>
  <div class="info-container">
    <div class="network-intro">
      <div>
        {{ netWorkintroduce.intro }}
      </div>
    </div>
    <div class="network-list">
      <introduceTitle :isSlot="true">
        <div class="network-title">
          <div class="main-title">
            网格
            <span class="network-num">{{
              mapParmas.networkName | filterName
            }}</span>
            人员列表
          </div>
          <div class="main-title">
            共
            <span class="network-num">{{ netWorkintroduce.list.length }}</span>
            人
          </div>
        </div>
      </introduceTitle>
      <div class="person-list">
        <div v-for="(item, index) in netWorkintroduce.list" :key="index">
          <div class="person-image">
            <el-image
              fit="cover"
              :src="uploadFileUrl + item.avatar"
              :preview-src-list="[uploadFileUrl + item.avatar]"
            >
            </el-image>

            <div class="serial-number">{{ index + 1 }}</div>
          </div>
          <div class="person-data">
            <div class="data-item">
              <div class="lable-value">
                <div class="data-lable">姓名</div>
                <div class="data-value">{{ item.user_name }}</div>
              </div>
              <div class="lable-value">
                <div class="data-lable">联系电话</div>
                <div class="data-value">{{ item.phonenumber }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import introduceTitle from "@/views/components/introduceTitle/subTtile.vue";
export default {
  data() {
    return {
      uploadFileUrl: process.env.VUE_APP_BASE_API,
    };
  },
  components: {
    introduceTitle,
  },
  filters: {
    filterName(target) {
      // 正则表达式匹配数字和可能的 - 号
      const regex = /(?:\d+-?)+/g;
      // 查找所有匹配的子字符串
      const matches = target.match(regex);
      // 如果有匹配的结果，将其合并为一个字符串并返回
      return matches ? matches.join("") : "";
    },
  },
  computed: {
    ...mapGetters(["netWorkintroduce", "mapParmas"]),
  },
};
</script>

<style lang="scss" scoped>
.info-container {
  height: 100%;
  box-sizing: border-box;
  padding: 15px 0;

  overflow: hidden;

  .network-intro {
    height: 55%;
    padding: 20px 0 20px 20px;
    background: url("~@/assets/images/ui/introduce-text.png");
    background-size: 100% 100%;
    font-size: 14px;
    color: #d3e9ff;
    font-weight: 400;
    line-height: 25px;

    div {
      height: 100%;
      overflow-y: auto;
      padding-right: 20px;
    }
  }
  .network-list {
    height: 45%;

    .network-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .main-title {
      display: flex;
      align-items: center;
    }
    .network-num {
      display: inline-block;
      width: 36px;
      height: 34px;
      line-height: 28px;
      background: url("~@/assets/images/ui/img_block@2x.png");
      background-size: 100% 100%;
      font-size: 18px;
      text-align: center;
      color: #ffffff;
      text-shadow: 0px 0px 10px #11c2ff;
      font-family: "din-bold-2.ttf";
    }

    .person-list {
      height: calc(100% - 40px);
      overflow-y: auto;
      padding: 0 10px;
      & > div {
        height: 50%;
        display: flex;
        align-items: center;
        .person-image {
          position: relative;
          width: 32%;
          height: 80%;
          border-radius: 6px;
          background: #01031f;
          border: 1px solid rgba(0, 180, 255, 0.6);
          overflow: hidden;
          padding: 5px;
          .serial-number {
            position: absolute;
            left: 0;
            top: 0;
            height: 28px;
            width: 28px;
            background: url("~@/assets/images/ui/serial-number.png");
            background-size: 100% 100%;
            font-size: 14px;
            padding-left: 5px;
            color: #ffffff;
            font-family: "din-bold-2.ttf";
          }
          .el-image {
            display: block;
            height: 100%;
            width: 100%;
            border-radius: 3px;
          }
        }
        .person-data {
          flex: 1;
          padding-left: 15px;
          .lable-value {
            margin-bottom: 15px;
          }
          .data-item > div:last-child {
            margin: 0;
          }
          .data-lable {
            font-size: 14px;
            color: #ffc333;
            font-style: italic;
            font-weight: 400;
            margin-bottom: 10px;
          }
          .data-value {
            position: relative;
            font-size: 17px;
            color: #ffffff;
            font-style: italic;
            font-weight: 400;
          }
          .data-value::after {
            position: absolute;
            bottom: 0;
            z-index: -1;
            content: "";
            display: block;
            width: 94px;
            height: 10px;
            background: url("~@/assets/images/ui/cell-bg.png");
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}

/*全局滚动条样式*/
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  height: 10px;
  width: 1px;
  background: rgba(255, 255, 255, 0.5);
}
::-webkit-scrollbar-track {
  background: transparent;
}
</style>
