<template>
  <div style="height: 100%">
    <a-card v-if="!isFileDetail" :bordered="false" style="margin-left: 20px">
      <search-form :items="formItems" v-model="queryParam" @search="searchQueryData">
        <a-space style="float: right" class="btn-group" slot="additional">
          <a-button @click="handleExcel" type="primary">
            <a-icon v-if="excelLoading" style="margin-right: 10px" type="loading" />
            <img class="icon-edit" 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"
        @detail="handleDetail"
        :scroll="{ y: 'calc(100vh - 306px)' }"
      >
        <template slot="index" slot-scope="{ index }">
          {{ index + 1 }}
        </template>
      </custom-table>
    </a-card>
    <file-detail v-if="isFileDetail" :dosId="currSampleId" @back="handleBack"></file-detail>
  </div>
</template>
<script>
const columns = [
  {
    title: 'NO',
    align: 'left',
    scopedSlots: {
      customRender: 'index',
    },
    customHeaderCell: () => {
      return {
        style: {
          'padding-left': '26px !important',
        },
      }
    },
    customCell: () => {
      return {
        style: {
          'padding-left': '26px !important',
        },
      }
    },
  },
  {
    title: 'STATION',
    align: 'left',
    dataIndex: 'stationCode',
  },
  {
    title: 'START TIME',
    align: 'left',
    dataIndex: 'startTime',
  },
  {
    title: 'END TIME',
    align: 'left',
    dataIndex: 'endTime',
  },
  {
    title: 'DID',
    align: 'left',
    dataIndex: 'dosId',
  },
]
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, getFileAction } from '@/api/manage'
import moment from 'moment'
import { compareDate } from '@/views/statistics/commom'
import FileDetail from './components/fileDetail.vue'
export default {
  name: 'menuTree',
  mixins: [JeecgListMixin],
  components: {
    FileDetail,
  },
  data() {
    return {
      excelLoading: false,
      isImmediate: true,
      columns,
      queryParam: {
        startTime: sessionStorage.getItem('currStartDate_sta')
          ? sessionStorage.getItem('currStartDate_sta')
          : moment().subtract(6, 'days').format('YYYY-MM-DD'),
        endTime: sessionStorage.getItem('currEndDate_sta')
          ? sessionStorage.getItem('currEndDate_sta')
          : moment().format('YYYY-MM-DD'),
        stationIds: [],
      },
      url: {
        list: '/webStatistics/findDosPage',
        delete: '/gardsSampleData/deleteById',
        findStationList: '/webStatistics/findStationList',
        findParticulatePage: '/webStatistics/findParticulatePage',
      },
      stationList: [],
      dataSource: [],
      strIds: '',
      allChecked: false,
      isFileDetail: false,
      currSampleId: '',
    }
  },
  created() {
    this.findStationList()
  },
  methods: {
    handleExcel() {
      if (this.dataSource.length > 0) {
        this.excelLoading = true
        let params = {
          ...this.queryParam,
        }
        getFileAction('/webStatistics/dosExport', params).then((res) => {
          this.excelLoading = false
          if (res.code && res.code == 500) {
            this.$message.warning('This operation fails. Contact your system administrator')
          } else {
            const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
            let link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = 'DOS'
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
          }
        })
      } else {
        this.$message.warning('No downloadable data')
      }
    },
    handleBack(flag) {
      this.isFileDetail = flag
    },
    handleDetail(record) {
      console.log(record)
      this.currSampleId = record.dosId
      this.isFileDetail = true
    },
    searchQueryData() {
      this.loading = true
      let days = compareDate(this.queryParam.startTime, this.queryParam.endTime)
      if (days <= 10) {
        this.isImmediate = false
        this.ipagination.current = 1

        const { current, pageSize } = this.ipagination

        let params = {
          ...this.queryParam,
          pageNo: current,
          pageSize: pageSize,
        }
        getAction(this.url.list, params).then((res) => {
          this.loading = false
          if (res.success) {
            if (Array.isArray(res.result)) {
              this.ipagination.total = res.result.length
              this.dataSource = res.result
            } else {
              this.ipagination.total = res.result.total
              this.dataSource = res.result.records
            }
          } else {
            this.$message.warning('This operation fails. Contact your system administrator')
          }
        })
      } else {
        this.loading = false
        this.$message.info('Maximum timespan duration is 10 days. Please, change start or end date.')
      }
    },
    findStationList() {
      getAction(this.url.findStationList, { menuName: '' }).then((res) => {
        if (res.success) {
          if (res.result.length > 0) {
            this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
            // 进入页面自动查询
            let arr = sessionStorage.getItem('selectedSta_sta')
              ? sessionStorage.getItem('selectedSta_sta').split(',')
              : []
            this.queryParam.stationIds = arr.map((item) => Number(item))
            this.searchQueryData()
          } else {
            this.stationList = []
          }
        } else {
          this.$message.warning('This operation fails. Contact your system administrator')
        }
      })
    },
    handleSelectChange(val) {
      window.sessionStorage.setItem('selectedSta_sta', val)
      let length = this.stationList.length
      if (val.length === length) {
        this.allChecked = true
      } else {
        this.allChecked = false
      }
    },
    handleSelectChangeAll(val) {
      this.allChecked = val
      if (val) {
        this.queryParam.stationIds = this.stationList.map((item) => item.value)
        window.sessionStorage.setItem('selectedSta_sta', this.queryParam.stationIds)
      } else {
        this.queryParam.stationIds = []
        window.sessionStorage.setItem('selectedSta_sta', [])
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleStartDateChange(date) {
      window.sessionStorage.setItem('currStartDate_sta', date)
    },
    handleEndDateChange(date) {
      window.sessionStorage.setItem('currEndDate_sta', date)
    },
  },
  computed: {
    formItems() {
      return [
        // {
        //   type: 'a-input',
        //   label: '',
        //   name: 'search',
        //   props: {
        //     placeholder: 'search...',
        //     style: {
        //       width: '166px',
        //     },
        //   },
        //   style: {
        //     width: 'auto',
        //   },
        // },
        {
          type: 'custom-all-select',
          label: 'Stations',
          name: 'stationIds',
          props: {
            allChecked: this.allChecked,
            filterOption: this.filterOption,
            placeholder: 'select stations',
            mode: 'multiple',
            maxTagCount: 1,
            options: [...this.stationList],
            style: {
              width: '200px',
            },
          },
          on: {
            change: this.handleSelectChange,
            changeAll: this.handleSelectChangeAll,
          },
          style: {
            width: 'auto',
          },
        },
        {
          label: 'Start date',
          type: 'custom-date-picker',
          name: 'startTime',
          props: {
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            style: {
              minWidth: 'auto',
              width: '200px',
            },
          },
          on: {
            change: this.handleStartDateChange,
          },
          style: {
            width: 'auto',
          },
        },
        {
          label: 'End date',
          type: 'custom-date-picker',
          name: 'endTime',
          props: {
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD',
            style: {
              minWidth: 'auto',
              width: '200px',
            },
          },
          on: {
            change: this.handleEndDateChange,
          },
          style: {
            width: 'auto',
          },
        },
      ]
    },
  },
}
</script>
<style lang="less" scoped>
.icon-edit {
  margin-right: 10px;
}
</style>
  