<template>
  <div class="index-home">
    <div v-loading.fullscreen.lock="loadingFull" />

    <div class="search">
      <el-form
        ref="searchParams"
        :model="searchParams"
        label-width="80px"
      >
        <el-input
          v-model="searchParams.title"
          placeholder="标题"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="searchNotice"
        >搜索</el-button>
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="dialogVisible=true"
        >创建提醒</el-button>
      </el-form>
    </div>
    <el-table
      :data="noticeList"
      border
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
      >
      </el-table-column>
      <el-table-column
        prop="description"
        label="简介"
      >
      </el-table-column>
      <el-table-column
        prop="body"
        label="详情"
      >
      </el-table-column>
      <el-table-column
        prop="start_send_time"
        label="发送时间"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column
        width="330"
        label="操作"
        align="center"
      >
        <template slot-scope="{ row }">

          <el-button
            type="success"
            plain
            size="mini"
            @click="editNotice(row)"
          >编辑</el-button>
          <el-button
            type="warning"
            plain
            size="mini"
            @click="deleteNotice(row.id)"
          >删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="创建消息"
      :visible.sync="dialogVisible"
      width="50%"
      center
    >
      <el-form
        :model="creatForm"
        :rules="rules"
        ref="creatForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="标题"
          prop="title"
        >
          <el-input v-model="creatForm.title"></el-input>
        </el-form-item>
        <el-form-item
          label="发送时间"
          prop="start_send_time"
        >
          <el-date-picker
            v-model="creatForm.start_send_time"
            type="date"
            placeholder="发送时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="发送方式"
          prop="send_types"
        >
          <el-checkbox-group v-model="creatForm.send_types">
            <el-checkbox
              label="0"
              name="0"
            >邮箱</el-checkbox>
            <el-checkbox
              label="1"
              name="1"
            >短信</el-checkbox>
            <el-checkbox
              label="2"
              name="2"
            >平台通知</el-checkbox>
          </el-checkbox-group>

        </el-form-item>
        <el-form-item
          label="简介"
          prop="description"
        >
          <el-input
            type="textarea"
            v-model="creatForm.description"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="内容"
          prop="body"
        >
          <el-input
            type="textarea"
            v-model="creatForm.body"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="选择人员"
          prop="body"
          v-if="type==0"
        >
          <el-button
            type="primary"
            size="mini"
            @click="creatNotice('creatForm')"
          >选择人员</el-button>
          <div style="margin-top:10px;">
            <el-tag
              style="margin-right:10px;"
              v-for="(item,index) in nameList"
              :key="index"
            >{{item}}</el-tag>

          </div>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          v-if="type==0"
          type="primary"
          @click="sendNotice('creatForm')"
        >发送</el-button>
        <el-button
          type="primary"
          v-if="type==1"
          @click="editSave('creatForm')"
        >保存</el-button>
        <el-button @click="resetForm('creatForm')">取 消</el-button>
      </span>
    </el-dialog>
    <!--分页-->
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.page"
        background
        :page-sizes="[15,20,30,50,100,200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total='totalPage'
      >
      </el-pagination>
    </div>
    <!--发送通知-->
    <el-dialog
      title="选择发送人员"
      center
      :visible.sync="dialogTableVisible"
    >
      <div class="search">
        <el-form
          ref="searchParams"
          :model="searchParams"
          label-width="80px"
        >
          <el-input
            v-model="searchParams.true_name"
            placeholder="姓名"
          ></el-input>
          <el-input
            v-model="searchParams.no"
            placeholder="学号"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="searchPerson"
          >搜索</el-button>
        </el-form>
      </div>
      <el-table
        :data="tableList"
        @selection-change="seleceTtem"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          prop="true_name"
          label="姓名"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="no"
          label="学号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="class"
          label="班级"
        >
        </el-table-column>
        <el-table-column
          prop="organization.name"
          label="所在支部"
        >
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="searchParams.page"
          background
          :page-sizes="[15,20,30,50,100,200]"
          layout="total, sizes, prev, pager, next, jumper"
          :total='totalPage'
        >
        </el-pagination>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
        center
      >
        <el-button
          type="primary"
          @click="sureSend"
        >确定</el-button>
        <el-button
          type=""
          @click="cancelSelectPersonnel"
        >取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  messagesList,
  deleteMessages,
  creatMessages,
  editMessages
} from "@/api/reminder/index";
import { personnelList } from "@/api/personnel/index";
import { setTimeout } from "timers";
export default {
  data() {
    return {
      nameList: [], //选中学生姓名列表
      type: 0,
      dialogVisible: false,
      dialogTableVisible: false,
      noticeList: [],
      searchParams: {
        true_name: "",
        no: "",
        title: "", //上传人员
        limit: 15, //每页显示条数
        page: 1 //当前页码
      }, //搜索框数据
      totalPage: 0, //总页码
      loadingFull: false,
      creatForm: {
        title: "",
        description: "",
        body: "",
        start_send_time: "",
        send_types: [],
        staff_ids: []
      },

      tableList: [], //人员列表
      errMessage: "cuowu", //错误信息列表
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        description: [{ required: true, message: "填写描述", trigger: "blur" }],
        body: [{ required: true, message: "填写公告详情", trigger: "blur" }],
        start_send_time: [
          { required: true, message: "请选择时间", trigger: "change" }
        ],
        send_types: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个发送方式",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.messagesList();
  },
  methods: {
    //获取人员列表
    async personnelList(params) {
      this.loadingFull = true;
      await personnelList(params).then(res => {
        console.log(res, "获取人员列表");
        this.tableList = res.data.data;
        this.totalPage = res.data.meta.pagination.total;
        this.loadingFull = false;
      });
    },
    async messagesList(param) {
      this.loadingFull = true;
      await messagesList(param).then(res => {
        console.log(res.data, "通知公告列表");
        this.noticeList = res.data.data;
        this.totalPage = res.data.meta.pagination.total;
        this.loadingFull = false;
      });
    },
    searchNotice() {
      this.messagesList(this.searchParams);
    },
    cancelSelectPersonnel() {
      let that = this;
      console.log(this.nameList, "-------------------------");
      this.dialogTableVisible = false;
      this.select = [];
      this.nameList = [];
      setTimeout(function() {
        console.log(that.nameList, "-------------------------");
      }, 500);
    },
    //删除消息
    deleteNotice(id) {
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loadingFull = true;
          deleteMessages(id).then(res => {
            this.loadingFull = false;
            console.log(res, "删除");
            if (!res.code) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.messagesList(this.searchParams);
            } else {
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async creatMessages() {
      await creatMessages(this.creatForm)
        .then(res => {
          this.$message.success("创建成功");
          this.dialogTableVisible = false;
          this.messagesList();
        })
        .catch(err => {
          this.$message.error("创建失败");
        });
    },
    //点击选择人员
    creatNotice(formName) {
      this.dialogTableVisible = true;
      this.personnelList();
      this.searchParams.true_name = "";
      this.searchParams.no = "";
    },
    //搜索人员
    searchPerson() {
      this.personnelList(this.searchParams);
    },
    resetForm(formName) {
      this.dialogVisible = false;
       this.$refs.creatForm.resetFields()
       this.nameList=[]
       this.creatForm.staff_ids=[]
    },
    editSave() {
      this.editMessages();
    },
    //编辑
    editNotice(row) {
      this.dialogVisible = true;
      this.creatForm = row;
      console.log(row);
      const params = this.creatForm;
      this.type = 1;
    },
    async editMessages() {
      await editMessages(this.creatForm)
        .then(res => {
          if (res.message) {
            this.$message.error(res.message);
            console.log("-----------------------");
            this.dialogVisible = false;
          } else {
            this.rules = {
              title: [{ required: true, message: res.title, trigger: "blur" }],
              description: [
                { required: true, message: res.description, trigger: "blur" }
              ],
              body: [
                { required: true, message: "填写公告详情", trigger: "blur" }
              ],
              start_send_time: [
                {
                  required: true,
                  message: res.start_send_time,
                  trigger: "change"
                }
              ]
            };
          }
          console.log(res, "ppp正确");
        })
        .catch(res => {
          console.log(res, "ppp");
        });
    },
    //切换页码
    handleSizeChange(e) {
      console.log(e, "切换页码");
      this.searchParams.limit = e;
      const data = this.searchParams;
      this.messagesList(data);
    },
    //切换每页显示数量
    handleCurrentChange(e) {
      console.log(e, "当前页码");
      this.searchParams.page = e;
      const data = this.searchParams;
      this.messagesList(data);
    },
    //发送提醒
    sendNotice(formName) {
      let that = this;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.creatForm.staff_ids.length > 0) {
            this.creatMessages();
            this.dialogVisible = false;
            setTimeout(function() {
              (that.creatForm = {
                title: "",
                description: "",
                body: "",
                start_send_time: "",
                send_types: [],
                staff_ids: []
              }),
                (that.nameList = []);
              console.log(that.creatForm, "000000000000000000000000");
            }, 500);
          } else {
            this.$message.error("请选择需要发送的人员");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //选择人员
    seleceTtem(select) {
      console.log(select, "select");
      let arr = [];
      let name=[]
      select.map(item => {
        console.log(item.id);
        name.push(item.true_name)
        arr.push(item.id);
      });
      this.nameList=name;
      console.log(arr, "arr");
      this.creatForm.staff_ids = arr;
      console.log(this.creatForm, "this.creatForm");
    },
    //确定发送
    sureSend() {
      this.dialogTableVisible = false;
    },
    //切换页码
    handleSizeChange1(e) {
      console.log(e, "切换页码");
      this.searchParams.limit = e;
      const data = this.searchParams;
      this.personnelList(data);
    },
    //切换每页显示数量
    handleCurrentChange1(e) {
      console.log(e, "当前页码");
      this.searchParams.page = e;
      const data = this.searchParams;
      this.personnelList(data);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/content.scss";
.demo-ruleForm {
  margin: 0 50px;
}
</style>