<template>
  <div>
    <el-card class="no-bottom">
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-width="80px"
        inline
      >
        <el-form-item
          label="设备名称:"
          prop="input"
        >
          <el-input v-model="searchForm.input" />
        </el-form-item>
        <el-form-item
          label="设备分类:"
          prop="status"
        >
          <el-select v-model="searchForm.status" placeholder="请选择">
            <el-option label="全部" :value="null" />
            <el-option label="正常" :value="0" />
            <el-option label="锁定" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="margin-top-20">
      <div class="buttons-group" style="margin-bottom: 20px">
        <el-button type="primary">增加实例</el-button>
      </div>
      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="50px"
          align="center"
        />
        <el-table-column
          prop="a"
          label="设备名称"
        />
        <el-table-column
          prop="b"
          label="设备描述"
        />
        <el-table-column
          prop="c"
          label="设备分类"
        />
        <el-table-column
          prop="d"
          label="设备状态"
        />
        <el-table-column
          prop="e"
          label="运行状态"
        />
        <el-table-column
          prop="f"
          label="运行时长"
        />
        <el-table-column
          prop="g"
          label="上次启动时间"
        />
        <el-table-column
          prop="h"
          label="上次停机时间"
        />
        <el-table-column
          label="操作"
          width="320px"
          align="center"
        >
          <template>
            <el-button
              type="text"
              @click="goto('/device-management/device-detail')"
            >详情</el-button>
            <el-button
              type="text"
              @click="goto('/device-management/device-monitoring')"
            >监控</el-button>
            <el-button
              type="text"
              @click="goto('/device-management/history-data')"
            >历史数据</el-button>
            <el-button type="text" @click="goto('/device-alarm/alarm-show')">告警历史</el-button>
            <el-button type="text">编辑</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="margin-top-20 text-align-right"
        :current-page="pageForm.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog
      :title="add ? '增加系统' : '编辑系统'"
      :visible.sync="dialogVisible"
      width="700px"
    >
      <el-form
        v-if="dialogVisible"
        :model="addForm"
        label-width="90px"
      >
        <el-form-item
          label="input:"
        >
          <el-input v-model="addForm.input" />
        </el-form-item>
        <el-form-item
          label="status:"
        >
          <el-input v-model="addForm.status" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSystem">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTableData } from '@/api/device-management/device-instance'
export default {
  name: 'DeviceInstance',
  components: {},
  props: {},
  data() {
    return {
      searchForm: {
        input: null,
        status: null
      },
      add: true,
      dialogVisible: false,
      tableData: [],
      addForm: {
        input: null,
        status: null
      },
      pageForm: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      deviceStatusDialog: false,
      deviceHistoryDialog: false
    }
  },
  created() {
    this.tableData = [
      {
        a: 1,
        d: '健康',
        e: '运行中'
      },
      {
        a: 2,
        d: '故障',
        e: '已停机'
      }
    ]
  },
  mounted() {},
  methods: {
    goto(url) {
      this.$router.push(url)
    },
    getTableData(pageNum) {
      const params = {
        ...this.searchForm,
        pageNum,
        pageSize: this.pageForm.pageSize
      }
      getTableData(params)
        .then(res => {
          const { records, totalSize } = res.data
          this.tableData = records
          this.pageForm.total = totalSize
        })
        .catch(err => console.error(err))
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
    },
    addRow() {
      this.add = true
      this.dialogVisible = true
    },
    editItem() {
      this.add = false
      this.dialogVisible = true
    },
    deleteItem(id) {},
    saveSystem() {},
    handleSizeChange(val) {
      this.pageForm.pageSize = val
      this.getTableData(1)
    },
    handleCurrentChange(val) {
      this.pageForm.pageNum = val
      this.getTableData(val)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
