<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      @close="closeDetail"
      :destroy-on-close="true"
    >
      <div slot="title">
        <div class="titleText">查看详情</div>
      </div>
      <div class="center-content">
        <header>
          <div class="icons"></div>
          <span>活动信息</span>
        </header>
        <div class="mainsEvents">
          <div class="itemE">
            <div>活动名称:</div>
            <div>{{ detailData.name }}</div>
          </div>
          <div class="itemE">
            <div>活动地址:</div>
            <div>{{ detailData.address }}</div>
          </div>
        </div>
        <div class="mainsEvents">
          <div class="itemE">
            <div>活动举办方:</div>
            <div>{{ detailData.publisher }}</div>
          </div>
          <div class="itemE">
            <div>活动标签:</div>
            <div class="mainTag">
              <div v-if="detailData.ageRange != ''">
                {{ detailData.ageRange }}
              </div>
              <div>
                {{
                  detailData.sexRange == "" ? "男女不限" : detailData.sexRange
                }}
              </div>
              <div v-if="detailData.educationRange != ''">
                {{ detailData.educationRange }}
              </div>
            </div>
          </div>
        </div>
        <div class="mainsTitle">
          <div>活动内容:</div>
          <div>{{ detailData.content }}</div>
        </div>
        <div class="mainsTitle">
          <div>活动时间:</div>
          <div>{{ detailData.activityTime }}至{{ detailData.endTime }}</div>
        </div>

        <!-- 人员匹配度 -->
        <header>
          <div class="icons icons1"></div>
          <span>人员匹配度</span>
        </header>
        <div v-loading="load1">
          <div class="mainPeople" v-if="personList.length > 0">
            <div
              class="subMan"
              v-for="(item, index) in personList"
              :key="index"
            >
              <div class="leftSub">
                <div
                  class="leftAvatar"
                  :style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
                ></div>
                <div class="leftName">
                  <div>{{ item.id }}</div>
                  <div class="mainTag">
                    <div v-if="item.ageRange != ''">{{ item.ageRange }}</div>
                    <div v-if="item.sexRange != ''">
                      {{ item.sexRange }}
                    </div>
                    <div v-if="item.educationRange != ''">
                      {{ item.educationRange }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="rightSub">
                <div class="numPercen">
                  <span>匹配度:</span>
                  <span>1%</span>
                </div>
                <div class="itemBtn">
                  <div class="look" @click="looks1(item.id)">查看</div>
                  <div class="looks" @click="invite(item)">邀请</div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="noneStyle">暂无数据</div>
        </div>

        <div class="titlePagin">
          <el-pagination
            small
            layout="prev, pager, next"
            :total="personTotal"
            :current-page.sync="personParams.pageNum"
            @current-change="changePersonSize"
          >
          </el-pagination>
        </div>
        <!-- 参与报名 -->
        <header>
          <div class="icons icons2"></div>
          <span>参与报名</span>
        </header>
        <div v-loading="load2">
          <div class="mainPeople" v-if="participationList.length > 0">
            <div
              class="subMan"
              v-for="(item, index) in participationList"
              :key="index"
            >
              <div class="leftSub">
                <div
                  class="leftAvatar"
                  :style="`background-image:url('${require('../../../../assets/images/profile.jpg')}')`"
                ></div>
                <div class="leftName">
                  <div>周爱</div>
                  <div class="mainTag">
                    <div v-if="item.ageRange != ''">{{ item.ageRange }}</div>
                    <div v-if="item.sexRange != ''">{{ item.sexRange }}</div>
                    <div v-if="item.educationRange != ''">
                      {{ item.educationRange }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="rightSub">
                <div class="numPercen">
                  <span>匹配度:</span>
                  <span>99%</span>
                </div>
                <div class="itemBtn" style="justify-content: center">
                  <div class="look" @click="looks2(item)">查看</div>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="noneStyle">暂无数据</div>
        </div>

        <div class="titlePagin">
          <el-pagination
            small
            layout="prev, pager, next"
            :total="participationTotal"
            :current-page.sync="participationParams.pageNum"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>
    <!-- 查看该人员的详情 -->
    <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 {
  activityGet,
  peopleList,
  canyuList,
  peopleGet,
  yaoqingAdd,
} from "@/api/volunteer/hdgl";
export default {
  data() {
    return {
      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: "",
        },
      ],
      dialogVisible: false,
      detailData: {},
      load1: true,
      personList: [],
      personTotal: 0,
      personParams: {
        pageNum: 1,
        pageSize: 10,
        ageRange: "",
        educationRange: "",
        housingRange: "",
        industryRange: "",
        interestRange: "",
        nationalityRange: "",
        politicalRange: "",
        professionalRange: "",
        schoolRange: "",
        sexRange: "",
      },
      load2: true,
      participationList: [],
      participationTotal: 0,
      participationParams: {
        pageNum: 1,
        pageSize: 10,
        activityId: "",
      },
      peopelDetail: false,
    };
  },
  props: {},
  created() {},
  methods: {
    open(e) {
      activityGet(e).then((res) => {
        this.detailData = res.data;
        for (let key1 in this.personParams) {
          for (let key2 in this.detailData) {
            if (key1 == key2) {
              this.personParams[key1] = this.detailData[key2];
            }
          }
        }
        if (this.personParams.sexRange == "") {
          this.personParams.sexRange = "男,女";
        }
        this.participationParams.activityId = this.detailData.id;
        this.getPersonData();
        this.getParticipationData();
        this.dialogVisible = true;
      });
    },
    //关闭详情
    closeDetail() {
      this.detailData = {};
      this.dialogVisible = false;
    },
    getPersonData() {
      //查看人员匹配度列表
      this.load1 = true;
      peopleList(this.personParams).then((res) => {
        this.personList = res.rows;
        this.personTotal = res.total;
        this.load1 = false;
      });
    },
    getParticipationData() {
      this.load2 = true;
      //查看参与报名列表
      canyuList(this.participationParams).then((res) => {
        this.participationList = res.rows;
        this.participationTotal = res.total;
        this.load2 = false;
      });
    },
    //更改人员匹配度页码
    changePersonSize(e) {
      this.personParams.pageNum = e;
      this.getPersonData();
    },
    //更改参与报名匹配度页码
    changeParticipationSize(e) {
      this.participationParams.pageNum = e;
      this.getParticipationData();
    },
    looks1(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;
      });
    },
    looks2(item) {
      this.beforeData.forEach((value, index) => {
        for (let key in item) {
          if (value.label == key) {
            this.beforeData[index].value = item[key];
          }
        }
      });
      this.peopelDetail = true;
    },
    invite(e) {
      console.log(e);
      this.$modal
        .confirm("是否确认邀请该人参加活动?")
        .then(() => {
          yaoqingAdd({ activityId: this.detailData.id, uid: e.uid }).then(
            () => {
              this.$modal.msgSuccess("邀请成功");
            }
          );
        })
        .catch(() => {});
    },
    cancel() {
      this.peopelDetail = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .margin-top td {
  font-family: "Alibaba-PuHuiTi-Regular";
}
::v-deep .margin-top th {
  font-family: "Alibaba-PuHuiTi-Regular";
  width: 20%;
}
.titlePagin {
  margin: 12px 0;
  display: flex;
  flex-direction: row-reverse;
}
::v-deep .titlePagin .el-pagination {
  padding: 0;
}
.mainTag {
  display: flex;
  font-family: "Alibaba-PuHuiTi-Regular";
  & > div {
    margin-right: 5px;
    background-color: rgba(248, 65, 77, 0.06);
    padding: 3px 5px;
    color: #e16a70;
    border-radius: 4px;
  }
}
::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;
  }
}
.center-content {
  padding: 20px 30px;
  header {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    .icons {
      height: 14px;
      width: 14px;
      background-image: url("../../../../assets/images/hdxx.png");
      background-size: 100% 100%;
    }
    .icons1 {
      background-image: url("../../../../assets/images/rypp.png");
    }
    .icons2 {
      background-image: url("../../../../assets/images/baoming1.png");
    }
    span {
      margin-left: 10px;
      color: #4c4949;
      font-weight: bold;
      font-family: "Alibaba-PuHuiTi-Regular";
    }
  }
  .mainsEvents {
    // height: 35px;
    display: flex;
    align-items: center;
    font-family: "Alibaba-PuHuiTi-Regular";
    margin-bottom: 12px;

    .itemE {
      width: 50%;
      display: flex;
      & > div:nth-of-type(1) {
        display: flex;
        // align-items: center;
        color: #4c4949;
        width: 24%;
      }
      & > div:nth-last-of-type(2) {
        color: #807a7a;
      }
    }
  }
  .mainsTitle {
    margin-bottom: 12px;
    display: flex;
    font-family: "Alibaba-PuHuiTi-Regular";
    & > div:nth-of-type(1) {
      color: #807a7a;
      width: 12%;
    }
    & > div:nth-of-type(2) {
      width: 88%;
      color: #606266;
    }
  }
  .noneStyle {
    height: 200px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Alibaba-PuHuiTi-Medium.otf";
    color: #606266;
    font-size: 14px;
  }
  .mainPeople {
    overflow: auto;
    height: 200px;
    box-sizing: border-box;
    margin-bottom: 12px;
    .subMan {
      width: 100%;
      height: 95px;
      background: #fafafa;
      border: 1px solid #f5edeb;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 15px;
      margin-bottom: 10px;
      .leftSub {
        width: 84%;
        height: 100%;
        display: flex;
        align-items: center;
        .leftAvatar {
          height: 65px;
          width: 65px;
          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: 18px;
          }
        }
      }
      .rightSub {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .numPercen {
          display: flex;
          //   align-items: flex-end;
          align-items: center;
          & > span:nth-of-type(1) {
            font-family: "Alibaba-PuHuiTi-Regular";
            font-weight: 400;
            color: #8a8585;
            margin-right: 10px;
          }
          & > span:nth-of-type(2) {
            font-family: "youshebiaotihei";
            color: #49b28f;
            font-size: 20px;
          }
        }
        .itemBtn {
          display: flex;
          justify-content: space-between;
          .look {
            background: #fff;
            border-radius: 4px;
            color: #188ffe;
            font-family: "Alibaba-PuHuiTi-Regular";
            padding: 5px 10px;
            cursor: pointer;
            user-select: none;
          }
          .looks {
            background: #fff;
            border-radius: 4px;
            color: #49b28f;
            font-family: "Alibaba-PuHuiTi-Regular";
            padding: 5px 10px;
            cursor: pointer;
            user-select: none;
          }
        }
      }
    }
  }
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-thumb {
  background: #e5d3d4;
}
::-webkit-scrollbar-track {
  background: #f4f1f1;
}
</style>