<template>
  <div class="app-container">
    <el-card>
      <div style="width: 990px;display: flex">
        <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" style="flex: 8"/>
        <el-button v-popover:popover4 type="success" icon="el-icon-upload" style="margin-left: 16px;width: 140px;margin-top: 116px;flex: 1" @click="handleAdd">确认导入</el-button>
      </div>
      <div style="margin-top: 26px;margin-bottom: 26px">
        <el-table
          v-loading="loading"
          :data="tableData"
          :header-row-style= "{fontSize: '18px',fontFamily:'MiSans Demibold',height: '64px',backgroundColor:'#fff'}"
          :row-style="{fontSize: '16px',fontFamily:'MiSans Regular',height: '64px'}"
          element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)"
          stripe
          tooltip-effect="dark"
          style="width: 992px"
          height="600"
          border
          size="mini">
          <el-table-column type="index" label=" " align="center" width="55"/>
          <el-table-column align="center" label="TagId" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.TagID }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="报警名称" min-width="200">
            <template slot-scope="scope">
              {{ scope.row.测量项目 }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="类型名称" min-width="120">
            <template slot-scope="scope">
              {{ scope.row.测量单位 }}
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="margin-top: 32px;">
          <el-pagination
            v-if="!loading"
            :current-page="pageList"
            :page-sizes="[50, 100, 200, 300]"
            :page-size="pageSize"
            :total="total"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import UploadExcelComponent from '@/views/SystemMaintenance/BasicAlarmMaintenance/UploadExcel.vue'
export default {
  components: { UploadExcelComponent },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0, // 总条数
      pageSize: 50, // 每页显示条数
      pageList: 1 // 后台获取页
    }
  },
  created() {
  },
  methods: {
    beforeUpload(file) {
      return true
      // const isLt1M = file.size / 1024 / 1024 < 1
      // if (isLt1M) {
      //   return true
      // }
      // this.$message({
      //   message: 'Please do not upload files larger than 1m in size.',
      //   type: 'warning'
      // })
      // return false
    },
    handleSuccess({ results, header }) {
      this.loading = true
      var Data = this.CreateData('7', '基础数据_报警类型设定_导入临时表', results, header)
      this.ExecDatabase(Data).then(response => {
        this.pageList = 1
        this.pageSize = 50
        this.searchTable()
      })
    },
    handleAdd() {
      this.loading = true
      if (this.tableData.length === 0) {
        this.$message.error('内容为空')
      } else {
        var param = []
        var Data = this.CreateData('11', '基础数据_报警类型设定_确认导入', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data.length > 0) {
            this.$message({
              message: '报警类型更新成功',
              type: 'success'
            })
            this.tableData = []
          }
          this.loading = false
        })
      }
    },
    // 查询
    searchTable() {
      this.loading = true
      var param = []
      param[0] = ['PageCurrent', this.pageList]
      param[1] = ['PageSize', this.pageSize]
      param[2] = ['PageCount', '1111', 'int', '1']
      param[3] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', '基础数据_报警类型设定_导入临时表_查询', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data.length !== 0) {
          this.tableData = response.data.result
        }
        this.total = parseInt(response.data.output[0].ItemCount)
        this.loading = false
      })
    },
    // 分页
    handleSizeChange(val) {
      this.pageList = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageList = val
      this.searchTable()
    }
  }
}
</script>
<style scoped>
  .el-card{
    margin: 0px;
  }
  ::v-deep .el-checkbox__label {
    font-size: 20px;
  }
  ::v-deep .el-checkbox__inner{
    width: 20px;
    height: 20px;
  }
  ::v-deep .el-checkbox__inner::after{
    top: 4px;
    left: 7px;
  }
</style>
<style>
  .el-pagination.is-background .el-pager li:not(.disabled){
    background-color: #f5f5f5;
    color: #4d77d6;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #4d77d6;
    color: #f5f5f5;
  }
  .el-pagination.is-background .el-pager li:not(.disabled):hover{
    background-color: #7794d5;
    color: #f5f5f5;
  }
</style>
