<template>
  <div>
    <el-card class="no-bottom">
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-width="80px"
        inline
      >
        <el-form-item
          label="设备类型:"
          prop="deviceTypeId"
        >
          <el-select
            v-model="searchForm.deviceTypeId"
            style="width: 100%"
          >
            <el-option
              v-for="item in deviceTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="设备名称:"
          prop="name"
        >
          <el-input v-model="searchForm.name" maxlength="50" />
        </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">
      <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
          label="操作"
          width="120px"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="showAccessInfoDialog(scope.row)">接入信息</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="设备接入信息"
      :visible.sync="dialogVisible"
      width="700px"
    >
      <div>
        <el-card class="no-bottom">
          <div slot="header">
            <span>基本信息</span>
          </div>
          <el-row>
            <el-col :span="4"><div class="base-info-label">设备类型</div></el-col>
            <el-col :span="20"><div>{{ accessData.deviceTypeName }}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="4"><div class="base-info-label">设备名称</div></el-col>
            <el-col :span="20"><div>{{ accessData.instanceName }}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="4"><div class="base-info-label">通信ID</div></el-col>
            <el-col :span="20"><div>{{ accessData.communicationId }}</div></el-col>
          </el-row>
        </el-card>
        <el-card class="margin-top-20">
          <div slot="header" class="clearfix">
            <span>MQTT信息</span>
          </div>
          <el-table
            :data="accessData.mqttTopicInfoVOList"
            style="width: 100%; height: 310px;"
            border
          >
            <el-table-column
              type="index"
              label="序号"
              width="50px"
              align="center"
            />
            <el-table-column
              prop="dataModelName"
              label="数据模型"
            />
            <el-table-column
              prop="mqttTopic"
              label="Topic"
            />
          </el-table>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTableData, getAccessInfo } from '@/api/equipment-management/device-instance'
import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
export default {
  name: 'DeviceAccess',
  components: {},
  props: {},
  data() {
    return {
      searchForm: {
        name: null,
        deviceTypeId: null
      },
      deviceTypeList: [],
      accessData: {
        deviceTypeName: null,
        instanceName: null,
        communicationId: null,
        mqttTopicInfoVOList: []
      },
      dialogVisible: false,
      tableData: [],
      pageForm: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      currentId: null,
      currentDeviceTypeId: null
    }
  },
  created() {
    this.getTableData(1)
    // 初始化设备类型
    getAllDeviceModel()
      .then(res => {
        this.deviceTypeList = res.data.map(v => {
          return {
            value: v.id,
            label: v.name
          }
        })
      })
      .catch(err => this.$message.error(err.message))
  },
  mounted() {},
  methods: {
    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 => this.$message.error(err.message))
    },
    showAccessInfoDialog(row) {
      this.accessData = {
        deviceTypeName: null,
        instanceName: null,
        communicationId: null,
        mqttTopicInfoVOList: []
      }
      this.dialogVisible = true
      const params = { 'id': row.id }
      getAccessInfo(params)
        .then(res => {
          this.accessData = res.data
        })
        .catch(err => this.$message.error(err.message))
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
    },
    handleSizeChange(val) {
      this.pageForm.pageSize = val
      this.getTableData(1)
    },
    handleCurrentChange(val) {
      this.pageForm.pageNum = val
      this.getTableData(val)
    }
  }
}
</script>

<style lang="scss" scoped>
.base-info-label {
  margin-bottom: 23px;
  padding-right: 35px;
  text-align: right;
}
</style>
