<template>
  <div>
    <el-card class="no-bottom">
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-width="80px"
        inline
      >
        <el-form-item
          label="设备名称:"
          prop="name"
        >
          <el-input v-model="searchForm.name" />
        </el-form-item>
        <el-form-item
          label="在线状态:"
          prop="onlineState"
        >
          <el-select v-model="searchForm.onlineState" 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(1)">查询</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" @click="showAddItem">增加实例</el-button>
      </div>
      <el-table
        :data="tableData"
        border
      >
        <el-table-column
          type="index"
          label="序号"
          width="50px"
          align="center"
        />
        <el-table-column
          prop="deviceTypeName"
          label="设备类型"
        />
        <el-table-column
          prop="name"
          label="设备名称"
        />
        <el-table-column
          prop="description"
          label="设备描述"
        />
        <el-table-column
          prop="businessId"
          label="设备业务ID"
          min-width="155"
        />
        <el-table-column
          prop="deviceModel"
          label="设备型号"
          min-width="155"
        />

        <el-table-column
          prop="onlineState"
          label="在线状态"
          :formatter="$_dictionaryFormat"
        />
        <el-table-column
          prop="onlineUpdateTime"
          label="在线状态更新时间"
          min-width="150px"
          :formatter="$moment"
        />

        <el-table-column
          label="操作"
          width="320px"
          align="center"
        >
          <template slot-scope="scope">
            <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" @click="editItem(scope.row)">编辑</el-button>
            <el-popconfirm
              title="确定要删除此条记录吗？"
              style="margin-left: 10px"
              @onConfirm="deleteItem(scope.row.id)"
            >
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </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"
        ref="instanceForm"
        :model="instanceForm"
        label-width="90px"
        :rules="rules"
      >
        <el-form-item
          label="设备名称:"
          prop="name"
        >
          <el-input v-model="instanceForm.name" />
        </el-form-item>
        <el-form-item
          label="设备描述:"
          prop="description"
        >
          <el-input
            v-model="instanceForm.description"
            type="textarea"
            :row="2"
          />
        </el-form-item>
        <el-form-item
          label="设备业务ID:"
        >
          <el-input v-model="instanceForm.businessId" />
        </el-form-item>
        <el-form-item
          label="设备型号:"
        >
          <el-input v-model="instanceForm.deviceModel" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addItem">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTableData, addDeviceInstance, updateDeviceInstance, deleteDeviceInstance } from '@/api/equipment-management/device-instance'
import dictionary from '@/utils/dictionary'
export default {
  name: 'DeviceInstance',
  components: {},
  mixins: [
    dictionary
  ],
  props: {},
  data() {
    return {
      searchForm: {
        name: null,
        onlineState: null
      },
      instanceForm: {
        deviceTypeId: null,
        name: null,
        description: null,
        businessId: null,
        deviceModel: null
      },
      add: true,
      dialogVisible: false,
      tableData: [],
      addForm: {
        input: null,
        status: null
      },
      pageForm: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      deviceStatusDialog: false,
      deviceHistoryDialog: false,
      rules: {
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入设备描述', trigger: 'blur' }
        ]
      },
      currentId: null,
      currentDeviceTypeId: null
    }
  },
  created() {
    this.getTableData(1)
  },
  mounted() {},
  methods: {
    showAddItem() {
      this.instanceForm = {
        deviceTypeId: this.currentDeviceTypeId,
        name: null,
        description: null,
        businessId: null,
        deviceModel: null
      }
      this.dialogVisible = true
      this.add = true
    },
    goto(url) {
      this.$router.push(url)
    },
    getTableData(pageNum) {
      const params = {
        ...this.searchForm,
        pageNum,
        pageSize: this.pageForm.pageSize
      }
      getTableData(params)
        .then(res => {
          const { records, total } = res.data
          this.tableData = records
          this.pageForm.total = total
        })
        .catch(err => console.error(err))
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
    },
    addRow() {
      this.add = true
      this.dialogVisible = true
    },
    editItem(row) {
      const { id, deviceTypeId, name, description, businessId, deviceModel } = row
      this.instanceForm = {
        deviceTypeId,
        name,
        description,
        businessId,
        deviceModel
      }
      this.currentId = id
      this.dialogVisible = true
      this.add = false
    },
    addItem() {
      this.$refs.instanceForm.validate()
        .then(_ => {
          return { ...this.instanceForm }
        })
        .then(params => {
          if (!this.add) { params.id = this.currentId }
          return this.add ? addDeviceInstance(params) : updateDeviceInstance(params)
        })
        .then(_ => this.$message.success('操作成功'))
        .then(_ => this.getTableData(this.pageForm.pageNum))
        .then(_ => {
          this.dialogVisible = false
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    deleteItem(id) {
      deleteDeviceInstance({ id })
        .then(_ => this.getTableData(this.pageForm.pageNum))
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    handleSizeChange(val) {
      this.pageForm.pageSize = val
      this.getTableData(1)
    },
    handleCurrentChange(val) {
      this.pageForm.pageNum = val
      this.getTableData(val)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
