<!--社团风采-->
<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="标题" prop="theme">
        <el-input
          v-model="queryParams.theme"
          placeholder="请输入标题"
          clearable
        />
      </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-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          >删除
        </el-button>
      </el-col>
    </el-row>

    <el-table
      v-loading="loading"
      ref="table"
      :data="picList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index" width="80" />
      <el-table-column label="活动主题" align="center" prop="theme" />
      <el-table-column label="附件" align="center" prop="file">
        <template slot-scope="scope">
          <el-carousel trigger="click" height="150px" :interval="4000">
            <el-carousel-item
              v-for="(item, index) in scope.row.file.split(',')"
              :key="index"
            >
              <el-image
                :src="pev + item"
                style="width: 150px; height: 130px"
                :preview-src-list="[pev + item]"
              >
              </el-image>
            </el-carousel-item>
          </el-carousel>
        </template>
      </el-table-column>
      <el-table-column label="是否发布" align="center" prop="isfb">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isfb"
            active-value="1"
            inactive-value="2"
            @change="handleIsShow(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <!-- 未发布可以修改删除 -->
          <div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              >删除
            </el-button>
          </div>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleCheck(scope.row)"
            >查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改社团主题对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="90px"
        style="width: 80%; margin: auto"
      >
        <el-form-item
          prop="file"
          style="
            display: flex;
            text-align: center;
            justify-content: center;
            transform: translateX(-30px);
          "
        >
          <el-upload
            multiple
            v-loading="uploadLoading"
            class="avatar-uploader"
            :action="uploadFileUrl"
            accept="image/*"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <div v-if="form.file.length > 0">
              <img
                v-for="(item, index) in form.file"
                :key="index"
                :src="pev + item"
                class="avatar"
              />
            </div>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动主题:" prop="theme">
              <el-input
                :readonly="check == true ? true : false"
                v-model="form.theme"
                placeholder="请输入活动主题"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import picAvatar from "@/views/smartSchool/schoolManage/introduce/schoolInfo/profile/picAvatar";
import { changeUserStatus } from "@/api/system/user";
import { uploadImage as commonUpload } from "@/api/common";
import { ExportType, TEXT_SIZE } from "@/enums/common";
import {
  getCommunityInfo, // 查询社团信息列表
  listCommunityInfo, // 查询社团详细信息列表
  editCommunityInfo, // 修改社团信息
  isCommunityFb, // 新增社团信息
  delCommunityInfo, // 删除社团信息
  addCommunityInfo, //新增社团信息
} from "@/api/smartSchool/MassOrganization/communityStyle";

export default {
  name: "communityStyle",
  components: { picAvatar },
  data() {
    return {
      //图片上传列表
      uploadList: [],
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      pev: process.env.VUE_APP_BASE_API,
      // 输入框字数限制
      TEXT_SIZE,
      srcList: [],
      //获取子组件传来的信息
      pic: [],
      // 图片路径
      imageUrl: undefined,
      // 图片上传遮罩层
      uploadLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 园区照片表格数据
      picList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        cis: "",
        theme: "",
      },
      // 表单参数
      form: {
        id: "",
        theme: "",
        file: [],
      },
      // 表单校验
      rules: {
        theme: [
          {
            required: true,
            message: "请输入相片名称",
            trigger: "blur",
          },
        ],
        seqencing: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
      //查看状态
      check: false,
      file: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      this.picList = [];
      const params = {
        cid: this.$route.query.id,
        theme: this.queryParams.theme,
      };
      getCommunityInfo(params).then((response) => {
        this.picList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        params: {},
        id: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        delFlag: null,
        theme: null,
        picUrl: null,
        seqencing: null,
        isShow: 0,
        file: [],
      };
      this.imageUrl = "";
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.throttle(() => {
        this.queryParams.pageNum = 1;
        this.getList();
      });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.uploadList = [];
      this.check = false;
      this.reset();
      this.open = true;
      this.title = "新增社团风采";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const ids = row.id || this.ids;
      this.uploadList = [];
      this.form.file = [];
      listCommunityInfo(ids).then((response) => {
        this.form = response.data;
        this.form.file = response.data.file.split(",");
        this.imageUrl = this.pev + this.form.picUrl;
        this.open = true;
        this.title = "修改园区照片";
      });
    },
    /** 查看按钮操作 */
    handleCheck(row) {
      this.uploadList = [];
      this.form.file = [];
      this.check = true;
      this.open = true;
      const ids = row.id || this.ids;
      listCommunityInfo(ids).then((response) => {
        this.form = response.data;
        this.form.file = response.data.file.split(",");
        this.open = true;
      });
      this.title = "查看社团风采";
    },
    // 上传成功回调
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        this.uploadList.push(res.fileName);
        this.form.file = this.uploadList;
      }
    },
    // 上传前格式和图片大小限制
    beforeAvatarUpload(file) {
      const type =
        file.type === "image/jpeg" ||
        "image/jpg" ||
        "image/webp" ||
        "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!type) {
        this.$message.error("图片格式不正确!(只能包含jpg，png，webp，JPEG)");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return type && isLt2M;
    },
    //删除图片
    handleRemove(file, fileList) {
      this.imageUrl = "";
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            // 修改
            const params = {
              id: this.form.id,
              theme: this.form.theme,
              file: this.uploadList.toString(),
            };
            editCommunityInfo(params)
              .then((response) => {
                this.getList();
                this.$message.success("修改成功");
                this.open = false;
              })
              .catch((err) => {});
          } else {
            // 新增
            const params = {
              cid: this.$route.query.id,
              theme: this.form.theme,
              file: this.uploadList.toString(),
            };
            addCommunityInfo(params)
              .then((response) => {
                this.getList();
                this.$message.success("新增成功");
                this.open = false;
              })

              .catch((err) => {});
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      if (ids) {
        this.$modal
          .confirm(
            `是否确认删除选中的${
              Object.hasOwnProperty.call(ids, "length") ? ids.length : 1
            }条数据？`
          )
          .then(() => {
            this.$modal.loading("正在处理数据，请稍等...");
            return delCommunityInfo(ids);
          })
          .then(() => {
            this.$modal.closeLoading();
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {
            this.$modal.closeLoading();
          });
      }
    },

    /** 是否发布 */
    handleIsShow(row) {
      const data = {
        id: row.id,
      };
      this.$modal
        .confirm(row.isShow === "1" ? "是否确认发布？" : "是否取消发布？")
        .then(() => {
          this.$modal.loading("正在修改状态，请稍等...");
          isCommunityFb(data, row.isShow)
            .then((response) => {
              this.$modal.closeLoading();
              this.$modal.msgSuccess("修改成功");
              this.getList();
            })
            .catch((error) => {
              this.$modal.closeLoading();
              row.isShow = row.isShow === "2" ? "1" : "2";
            });
        })
        .catch(() => {
          row.isShow = row.isShow === "2" ? "1" : "2";
        });
    },
  },
};
</script>
<style scoped>
.avatar,
.avatar-uploader,
.el-icon-plus {
  width: 650px;
}
</style>
