<template>
  <!-- 活动管理 -->
  <div class="activity_manage">
    <el-table :data="activityData" style="width: 100%" :header-cell-style="changeHeader">
      <el-table-column label="活动名称" width="193">
        <template slot-scope="scope">
          <div class="cell_color">{{scope.row.name}}</div>
        </template>
      </el-table-column>
      <el-table-column label="活动介绍" width="193">
        <template slot-scope="scope">
          <div class="cell_color cell_wrap">{{scope.row.description}}</div>
        </template>
      </el-table-column>
      <el-table-column label="活动地点" width="193">
        <template slot-scope="scope">
          <div class="cell_color">{{scope.row.address}}</div>
        </template>
      </el-table-column>
      <el-table-column label="活动时间" align="center" width="193">
        <template slot-scope="scope">
          <div class="cell_color">{{scope.row.starttime}}</div>
          <div class="cell_color">{{scope.row.endtime}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="224px">
        <template slot-scope="scope">
          <div
            v-show="groupId == 1"
            class="operation"
            @click="activeOperate(scope.row)"
            :class="{sign_up:scope.row.button_status == 2,input_exp:scope.row.button_status == 3}"
          >{{scope.row.button_status == 1 ?"查看活动":scope.row.button_status == 2?"已报名":scope.row.button_status == 4?"查看心得":"录入心得"}}</div>
          <div
            v-show="groupId == 2"
            class="operation"
            @click="activeOperate(scope.row)"
          >{{scope.row.status==0?"未参与":scope.row.status==1?"已参与":scope.row.button_status == 4?"查看心得":"查看活动"}}</div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看活动弹窗 -->
    <ActiveDialog :activeVisible.sync="activeVisible" v-if="activeVisible" :activityId="activityId"></ActiveDialog>
    <!-- 录入心得弹窗 -->
    <ExpDialog :expVisible.sync="expVisible" v-if="expVisible" :activityId="activityId"></ExpDialog>
    <!-- 录入心得后弹窗 -->
    <ExpedDialog :expedVisible.sync="expedVisible" v-if="expedVisible" :activityId="activityId"></ExpedDialog>
  </div>
</template>
<script>
// 查看活动弹窗
import ActiveDialog from "./ActiveDialog";
// 录入心得弹窗
import ExpDialog from "./ExpDialog";
// 录入心得后弹窗
import ExpedDialog from "./ExpedDialog";
import { post } from "@/api/http";
export default {
  data() {
    return {
      // 查看活动弹窗
      activeVisible: false,
      activityId: "",
      // 录入心得弹窗
      expVisible: false,
      // 录入心得后弹窗
      expedVisible: false,
      activityData: [],
      id: "",
      // 角色判断
      groupId: ""
    };
  },
  methods: {
    // 表头样式
    changeHeader({ row, rowIndex }) {
      if (rowIndex == 0) {
        return "background-color:#f1f1f1;color:#5B5E63!important;font-weight:400";
      }
    },
    activeOperate(row) {
      this.activityId = row.id;
      if (this.groupId == 1) {
        if (row.button_status == 1) {
          // 查看活动
          this.activeVisible = true;
        } else if (row.button_status == 3) {
          // 录入心得
          this.expVisible = true;
        } else if (row.button_status == 4) {
          this.expedVisible = true;
        }
      } else if (this.groupId == 2) {
        if (row.status == 2) {
          this.expedVisible = true;
        }
      }
    },
    // 学生活动列表
    getActivityList() {
      let url = "/api/activity/getActivityList";
      post(url).then(res => {
        this.activityData = res.activity_list;
      });
    }
  },
  components: {
    ActiveDialog,
    ExpDialog,
    ExpedDialog
  },
  mounted() {
    this.groupId = localStorage.getItem("groupId");
    this.getActivityList();
  }
};
</script>
<style scoped>
@import "../../../../style/personal.css";

.operation {
  margin: 0 0 0 20px;
}

/* 已报名 */
.sign_up {
  background-color: #a4c7ff;
  border-color: #a4c7ff;
}

.input_exp {
  background-color: #fff;
  color: #409eff;
}
</style>