<template>
  <div class="dashboard-container">
    <div class="search-content">
      <el-select v-model="params.terminalCode" style="width: 220px;" clearable placeholder="请选择终端名称">
        <el-option v-for="item in terminalList" :key="item.terminalCode" :label="item.terminalName"
          :value="item.terminalCode" />
      </el-select>
      <div class="search-btn">
        <div class="search" @click="searchData">查询</div>
        <div class="reset" @click="reset">重置</div>
      </div>
    </div>
    <div class="table-content">
      <!-- <div style="font-size: 18px;position: relative;top: 17px;float: left;">
        忽略个数:<span style="font-size: 24px; color: red">{{
          total
        }}</span>        
      </div> -->
      <div class="btn" @click="exportIgnoreList()">
        <span class="icon font_family">&#xe605;</span>
        导出
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="terminalCode" label="终端编码" align="center" />
        <el-table-column prop="terminalName" label="终端名称" align="center" />
        <el-table-column prop="ignoreTime" label="忽略时间" align="center" />
        <el-table-column prop="vehicleCode" label="忽略报警详情查看" align="center">
          <template slot-scope="scope">
            <div class="operateBtn">
              <div @click="getDetail(scope.row)">查看</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <detaileDialog :detaileData="detaileData"></detaileDialog>
      <div class="pagination">
        <el-pagination :page-sizes="[10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <!-- <el-row type="flex" justify="end" style="margin-top: 10px">
        <el-pagination :page-sizes="[10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-row> -->
    </div>
  </div>
</template>
  
<script>
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import {
  getIgnoreList,
  exportIgnoreList,
  terminalAll,
  getDetail
} from '@/api/sysManage'
import detaileDialog from './compontens/detaileDialog.vue'
export default {
  name: 'Cart',
  computed: {
    ...mapGetters(['name'])
  },
  components: {
    detaileDialog
  },
  data() {
    return {
      total: 0,
      tableData: [],
      params: {
        pageNum: 1,
        pageSize: 10,
        terminalCode: '',
        alarmId: ''
      },
      terminalList: [],
      detaileData: {
        dialogVisible: false,
        data: {}
      }
    }
  },

  created() {
    this.getIgnoreList(this.params)
    this.terminalAll()
  },
  methods: {
    getIgnoreList(params) {
      getIgnoreList(params).then(res => {
        this.total = res.data.total
        this.tableData = res.data.records
      })
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getIgnoreList(this.params)
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getIgnoreList(this.params)
    },
    exportIgnoreList() {
      exportIgnoreList('/terminal/ignore/export', {
        terminalCode: this.params.terminalCode,
        alarmId: this.params.alarmId,
      }).then(res => {
        // const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
        // const url = window.URL.createObjectURL(blob);
        // const a = document.createElement('a');
        // a.href = url;
        // a.download = '终端忽略报警信息.xls';
        // a.click();
        // window.URL.revokeObjectURL(url);


        if (res.type == "application/json") {
          const reader = new FileReader(); 
          reader.readAsText(res, 'utf-8'); 
          reader.onload = function () {
            const msg = JSON.parse(reader.result);
            if(msg.code == 200){
              const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
              const url = window.URL.createObjectURL(blob);
              const a = document.createElement('a');
              a.href = url;
              a.download = '终端忽略报警信息.xls';
              a.click();
              window.URL.revokeObjectURL(url);
            } else{
              Message({
                type: 'error',
                message: msg.msg
              });
            }      
          }
        }else{
          const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = '终端忽略报警信息.xls';
          a.click();
          window.URL.revokeObjectURL(url);
        }


      })
    },
    terminalAll() {
      terminalAll().then(res => {
        this.terminalList = res.data
      })
    },
    searchData() {
      this.getIgnoreList(this.params)
    },
    reset() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        terminalCode: '',
        alarmId: ''
      }
      this.getIgnoreList(this.params)
    },
    getDetail(row) {      
      getDetail({ id: row.id }).then(res => {               
        this.detaileData.data = res.data
        this.detaileData.data.terminalName = row.terminalName
        this.detaileData.data.terminalCode = row.terminalCode
        this.detaileData.data.ignoreTime = row.ignoreTime
        this.detaileData.dialogVisible = true
      })
    }
  }
}
</script>
  
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 45px 30px 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container {
  .search-content {
    position: relative;
    top: -20px;
    width: 100%;
    height: 74px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding-left: 10px;

    .el-input {
      margin: 0 10px;
    }

    .el-select {
      margin: 0 10px;
    }

    .search-btn {
      display: flex;
      align-items: center;
      height: 100%;
      margin-left: 10px;

      div {
        // margin: 0 6px;
        display: inline-block;
        width: 80px;
        height: 40px;
        border-radius: 2px;
        font-size: 14px;
        line-height: 40px;
        text-align: center;
      }

      div:hover {
        cursor: pointer;
      }

      .search {
        margin-right: 10px;
        background-color: #2766DD;
        color: #F7F8FB;
      }

      .search:hover {
        background-color: #4D85F4;
      }

      .reset {
        color: #333334;
        border: 1px solid #D7D7D7;
      }

      .reset:hover {
        color: #1F9FFF;
        border: 1px solid #1F9FFF;
      }
    }
  }

  .table-content {
    position: relative;
    top: -20px;
    margin-top: 15px;
    width: 100%;
    background-color: #fff;
    padding: 0 20px 20px;

    .btn {
      margin: 15px 20px 15px 0;
      cursor: pointer;
      float: left;
      text-align: center;
      width: 98px;
      height: 34px;
      border-radius: 2px;
      border: 1px solid #ABC7FD;
      line-height: 34px;
      font-weight: 400;
      font-size: 14px;
      color: #2250C8;
      background-color: #E7EEFF;
    }

    .btn:hover {
      color: #FFFFFF;
      background-color: #2250C8;
      border: 1px solid #2250C8;
    }

    .btn:active {
      color: #FFFFFF;
      background-color: #194DA4;
      border: 1px solid #194DA4;
    }

    .startUsing {
      width: 60px;
      height: 25px;
      margin: 14.5px auto 0;
      line-height: 25px;
      text-align: center;
      font-size: 12px;
      color: #fff;
      border-radius: 5px;
      background-color: #00974B;
    }

    .Deactivate {
      width: 60px;
      height: 25px;
      margin: 14.5px auto 0;
      line-height: 25px;
      text-align: center;
      font-size: 12px;
      color: #fff;
      border-radius: 5px;
      background-color: #FF9933;
    }

    .operateBtn {
      display: flex;
      justify-content: center;
      color: #2866DD;

      div {
        font-size: 14px;
        margin: 0 5px;
        cursor: pointer;
      }
    }

    .pagination {
      margin: 10px 0;
      width: 100%;
      height: 20px;

      .el-pagination {
        float: right;
        margin: 10px 0;
      }
    }
  }
}


.el-tooltip__popper {
  max-width: 30%;
  padding-bottom: 5px !important;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 15;
  -webkit-box-orient: vertical;

}

.el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
</style>
  