<template>
    <div class="modal" >
      <section>
        <div class="dialog_header">
          <div class="close-icon" >
            <img src="@/assets/images/common/dialog-colse.png"  @click="handelClose" alt="" />
          </div>
          <div class="title-container">
            <div class="title">{{ dialogTitle }}</div>
          </div>
        </div>
        <div class="dialog_body">
          <div class="content">
            <div class="main">
              <div class="wrap">
                <div class="content">
                  <div class="title_hrader">
                    <div class="title_hrader_item">
                      {{houseName}}
                    </div>
                    <div class="title_hrader_item">
                      成员:
                      <span class="numberTotal">{{ dataList.length || 0 }}</span> 人
                    </div>
                  </div>
                  <div class="list">
                    <div class="list_item_header">
                            <span>序号</span>
                            <span>姓名</span>
                            <span>性别</span>
                            <span>证件号</span>
                            <span>联系电话</span>
                    </div>
                    <div
                    class="list_row"
                    v-for="(item, index) in dataList"
                    :key="item.name + index"
                  >
                    <div class="list_row_item">{{ index + 1 }}</div>
                    <div class="list_row_item">{{ item.icUserName }}</div>
                    <div class="list_row_item">
                      {{ item.gender }}
                    </div>
                    <div class="list_row_item">{{ item.idCard }}</div>
                    <div class="list_row_item">
                      {{ item.mobile }}
                    </div>
                  </div>
                  </div>
                  <div class="list_bottom"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </template>
  
  <script>
  import { resiListByHomeId } from '@/api/hsyf'
  export default {
    name: '',
    data () {
      return {
        dialogTitle: '人员信息',
        loading: false,
        dataList: [],
        type:1,
      }
    },
    computed: {
     
    },
    components: {},
    mounted () {
    },
    created () {
      resiListByHomeId({houseId:this.houseId}).then(res => {
          this.dataList = res.data
      })
    },
    methods: {
      handelClose(){
        this.$emit('handelClose')
      }
    },
    props:{
        houseId:{
          type:Number,
          default:0
        },
        houseName:{
          type:String,
          default:''
        }
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .modal {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 150;
    section {
      @include flex(column);
      background: url("~@/assets/images/common/dialog-bg-red.png") no-repeat !important;
      background-size: 100% 100% !important;
      width: 715px;
      height: auto;
      overflow: hidden;
      padding-bottom: 16px;
      box-sizing: border-box;
  
      .dialog_header {
        position: relative;
        margin-bottom: 0px;
  
        .close-icon {
          width: 18px;
          height: 18px;
          position: absolute;
          top: 10px;
          right: 16px;
          cursor: pointer;
        }
  
        .title-container {
          align-items: center;
          background: url("~@/assets/images/common/dialog-header-red.png")
            no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 60px;
          font-size: 26px;
  
          .title {
            font-family: zaozigongfang;
            letter-spacing: 2px;
            line-height: 50px;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            height: 52px;
            font-size: 22px;
            color: #fff;
          }
        }
      }
  
      .dialog_body {
        position: relative;
  
        > .content {
          box-sizing: border-box;
          color: #fff;
          padding: 0px 24px 0 27px;
  
          .main {
            height: 588px;
            overflow-y: hidden;
            box-sizing: border-box;
            overflow-y: scroll;
  
            &::-webkit-scrollbar {
              width: 0px;
            }
  
            &::-webkit-scrollbar-track {
              border-radius: 10px;
              background: rgba(251, 233, 197, 1);
            }
  
            &::-webkit-scrollbar-thumb {
              border-radius: 10px;
              background: rgba(234, 201, 135, 1);
            }
  
            .header {
              width: 100%;
              height: 30px;
              text-align: left;
              background: linear-gradient(
                90deg,
                rgb(26, 109, 224) 0%,
                rgba(13, 113, 248, 0) 50%
              );
              display: flex;
              justify-content: flex-start;
              align-items: center;
            }
  
            .flex {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
  
              .item {
                display: flex;
                width: 647px;
                padding: 16px 24px 16px 16px;
                box-sizing: border-box;
                background: #1657b8;
                border-radius: 2px;
                margin-bottom: 10px;
  
                img {
                  width: 186px;
                  height: 120px;
                }
  
                p {
                  display: -webkit-box;
                  overflow: hidden;
                  -webkit-line-clamp: 4;
                  -webkit-box-orient: vertical;
                  text-overflow: ellipsis;
                  margin-bottom: 0;
                }
  
                > .content {
                  flex: 1;
                  @include flex(column);
                  padding-left: 17px;
                  box-sizing: border-box;
  
                  & > :nth-child(1) {
                    display: flex;
                    justify-content: space-between;
  
                    & > :nth-child(2) {
                      color: #00d4f3;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  
  .wrap {
    .content {
      margin-top: 0px;
      padding: 0 17px;
      position: relative;
      transition: transform 0.3s ease-in-out;
      transform-origin: 50% 50%;
  
      .title_hrader {
        padding-top: 10px;
        height: 58px;
        background: url("~@/assets/images/common/zzjgbotbgred.png") no-repeat;
        background-size: 100% 14px;
        background-position: center 40px;
        display: flex;
        justify-content: space-between;
        .title_hrader_item{
            font-family: 'PingFang Regular';
        }
        &_item {
          width: 130px;
          height: 48px;
          font-weight: 300;
          font-size: 14px;
          color: #ffffff;
          line-height: 48px;
          .numberTotal {
            font-family: PangMenZhengDao;
            font-weight: 400;
            font-size: 20px;
            line-height: 44px;
          }
        }
        &_item:nth-child(1) {
          padding-left: 24px;
          width: auto;
          font-family: PingFang Regular;
          font-weight: bold;
        }
        &_item:nth-child(3) {
          width: 210px;
        }
        &_item:nth-child(4) {
          width: 180px;
        }
      }
      .list{
        height:500px;
        display: flex;
        flex-direction: column;
          &_item_header {
          width: 100%;
          height: 48px;
          line-height: 48px;
          display: flex;
          border-radius: 5px;
          background-color: #bd360c;
          color: #fbe9c5;
          &>:nth-child(1) {
          width: 80px;
          padding-left: 24px;
        }
        &>:nth-child(2) {
          width: 80px;
        }
        &>:nth-child(3) {
          width: 80px;
        }
        &>:nth-child(4) {
          flex: 1;
        }
        &>:nth-child(5) {
          width: 160px;
        }
        }
        
        .list_row {
        display: flex;
        border-bottom: 0px;
        color: #fbe9c5;
        &_item {
          width: 140px;
          height: 48px;
          line-height: 48px;
          border-bottom: 1px dashed #bb7053;
        }
        &_item:nth-child(1) {
          width: 80px;
          padding-left: 24px;
        }
        &_item:nth-child(2) {
          width: 80px;
        }
        &_item:nth-child(3) {
          width: 80px;
        }
        &_item:nth-child(4) {
          flex: 1;
        }
        &_item:nth-child(5) {
          width: 160px;
        }
      
      }
      .list_row:hover {
        background: url("~@/assets/images/common/zzjg_xz.png") no-repeat !important;
        background-size: 100% 100% !important;
        color: #ffffff;
      }
      .list_row:nth-child(1) {
        border: 1px solid #bb7053;
        border-bottom: 0px;
      }
      .list_bottom {
        border-bottom: 1px solid #bb7053;
      }
      }
      // .list_row:nth-child(11) {
      //   border: 1px solid #bb7053;
      // }
    }
  }
  </style>
  