<!-- 驾驶舱群体事件 -->
<template>
  <div class="L-app-container">
    <header>驾驶舱群体事件</header>
    <div class="tabs-header">
      <div class="tabs-title" @click="changeTab">
        <div class="await-audit" :class="activeTab == 1 ? 'active-tab' : ''" data-info="awaitAudit">待审核</div>
        <div class="already-affirm" :class="activeTab == 2 ? 'active-tab' : ''" data-info="alreadyAffirm">已确认</div>
      </div>
      <el-form :inline="true" :model="form" ref="formOne">
        <el-form-item label="事件标题：" prop="title">
          <el-input v-model="form.title" placeholder="请输入事件标题"></el-input>
        </el-form-item>
        <el-form-item label="预警时间：" prop="time">
          <el-date-picker
            v-model="form.time"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择预警时间">
          </el-date-picker>
        </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 class="tabs-line"></div>
      <!-- 待审核 -->
      <div v-if="activeTab == 1">
        <section class="table-box">
          <div class="table-item">
            <el-table v-loading="loading" :data="auditData" border>
              <el-table-column
                type="index"
                label="序号"
                width="55"
                align="center"
              />
              <el-table-column label="事件标题" align="center" prop="title">
              </el-table-column>
              <el-table-column label="预警时间" align="center" prop="time">
              </el-table-column>
              <el-table-column label="预警因素" align="center" prop="factor">
              </el-table-column>
              <el-table-column label="事件数量" align="center" prop="number">
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <button @click="audit(scope.row)" class="sqbtn sqbtn1">
                    审核
                  </button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </section>
        <div class="my-pagination">
          <pagination
            :total="auditTotal"
            :page="pages.current"
            :limit="pages.size"
            @pagination="getPagination"
            :current-page.sync="pages.current"
          ></pagination>
        </div>
      </div>
      <!-- 已确认 -->
      <div v-if="activeTab == 2">
        <section class="table-box">
          <div class="table-item">
            <el-table v-loading="loading" :data="affirmData" border>
              <el-table-column
                type="index"
                label="序号"
                width="55"
                align="center"
              />
              <el-table-column label="事件标题" align="center" prop="title">
              </el-table-column>
              <el-table-column label="预警时间" align="center" prop="time">
              </el-table-column>
              <el-table-column label="预警因素" align="center" prop="factor">
              </el-table-column>
              <el-table-column label="事件数量" align="center" prop="number">
              </el-table-column>
              <el-table-column label="审核状态" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == 1">审核通过</span>
                  <span v-if="scope.row.status == 2">审核不通过</span>
                </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 class="my-pagination">
          <pagination
            :total="affirmTotal"
            :page="affirmPages.current"
            :limit="affirmPages.size"
            @pagination="getPaginationAffirm"
            :current-page.sync="affirmPages.current"
          ></pagination>
        </div>
      </div>
    </div>
    <event-audit title="事件审核" ref="eventAudit"></event-audit>
  </div>
</template>
<script>
import EventAudit from '@/views/components/eventAudit.vue'
export default {
  components:{
    EventAudit,
  },
  data() {
    return {
      activeTab: 1,
      form:{
        time: '',
        title: '',
      },
      pages: {
        current: 1,
        size: 10,
      },
      affirmPages: {
        current: 1,
        size: 10,
      },
      auditTotal:1,
      affirmTotal:1,
      loading:false,
      auditData:[
        {
          title:"关于137****1620李某某7天内多次投诉各种事件",
          time:"2024-02-22 09:00:02",
          factor:"137****1620李某某",
          number:8,
        },{
          title:"关于137****1620李某某7天内多次投诉各种事件",
          time:"2024-02-22 09:00:02",
          factor:"137****1620李某某",
          number:8,
        },{
          title:"关于137****1620李某某7天内多次投诉各种事件",
          time:"2024-02-22 09:00:02",
          factor:"137****1620李某某",
          number:8,
        },{
          title:"关于137****1620李某某7天内多次投诉各种事件",
          time:"2024-02-22 09:00:02",
          factor:"137****1620李某某",
          number:8,
        },{
          title:"关于137****1620李某某7天内多次投诉各种事件",
          time:"2024-02-22 09:00:02",
          factor:"137****1620李某某",
          number:8,
        },{
          title:"关于137****1620李某某7天内多次投诉各种事件",
          time:"2024-02-22 09:00:02",
          factor:"137****1620李某某",
          number:8,
        },
      ],
      affirmData:[
        {
          title:"关于137****1620李某某7天内多次投诉各种事件",
          time:"2024-02-22 09:00:02",
          factor:"137****1620李某某",
          number:8,
          status:1,
        },{
          title:"关于137****1620李某某7天内多次投诉各种事件",
          time:"2024-02-22 09:00:02",
          factor:"137****1620李某某",
          number:8,
          status:2,
        },{
          title:"关于137****1620李某某7天内多次投诉各种事件",
          time:"2024-02-22 09:00:02",
          factor:"137****1620李某某",
          number:8,
          status:1,
        },{
          title:"关于137****1620李某某7天内多次投诉各种事件",
          time:"2024-02-22 09:00:02",
          factor:"137****1620李某某",
          number:8,
          status:2,
        },{
          title:"关于137****1620李某某7天内多次投诉各种事件",
          time:"2024-02-22 09:00:02",
          factor:"137****1620李某某",
          number:8,
          status:1,
        },{
          title:"关于137****1620李某某7天内多次投诉各种事件",
          time:"2024-02-22 09:00:02",
          factor:"137****1620李某某",
          number:8,
          status:2,
        },
      ],
    }
  },
  methods:{
    // 查询
    onSubmit(formRef){
      if(this.activeTab == 1) {
        this.pages = {
          current: 1,
          size: 10
        }
        this.pages = {...this.pages,...this.form}
        this.getList(1,this.pages);
      } else if(this.activeTab == 2) {
        this.affirmPages = {
          current: 1,
          size: 10
        }
        this.affirmPages = {...this.affirmPages,...this.form}
        this.getList(2,this.affirmPages);
      }
    },
    // 重置
    reset(formRef){
      this.$refs[formRef].resetFields();
      this.form = {
        time: '',
        title: '',
      }
      if(this.activeTab == 1) {
        this.pages = {
          current: 1,
          size: 10
        }
        this.getList(1,this.pages);
      } else if(this.activeTab == 2) {
        this.affirmPages = {
          current: 1,
          size: 10
        }
        this.getList(2,this.affirmPages);
      }
    },
    // tab切换
    changeTab(e){
      if(e.target.getAttribute("data-info") == "awaitAudit"){
        this.activeTab = 1;
      }else if(e.target.getAttribute("data-info") == "alreadyAffirm"){
        this.activeTab = 2;
      }
    },
    // 待审核页码获取
    getPagination(pages){
      this.pages.current = pages.page;
      this.pages.size = pages.limit;
      this.getList(1,this.pages);
    },
    // 已确认页码获取
    getPaginationAffirm(pages){
      this.affirmPages.current = pages.page;
      this.affirmPages.size = pages.limit;
      this.getList(2,this.affirmPages);
    },
    // 获取列表
    getList(id,page){
      // this.loading = true;
    },
    // 审核
    audit(row) {
      this.$refs.eventAudit.open(row);
    },
    // 查看详情
    toDetail(row) {

    },
  },
  mounted() {
    this.getList(1,this.pages)
  },
}
</script>
