<template>
  <div class="app-container">
    <el-form
      :model="queryForm"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="80px"
    >
      <el-form-item prop="name" label="社团名称">
        <el-input v-model="queryForm.name" placeholder="社团名称"></el-input>
      </el-form-item>
      <el-form-item prop="teachers" label="指导教师">
        <el-input
          v-model="queryForm.teachers"
          placeholder="指导教师"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd()"
          >新增</el-button
        >
      </el-col>
    </el-row>
    <!-- 列表 -->
    <div class="listBlock">
      <div class="itemBlock" v-for="(task, index) in tasks" :key="index">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div style="width: 50%">
            <!-- 任务详细信息 -->
            <div class="task-info">
              <div class="task-name">
                {{ task.name }}
              </div>
            </div>
            <div class="task-level">
              <span> {{ task.teachers }}</span>
            </div>
            <div class="task-time">
              <div>
                {{ task.aim }}
              </div>
            </div>
          </div>
          <div style="width: 50%">
            <!-- 成员人数 -->
            <div class="task-count">
              <div class="count">{{ task.num }}</div>
              <div class="sun">成员人数</div>
            </div>
          </div>
        </div>

        <!-- 按钮 -->
        <div class="task-buttons">
          <el-button
            style="margin-left: 10px"
            size="mini"
            type="danger"
            round
            @click="handleDelete(task)"
            >删除
          </el-button>
          <el-button
            type="success"
            size="small"
            round
            @click="clubRegistrationReview(task.id, task.teachers)"
            >社团报名审核</el-button
          >
          <el-button
            type="info"
            size="small"
            round
            @click="clubActivityRecord(task.id, task.name)"
            >社团活动记录</el-button
          >
          <el-button
            type="warning"
            size="small"
            round
            @click="memberManagement(task.id)"
            >成员管理
          </el-button>
          <el-button
            class="purpleBtn"
            size="small"
            round
            type="primary"
            @click="communityStyle(task.id, task.teachers)"
            >社团风采
          </el-button>
          <el-button
            type="primary"
            size="small"
            round
            @click="basicInformation(task.id, task.teachers)"
            >基础信息管理
          </el-button>
        </div>
      </div>
    </div>
    <!-- 新增/修改弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <div>
          <el-form-item label="社团名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入社团名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="指导教师" prop="teachers">
            <el-select
              style="width: 100%"
              multiple
              v-model="form.teachers"
              filterable
              placeholder="请选择指导教师"
              @change="changeTeacher"
            >
              <el-option
                v-for="item in teacherInfo"
                :key="item.id"
                :label="item.teacherName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="社团宗旨" prop="aim">
            <el-input
              type="textarea"
              :rows="4"
              v-model="form.aim"
              placeholder="请输入社团宗旨"
            ></el-input>
          </el-form-item>
          <el-form-item label="社团简介" prop="intro">
            <el-input
              type="textarea"
              :rows="4"
              v-model="form.intro"
              placeholder="请输入社团简介"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCommunityInfo, // 查询社团信息列表
  listCommunityInfo, // 查询社团详细信息列表
  editCommunityInfo, // 修改社团信息
  addCommunityInfo, // 新增社团信息
  delCommunityInfo, // 删除社团信息
  getTeachers, //获取全校教师
} from "@/api/smartSchool/MassOrganization/basicInfo";

