<style>
.activityMain {
  background: #fff;
  width: 740px;
  min-height: 500px;
  margin-top: 10px;
}

.activityTitle {
  font-size: 16px;
  font-weight: 400;
  color: #000;
}

.activityContent {
  font-size: 14px;
  line-height: 24px;
  color: #333;
  margin: 20px 0;
}
.activityContent img {
  width: 100% !important;
  height: 100% !important;
}

.activeImgContent {
  width: 100%;
}

.activeImgContent img {
  max-width: 100%;
}

.activityFlex {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #e1e4e6;
  position: relative;
}

.aImg {
  width: 88px;
  height: 88px;
  position: relative;
}

.aUserName {
  margin: 5px 0;
  color: #2d64b3;
  text-align: center;
}

.active_NameLeft {
  flex-shrink: 0;
  margin-right: 20px;
}

.activeComment {
  width: 100%;
  background-color: #f7f8fa;
  margin-top: 10px;
  padding: 15px;
}

.activeComList {
  display: flex;
  padding-bottom: 10px;
  border-bottom: 1px #d7d7d7 dotted;
  display: flex;
  margin-bottom: 10px;
  position: relative;
}

.compentImg {
  width: 32px;
  height: 32px;
  padding: 1px;
  border: 1px solid #ccc;
  flex-shrink: 0;
}

.compentRight {
  color: #333;
  font-size: 14px;
  line-height: 20px;
  margin-left: 10px;
  width: 100%;
}

.compentName {
  color: #2d64b3;
}

.commonDate {
  font-size: 12px;
  color: #999;
}

.activeDel {
  width: 25px;
  position: absolute;
  right: -8px;
  top: -8px;
  display: none;
  cursor: pointer;
}

.compentDel {
  width: 25px;
  position: absolute;
  right: 7px;
  top: 4px;
  display: none;
  cursor: pointer;
}

.activeDel img,
.compentDel img {
  width: 100%;
}

.activityFlex:hover .compentDel {
  display: block;
}

.activeComList:hover .activeDel {
  display: block;
}

.activeLouzhu {
  position: absolute;
  right: 0;
  top: 0;
}

.showMoreCompent {
  width: 100%;
  text-align: right;
  color: #333;
  font-size: 13px;
  margin-top: 15px;
  color: #2d64b3;
}

.activeInfoMain {
  width: 100%;
  background-color: #f7f8fa;
  margin-top: 10px;
  padding: 15px;
  border-radius: 10px;
  font-size: 14px;
  color: #333;
}

