<template>
  <div class="app-container" v-if="isShow">
    <PageHeader :pageContent="pageContent" @goBack="goBack" />
    <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="68px" v-show="showSearch">
      <el-form-item label="关键字" prop="keyWord">
        <el-input v-model="queryForm.keyWord" clearable placeholder="请输入关键字" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="55"
        :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
      />
      <el-table-column label="绑定设备名称" prop="typeName" align="center" />
      <el-table-column label="设备编号" prop="maCode" align="center" />
      <el-table-column label="绑定日期" prop="bindTime" align="center" />
      <el-table-column label="解绑日期" prop="unBindTime" align="center" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import PageHeader from '@/components/pageHeader'
import { getRecordList } from '@/api/store/iotManagement'

export default {
  name: 'BindDetails',
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    iotId: {
      type: Number,
      default: '',
    },
  },
  components: {
    PageHeader,
  },
  data() {
    return {
      showSearch: true, // 是否显示搜索
      queryForm: {
        keyWord: '',
      },
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      pageContent: '绑定详情',
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleQuery() {
      console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.keyWord)
      this.getList()
    },
    async getList() {
      try {
        const params = {
          keyWord: this.queryForm.keyWord,
          iotId: this.iotId,
          ...this.queryParams
        }
        console.log('🚀 ~ getList ~ 获取列表', params)
        const res = await getRecordList(params)
        this.tableData = res.rows
        this.total = res.total
      } catch (err) {
        console.log('🚀 ~ getList ~ err', err)
      }
    },
    goBack() {
      this.$tab.refreshPage()
    },
  },
}
</script>

<style lang="scss" scoped>
.maCode {
  margin-top: 15px;
  font-size: 18px;
}
</style>