export default {
  name: "basicInformationManagement",
  data() {
    return {
      tasks: [],
      queryForm: {
        name: "",
        teachers: "",
      },

      form: {
        params: {},
        id: "",
        createBy: "",
        createTime: "",
        updateBy: "",
        updateTime: "",
        delFlag: "",
        name: "",
        teachers: [],
        teachersId: [],
        aim: "",
        intro: "",
        num: null,
      },
      //新增弹窗
      open: false,
      rules: {},
      // 加载遮罩
      loading: true,
      // 记录条数
      total: 0,
      title: "",
      // 详情
      look: false,
      // 日期范围
      dateRange: [],
      teacherInfo: [], //教师下拉列表
    };
  },
  created() {
    this.getList(), //查询列表
      this.getTeachersInfo(); //教师下拉列表
  },
  methods: {
    /** 获取列表数据 */
    getList() {
      getCommunityInfo(this.queryForm)
        .then((response) => {
          //   console.log("response", response);
          this.tasks = response.rows;
          this.total = response.total;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 教师下拉列表
    getTeachersInfo() {
      getTeachers({}).then((res) => {
        // console.log("教师", res);
        this.teacherInfo = res.rows;
      });
    },
    // 查询教师姓名、id
    changeTeacher(value) {
      //   //   console.log("value", value);
      //   this.teachersId = []; //初始化数据
      //   this.teachers = []; //初始化数据
      //   for (let i = 0; i <= value.length - 1; i++) {
      //     this.teacherInfo.find((item) => {
      //       //这里的options就是数据源
      //       if (item.teacherCode == value[i]) {
      //         this.teachersId.push(item.teacherCode); //这里的value我改成了id
      //         this.teachers.push(item.teacherName); //这里的label我改成了roleName
      //       }
      //     });
      //   }
      //   console.log("this.teachersId ", this.teachersId);
      //   console.log("this.teachers ", this.teachers);

      //   console.log("value", value);
      this.teachersId = []; //初始化数据
      this.teachers = []; //初始化数据
      for (let i = 0; i <= value.length - 1; i++) {
        this.teacherInfo.find((item) => {
          //这里的options就是数据源
          if (item.id == value[i]) {
            this.teachersId.push(item.id); //这里的value我改成了id
            this.teachers.push(item.teacherName); //这里的label我改成了roleName
          }
        });
      }
      //   console.log("this.teachersId ", this.teachersId);
      //   console.log("this.teachers ", this.teachers);
    },
    //基础信息管理
    basicInformation(row) {
      // console.log('bbb', row)
      this.reset();
      listCommunityInfo(row).then((response) => {
        // console.log(response, '基础信息管理')
        this.form = response.data;
        // this.form.teachers = response.data.teachers
        this.form.teachers = this.form.teachers.split(",");
        // console.log(this.form.teachers, 'this.form.teachers')
        // console.log(this.form, 'this.form')
        this.open = true;
        this.title = "社团基础信息管理";
      });
    },
    //新增按钮操作
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增社团基础信息";
    },
    // 社团报名审核
    clubRegistrationReview(id) {
      this.$router.push({
        path: "/massOrganization/clubRegistrationReview",
        query: {
          id,
        },
      });
    },
    // 社团活动记录
    clubActivityRecord(id, name) {
      this.$router.push({
        path: "/massOrganization/clubActivityRecord",
        query: {
          id,
          name,
        },
      });
    },
    //成员管理
    memberManagement(id) {
      this.$router.push({
        path: "/massOrganization/memberManagement",
        query: {
          id,
        },
      });
    },
    //社团风采
    communityStyle(id, teachers) {
      //   console.log("id, teachers", id, teachers);
      this.$router.push({
        path: "/massOrganization/communityStyle",
        query: {
          id,
          teachers,
        },
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 搜索按钮
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 提交表单
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            // 修改
            const params = {
              id: this.form.id,
              name: this.form.name,
              teachers: this.teachers.toString(),
              teachersId: this.teachersId.toString(),
              aim: this.form.aim,
              intro: this.form.intro,
            };
            console.log(params, "params");
            editCommunityInfo(params)
              .then((response) => {
                this.getList();
                this.$message.success("修改成功");
                this.open = false;
              })
              .catch((err) => {});
          } else {
            // 新增
            const params = {
              name: this.form.name,
              teachers: this.teachers.toString(),
              teachersId: this.teachersId.toString(),
              aim: this.form.aim,
              intro: this.form.intro,
            };
            // console.log(params, "params");
            addCommunityInfo(params)
              .then((response) => {
                this.getList();
                this.$message.success("新增成功");
                this.open = false;
              })
              .catch((err) => {});
          }
        }
      });
    },

    // 删除按钮
    handleDelete(row) {
      const ids = row.id || this.idEas;
      this.$modal
        .confirm("是否确认删除？")
        .then(function () {
          return delCommunityInfo(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 重置表单
    reset() {
      // 重置对话框表单
      this.form = {
        name: "",
        teachers: "",
      };
      this.dateRange = [];
      this.resetForm("form");
    },
  },
};
</script>

<style lang="scss" scoped>
.listBlock {
  //display: flex;
  //flex-direction: row;
  //align-items: flex-start;
  //flex-wrap: wrap;
  width: 100%;
}

.itemBlock {
  width: 99%;
  padding: 15px 20px 5px 20px;
  margin: 0 1.5% 1.5% 0;
  border-radius: 20px;
  box-shadow: 1px 2px 12px 1px rgba(0, 0, 0, 0.1);
}

.listBlock .itemBlock:nth-child(2n) {
  margin-right: 0px !important;
}

.purpleBtn {
  color: #ffffff;
  background-color: #b886f8;
  border: 1px solid #b886f8;
}

.rowBtn {
  color: #ffffff;
  background-color: #d3c1b1;
  border: 1px solid #d3c1b1;
}

.task-name {
  color: #307def;
  font-size: 45px;
  font-weight: 500;
  text-align: left;
}

.task-level {
  margin-bottom: 6px;
  color: rgba(108, 108, 108, 1);
  font-size: 13px;
  text-align: left;
}

.task-level > span {
  margin-right: 25px;
}

.task-time {
  color: rgba(108, 108, 108, 1);
  font-size: 13px;
  text-align: left;
  margin-bottom: -50px;
}

.task-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 15px;
}

.task-count {
  text-align: center;
  padding-left: 60%;
}

.task-count > .count {
  font-weight: bold;
  color: #307def;
  font-size: 45px;
}

.task-count > .sun {
  color: rgba(16, 16, 16, 1);
  font-size: 18px;
  text-align: center;
  font-weight: bold;
}

.task-buttons {
  text-align: left;
  margin-top: 20px;
  display: flex;
  flex-direction: row-reverse;
}

.task-buttons button {
  margin-bottom: 10px;
}

.el-card {
  margin-bottom: 20px;
}
</style>