.activeSpace {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.active_LeftTitle {
  width: 100px;
  text-align: right;
}

.activeRightCon {
  width: 140px;
  text-align: left;
}
</style>
<template>
  <div class="activityInfo">
    <div class="head-title">
      <span @click="CommonJump('recruitStick')" class="blue point">招募贴</span>
      / 招募贴详情
    </div>
    <div class="activityMain">
      <div class="activityFlex">
        <div class="active_NameLeft">
          <div class="aImg">
            <img style="width: 100%; height: 100%" :src="dataList.Photo" />
            <img
              src="../../assets/img/userman/louzhu.png"
              class="activeLouzhu"
              alt=""
            />
          </div>
          <div class="aUserName">{{ dataList.UserName }}</div>
        </div>
        <div style="width: 600px">
          <div class="activityTitle">
            <template v-if="labelArr && labelArr.length > 0">
              <el-tag v-for="(tag, index) in labelArr" size="mini" :key="index">
                {{ tag }}
              </el-tag>
            </template>
            <span style="margin-left: 5px">{{ dataList.ActivityTitle }}</span>
          </div>
          <div class="activityContent" v-html="dataList.Content"></div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
            "
          >
            <div class="commonDate">回复数：{{ dataList.ReplyNum }}</div>
            <div class="commonDate">{{ dataList.CreateDate }}</div>
          </div>
          <div
            class="activeImgContent"
            v-for="(item, index) in dataList.ImageList"
            :key="index"
          >
            <img :src="item" alt="" />
          </div>
          <div class="activeInfoMain" v-if="dataList.IsTieZi === 0">
            <div class="activeSpace">
              <div style="display: flex">
                <div class="active_LeftTitle">是否开启报名：</div>
                <div class="activeRightCon">
                  {{ dataList.IsOpenEnroll == 1 ? "是" : "否" }}
                </div>
              </div>
              <div style="display: flex">
                <div class="active_LeftTitle">截止报名日期：</div>
                <div class="activeRightCon">{{ dataList.Deadline }}</div>
              </div>
            </div>
            <div class="activeSpace">
              <div style="display: flex">
                <div class="active_LeftTitle">活动开始时间：</div>
                <div class="activeRightCon">{{ dataList.StartTime }}</div>
              </div>
              <div style="display: flex">
                <div class="active_LeftTitle">活动结束时间：</div>
                <div class="activeRightCon">{{ dataList.EndTime }}</div>
              </div>
            </div>
            <div class="activeSpace">
              <div style="display: flex" v-if="dataList.Distinguish == 1">
                <div class="active_LeftTitle">总数量：</div>
                <div class="activeRightCon">{{ dataList.ManNum }}</div>
              </div>
              <div style="display: flex" v-if="dataList.Distinguish == 0">
                <div class="active_LeftTitle">男数量：</div>
                <div class="activeRightCon">{{ dataList.ManNum }}</div>
              </div>
              <div style="display: flex" v-if="dataList.Distinguish == 0">
                <div class="active_LeftTitle">女数量：</div>
                <div class="activeRightCon">{{ dataList.WoManNum }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="activityFlex"
          v-for="(subItem, cindex) in compentList"
          :key="cindex"
        >
          <div class="active_NameLeft">
            <div class="aImg">
              <img style="width: 100%; height: 100%" :src="subItem.Photo" />
              <img
                src="../../assets/img/userman/louzhu.png"
                v-if="subItem.UserId == dataList.UserId"
                class="activeLouzhu"
                alt=""
              />
            </div>
            <div class="aUserName">{{ subItem.UserName }}</div>
          </div>
          <div style="width: 100%">
            <div class="activityContent" style="margin-top: 0">
              {{ subItem.Content }}
            </div>
            <div style="text-align: right; margin-bottom: 10px">
              <span class="commonDate">{{ subItem.CreateDate }}</span>
            </div>
            <div
              class="activeImgContent"
              v-for="(item, index) in subItem.ImageList"
              :key="index"
            >
              <img :src="item" alt="" />
            </div>
            <div class="activeComment" v-if="subItem.ReplyNum > 0">
              <div
                class="activeComList"
                v-for="(cItem, cindex) in subItem.ReplyList"
                :key="cindex"
              >
                <div class="compentImg">
                  <img
                    style="width: 100%; height: 100%"
                    :src="cItem.Photo"
                    alt=""
                  />
                </div>
                <div class="compentRight">
                  <div>
                    <span class="compentName">{{ cItem.UserName }}：</span
                    >{{ cItem.Content }}
                  </div>
                  <div style="text-align: right">
                    <span class="commonDate">{{ cItem.CreateDate }}</span>
                  </div>
                </div>
                <div class="activeDel" @click="delCompent(cItem)">
                  <img src="../../assets/img/userman/del.png" alt="" />
                </div>
              </div>
              <div class="showMoreCompent" v-if="subItem.ReplyNum > 4">
                <span style="cursor: pointer" @click="getCompentItem(subItem)"
                  >查看更多{{ subItem.ReplyNum }}条评论</span
                >
              </div>
            </div>
          </div>
          <div class="compentDel" @click="delCompent(subItem)">
            <img src="../../assets/img/userman/del.png" alt="" />
          </div>
        </div>
        <el-pagination
          style="text-align: center"
          background
          @current-change="handleCurrentChange"
          :page-size="comMsg.pageSize"
          layout="prev, pager, next"
          :total="pageCount"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog title="查看评论" :visible.sync="showCompoent" width="800px">
      <div class="activityFlex" style="max-height: 500px; overflow: scroll">
        <div class="active_NameLeft">
          <div class="aImg">
            <img style="width: 100%; height: 100%" :src="replyObj.Photo" />
            <img
              src="../../assets/img/userman/louzhu.png"
              v-if="replyObj.UserId == dataList.UserId"
              class="activeLouzhu"
              alt=""
            />
          </div>
          <div class="aUserName">{{ replyObj.UserName }}</div>
        </div>
        <div style="width: 100%">
          <div class="activityContent" style="margin-top: 0">
            {{ replyObj.Content }}
          </div>
          <div style="text-align: right; margin-bottom: 10px">
            <span class="commonDate">{{ replyObj.CreateDate }}</span>
          </div>
          <div
            class="activeImgContent"
            v-if="replyObj.ImageList.length > 0"
            v-for="(Iitem, Iindex) in replyObj.ImageList"
            :key="Iindex"
          >
            <img :src="Iitem" alt="" />
          </div>
          <div class="activeComment">
            <div
              class="activeComList"
              v-for="(rItem, rIndex) in replayList"
              :key="rIndex"
            >
              <div class="compentImg">
                <img
                  style="width: 100%; height: 100%"
                  :src="rItem.Photo"
                  alt=""
                />
              </div>
              <div class="compentRight">
                <div>
                  <span class="compentName">{{ rItem.UserName }}：</span>
                  {{ rItem.Content }}
                </div>
                <div style="text-align: right">
                  <span class="commonDate">{{ rItem.CreateDate }}</span>
                </div>
              </div>
              <div class="activeDel" @click="delCompent(rItem)">
                <img src="../../assets/img/userman/del.png" alt="" />
              </div>
            </div>
            <el-pagination
              style="text-align: center; padding: 0; margin-top: 15px"
              background
              @current-change="handleCurrentReplay"
              :page-size="replayMsg.pageSize"
              layout="prev, pager, next"
              :total="replayCount"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" size="small" @click="showCompoent = false"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: {
        ActivityId: 0,
      },
      comMsg: {
        pageIndex: 1,
        pageSize: 20,
        ActivityId: 0,
      },
      replayMsg: {
        pageIndex: 1,
        pageSize: 20,
        ParentId: 0,
      },
      dataList: {},
      compentList: [],
      pageCount: 0,
      replayCount: 0,
      replayList: [],
      showCompoent: false, //显示评论弹窗
      replyObj: {},
      labelArr: [], //标签数组
    };
  },
  created() {},
  mounted() {
    if (this.$route.query.Id) {
      this.msg.ActivityId = this.$route.query.Id;
      this.comMsg.ActivityId = this.$route.query.Id;
    }
    this.getList();
    this.getCommentList();
  },
  methods: {
    //获取帖子头部数据
    getList() {
      this.apipost("/api/Miai/GetActivityInfo", this.msg, (res) => {
        if (res.data.resultCode == 1) {
          this.dataList = res.data.data;
          this.labelArr = [];
          if (this.dataList.Label) {
            this.labelArr.push(this.dataList.Label);
          }
        } else {
          this.Error(res.data.message);
        }
      });
    },
    //获取评论
    getCommentList() {
      this.apipost(
        "/api/Miai/GetActivityDiscussPageList",
        this.comMsg,
        (res) => {
          if (res.data.resultCode == 1) {
            this.pageCount = res.data.data.pageCount;
            this.compentList = res.data.data.pageData;
          } else {
            this.Error(res.data.message);
          }
        }
      );
    },
    //评论翻页
    handleCurrentChange(val) {
      this.comMsg.pageIndex = val;
      this.getCommentList();
    },
    //回复翻页
    handleCurrentReplay(val) {
      this.replayMsg.pageIndex = val;
      this.getSecondReply();
    },
    //获取二级回复
    getSecondReply() {
      this.apipost(
        "/api/Miai/GetActivityReplyPageList",
        this.replayMsg,
        (res) => {
          if (res.data.resultCode == 1) {
            this.replayCount = res.data.data.pageCount;
            this.replayList = res.data.data.pageData;
          } else {
            this.Error(res.data.message);
          }
        }
      );
    },
    //删除评论
    delCompent(item) {
      let that = this;
      that
        .$confirm("是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let msg = {
            DiscussId: item.Id,
          };
          this.apipost("/api/Miai/DelActivityDiscussInfo", msg, (res) => {
            if (res.data.resultCode == 1) {
              this.getCommentList();
              this.getSecondReply();
            } else {
              this.Error(res.data.message);
            }
          });
        })
        .catch(() => {});
    },
    //点击更多评论
    getCompentItem(item) {
      this.showCompoent = true;
      this.replyObj = item;
      this.replayMsg.ParentId = item.Id;
      this.getSecondReply();
    },
  },
};
</script>
