<template>
  <div class="L-app-container home">
    <div class="L_tabs">
      <div class="headerText">
        <div class="searchP">查询条件</div>
      </div>
      <el-form :inline="true" :model="form" ref="formOne">
        <el-form-item label="事件标题：" prop="incidentName">
          <el-input v-model="form.title" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="事件类型：" prop="incidentType">
          <!-- <el-select v-model="form.msgTypeName" placeholder="请选择类型">
            <el-option label="暴漏垃圾" value="shanghai"></el-option>
            <el-option label="市容环境" value="beijing"></el-option>
          </el-select> -->
          <el-input v-model="form.msgTypeName" placeholder="请输入事件类型名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="onSubmit('formOne')" class="onSubmit">查询</el-button>
          <el-button  size="mini" icon="el-icon-refresh-left" @click="reset('formOne')" class="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabsBottom">
      <div class="foot-main">
        <div class="headerText">
          <div class="searchP">算法事件列表</div>
        </div>
        <section class="table-box">
          <div class="table-item">
            <el-table v-loading="loading" :data="tableData" border>
              <el-table-column
                type="index"
                label="序号"
                width="55"
                align="center"
              />
              <el-table-column label="时间" align="center" prop="firstWarnTimeDate">
              </el-table-column>
              <el-table-column label="类型" align="center" prop="msgTypeName">
              </el-table-column>
              <el-table-column label="标题" align="center" prop="title">
              </el-table-column>
              <el-table-column label="因素" align="center" prop="warnFactor">
              </el-table-column>
              <el-table-column label="状态" align="center" prop="state">
                <template slot-scope="scope">
                  <div
                    style="
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    "
                  >
                    <div class="state-sub">
                      <div v-if="scope.row.state == 1" class="colors wancengColor"></div>
                      <div v-if="scope.row.state == 2" class="colors yichuliColor"></div>
                      <div v-if="scope.row.state == 3" class="colors yizhuofei"></div>
                      <div v-if="scope.row.state == null || scope.row.state == ''" class="colors yanqiColor"></div>
                    </div>
                    <div class="state-sub2">
                      <div v-if="scope.row.state == 1">未通过</div>
                      <div v-if="scope.row.state == 2">已办结</div>
                      <div v-if="scope.row.state == 3">作废</div>
                      <div v-if="scope.row.state == null || scope.row.state == ''">正常</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <button @click="toDetail(scope.row)" class="sqbtn sqbtn1">
                    详情
                  </button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </section>
      </div>
    </div>
    <div class="my-pagination">
      <pagination
        :total="total"
        :page="pages.current"
        :limit="pages.size"
        @pagination="getPagination"
        :current-page.sync="pages.current"
      ></pagination>
    </div>
    <el-dialog
      title="详情"
      :visible.sync="showCK"
      width="40%"
      @close="approveReset"
    >
      <div v-loading="dialogLoading">
        <div class="team-main">
          <div>事件集合编号:</div>
          <div>{{ dialogData.innerEventId }}</div>
        </div>
        <div class="team-main">
          <div>事件消息标题:</div>
          <div>{{ dialogData.title }}</div>
        </div>
        <div class="team-main">
          <div>事件类型编码:</div>
          <div>{{ dialogData.msgType }}</div>
        </div>
        <div class="team-main">
          <div>事件类型名称:</div>
          <div>{{ dialogData.msgTypeName }}</div>
        </div>
        <div class="team-main">
          <div>案件类型编码:</div>
          <div>{{ dialogData.scenceType }}</div>
        </div>
        <div class="team-main">
          <div>案件类型名称:</div>
          <div>{{ dialogData.scenceTypename }}</div>
        </div>
        <div class="team-main">
          <div>第一次预警时间:</div>
          <div>{{ dialogData.firstWarnTimeDate }}</div>
        </div>
        <div class="team-main">
          <div>事件发生时间:</div>
          <div>{{ dialogData.eventTimeDate }}</div>
        </div>
        <div class="team-main">
          <div>预警因素:</div>
          <div>{{ dialogData.warnFactor }}</div>
        </div>
        <div class="team-main">
          <div>预警关联的事件单号:</div>
          <div>{{ dialogData.relationNums }}</div>
        </div>
        <!-- <div class="team-main">
          <div>事件来源:</div>
          <div>{{ dialogData.scenceName }}</div>
        </div> -->
        <div class="team-main">
          <div>状态:</div>
          <div>{{ dialogData.state == 1 ? '未通过' : dialogData.state == 2 ? '已办结' : dialogData.state == 3 ? '作废' : '正常' }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
  
</template>
<script>
import { getEvents,getEventById } from "@/api/platform/index"
export default {
  data() {
    return {
      form:{
        msgTypeName: '',
        title: '',
      },
      pages: {
        current: 1,
        size: 10,
      },
      loading:false,
      tableData: [],
      total:1,
      showCK:false,
      dialogLoading:false,
      dialogData:{},
    }
  },
  mounted() {
    this.getList();
  },
  methods:{
    // 页码获取
    getPagination(pages){
      console.log(pages);
      this.pages.current = pages.page;
      this.pages.size = pages.limit;
      this.getList()
    },
    // 获取列表
    getList(){
      this.loading = true;
      getEvents(this.pages).then(res=>{
        console.log(res);
        this.loading = false;
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },
    // 查询按钮
    onSubmit(){
      this.pages = {
        current: 1,
        size: 10
      }
      this.pages = {...this.pages,...this.form}
      this.getList();
    },
    // 重置按钮
    reset(formRef){
      this.$refs[formRef].resetFields();
      this.pages = {
        current: 1,
        size: 10
      }
      this.form = {
        msgTypeName: '',
        title: '',
      }
      this.getList();
    },
    // 查看详情
    toDetail(row) {
      this.dialogLoading = true;
      this.showCK = true;
      getEventById(row.innerEventId).then(res=>{
        this.dialogData = res.data;
        this.dialogLoading = false;
      })
    },
    // 详情关闭按钮
    approveReset() {
      this.showCK = false;
    },
  },
}
</script>
<style lang="scss" scoped>

</style>
