<template>
  <div>
    <save-form :inline="true" ref="searchForm" :model="searchForm">
      <el-form-item prop="readStatus">
        <el-select
          v-model.trim="searchForm.readStatus"
          clearable
          placeholder="日志状态"
        >
          <el-option label="已读" :value="1"></el-option>
          <el-option label="未读" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="onSearch">搜索</el-button>
      </el-form-item>
    </save-form>
    <div class="tableWrap">
      <el-table
        style="width: 100%"
        :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
        :data="tableList"
      >
        <el-table-column label="申请人" prop="userId" width="100px">
          <template slot-scope="scope">
            <el-badge
              :is-dot="!scope.row.readStatus"
              style="vertical-align: sub;"
            ></el-badge>
            {{ scope.row.userId }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="申请时间"
          prop="createOn"
        ></el-table-column>
        <el-table-column
          align="center"
          label="内容"
          prop="content"
        ></el-table-column>
        <el-table-column align="center" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="onLook(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="pageInfo.total"
        :page.sync="pageInfo.page"
        :limit.sync="pageInfo.limit"
        :page-sizes="pageInfo.page_size"
        @pagination="getList"
      />
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogSystem" width="400px">
      <el-row>
        <el-col :span="24">{{ dialogDetail.content }}</el-col>
      </el-row>
      <div slot="footer">
        <el-button type="primary" @click="dialogSystem = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog :title="dialogTitle" :visible.sync="dialogStudent" width="500px">
      <student-model
        v-if="dialogStudent"
        :dialogDetail="dialogDetail"
        @close="dialogStudent = false"
      />
    </el-dialog>
    <!-- 请假 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogLeave" width="800px">
      <leave-model
        v-if="dialogLeave"
        :dialogDetail="dialogDetail"
        @close="dialogLeave = false"
      />
    </el-dialog>
    <!-- 请假 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVipApply"
      width="500px"
    >
      <vip-apply-model
        v-if="dialogVipApply"
        :dialogDetail="dialogDetail"
        @close="dialogVipApply = false"
      />
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/Pagination/index";
import { queryCountOfUnread, sysMessageList, setRead } from "@/api/journal";
import { journalType } from "@/constant";
import StudentModel from "./student";
import LeaveModel from "./leave";
import vipApplyModel from "./vipApply";
export default {
  components: { pagination, StudentModel, LeaveModel, vipApplyModel },
  props: ["type"],
  data() {
    return {
      dialogSystem: false,
      dialogStudent: false,
      dialogLeave: false,
      dialogVipApply: false,
      dialogTitle: null,
      dialogDetail: {},
      searchForm: {
        search: null,
        group: "SYSTEM",
        readStatus: 0
      },
      tableList: [],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    };
  },
  mounted() {
    const query = this.$route.query;
    this.searchForm.group = query.opt || this.type;

    this.getList();
  },
  methods: {
    onSearch() {
      this.pageInfo.page = 1;
      this.getList();
    },
    async getList() {
      const pageInfo = this.pageInfo;
      const params = Object.assign({}, this.searchForm);
      params.rows = pageInfo.limit;
      params.page = pageInfo.page;
      await sysMessageList(params).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          pageInfo.total = res.data.total;
        }
      });
    },
    async onLook(row) {
      // 把当前消息变成已读
      if (row.readStatus != 1) {
        await setRead({ id: row.id });
        row.readStatus = 1; // 手动把消息变一下状态
      }
      this.dialogTitle = journalType[row.group];
      this.dialogDetail = row;
      switch (row.group) {
        case "SYSTEM":
          this.dialogSystem = true;
          break;
        case "STUDENT":
          this.dialogStudent = true;
          break;
        case "LEAVE":
          this.dialogLeave = true;
          break;
        case "VIPAPPLY":
          this.dialogVipApply = true;
          break;
      }
    }
  }
};
</script>
