
<template>
<a-card :bordered="false"   style="height: 600px;overflow: hidden;overflow-y: scroll;">
  <a-row>
    <a-col>
      <a-space>
        <a-select allowClear style="width: 100px;"  v-model:value="state.queryParams.searchKey">
          <a-select-option v-for="item in searchKeys" :key="item.key" :value="item.key" >{{item.name}}</a-select-option>
        </a-select>
        <a-input allowClear v-if="state.queryParams.searchKey !== 'modelId'"  v-model:value="state.queryParams.searchValue"  ></a-input>
        <a-button type="primary" >搜索</a-button>
      </a-space>
    </a-col>
  </a-row>
  <a-table
    :rowKey="record => record.id"
    style="margin-top: 20px;"
    :loading="state.loading"
    :columns="columns"
    :data-source="state.dataSource"
    :pagination="state.queryParams"

    :rowSelection="{
      type: 'radio',
      selectedRowKeys: state.selectedRowKeys,
      onChange: onChangeRowKeys
    }"
    @change="changePage"
  />
</a-card>
</template>
<script lang='ts' setup >
import { DeviceContriller } from '@/controller'
import { onMounted, reactive, toRef, toRefs } from 'vue'

const searchKeys = [
  { name: '设备名称', key: 'deviceLabel' },
  { name: '设备标识码', key: 'deviceCode' }
]

const columns = [
  {
    title: '设备名称',
    dataIndex: 'deviceLabel'
  },
  {
    title: '设备标识码',
    dataIndex: 'deviceCode'
  },
  {
    title: '所属产品',
    dataIndex: 'modelLabel'
  },
  {
    title: '描述',
    dataIndex: 'deviceDescription'
  }
]

const state = reactive({
  loading: false,
  dataSource: [],
  selectedRowKeys: [],
  queryParams: {
    page: 1,
    pageSize: 5,
    total: 0,
    size: 'small',
    searchKey: 'deviceLabel',
    searchValue: '',
    showSizeChanger: false
  }
})

const changePage = ({ current }) => {
  state.queryParams.page = current
  getDevicePage()
}

const onChangeRowKeys = (rowKeys: string[]) => {
  console.log(rowKeys)
  state.selectedRowKeys = rowKeys
}

const getDevicePage = async () => {
  const { data, sum } = await DeviceContriller.page(state.queryParams)
  state.dataSource = data
  state.queryParams.total = sum
  console.log('sum:', sum)
}

defineExpose({
  getSelectDevice: () => state.dataSource.find(item => item.id === state.selectedRowKeys[0])
})

onMounted(() => {
  getDevicePage()
})

</script>
<style lang='less' scoped >
</style>
