<template>
  <!--监控报告-->
    <div class="app-container MonitoringReport">
      <div class="header">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="监控日报" name="1"></el-tab-pane>
          <el-tab-pane label="监控周报" name="2"></el-tab-pane>
          <el-tab-pane label="监控月报" name="3"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="report-content">
        <div class="list" v-if="tableDataTotal > 0  && !isSkeleton" v-for="item in dataList">
          <div class="list-title">
            <div class="flex-box query-box">
              <div class="flex-box query-params">
                <span class="common-title">{{item.period}}</span>
              </div>
              <div class="flex-box query-ability">
                共<span style="color:#0081FF;padding: 0 4px;">{{item.companyNum}}</span>家企业发生<span style="color:#F7965B;padding: 0 4px;">{{item.dynamicNum}}</span>条动态信息
              </div>
            </div>
          </div>
          <div class="item" v-for="i in item.list">
            <div class="item-left">
              <img v-if="i.logoUrl" :src="i.logoUrl" :alt="i.companyOrstaffName.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />
              <img v-else src="@/assets/images/enterprise.png" :alt="i.companyOrstaffName.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />
            </div>
            <div class="item-right">
              <p class="right-title">
                <router-link  :to="`/monitoring/MonitoringReportDetails/${i.companyOrstaffId}`" tag="a" class="a-link companyName">{{i.companyOrstaffName}}</router-link>
              </p>
              <p class="card-right-p">
                <!--<span class="right-label">提示：</span>-->
                <!--<span class="right-color color1">{{i.promptCount}}</span>-->
                <!--<span class="right-label">正向：</span>-->
                <span class="right-color color2">{{i.positiveCount}}</span>
                <span class="right-label">低风险：</span>
                <span class="right-color color3">{{i.lowRiskCount}}</span>
                <span class="right-label">中风险：</span>
                <span class="right-color color4">{{i.middleRiskCount}}</span>
                <span class="right-label">高风险：</span>
                <span class="right-color color5">{{i.highRiskCount}}</span>
              </p>
              <div class="tips">新增<span style="color:#0081FF;padding: 0 4px;">{{i.dynamicTotal}}</span>条动态信息</div>
            </div>
          </div>
        </div>
        <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
        <div class="empty" v-if="tableDataTotal === 0 && !isSkeleton">
          <img class="img" src="@/assets/images/project/empty.png">
          <div class="p1">当前暂无监控报告</div>
          <!--<div class="p2">建议调整关键词或筛选条件，重新搜索</div>-->
        </div>
        <div class="pagination-box" v-if="tableDataTotal>queryParams.pageSize" style="background: #ffffff;margin-top: 16px;padding-right: 16px;">
          <el-pagination background :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
        </div>
      </div>
    </div>
</template>

<script>
  import { reportPage } from '@/api/monitoring/monitoring'
  import skeleton from '../component/skeleton'
  export default {
    name: 'MonitoringReport',
    components: {
      skeleton
    },
    data() {
      return {
        isSkeleton:true,
        activeName:'1',
        dataList:[
          {
            time:'今日',
            list:[]
          }
        ],
        queryParams:{
          pageNum:1,
          pageSize:10,
          condition:{
            reportType:1
          }
        },
        tableDataTotal:0,
      }
    },
    created() {
      this.querySubmit()
    },
    methods: {
      async querySubmit() {
        reportPage(this.queryParams).then(res => {
          this.isSkeleton = false;
          this.dataList=res.rows;
          this.tableDataTotal=res.total
        })
      },
      handleClick() {
        this.queryParams.condition.reportType=Number(this.activeName);
        this.queryParams.pageNum=1
        this.queryParams.pageSize=10
        this.querySubmit()
      },
      // 重置页数
      handleSizeChange(val) {
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = val
        this.querySubmit()
      },
      // 跳转指定页数
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.querySubmit()
        window.scrollTo(0, 0);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .MonitoringReport{
    /*background: #ffffff;*/
    .header{
      justify-content: space-between;
      height: 48px;
      background: #FFFFFF;
      border-radius: 4px;
      color: #232323;
      /*position: sticky;*/
      /*top: 54px;*/
      /*z-index: 999;*/
      ::v-deep .el-tabs{
        height: 48px;
        line-height: 48px;
        .el-tabs__nav-wrap::after {
          position: static !important;
        }
        .el-tabs__header{
          margin: 0;
          .el-tabs__item{
            padding: 0 16px;
            font-size: 16px;
          }
          .is-active{
            font-weight: bold;
          }
        }
        .el-tabs__content{
          width: 100%;
        }
      }
      .location{
        font-size: 14px;
        color: #0081FF;
        i{
          margin-right: 6px;
          font-size: 16px;
        }
      }
    }
    .report-content{
      .list{
        background: #fff;
        margin-top: 16px;
        .list-title{
          height: 56px;
          line-height: 56px;
          border-bottom: 1px solid #EEEEEE;
          padding: 0 16px;
          .query-params{
            font-size: 16px;
            font-weight: 700;
            color: #232323;
          }
          .query-ability{
            font-size: 14px;
            font-weight: 400;
            color: #3D3D3D;
            span{
              margin: 0;
            }
          }
        }
        .item{
          display: flex;
          margin: 0 16px;
          padding: 16px 0;
          position: relative;
          border-bottom: 1px solid #EEEEEE;
          .item-left{
            margin-right: 12px;
            img{
              width: 62px;
              height: 62px;
            }
          }
          .item-right{
            p{
              margin: 0;
              padding: 0;
            }
            .right-title{
              font-size: 16px;
              font-weight: 700;
              color: #333333;
              margin-bottom: 10px;
              margin-top: 2px;
            }
            .right-label{
              font-size: 14px;
              color: #666666;
            }
            .tips{
              position: absolute;
              right: 0;
              top:46px;
              color: #666666;
              font-size: 14px;
              span{
                color: #333333;
                padding: 0 4px;
              }
            }
            .right-color{
              margin-right: 24px;
            }
            .color1{
              color: #0081FF;
            }
            .color2{
              color: #0CBC6D;
            }
            .color3{
              color: #F7965B;
            }
            .color4{
              color: #FF3C3C;
            }
            .color5{
              color: #FF3C3C;
            }
          }
        }
        .item:last-child{
          border-bottom:0;
        }
      }
      .empty{
        margin: 0 auto;
        height: 550px;
        text-align: center;
        background: #ffffff;
        .img{
          width: 108px;
          height: 108px;
          margin-bottom: 24px;
          margin-top: 150px;
        }
        .p1{
          color: #333333;
          font-size: 16px;
        }
        .p2{
          color: #999999;
          font-size: 14px;
          margin-top: 8px;
        }
      }
    }
  }
</style>
