<template>
  <!--企业监控列表-->
    <div class="app-container EnterpriseMonitoring">
      <div class="header">
        <div class="search">
          <div class="label">风险动态时间</div>
          <div class="checkbox">
            <el-radio-group v-model="radio" @change="radioBtn">
              <el-radio v-for="item in radioList" :label="item.type">{{item.label}}</el-radio>
            </el-radio-group>
            <el-date-picker
              v-if="radio==6"
              v-model="date"
              type="daterange"
              value-format="yyyy-MM-dd"
              unlink-panels
              size="small"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changePicker">
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="table-search"  v-if="tableDataTotal > 0  && !isSkeleton">
          <div class="total">共 {{tableDataTotal}} 条</div>
          <div class="right">
            <span class="add" @click="addEnterprise">添加企业</span>
            <span class="add1" @click="handleBatch">批量监控</span>
          </div>
        </div>
        <div class="table-item">
          <div v-if="tableDataTotal > 0  && !isSkeleton">
            <el-table
              element-loading-text="Loading"
              :data="tableData"
              border
              highlight-current-row
            >
              <el-table-column label="序号" width="60" align="left" fixed>
                <template slot-scope="scope">{{ queryParams.pageNum * queryParams.pageSize - queryParams.pageSize + scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column label="监控对象" align="left" prop="companyName">
                <template slot-scope="scope">
                  <div v-if="scope.row.companyId">
                    <router-link  :to="`/monitoring/MonitoringReportDetails/${scope.row.companyId}`" tag="a" class="a-link companyName">{{scope.row.companyName}}</router-link>
                  </div>
                  <div v-else>{{scope.row.companyName}}</div>
                </template>
              </el-table-column>
              <el-table-column label="风险动态" align="left">
                <template slot-scope="scope">
                  <span class="color1 span">高风险 {{scope.row.highRiskCount}}</span>
                  <span class="color2 span">中风险 {{scope.row.middleRiskCount}}</span>
                  <span class="color3 span">低风险 {{scope.row.lowRiskCount}}</span>
                  <!--<span class="color4 span">提示 {{scope.row.promptCount}}</span>-->
                  <!--<span class="color5 span">正向 {{scope.row.positiveCount}}</span>-->
                </template>
              </el-table-column>
              <el-table-column label="监控时间" width="200" align="left" prop="createTime"></el-table-column>
              <el-table-column
                label="操作"
                align="left"
                width="160"
              >
                <template slot-scope="scope">
                  <span style="color:#0081FF;" @click="handleCancel(scope.row.companyId)">取消监控</span>
                </template>
              </el-table-column>
            </el-table>
          </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 class="empty-btn">
              <span class="add" @click="addEnterprise">添加企业</span>
              <span class="add1" @click="handleBatch">批量监控</span>
            </div>
          </div>
        </div>
        <div class="pagination-box" v-if="tableDataTotal>queryParams.pageSize">
          <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>

      <el-dialog :visible.sync="jkVisible" custom-class='dialog-claim' title="提示" width="480px" :close-on-click-modal="false">
        <div class="dialog-content"><i class="el-icon-warning"></i>取消后将错过企业最新动态</div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="jkVisible=false">我再想想</el-button>
          <el-button type="primary" @click="handleConfirm">确定取消</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="qyVisible" custom-class='dialog-claim dialogAdd' title="添加监控企业" width="480px" :close-on-click-modal="false" @close="handleCancel1">
        <div class="add-content">
          <div class="enterprise">
            <div class="label">企业名称</div>
            <el-input class="name" placeholder="请输入企业名称" v-model="companyName">
              <span slot="append" @click="handleKeyword()">搜索</span>
            </el-input>
          </div>
          <div class="companyList">
            <div class="list"  v-loading="loading">
              <div class="item" v-for="item in dataList">
                <div class="item-left">
                  <img v-if="item.logoUrl" :src="item.logoUrl" :alt="item.companyName.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />
                  <img v-else src="@/assets/images/enterprise.png" :alt="item.companyName.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />
                </div>
                <div class="item-right">
                  <p class="right-title" v-html="item.companyName"></p>
                  <p class="right-tips">推荐监控</p>
                </div>
                <span v-if="item.monitor" style="font-size: 12px;">已监控</span>
                <el-checkbox v-else @change="changeCheckbox(item)" style="margin-left: 15px;"></el-checkbox>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleCancel1">取消</el-button>
          <el-button type="primary" @click="handleAdd">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="pldrVisible" custom-class='dialog-claim' title="批量导入监控企业" width="480px" :close-on-click-modal="false" @close="handleUploadCancel1">
        <div class="upload-content">
          <el-upload
            class="upload-demo"
            drag
            :action="action"
            :file-list="fileList"
            accept=".excel,.xlsx"
            :headers="headers"
            :on-change="handleFileListChange"
            :on-success="onSuccess"
            :auto-upload="false"
            ref="upload"
            multiple>
            <i class="el-icon-plus"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip">仅允许导入xls、xlsx格式文件</div>
          </el-upload>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button class="download" icon="el-icon-download" @click="downloadClick">下载模版</el-button>
          <el-button @click="handleUploadCancel1">取消</el-button>
          <el-button type="primary" @click="submitUpload">确定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  import { companyPage,companyList,companyAdd,companyCancel,queryMonitorCompany } from '@/api/monitoring/monitoring'
  import { getToken } from '@/utils/auth'
  import skeleton from '../component/skeleton'
  export default {
    name: 'EnterpriseMonitoring',
    components: {
      skeleton
    },
    data() {
      return {
        radio:null,
        date:[],
        isSkeleton:true,
        radioList:[
          {
            type:null,
            label:'全部'
          },
          {
            type:1,
            label:'今天'
          },
          {
            type:2,
            label:'近三天'
          },
          {
            type:3,
            label:'近一周'
          },
          {
            type:4,
            label:'近半月'
          },
          {
            type:5,
            label:'近一个月'
          },
          {
            type:6,
            label:'自定义日期'
          },
        ],
        tableData:[],
        tableDataTotal:0,
        companyName:'',
        jkVisible:false,
        qyVisible:false,
        pldrVisible:false,
        queryParams:{
          pageNum:1,
          pageSize:50,
          condition:{}
        },
        dataList:[],
        cid:[],
        //上传
        action:process.env.VUE_APP_BASE_API + '/monitor/system/import',
        fileList: [],
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        companyId:'',
        downloadhref: '',//样例地址
        // 加载状态
        loading: false,
      }
    },
    created() {
      this.downloadhref = '/file/Template.xlsx';
      this.querySubmit()
    },
    methods: {
      async querySubmit() {
        companyPage(this.queryParams).then(res => {
          this.isSkeleton = false;
          this.tableData=res.rows
          this.tableDataTotal=res.total
        })
      },
      handleKeyword(){
        this.dataList=[]
        this.addEnterprise()
      },
      changeCheckbox(item){
        if (this.cid.indexOf(item.id) == -1) {
          this.cid.push(item.id)
        } else {
          this.cid.splice(this.cid.indexOf(item.id), 1)
        }
      },
      handleCancel1(){
        this.qyVisible=false;
        this.companyName=''
        this.dataList=[]
      },
      handleAdd(){
        let data={
          cid:this.cid
        }
        if(this.cid.length > 0){
          companyAdd(data).then(res => {
            this.qyVisible=false;
            this.companyName=''
            this.dataList=[]
            this.$message.success("新增成功");
            this.querySubmit()
          })
        }else {
          this.$message.warning("请选择要添加的企业");
        }


      },
      radioBtn(val){
        let endTime = new Date()
        this.queryParams.pageNum=1
        this.queryParams.pageSize=50
        switch (val) {
          case 1:
            this.queryParams.condition.beginTime=this.formatDate(endTime)
            this.queryParams.condition.endTime=this.formatDate(endTime)
            this.querySubmit()
            break;
          case 2:
            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 3))
            this.queryParams.condition.endTime = this.formatDate(endTime)
            this.querySubmit()
            break;
          case 3:
            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 7))
            this.queryParams.condition.endTime = this.formatDate(endTime)
            this.querySubmit()
            break;
          case 4:
            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 15))
            this.queryParams.condition.endTime = this.formatDate(endTime)
            this.querySubmit()
            break;
          case 5:
            this.queryParams.condition.beginTime = this.formatDate(new Date(endTime.getTime() - 3600 * 1000 * 24 * 30))
            this.queryParams.condition.endTime = this.formatDate(endTime)
            this.querySubmit()
            break;
          case 6:
            this.date=[]
            break;
          default:
            this.queryParams.condition.beginTime =''
            this.queryParams.condition.endTime =''
            this.querySubmit()
            break;
        }
      },
      // 重置页数
      handleSizeChange(val) {
        this.queryParams.pageNum = 1
        this.queryParams.pageSize = val
        this.querySubmit()
      },
      // 跳转指定页数
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.querySubmit()
        window.scrollTo(0, 0);
      },
      // 时间选择改变后的回调
      changePicker(value) {
        if(value && value.length) {
          this.queryParams.condition.beginTime = value[0]
          this.queryParams.condition.endTime = value[1]
        }
        this.querySubmit()
      },
      // 时间格式化
      formatDate(timeStr) {
        let date = new Date(Number(timeStr));
        let year = date.getFullYear();
        let month = String(date.getMonth() + 1).padStart(2, 0);
        let day = String(date.getDate()).padStart(2, 0);
        return `${year}-${month}-${day}`;
      },
      handleCancel(id){
        this.jkVisible=true;
        this.companyId=id
      },
      handleConfirm(){
        companyCancel({cid:[this.companyId]}).then(res => {
          this.jkVisible=false;
          this.$message.success("取消成功");
          this.querySubmit()
        })
      },
      addEnterprise(){
        this.qyVisible=true;
        this.loading = true
        let data={
          pageNum:1,
          pageSize:10
        }
        if (this.companyName){
          data.companyName=this.companyName;
        }
        queryMonitorCompany(data).then(res => {
          this.loading = false
          this.dataList=res.rows;
        })
      },
      handleBatch(){
        this.pldrVisible=true;
      },
      handleFileListChange(file, fileList) {
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1]];
        }
      },
      onSuccess(res, file, fileList) {
        if(res.code == 200 ){
          let _this = this
          _this.querySubmit()
          _this.$message.success('上传成功！')
          _this.pldrVisible = false
        }
        else
          this.$message.error({message:res.msg,showClose:true})
      },
      handleUploadCancel1(){
        this.fileList=[]
        this.pldrVisible=false;
      },
      downloadClick() {
        let a = document.createElement("a");
        a.setAttribute("href", this.downloadhref);
        a.setAttribute("download", "批量导入模版.xlsx");
        document.body.appendChild(a);
        a.click();
        a.remove();
      },
      submitUpload() {
        if(this.fileList.length > 0){
          this.$refs.upload.submit();
        }else {
          this.$message.warning("请选择要上传的内容");
        }

      },
    }
  }
