<template>
  <div style="margin-top: 20px; margin-left: 20px">
    <el-form
      ref="queryForm"
      :inline="true"
      :model="queryForm"
      class="demo-form-inline"
    >
      <el-form-item label="任务名称:">
        <el-input
          v-model="queryForm.noticeName"
          placeholder="请输入任务名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="任务状态:">
        <el-select v-model="queryForm.noticeState" placeholder="请选择任务状态">
          <el-option label="未发布" value="1"></el-option>
          <el-option label="已发布" value="2"></el-option>
          <el-option label="已结束" value="7"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <el-button
          icon="el-icon-plus"
          size="mini"
          type="success"
          @click="handleAdd"
          >新增</el-button
        >
        <!--        <el-button size="small" type="warning">修改</el-button>-->
        <!--      <el-button size="small" type="primary">查看</el-button>-->
        <el-button
          icon="el-icon-delete"
          size="mini"
          type="danger"
          @click="handleDelete"
          >删除</el-button
        >
      </el-form-item>
    </el-form>
    <div></div>
    <el-table
      style="margin-top: 20px"
      border
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column
        label="范围"
        align="center"
        prop="noticeRange"
        min-width="100"
      />
      <el-table-column
        label="任务名称"
        align="center"
        prop="noticeName"
        min-width="220"
      />
      <el-table-column
        label="开始时间"
        align="center"
        min-width="100"
        prop="startTime"
      />
      <el-table-column
        label="结束时间"
        align="center"
        min-width="100"
        prop="endTime"
      />
      <el-table-column
        label="教师人数"
        align="center"
        min-width="100"
        prop="total"
      />
      <el-table-column
        label="填写人数"
        align="center"
        min-width="100"
        prop="txtotal"
      />
      <el-table-column
        label="级部确认"
        align="center"
        min-width="100"
        prop="tgtotal"
      />
      <el-table-column
        label="状态"
        align="center"
        min-width="100"
        prop="noticeState"
      >
        <template slot-scope="{ row }">
          {{
            row.noticeState == 1
              ? "未发布"
              : row.noticeState == 2
              ? "已发布"
              : row.noticeState == 7
              ? "已完成"
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        min-width="280"
      >
        <template slot-scope="scope">
          <div>
            <el-button
              v-if="scope.row.noticeState == '1'"
              type="text"
              size="mini"
              @click="handleEdit(scope.row)"
              >修改
            </el-button>
            <el-button
              v-if="scope.row.noticeState == '1'"
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
              >删除
            </el-button>
            <el-button
              v-if="scope.row.noticeState == '1'"
              size="mini"
              type="text"
              @click="handlePublish(scope.row)"
              >发布
            </el-button>
          </div>
          <div>
            <el-button
              v-if="scope.row.noticeState == '2'"
              size="mini"
              type="text"
              @click="dataReceiver(scope.row)"
              >数据接收人员
            </el-button>
            <el-button
              v-if="scope.row.noticeState == '2'"
              size="mini"
              type="text"
              @click="dataMaintenance(scope.row)"
              >数据维护
            </el-button>
            <el-button
              v-if="scope.row.noticeState == '2'"
              size="mini"
              type="text"
              @click="handleExport(scope.row)"
              >导出
            </el-button>
            <el-button
              v-if="scope.row.noticeState == '2'"
              size="mini"
              type="text"
              @click="handleRevocation(scope.row)"
              >撤回
            </el-button>
            <el-button
              v-if="scope.row.noticeState == '2'"
              size="mini"
              type="text"
              @click="handleFinish(scope.row)"
              >结束
            </el-button>
          </div>
          <div>
            <el-button
              v-if="scope.row.noticeState == '7'"
              size="mini"
              type="text"
              @click="dataReceiver(scope.row)"
              >数据接收人员
            </el-button>
            <el-button
              v-if="scope.row.noticeState == '7'"
              size="mini"
              type="text"
              @click="dataInspection(scope.row)"
              >数据查看
            </el-button>
            <el-button
              v-if="scope.row.noticeState == '7'"
              size="mini"
              type="text"
              @click="handleExport(scope.row)"
              >导出
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryForm.pageNum"
      :limit.sync="queryForm.pageSize"
      @pagination="getList"
    />
    <!--弹窗-->
    <el-dialog
      v-loading="loading"
      :title="title"
      :visible.sync="dialogVisible"
      width="650px
    "
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="任务名称">
          <el-date-picker
            v-model="form.noticeYear"
            type="year"
            value-format="yyyy"
            placeholder="选择年"
          >
          </el-date-picker>
          <el-select v-model="form.noticeSemester" placeholder="请选择学期">
            <el-option label="上学期" value="上学期"></el-option>
            <el-option label="下学期" value="下学期"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="范围：">
          <el-input
            style="width: 440px"
            v-model="form.noticeRange"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间：">
          <el-date-picker
            style="width: 440px"
            v-model="form.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间：">
          <el-date-picker
            style="width: 440px"
            v-model="form.endTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span
        style="display: flex; justify-content: center"
        slot="footer"
        class="dialog-footer"
      >
        <el-button type="primary" @click="confirmDialog">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  exportList, //导出
  addTeacherNotice, //添加任务
  listTeacherNotice, // 任务列表
  infoTeaNotice, //任务详情
  updateTask, //添加修改
  infoTeacherNotice, //发布任务
  taskRetracted, //任务撤回
  taskCompleted, //任务完成
  delTaskInfo, //任务删除
  getteacherNotice, // 通知下档案查看|数据维护
  getNoticeInfo, //老师查看档案详情
  getDepInfo, //级部查看档案详情
  getFileTnfo, //查看档案详情
  syncNotice, //同步档案
  updateInfo, //教师档案修改
  delInfo, //教师档案删除
  fileSubReview, //教师档案提交审核
  fileSubApproved, //教师档案提交通过
  fileSubRejected, //教师档案提交驳回
} from "@/api/smartSchool/teacherFiles/teacherElectronicFile";
import { format } from "@/utils/activiti/myUtil.js";
import { getToken } from "@/utils/auth";
import axios from "axios";
export default {
  name: "teacherElectronicRecord",
  data() {
    return {
      selectedIds: [],
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        startTime: "",
        endTime: "",
        noticeYear: "",
        noticeSemester: "",
      },
      tableData: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //  弹窗
      dialogVisible: false,
      // 弹窗标题
      title: "",
      form: {
        noticeYear: "",
        noticeSemester: "",
        noticeRange: "全体教师",
        startTime: "",
        endTime: "",
      },
    };
  },
  created() {
    this.getList();
  },

  methods: {
    /** 查询信息列表 */
    getList() {
      listTeacherNotice(this.queryForm).then((res) => {
        console.log("res", res);
        this.tableData = res.rows;
        // this.tableData.forEach((row) => {
        //   row.startTime = format(row.startTime, "yyyy-MM-dd HH:mm:ss");
        //   row.endTime = format(row.endTime, "yyyy-MM-dd HH:mm:ss");
        // });
        this.total = res.total;
      });
    },

    //搜索按钮
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getList();
    },

    // 表单重置
    reset() {
      (this.queryForm = {
        noticeYear: "",
        noticeSemester: "",
        noticeRange: "",
        noticeState: "",
        noticeName: "",
        startTime: "",
        endTime: "",
      }),
        (this.form = {
          noticeYear: "",
          noticeSemester: "",
          noticeRange: "全体教师",
          startTime: "",
          endTime: "",
        });
      //   this.resetForm("queryForm");
    },
    //重置按钮
    resetQuery() {
      this.reset();
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    //新增按钮
    handleAdd() {
      this.reset();
      this.form.name = "2023";
      this.title = "新增任务";
      this.dialogVisible = true;
    },
    //弹窗确定按钮
    confirmDialog() {
      //   this.loading = true;
      this.$modal.loading("正在加载数据，请稍等...");
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            // 修改
            updateTask(this.form)
              .then((response) => {
                this.getList();
                this.$message.success("修改成功");
                this.dialogVisible = false;
              })
              .catch((err) => {});
          } else {
            // 新增
            addTeacherNotice(this.form)
              .then((response) => {
                this.dialogVisible = false;
                this.getList();
              })
              .then((response) => {
                this.loading = false;
                this.$message.success("新增成功");
                this.$modal.closeLoading();
              })
              .catch((err) => {});
          }
        }
      });
    },

    //修改按钮
    handleEdit(row) {
      console.log(row, "row1");
      this.title = "修改任务";
      this.dialogVisible = true;
      this.form = row;
    },
    // 删除按钮
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm("是否确认删除？")
        .then(function () {
          return delTaskInfo(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    //  发布按钮
    handlePublish(row) {
      this.$modal
        .confirm("是否发布该活动？")
        .then(function () {
          return infoTeacherNotice(row.id);
          console.log(row, "发布按钮");
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("发布成功");
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //  数据接收人员按钮
    dataReceiver(row) {
      //传值状态，如果是已结束跳过去只能查看，已发布可以新增或者删除
      console.log("row", row);
      const noticeId = row.id;
      const pageNum = this.queryForm.pageNum;
      const pageSize = this.queryForm.pageSize;
      const status = row.noticeState;
      this.$router.push({
        path: "/teachAffairAdministration/smartSchool/teachAffairAdministration/electronicRecord/dataReceiver",
        query: {
          noticeId,
          pageNum,
          pageSize,
          status,
        },
      });
    },
    //  数据维护按钮
    dataMaintenance(row) {
      console.log(row, "数据维护按钮row");
      const noticeName = row.noticeName;
      const noticeId = row.id;
      const pageNum = this.queryForm.pageNum;
      const pageSize = this.queryForm.pageSize;
      const status = row.noticeState;
      //传值状态，如果是已结束跳过去只能查看，已发布可以新增或者删除
      this.$router.push({
        path: "/teachAffairAdministration/smartSchool/teachAffairAdministration/electronicRecord/dataMaintenance",
        query: {
          noticeName,
          noticeId,
          pageNum,
          pageSize,
          status,
        },
      });
      console.log(status, "数据维护按钮status");
      console.log(noticeId, "数据维护按钮id");
      console.log(pageNum, "数据维护按钮num");
      console.log(pageSize, "数据维护按钮size");
    },
    // 数据查看
    dataInspection(row) {
      const noticeId = row.id;
      const noticeName = row.noticeName;
      const pageNum = this.queryForm.pageNum;
      const pageSize = this.queryForm.pageSize;
      const status = row.noticeState;
      //   const status
      //传值状态，如果是已结束跳过去只能查看，已发布可以新增或者删除
      this.$router.push({
        path: "/teachAffairAdministration/smartSchool/teachAffairAdministration/electronicRecord/dataMaintenance",
        query: {
          noticeName,
          noticeId,
          pageNum,
          pageSize,
          status,
        },
      });
    },
    //  导出按钮
    handleExport(row) {
      const id = row.id;
      const loading = this.$loading({ target: ".loading-area" });
      axios
        .get(process.env.VUE_APP_BASE_API + "/teacherFiles/notice/export", {
          params: { id: id }, // 将ids放入params选项中进行传递
          responseType: "blob",
          headers: { Authorization: "Bearer " + getToken() },
        })
        .then((res) => {
          // 打印接口数据
          console.log(res);
          // 请求结束关闭loading
          loading.close();
          // 创建a标签
          const elink = document.createElement("a");
          //构建Blob对象
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel",
          });
          // 模拟下载
          const objectUrl = URL.createObjectURL(blob);
          elink.setAttribute("href", objectUrl);
          elink.setAttribute("download", "教师电子档案" + ".xls");
          elink.click();
        })
        .then(() => {
          this.$modal.closeLoading();
        });
    },

    //  撤回按钮
    handleRevocation(row) {
      this.$modal
        .confirm("是否撤回该活动？")
        .then(function () {
          return taskRetracted(row.id);
          console.log(row, "撤回按钮");
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("撤回成功");
        })
        .catch((err) => {
          console.error(err);
        });
    },
    //  结束按钮
    handleFinish(row) {
      // taskCompleted
      this.$modal
        .confirm("是否结束该活动？")
        .then(function () {
          return taskCompleted(row.id);
          console.log(row, "结束按钮");
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("任务结束");
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style scoped></style>
