<template>
  <el-container class="content-height-fit">
    <el-container class="resize-fit-container">
      <div class="app-container">
        <div class="filter-container blue-top-border">
          <el-input
            v-model="listQuery.deviceNo"
            placeholder="架桥机编号"
            class="filter-item"
            clearable
            @change="getList"
          />
          <el-input
            v-model="listQuery.deviceName"
            placeholder="架桥机名称"
            class="filter-item"
            clearable
            @change="getList"
          />
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleFilter"
          >查询</el-button>
        </div>
        <div class="content-container">
          <el-table
            v-loading="listLoading"
            row-key="id"
            :data="list"
            border
            fit
            highlight-current-row
            style="width: 100%"
            height="calc(100vh - 276px)"
          >
            <div slot="empty">
              <span v-if="listQuery.sectionId">没有数据</span>
              <span v-else>请选择标段</span>
            </div>
            <el-table-column label="项目名称" prop="projectName" align="center" />
            <el-table-column label="标段名称" prop="sectionName" align="center" />
            <el-table-column label="运梁车名称" prop="deviceName" align="center" />
            <el-table-column label="运梁车编号" prop="deviceNo" align="center" />
            <el-table-column label="运梁车型号" prop="categoryName" align="center" />
            <el-table-column label="监测时间" prop="date" width="150" align="center" />
            <el-table-column label="状态" width="100" align="center">
              <template slot-scope="{ row }">
                {{ row.online?'在线':'离线' }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              width="120"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{ row }">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleView(row)"
                >历史记录</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total"
            :skip-count.sync="listQuery.skipCount"
            :max-result-count.sync="listQuery.maxResultCount"
            @pagination="getList"
          />
        </div>
      </div>
    </el-container>
  </el-container>
</template>

<script>
import * as interfaceApi from '@/api/device-manage.js'

import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'ListMng',
  directives: { waves },
  components: { Pagination },
  props: {
    query: { type: Object, default: null, required: false }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        projectId: undefined,
        sectionId: undefined,
        sectionAreaId: undefined,
        deviceNo: '',
        deviceName: '',
        deviceType: undefined,
        skipCount: 0,
        maxResultCount: 20
      }
    }
  },
  watch: {
    query: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) {
          this.listQuery = val
          this.getList()
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    // 清空下拉
    // 获取数据列表
    getList() {
      if (!this.listQuery.sectionId) {
        this.list = []
        return
      }
      this.listLoading = true
      interfaceApi
        .getList(this.listQuery)
        .then(res => {
          res.items.forEach(t => {
            t.projectName = this.listQuery.projectName
            t.sectionName = this.listQuery.sectionName
          })
          this.list = res.items
          this.total = res.totalCount
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    // 查询
    handleFilter() {
      this.listQuery.skipCount = 0
      this.getList()
    },
    handleView(row) {
      this.$emit('viewData', row)
    }
  }
}
</script>

<style  scoped>
.number >>> input{
  text-align: left !important;
}
.el-selects >>> .el-input--suffix{
  width: 150px !important;
}
</style>