</script>

<style lang="scss" scoped>
  .EnterpriseMonitoring{
    .header{
      background: #FFFFFF;
      padding: 25px 16px;
      border-radius: 4px;
      .search{
        display: -webkit-box;
        align-items: flex-start;
        line-height: 16px;
        .label{
          margin-right: 24px;
          color: rgba(35,35,35,0.8);
          font-size: 14px;
        }
      }
      .checkbox{
        display: flex;
        align-items: flex-start;
        padding-left: 12px;
        position: relative;
        ::v-deep .el-radio{
          margin-right:16px;
          color: rgba(35,35,35,0.8);
        }
        ::v-deep .el-date-editor{
          position: absolute;
          left: 602px;
          top: -7px
        }
      }
    }
    .content{
      background: #FFFFFF;
      border-radius: 4px;
      margin-top: 16px;
      padding: 16px;
      .table-search{
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        margin-bottom: 16px;
        .total{
          color: rgba(35,35,35,0.8);
        }
        .right{
          span{
            width: 88px;
            height: 32px;
            border-radius: 4px 4px 4px 4px;
            line-height: 32px;
            text-align: center;
            display: inline-block;
            font-size: 14px;
            cursor: pointer;
          }
          .add{
            color: #0081FF;
            border: 1px solid #0081FF;
            margin-right: 16px;
          }
          .add1{
            color: #FFFFFF;
            background: #0081FF;
            border: 1px solid #0081FF;
          }
        }
      }
      .table-item{
        .span{
          height: 22px;
          line-height: 22px;
          padding: 0 8px;
          border-radius: 2px 2px 2px 2px;
          font-size: 12px;
          margin-right: 10px;
          display: inline-block;
        }
        .color1{
          background: #FFECE8;
          color: #FF3C3C;
        }
        .color2{
          background: #FFF3E8;
          color: #F77234;
        }
        .color3{
          background: #FFF8E8;
          color: #FFAB44;
        }
        .color4{
          background: #E8F7FF;
          color: #0081FF;
        }
        .color5{
          background: #E8FFF1;
          color: #0CBC6D;
        }
      }
      .empty{
        margin: 0 auto;
        height: 550px;
        text-align: center;
        .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;
        }
        .empty-btn{
          margin-top: 24px;
          span{
            width: 88px;
            height: 32px;
            border-radius: 4px 4px 4px 4px;
            line-height: 32px;
            text-align: center;
            display: inline-block;
            font-size: 14px;
            cursor: pointer;
          }
          .add{
            color: #0081FF;
            border: 1px solid #0081FF;
            margin-right: 16px;
          }
          .add1{
            color: #FFFFFF;
            background: #0081FF;
            border: 1px solid #0081FF;
          }
        }
      }
    }
    ::v-deep .dialogAdd{
      .el-dialog__body{
        padding: 24px 0 !important;
        .companyList{
          width: 100%;
          margin-top: 5px;
          background: #FFFFFF;
          .list{
            max-height:280px;
            overflow: auto;
            border-top: 1px solid #EEEEEE;
          }
          .item{
            display: flex;
            padding: 10px 16px 6px 16px;
            position: relative;
            border-bottom: 1px solid #EEEEEE;
            .item-left{
              margin-right: 12px;
              img{
                width: 40px;
                height: 40px;
              }
            }
            .item-right{
              width: 344px;
              margin-right: 10px;
              p{
                margin: 0;
                padding: 0;

              }
              .right-title{
                font-size: 14px;
                color: #232323;
              }
              .right-tips{
                color: rgba(35,35,35,0.4);
                font-size: 12px;
              }
            }
          }
          .item:last-child{
            border-bottom:0;
          }
          .tips{
            border-top: 1px solid #EEEEEE;
            border-bottom: 1px solid #EEEEEE;
            height: 40px;
            line-height: 40px;
            color: #0081FF;
            font-size: 12px;
            padding: 0 0 0 12px;
            margin: 0;
          }

        }
      }
      .el-dialog__footer{
        border-top: 1px solid #EEEEEE;
      }
    }
    ::v-deep .dialog-claim{
      margin:0 !important;
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      .el-dialog__header{
        display: block;
        padding:16px 20px;
        border-bottom: 1px solid #EEEEEE;
        font-size: 16px;
        font-weight: 700;
        color: #232323;
      }
      .el-dialog__body{
        padding: 24px 20px;
        font-size: 14px;
        .dialog-content{
          i{
            margin-right: 10px;
            font-size: 16px;
            color:#FFAB44;
          }
        }
        .upload-content{
          .el-upload{
            width: 100%;
          }
          .el-upload-dragger{
            width: 100%;
            padding-top: 50px;
            .el-upload__text{
              margin-top: 24px;
              font-size: 14px;
            }
            .el-upload__tip{
              font-size: 12px;
              color: rgba(35,35,35,0.4);
            }
          }
        }
        .add-content{
          height: 300px;
          .enterprise{
            margin: 0 20px 10px;
            display: -webkit-box;
            align-items: flex-start;
            line-height: 32px;
            .name{
              width: 372px;
              height: 32px;
              margin-left: 12px;
              border-radius: 2px;
              border: 1px solid #DCDFE6;
            }
            .el-input__inner{
              border: 0;
              height: 32px;
            }
            .el-input-group__append{
              border: 0;
              background: #F5F5F5;
              width: 60px;
              color: #0081FF;
              padding: 0;
              text-align: center;
              cursor: pointer;
            }
            .el-input-group__append:hover{
              background: #F5F5F5 !important;
              color: #0081FF;
            }
          }
        }
      }
      .dialog-footer{
        .download{
          float: left;
        }
      }
    }
  }
</style>
