<template>
  <a-card :bordered="false" style="margin-left: 20px">
    <search-form :items="formItems" v-model="queryParam" @search="searchQuery">
      <a-space style="float: right" class="btn-group" slot="additional">
        <a-button @click="handleEdit" type="primary">
          <img src="@/assets/images/global/edit.png" alt="" />
          Excel
        </a-button>
      </a-space>
    </search-form>
    <custom-table
      size="middle"
      rowKey="sampleId"
      :columns="columns"
      :list="dataSource"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
      :selectedRowKeys.sync="selectedRowKeys"
      :scroll="{ x: true, y: 'calc(100vh - 410px)' }"
    >
      <template slot="index" slot-scope="{ index }">
        {{ index + 1 }}
      </template>
    </custom-table>
  </a-card>
</template>
<script>
const columns = [
  {
    title: 'NO',
    align: 'left',
    width: 50,
    scopedSlots: {
      customRender: 'index',
    },
    customHeaderCell: () => {
      return {
        style: {
          'padding-left': '26px !important',
        },
      }
    },
    customCell: () => {
      return {
        style: {
          'padding-left': '26px !important',
        },
      }
    },
  },
  {
    title: 'STATION',
    align: 'left',
    dataIndex: 'siteDetCode',
    width: 130,
  },
  {
    title: 'DETECTOR CODE',
    align: 'left',
    width: 100,
    dataIndex: 'sampleId',
  },
  {
    title: 'SPECTRAL QUALIFIER',
    align: 'left',
    width: 100,
    dataIndex: 'stationName',
  },
  {
    title: 'ACQUISITION START TIME',
    align: 'left',
    width: 100,
    dataIndex: 'detectorsName',
  },
  {
    title: 'ACQUISITION STOP TIME',
    align: 'left',
    width: 120,
    dataIndex: 'sampleType',
  },
]
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'menuTree',
  mixins: [JeecgListMixin],
  data() {
    return {
      columns,
      url: {
        list: '/gardsSampleData/findPage',
        delete: '/gardsSampleData/deleteById',
      },
    }
  },
  created() {},
  methods: {
    handleTableChange() {},
  },
  computed: {
    formItems() {
      return [
        {
          type: 'a-input',
          label: '',
          name: 'username',
          props: {
            style: {
              width: '166px',
            },
          },
          style: {
            width: 'auto',
          },
        },
        {
          type: 'custom-select',
          label: 'Stations',
          name: 'roleId',
          props: {
            options: this.roleOptions,
            style: {
              width: '200px',
            },
          },
          style: {
            width: 'auto',
          },
        },
        {
          label: 'Start date',
          type: 'custom-date-picker',
          name: 'collectStart',
          props: {
            showTime: { format: 'HH:mm' },
            format: 'YYYY-MM-DD HH:mm',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            style: {
              minWidth: 'auto',
              width: '200px',
            },
          },
          style: {
            width: 'auto',
          },
        },
        {
          label: 'End date',
          type: 'custom-date-picker',
          name: 'collectStop',
          props: {
            showTime: { format: 'HH:mm' },
            format: 'YYYY-MM-DD HH:mm',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            style: {
              minWidth: 'auto',
              width: '200px',
            },
          },
          style: {
            width: 'auto',
          },
        },
      ]
    },
  },
}
</script>
<style lang="less" scoped>
</style>
  