<style>
.recruitStick .content {
  background: #fff;
  margin-top: 10px;
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.recruitContent {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.recruitContent img {
  width: 40px;
}
</style>
<template>
  <div class="recruitStick">
    <div class="content">
      <div
        style="
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div class="block">
          <div class="searchInput" style="width: 200px">
            <el-input
              style="display: inline-block; width: 170px; height: 30px"
              placeholder="请输入标题搜索"
              v-model="msg.ActivityTitle"
              size="small"
              @clear="getList"
              @keyup.enter.native="getList"
              clearable
            >
            </el-input>
            <span
              @click="getList"
              class="el-icon-search"
              style="
                color: #979dad;
                font-size: 14px;
                position: relative;
                top: 1px;
              "
            ></span>
          </div>
        </div>
        <el-button type="primary" size="small" @click="goBanMianSet"
          >版面设置</el-button
        >
      </div>
    </div>
    <div style="padding: 20px; background: #fff">
      <el-table
        :data="tableData"
        header-cell-class-name="headClass"
        style="width: 100%"
        border
      >
        <el-table-column prop="Id" label="ID" width="60"> </el-table-column>
        <el-table-column prop="ActivityTitle" label="标题" min-width="200">
        </el-table-column>
        <el-table-column prop="UserName" label="用户信息" width="200">
          <template slot-scope="scope">
            <div style="display: flex; align-items: center">
              <img
                :src="scope.row.Photo"
                style="width: 35px; height: 35px; border-radius: 50%"
              />
              <span style="display: inline-block; margin-left: 5px">{{
                scope.row.UserName
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ImageList" label="图片" width="80">
          <template slot-scope="scope">
            <!-- <img
              v-for="(item, index) in scope.row.ImageList"
              style="width: 50px"
              :key="index"
              :src="item"
            /> -->
            <img style="width: 50px" :src="scope.row.ImageList[0]" />
          </template>
        </el-table-column>
        <el-table-column prop="DianZanNum" label="点赞数" width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.IsTieZi === 1">{{ scope.row.DianZanNum }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="ReplyNum" label="回复数量" width="80">
        </el-table-column>
        <el-table-column prop="EnrollNum" label="报名人数" width="80">
          <template slot-scope="scope">
            <div v-if="scope.row.IsTieZi === 0">{{ scope.row.EnrollNum }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="EnrollNum" label="是否开启报名" width="120">
          <template slot-scope="scope">
            <span
              v-if="scope.row.IsOpenEnroll == 1 && scope.row.IsTieZi === 0"
              style="color: green"
              >是</span
            >
            <span
              v-if="scope.row.IsOpenEnroll == 2 && scope.row.IsTieZi === 0"
              style="color: red"
              >否</span
            >
          </template>
        </el-table-column>
        <el-table-column label="标签" width="70">
          <template slot-scope="scope" v-if="scope.row.Label">
            <el-tag v-if="scope.row.IsTieZi === 0">
              {{ scope.row.Label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="活动时间" width="220">
          <template slot-scope="scope">
            <div v-if="scope.row.IsTieZi === 0">
              开始时间：{{ scope.row.StartTime }}
            </div>
            <div v-if="scope.row.IsTieZi === 0">
              结束时间：{{ scope.row.EndTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="ManNum" label="男数量" width="70">
          <template slot-scope="scope">
            <div v-if="scope.row.IsTieZi === 0">
              {{ scope.row.ManNum }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="WoManNum" label="女数量" width="70">
          <template slot-scope="scope">
            <div v-if="scope.row.IsTieZi === 0">
              {{ scope.row.WoManNum }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Deadline" label="截止报名日期" width="150">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="查看详情"
              placement="top"
            >
              <img
                src="../../assets/img/userman/icon-show.png"
                alt=""
                class="imgstyle"
                @click="goDetail(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="报名列表"
              placement="top"
            >
              <img
                src="../../assets/img/userman/order.png"
                alt=""
                class="imgstyle"
                @click="goorderList(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <img
                src="../../assets/img/setup/del.png"
                alt=""
                class="imgstyle"
                @click="delete_b(scope.row)"
              />
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑评价"
              placement="top"
            >
              <img
                src="../../assets/img/userman/add_remark.png"
                alt=""
                class="imgstyle"
                @click="jumpPage('customerActiveEvaluation', scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align: right"
        background
        @current-change="handleCurrentChange"
        :page-size="msg.pageSize"
        layout="prev, pager, next"
        :current-page.sync="msg.pageIndex"
        :total="count"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      msg: {
        pageIndex: 1,
        pageSize: 20,
        ForumId: 0,
        ActivityTitle: "",
      },
      tableData: [],
    };
  },
  created() {},
  mounted() {
    if (this.$route.query.Id) {
      this.msg.ForumId = this.$route.query.Id;
    }
    this.getList();
  },
  methods: {
    getList() {
      this.apipost("/api/Miai/GetActivityPageList", this.msg, (res) => {
        if (res.data.resultCode == 1) {
          this.count = res.data.data.pageCount;
          this.tableData = res.data.data.pageData;
        } else {
          this.Error(res.data.message);
        }
      });
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    //删除帖子
    delete_b(item) {
      let that = this;
      that
        .$confirm("是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let msg = {
            ActivityId: item.Id,
          };
          this.apipost("/api/Miai/DelActivityInfo", msg, (res) => {
            if (res.data.resultCode == 1) {
              this.getList();
            } else {
              this.Error(res.data.message);
            }
          });
        })
        .catch(() => {});
    },
    //招募贴报名列表
    goorderList(item) {
      this.$router.push({
        name: "registrationList",
        query: {
          Id: item.Id,
          blank: "y",
        },
      });
    },
    //查看详情
    goDetail(item) {
      this.$router.push({
        name: "activityInfo",
        query: {
          Id: item.Id,
          blank: "y",
        },
      });
    },
    //去版面设置
    goBanMianSet() {
      this.$router.push({
        path: "/PPPlusStyle",
      });
    },
    jumpPage(url, data) {
      this.$router.push({
        path: url,
        query: {
          data: data,
        },
      });
    },
  },
};
</script>
