<template>
  <div>
    <search-form :items="formItems" v-model="queryParam" @search="searchQuery">
      <div style="float: right" class="btn-group" slot="additional"></div>
    </search-form>
    <custom-table
      size="middle"
      rowKey="id"
      :columns="columns"
      :list="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
      :selectedRowKeys.sync="selectedRowKeys"
    >
      <template slot="index" slot-scope="{ index }">
        {{ index + 1 }}
      </template>
    </custom-table>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

const formItems = [
  {
    label: 'SampleID',
    type: 'a-input',
    name: 'sampleID',
    span: 4
  },
  {
    label: 'Station',
    type: 'custom-select',
    name: 'station',
    props: {
      options: [
        {
          label: 'ALL',
          value: ''
        }
      ]
    },
    span: 4
  },
  {
    label: 'Detector',
    type: 'custom-select',
    name: 'detector',
    props: {
      options: [
        {
          label: 'ALL',
          value: ''
        }
      ]
    },
    span: 4
  },
  {
    label: 'From',
    type: 'a-date-picker',
    name: 'from',
    props: {
      showTime: { format: 'HH:mm' },
      format: 'YYYY-MM-DD HH:mm'
    }
  },
  {
    label: 'To',
    type: 'a-date-picker',
    name: 'to',
    props: {
      showTime: { format: 'HH:mm' },
      format: 'YYYY-MM-DD HH:mm'
    }
  },
  {
    label: '',
    type: 'a-checkbox-group',
    props: {
      options: [
        { label: 'Collect Stop', value: 'collectStop' },
        { label: 'Acq.Start', value: 'acqDotStart' },
        { label: 'SampleData', value: 'sampleData' },
        { label: 'AutoResults', value: 'autoResults' },
        { label: 'Reviewed Results', value: 'reviewedResults' }
      ]
    }
  }
]

const columns = [
  {
    title: 'NO',
    align: 'center',
    width: 100,
    scopedSlots: {
      customRender: 'index'
    }
  },
  {
    title: 'SITE DET CODE',
    align: 'center',
    dataIndex: 'siteDetCode',
    width: 100
  },
  {
    title: 'STATION ID',
    align: 'center',
    width: 100,
    dataIndex: 'stationId'
  },
  {
    title: 'STATION',
    align: 'center',
    width: 100,
    dataIndex: 'station'
  },
  {
    title: 'DETECTOR',
    align: 'center',
    width: 100,
    dataIndex: 'detector'
  },
  {
    title: 'SAMPLE TYPE',
    align: 'center',
    width: 100,
    dataIndex: 'sampleType'
  },
  {
    title: 'DATA TYPE',
    align: 'center',
    width: 100,
    dataIndex: 'dataType'
  },
  {
    title: 'GEOMETRY',
    align: 'center',
    width: 100,
    dataIndex: 'geometry'
  },
  {
    title: 'QUALIFIE',
    align: 'center',
    width: 100,
    dataIndex: 'qualifie'
  },
  {
    title: 'TRANSMIT DTG',
    align: 'center',
    width: 100,
    dataIndex: 'transmitDtg'
  }
]

export default {
  mixins: [JeecgListMixin],
  data() {
    this.formItems = formItems
    this.columns = columns
    return {
      queryParam: {
        station: '',
        detector: ''
      },
      url: {
        list: '/sys/user/list'
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
