<template>
  <div class="view-container">
    <template v-if="unReadCount === 0">
      <i class="el-icon-bell nomsg" @click="goToNotice" />
    </template>
    <template v-if="unReadCount > 0">
      <el-badge
        :value="unReadCount"
        :max="99"
        class="top-msg"
        :class="from !== 'layout1' ? 'has-system' : ''"
         :style="{ color: from !== 'layout1' ? $config.navcolor : '' }"
      >
        <i class="el-icon-bell" @click="goToNotice" />
      </el-badge>
    </template>

    <el-dialog
      title="通知消息"
      :visible.sync="showMsg"
      width="1000px"
      append-to-body
    >
      <el-table v-loading="loading" :data="noticeList">
        <el-table-column label="编号" align="center" type="index" />
        <el-table-column
          label="标题"
          prop="title"
          min-width="80"
          show-overflow-tooltip
        />
        <el-table-column
          label="内容"
          prop="content"
          min-width="200"
          show-overflow-tooltip
        />
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status === '1'">已读</el-tag>
            <el-tag type="info" v-if="scope.row.status === '0'">未读</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="时间"
          align="center"
          prop="createTime"
          width="150"
        >
          <template slot-scope="scope">
            {{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}") }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleView(scope.row)"
              v-if="scope.row.status === '0'"
              >设为已读</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(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"
      />

      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import {
  countNotice,
  listNotice,
  readNotice,
  delNotice,
} from "@/api/system/base/notice";
export default {
  name: "Notice",
  data() {
    return {
      unReadCount: 0,
      showMsg: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      noticeList: [],
      total: 0,
      loading: false,
    };
  },
  computed: {
    ...mapGetters([
      "sidebar",
      "avatar",
      "device",
      "token",
      "roles",
      "sidebarRouters",
      "name",
      "company",
      "topbarRouters",
    ]),
  },
  props: {
    from: {
      type: String,
      default: "layout1",
    },
  },
  created() {
    this.getCount();
    const self = this;
    setInterval(function () {
      self.getCount();
    }, 20000);
  },
  methods: {
    handleView(row) {
      readNotice(row.id).then((res) => {
        this.getList();
        if (row.url) {
          this.$router.push({
            path: row.url,
          });
        }
      });
    },
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm("是否确认删除该通知？")
        .then(function () {
          return delNotice(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    hasSystem() {
      // 未登录的
      if (!this.roles) {
        return false;
      }

      // 非外部企业用户
      return this.roles.find((p) => p !== "company");
    },
    goToNotice() {
      console.log(this.hasSystem());
      if (this.hasSystem()) {
        this.$router.push({
          path: "/system/notice",
        });
      } else {
        this.getList();
        this.showMsg = true;
      }
    },
    getList() {
      this.loading = true;
      listNotice(this.queryParams).then((res) => {
        this.loading = false;
        this.noticeList = res.rows;
        this.total = res.total;
      });
    },
    close() {
      this.showMsg = false;
      this.noticeList = [];
      this.total = 0;
    },
    getCount() {
      countNotice({ status: "0" }).then((res) => {
        this.unReadCount = res.data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.view-container {
  display: flex;
  align-content: center;
  align-items: center;

  i {
    font-size: 24px;
    cursor: pointer;

    &.nomsg {
      margin-right: 40px;
    }
  }

  .top-msg {
    margin-right: 40px;
    margin-top: 10px;
  }
}
</style>