<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-20 11:58:33
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-09 09:34:17
 * @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-center\index.vue
 * @Description: 预警中心-信息中心
-->

<template>
  <div class="content">
    <!-- 搜索表单 -->
    <el-form
      :model="warnForm"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="5rem"
    >
      <!-- <el-form-item label="消息类型" prop="type">
        <el-select v-model="warnForm.type" placeholder="请选择消息类型" filterable clearable>
          <el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="时间" prop="dateTime">
        <el-date-picker
          v-model="dateTime"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
        />
      </el-form-item>
      <el-form-item label="阅读状态" prop="read">
        <el-select
          v-model="warnForm.read"
          placeholder="请选择阅读状态"
          clearable
        >
          <el-option
            v-for="item in readStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </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"
          plain
          icon="el-icon-check"
          size="mini"
          @click="handleRead"
          v-hasPermi="['system:defect:add']"
          >全部已读
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete(null)"
          v-hasPermi="['system:defect:remove']"
          >批量删除
        </el-button>
      </el-col>
    </el-row>
    <!-- 导航栏 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="`tabs-${index}`"
        :label="item.title"
        :name="item.code"
      >
        <!-- 标签页头 -->
        <span slot="label">
          <!-- <i
            v-if="item.code === 'SUCCESS'"
            style="color: #67c23a"
            class="el-icon-success"
          ></i> -->
          <i
            v-if="item.code === 'REMIND'"
            style="color: #e6a23c"
            class="el-icon-info"
          ></i>
          <i
            v-if="item.code === 'WARNING'"
            style="color: #909399"
            class="el-icon-warning"
          ></i>
          <!-- <i
            v-if="item.title === '错误'"
            style="color: #f56c6c"
            class="el-icon-error"
          ></i
          > -->
          {{ item.title }}({{ item.count }})</span
        >
        <!-- 表格 -->
        <el-table
          ref="warningTable"
          :data="warningList"
          v-loading="loading"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />

          <el-table-column
            width="180"
            label="时间"
            align="center"
            prop="createdTime"
          >
            <template slot-scope="scope">
              <span
                @click="handleTableChange(scope.row)"
                :class="`${scope.row.readStatus === 1 ? 'table-index' : ''}`"
                >{{ scope.row.createdTime }}</span
              >
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="消息标题"
            width="150"
            align="center"
            prop="title"
          >
            <template slot-scope="scope">
              <span @click="handleTableChange(scope.row)">{{
                scope.row.title
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="消息内容"
            align="left"
            prop="content"
          >
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div class="pagination-part">
          <el-pagination
            background
            :current-page.sync="pagination.page"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            :page-size.sync="pagination.size"
            @size-change="handleSizeChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableTotal"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getWarningList,
  getWarningNav,
  markNoticeRead,
  noticeReadAll,
  deleteNotice,
} from "@/api/xj/inspection/center";
export default {
  name: "WarningCenter",
  data() {
    return {
      // 查询表单绑定
      warnForm: {
        // 设备id
        type: "",
        // 阅读状态
        read: "",
      },
      // 设备列表
      deviceList: [],
      // 时间
      dateTime: [],
      // 阅读状态列表
      readStatusList: [
        { label: "未读", value: 1 },
        { label: "已读", value: 2 },
      ],
      // 导航栏选择绑定
      activeName: "WARNING",
      // 导航栏列表
      editableTabs: [],
      // 预警列表
      warningList: [],
      // 列表勾选数据
      checkIds: [],
      // 分页-页数页码
      pagination: {
        page: 1,
        size: 10,
      },
      // 列表总条数
      tableTotal: 0,
      // 列表加载状态
      loading: false,
      // 批量删除状态
      multiple: true,
    };
  },
  watch: {
    $route: {
      handler(val) {
        if (val.params.title) {
          this.activeName = val.params.title;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getNav();
    this.getList();
  },
  methods: {
    /**
     * @description: 获取导航栏数据
     * @return {*}
     */
    getNav() {
      getWarningNav().then(({ code, data }) => {
        if (code === 200) {
          this.editableTabs = data;
        }
      });
    },

    /**
     * @description: 点击搜索事件
     * @return {*}
     */
    handleQuery() {
      this.searchForm = JSON.parse(JSON.stringify(this.warnForm));
      this.getList();
    },

    /**
     * @description: 重置查询
     * @return {*}
     */
    resetQuery() {
      this.warnForm = {
        // 设备id
        type: "",
        // 阅读状态
        read: "",
      };
      this.dateTime = [];
      this.getList();
    },

    /**
     * @description: 切换标签事件
     * @return {*}
     */
    handleClick() {
      this.pagination.page = 1;
      this.getList();
    },

    /**
     * @description: 获取列表数据
     * @return {*}
     */
    getList() {
      this.loading = true;
      const data = {
        ...this.pagination,
        ...this.warnForm,
        notificationType: this.activeName,
        startTime: this.dateTime ? this.dateTime[0] : "",
        endTime: this.dateTime ? this.dateTime[1] : "",
      };
      getWarningList(data)
        .then(({ code, rows, total }) => {
          if (code === 200) {
            this.warningList = rows;
            this.tableTotal = total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /**
     * @description: 点击列表行事件
     * @param {*} val
     * @return {*}
     */
    handleTableChange(val) {
      if (val) {
        markNoticeRead(val.id).then(({ code }) => {
          if (code === 200) {
            this.getList();
            this.getNav();
          }
        });
      }
    },

    /**
     * @description: 列表选择改变事件
     * @param {*} val
     * @return {*}
     */
    handleSelectionChange(selection) {
      this.checkIds = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },

    /**
     * @description: 批量删除事件
     * @return {*}
     */
    handleDelete(row) {
      const checkIds = row ? [row.id] : this.checkIds;
      if (!checkIds.length) {
        this.$modal.msgWarning("请选择要删除的记录");
        return;
      }
      this.$modal
        .confirm(`是否确认删除选中的${checkIds.length}条记录？`)
        .then(() => {
          return deleteNotice(checkIds);
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
          this.getList();
          this.$refs.warningTable.clearSelection();
        })
        .catch(() => {});
    },

    /**
     * @description: 全部已读事件
     * @return {*}
     */
    handleRead() {
      noticeReadAll().then(({ code }) => {
        if (code === 200) {
          this.getList();
          this.getNav();
        }
      });
    },

    /**
     * @description: 切换分页
     * @param {*} arg
     * @return {*}
     */
    handleCurrentChange(arg) {
      this.pagination.page = arg;
      this.getList();
    },

    /**
     * @description: 切换每页条数
     * @param {*} arg
     * @return {*}
     */
    handleSizeChange(arg) {
      this.pagination.size = arg;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: calc(100vh - 5.4rem);
  padding: 1rem;
  overflow-y: auto;
}

.el-table {
  .table-index {
    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
      background-color: #f56c6c;
    }
  }
}

/* 分页样式 */
.pagination-part {
  width: 100%;
  display: flex;
  padding-top: 1rem;
  justify-content: flex-end;
}
</style>
