<template>
  <div class="app-container" ref="apps">
    <div class="titleInput" ref="titleInput">
      <el-input
        placeholder="请输入姓名"
        v-model="afterParams.nickName"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="search"
        ></el-button>
      </el-input>
    </div>
    <div v-loading="loads">
      <div class="peopleContent" v-if="arrList.length > 0">
        <div class="subMan" v-for="(item, index) in arrList" :key="index">
          <div class="leftSub">
            <div
              class="leftAvatar"
              :style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
            ></div>
            <div class="leftName">
              <div>{{item.nickName}}</div>
              <div class="mainTag">
                <!-- <div>{{ item.ageRange }}</div>
                <div>
                  {{ item.sexRange }}
                </div>
                <div>{{ item.educationRange }}</div> -->
                <div
                  v-show="itema != ''"
                  v-for="(itema, index) in item.arrlist"
                  :key="index"
                >
                  {{ itema }}
                </div>
              </div>
            </div>
          </div>
          <div class="rightSub">
            <div class="lookDetail" @click="looks(item.id)">查看</div>
          </div>
        </div>
      </div>
      <div v-else class="noneStyle">暂无数据</div>
    </div>

    <div class="pagination" ref="pagination">
      <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
    </div>
    <!-- 查看该人员的详情 -->
    <el-dialog
      :visible.sync="peopelDetail"
      width="40%"
      @close="cancel"
      :destroy-on-close="true"
    >
      <div slot="title">
        <div class="titleText">查看人员详情</div>
      </div>
      <div class="center-content">
        <el-descriptions class="margin-top" :column="2" border>
          <el-descriptions-item
            v-for="(item, index) in beforeData"
            :key="index"
          >
            <template slot="label"> {{ item.name }} </template>
            {{ item.value }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { peopleList, peopleGet } from "@/api/volunteer/hdgl";
import myPagination from "@/views/components/myPagination/index.vue";
export default {
  data() {
    return {
      arrList: [],
      form: {
        pageSize: 10,
        pageNum: 1,
      },
      afterParams: {
        nickName: "",
      },
      total: 0,
      loads: false,
      //=========
      peopelDetail: false,
      beforeData: [
        {
          name: "年龄",
          label: "ageRange",
          value: "",
        },
        {
          name: "文化程度",
          label: "educationRange",
          value: "",
        },
        {
          name: "小区",
          label: "housingRange",
          value: "",
        },
        {
          name: "行业类型",
          label: "industryRange",
          value: "",
        },
        {
          name: "兴趣爱好",
          label: "interestRange",
          value: "",
        },
        {
          name: "国籍",
          label: "nationalityRange",
          value: "",
        },

        {
          name: "政治面貌",
          label: "politicalRange",
          value: "",
        },
        {
          name: "专业类型",
          label: "professionalRange",
          value: "",
        },
        {
          name: "院校",
          label: "schoolRange",
          value: "",
        },
        {
          name: "性别",
          label: "sexRange",
          value: "",
        },
      ],
      arr: [
        "ageRange",
        "sexRange",
        "politicalRange",
        "educationRange",
        "housingRange",
        "industryRange",
        "interestRange",
        "professionalRange",
        "schoolRange",
        "nationalityRange",
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    cancel() {
      this.peopelDetail = false;
    },
    looks(e) {
      peopleGet(e).then((res) => {
        this.beforeData.forEach((value, index) => {
          for (let key in res.data) {
            if (value.label == key) {
              this.beforeData[index].value = res.data[key];
            }
          }
        });
        this.peopelDetail = true;
      });
    },
    search() {
      this.form = { ...this.form, ...this.afterParams };
      this.getList();
      this.afterParams.nickName = ""

    },
    //标签生成
    labelgenerate(data = {}) {
      let arrlist = [];
      for (let key3 of this.arr) {
        for (let key4 in data) {
          if (key3 == key4) {
            let a = data[key3];
            arrlist.push(a);
          }
        }
      }
      return arrlist;
    },
    getList() {
      this.loads = true;
      peopleList(this.form).then((res) => {
        this.arrList = res.rows;
        console.log(this.arrList);
        if (this.arrList.length > 0) {
          this.arrList.forEach((item) => {
            item.arrlist = this.labelgenerate(item);
          });
        }
        this.total = res.total;
        this.loads = false;
      });
    },
    pagesChange(e) {
      this.form.pageNum = e.pageNum;
      this.form.pageSize = e.pageSize;
      this.getList();
    },
  },
  components: {
    myPagination,
  },

  mounted() {},
};
</script>

<style lang="scss" scoped>
.noneStyle {
  height: 490px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Alibaba-PuHuiTi-Medium.otf";
  color: #606266;
  font-size: 14px;
}
.center-content {
  padding: 20px 30px;
}
::v-deep .margin-top td {
  font-family: "Alibaba-PuHuiTi-Regular";
}
::v-deep .margin-top th {
  font-family: "Alibaba-PuHuiTi-Regular";
  width: 20%;
}
::v-deep .el-dialog {
  border-radius: 10px;
  margin-bottom: 20px;
}
::v-deep .el-dialog__header {
  padding: 10px;
  padding-left: 15px;
  background: #f7f5f5;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog__footer {
  padding: 0;
}
::v-deep .el-dialog__headerbtn {
  top: 12px;
}
.titleText {
  font-family: "Alibaba-PuHuiTi-Regular";
  font-weight: bold;
  color: #4c4949;
  padding-left: 15px;
  font-size: 16px;
  position: relative;
  &::before {
    position: absolute;
    top: 3.8px;
    left: 0;
    content: "";
    width: 5px;
    height: 15px;
    background: #f8414d;
  }
}
::v-deep .titleInput .el-input__inner {
  border-right: none;
}
::v-deep .titleInput .el-input-group__append {
  background: #f8414d;
  border: none;
  color: #fff;
}
.titleInput {
  width: 30%;
  margin-bottom: 20px;
}
.mainTag {
  display: flex;
  flex-wrap: wrap;
  font-family: "Alibaba-PuHuiTi-Regular";
  & > div {
    margin-bottom: 5px;
    margin-right: 5px;
    background-color: rgba(248, 65, 77, 0.06);
    padding: 3px 5px;
    color: #e16a70;
    border-radius: 4px;
  }
}
.peopleContent {
  // height: 490px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  overflow-y: auto;

  .subMan {
    width: 49.2%;
    height: 20.4%;
    background: #fafafa;
    border: 1px solid #f5edeb;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    margin-bottom: 17px;
    padding: 15px;
    .leftSub {
      width: 80%;
      height: 100%;
      display: flex;
      align-items: center;
      .leftAvatar {
        min-height: 100px;
        min-width: 100px;
        background-size: 100% 100%;
        border-radius: 10px;
      }
      .leftName {
        margin-left: 15px;
        & > div:nth-of-type(1) {
          font-family: "Alibaba-PuHuiTi-Medium.otf";
          color: #4c4949;
          font-size: 18px;
          margin-bottom: 5px;
        }
         & > div:nth-of-type(2) {
            margin-bottom: -10px;
          }
      }
    }
    .rightSub {
      flex: 1.5;
      display: flex;
      align-items: center;
      justify-content: center;
      .lookDetail {
        width: 80px;
        height: 80px;
        background: #ffffff;
        box-shadow: 0px 0px 15px 0px rgba(77, 161, 254, 0.17);
        border-radius: 50%;
        font-family: "Alibaba-PuHuiTi-Medium.otf";
        font-weight: 400;
        color: #188ffe;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
      }
    }
  }
}
</style>
