<!--
 * @Author: your name
 * @Date: 2022-09-20 10:22:51
 * @LastEditTime: 2022-09-22 10:51:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 *
-->
<template>
  <div class="dialogBox">
    <div class="title">
      <span class="mc">社会资源</span>
      <span @click="close" class="close">
        <el-icon><Close /></el-icon>
      </span>
    </div>
    <div class="listBox noScollLine">
      <div v-for="(item, index) in props.data" :key="index">
        <div class="infoBox">
          <div class="content">单位名称：{{ item.dwmc }}</div>
          <div class="content">从业人员：
            <div v-for="it in item.cyry" :key="it" class="peoBox">
              <span>{{ it.xm }}</span>
              <span>{{ it.xb == 1 ? '男' :'女' }}</span>
              <span>{{ it.lxdh }}</span>
              <span>{{ it.sfzh }}</span>
            </div>
          </div>
          <div class="content">所属部门：{{ item.ssbm }}</div>
          <div class="address">
            <img src="@/assets/images/dingwei.png" />
            <span>{{ item.dz }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
// 左右折叠状态
import emitter from "@/utils/eventBus.js";
const props = defineProps({
  data: {
    type: Array,
    default: []
  }
});

//关闭弹窗
function close() {
  emitter.emit("showShzy", false);
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/largeScreen.scss";
@import "@/assets/css/homeScreen.scss";
.dialogBox {
  .listBox {
    padding: 4px 10px;
    box-sizing: border-box;
    max-height: 80vh;
    overflow: hidden;
    overflow-y: auto;
    .infoBox {
      padding: 4px 10px;
      border: 1px solid #4190ad;
      margin-bottom: 5px;
      border-radius: 4px;
      .other {
        margin: 5 10px;
        color: #779dcd;
      }
    }
    .address {
      margin-top: 10px;
      border-top: 1px solid #18617e;
      padding-top: 6px;
      img {
        margin-right: 10px;
      }
    }
  }
}
.peoBox{
  display: flex;
  justify-content: space-between;
  span{
    display: inline-block;
    width: 15%;
    color: rgb(173 203 231);;
    &:nth-child(1){
      text-align: justify;
      text-align-last: justify;
    }
    &:nth-child(2){
      width: 10%;
      text-align: center;
    }
    &:nth-child(3){
      width: 30%;
    }
    &:nth-child(4){
      width: 45%;
    }
  }
}


</style>
