<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">
              <el-radio v-for="item in radioList" :label="item.type">{{item.label}}</el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="table-search">
          <div class="total">共 162 条</div>
          <div class="right">
            <span class="add">添加企业</span>
            <span class="add1">批量监控</span>
          </div>
        </div>
        <div class="table-item">
          <el-table
            class="fixed-table"
            element-loading-text="Loading"
            border
            highlight-current-row
          >
            <el-table-column label="序号" width="60" align="left" fixed>
              <!--<template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>-->
              <template slot-scope="scope">1</template>
            </el-table-column>
            <el-table-column label="监控对象" align="left">
              <template slot-scope="scope">
                中国中铁股份有限公司
              </template>
            </el-table-column>
            <el-table-column label="风险动态" align="left">
              <template slot-scope="scope">
                中国中铁股份有限公司
              </template>
            </el-table-column>
            <el-table-column label="监控时间" width="200" align="left">
              <template slot-scope="scope">
                2022-09-02
              </template>
            </el-table-column>
            <el-table-column
               label="操作"
               align="center"
               width="180"
               class-name="small-padding fixed-width"
               fixed="right"
            >
              <template slot-scope="scope">
                <span>取消监控</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <el-dialog :visible.sync="jkVisible" custom-class='dialog-claim' title="提示" width="480px" >
        <div class="dialog-content"><i class="el-icon-warning"></i>取消后将错过企业最新动态</div>
        <div slot="footer" class="dialog-footer">
          <el-button>我再想想</el-button>
          <el-button type="primary">确定取消</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="qyVisible" custom-class='dialog-claim' title="添加监控企业" width="480px" >
        <div class="add-content">
          <div class="enterprise">
            <div class="label">企业名称</div>
            <el-input class="name" placeholder="请输入企业名称">
              <el-button slot="append">搜索</el-button>
            </el-input>
          </div>
          <div class="companyList">
            <div class="list">
              <div class="item">
                <div class="item-left">
                  <!--<img v-if="item.logoUrl" :src="item.logoUrl" :alt="item.name.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />-->
                  <!--<img v-else src="@/assets/images/enterprise.png" :alt="item.name.replace(/<font color='#FF204E'>/g,'').replace(/<\/font>/g,'')" />-->
                  <img src="@/assets/images/enterprise.png"/>
                </div>
                <div class="item-right">
                  <p class="right-title">中国铁建集团</p>
                  <p class="right-tips">推荐监控</p>
                </div>
                <el-checkbox></el-checkbox>
              </div>
            </div>
            <p class="tips">前往企业查询寻找企业线索<i class="el-icon-arrow-right"></i></p>
            <div class="btn">
              <div>
                <el-button>取消</el-button>
                <el-button type="primary">确定</el-button>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button>取消</el-button>
          <el-button type="primary">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="pldrVisible" custom-class='dialog-claim' title="批量导入监控企业" width="480px" >
        <div class="upload-content">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            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">下载模版</el-button>
          <el-button>取消</el-button>
          <el-button type="primary">确定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: 'EnterpriseMonitoring',
    data() {
      return {
        radio:1,
        radioList:[
          {
            type:1,
            label:'今天'
          },
          {
            type:2,
            label:'近三天'
          },
          {
            type:3,
            label:'近一周'
          },
          {
            type:4,
            label:'近半月'
          },
          {
            type:5,
            label:'近一个月'
          },
          {
            type:6,
            label:'自定义日期'
          },
        ],
        tableData:[
          {
            name:'中国中铁股份有限公司',
            time:'2022-09-02',
          }
        ],
        jkVisible:false,
        qyVisible:false,
        pldrVisible:false,
      }
    },
    created() {

    },
    methods: {

      handleClick() {

      }
    }
  }
</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: 20px;
        .label{
          margin-right: 24px;
        }
      }
    }
    .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;
          }
        }
      }
    }
    ::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: 200px;
          .enterprise{
            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;
            }
          }
          .companyList{
            width: 372px;
            margin-left: 68px;
            margin-top: 5px;
            background: #FFFFFF;
            box-shadow: 0px 4px 8px 2px rgba(0,0,0,0.04), 0px 2px 6px 0px rgba(0,0,0,0.06), 0px 0px 4px 0px rgba(0,0,0,0.08);
            border-radius: 4px;
            position: absolute;
            .list{
              max-height:372px;
            }
            .item{
              display: flex;
              margin: 0 16px;
              padding: 14px 0 10px 0;
              position: relative;
              border-bottom: 1px solid #EEEEEE;
              .item-left{
                margin-right: 12px;
                img{
                  width: 40px;
                  height: 40px;
                }
              }
              .item-right{
                p{
                  margin: 0;
                  padding: 0;
                }
              }
            }
            .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;
            }
            .btn{
              padding: 16px 20px 24px 0;
              display: block;
              text-align: right;
            }
          }
        }
      }
      .dialog-footer{
        .download{
          float: left;
        }
      }
    }
  }
</style>
