<template>
  <div style="height: 100%;">
    <a-spin :spinning="spinning">
      <a-card v-if="!isDetail" :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">
              <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"
          :selectedRowKeys.sync="selectedRowKeys"
          :scroll="{ y: 'calc(100vh - 306px)' }"
        >
          <template slot="index" slot-scope="{ index }">
            {{ index + 1 }}
          </template>
        </custom-table>
      </a-card>
    </a-spin>
    <Detail v-if="isDetail" type="BLANKPHD" :sampleId="currSampleId" :allData="detailJson" @back="handleBack"></Detail>
  </div>
</template>
<script>
const columns = [
  {
    title: 'NO',
    align: 'left',
    width:80,
    scopedSlots: {
      customRender: 'index',
    },
    customHeaderCell: () => {
      return {
        style: {
          'padding-left': '26px !important',
        },
      }
    },
    customCell: () => {
      return {
        style: {
          'padding-left': '26px !important',
        },
      }
    },
  },
  {
    title: 'STATION',
    align: 'left',
    dataIndex: 'stationName',
  },
  {
    title: 'DETECTOR CODE',
    align: 'left',
    dataIndex: 'siteDetCode',
  },
  {
    title: 'SPECTRAL QUALIFIER',
    align: 'left',
    dataIndex: 'spectralQualifie',
  },
  {
    title: 'ACQUISITION START TIME',
    align: 'left',
    dataIndex: 'acquisitionStart',
  },
  {
    title: 'ACQUISITION STOP TIME',
    align: 'left',
    dataIndex: 'acquisitionStop',
  },
]
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction, getFileAction } from '../../../../../api/manage'
import dateFormat from '../../../../../components/jeecg/JEasyCron/format-date'
import Detail from "../../../detail.vue"
export default {
  name: 'menuTree',
  mixins: [JeecgListMixin],
  components: {
    Detail,
  },
  data() {
    return {
      spinning: false,
      isImmediate:true,
      isDetail:false,
      columns,
      queryParam: {
        dataType: 'B',
        startTime: dateFormat(new Date(), 'yyyy-MM-dd'),
        endTime: dateFormat(new Date(), 'yyyy-MM-dd'),
        stationIds: [],
        spectralQualifie:""
      },
      url: {
        list: '/webStatistics/findParticulatePage',
        findStationList: '/webStatistics/findStationList',
      },
      stationList: [],
      dataSource: [],
      detailJson: {},
      strIds: "",
      allChecked: false,
      currSampleId: "",
      pageType:"ACQ"
    }
  },
  created() {
    this.findStationList()
  },
  methods: {
    handleExcel() {
      if (this.dataSource.length>0) {
        let params = {
          ...this.queryParam,
          pageType:this.pageType
        }
        getFileAction("/webStatistics/radionuclideExport", params).then(res => {
          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 = "BLANKPHD"
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
          }
        })
      } else {
        this.$message.warning("No downloadable data")
      }
    },
    searchQueryData() {
      this.isImmediate = false
      this.loading = true
      let params = {
        ...this.queryParam,
        pageNo: 1,
        pageSize: 10
      }
      getAction(this.url.list, params).then((res) => {
        this.loading = false
        if (res.success) {
          this.ipagination.current = res.result.current
          this.ipagination.pageSize = res.result.size
          this.ipagination.total = res.result.total
          this.dataSource = res.result.records
        } else {
          this.$message.warning("This operation fails. Contact your system administrator")
        }
      })
    },
    handleDetail(record) {
      this.spinning = true
      this.currSampleId = record.sampleId
      getAction("webStatistics/findGeneratedReport", { sampleId: record.sampleId }).then(res => {
        this.spinning = false
        if (res.success) {
          this.detailJson = res.result
          this.detailJson = JSON.parse(JSON.stringify(this.detailJson))
          this.isDetail = true
        } else {
          this.$message.warning("This operation fails. Contact your system administrator")
        }
      }).catch(err => {
        this.spinning = false
      })
    },
    handleBack(flag) {
      this.isDetail = flag
    },
    findStationList() {
      getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
        if (res.success) {
          if (res.result.length>0) {
            this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
          } else {
            this.stationList=[]
          }
        } else {
          this.$message.warning("This operation fails. Contact your system administrator")
        }
      })
    },
    handleSelectChange(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)
      } else {
        this.queryParam.stationIds =[]
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },
  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',
            },
          },
          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',
            },
          },
          style: {
            width: 'auto',
          },
        },
      ]
    },
  },
}
</script>
<style lang="less" scoped>
.icon-edit{
  margin-right: 10px;
}
</style>
  