<template>
  <app-container>
<!--    设备最新数据-->
    <div class="support-title">设备最新数据</div>
    <div class="support-contont">
      <div class="item-title">设备类型<sup class="star">*</sup></div>
      <el-select v-model="devType" style="margin: 0px 10px;width: 200px">
        <el-option
          v-for="item in deviceTypeList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
      <el-button @click="batchExport" type="primary" style="margin-left: 20px">导 出</el-button>
    </div>
<!--    设备报警统计结果-->
    <div class="support-title">设备报警统计结果</div>
    <div class="support-contont">
      <div class="item-title">设备类型<sup class="star">*</sup></div>
      <el-select v-model="devType1" style="margin: 0px 10px;width: 200px">
        <el-option
          v-for="item in deviceTypeList"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
      <div class="item-title">查询时间范围<sup class="star">*</sup></div>
      <el-date-picker
        v-model="timeRange"
        type="daterange"
        range-separator="至"
        value-format="yyyy-MM-dd"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :clearable="false"
      />
      <el-button @click="batchAlarm" type="primary" style="margin-left: 20px">导 出</el-button>
    </div>
<!--    设备上报数据统计结果-->
    <div class="support-title">设备上报数据统计结果</div>
    <div class="support-contont">
      <div class="item-title">设备类型<sup class="star">*</sup></div>
      <el-select v-model="devType2" style="margin: 0px 10px;width: 200px">
        <el-option
          v-for="item in deviceTypeList.filter(item => item.value==='1' || item.value==='4')"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>
      <div class="item-title">查询时间范围<sup class="star">*</sup></div>
      <el-date-picker
        v-model="timeRange1"
        type="daterange"
        range-separator="至"
        value-format="yyyy-MM-dd"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :clearable="false"
      />
      <el-button @click="batchData" type="primary" style="margin-left: 20px">导 出</el-button>
    </div>
  </app-container>
</template>

<script>
import {getSearchLastWeek, getSearchLastWeekTime} from '@/utils/dateutils'
import { exportFile } from '@/utils/exportutils'
import {getDeviceType} from "@/api/device/device";
import {alarmExport, dataExport, deviceExport} from "@/api/device/support";

export default {
  name: 'Support',
  data() {
    return {
      listQuery: {
        keywords: '', // 关键字
        deptid: '', // 部门id
        beginTime: '', // 开始时间
        endTime: '', // 结束时间
        offset: 1,
        limit: 20,
        sort: '',
        order: ''
      }, // 筛选条件
      timeRange: [], // 时间范围
      timeRange1: [], // 时间范围
      deviceTypeList: [],
      devType: '',
      devType1: '',
      devType2: '',
    }
  },
  mounted() {
    // 如果路径里带参数，解析devcode参数
    this.timeRange = getSearchLastWeek()
    this.timeRange1 = getSearchLastWeek()
    this.fetchDeviceType()
  },
  methods: {
    batchExport() {
      // 全屏加载动画
      const loading = this.$loading({
        lock: true,
        text: '数据处理中,请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      deviceExport({deviceType: this.devType}).then(res => {
        loading.close() // 关闭加载动画
        let fileName = `${this.deviceTypeList.filter(item=>item.value === this.devType)[0].name}-最新数据.xlsx`
        // fileName = fileName.replace(/-|:| /g, '')
        const blob = new Blob([res.data])
        exportFile(blob, fileName)
      }).catch((res) => {
        loading.close()
      })
    },
    batchAlarm() {
      // 全屏加载动画
      if (this.timeRange.length === 0 || this.timeRange.length === null) {
        this.$message.warning('请选择查询时间范围')
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '数据处理中,请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      alarmExport({
        deviceType: this.devType1,
        startTime: this.timeRange[0],
        endTime: this.timeRange[1],
      }).then(res => {
        loading.close() // 关闭加载动画
        let fileName = `${this.deviceTypeList.filter(item=>item.value === this.devType1)[0].name}-报警统计结果-${this.timeRange[0]}-${this.timeRange[1]}.xlsx`
        // fileName = fileName.replace(/-|:| /g, '')
        const blob = new Blob([res.data])
        exportFile(blob, fileName)
      }).catch((res) => {
        loading.close()
      })
    },
    batchData() {
      // 全屏加载动画
      if (this.timeRange1.length === 0 || this.timeRange1.length === null) {
        this.$message.warning('请选择查询时间范围')
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '数据处理中,请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      dataExport({
        deviceType: this.devType2,
        startTime: this.timeRange1[0],
        endTime: this.timeRange1[1],
      }).then(res => {
        loading.close() // 关闭加载动画
        let fileName = `${this.deviceTypeList.filter(item=>item.value === this.devType2)[0].name}-上报数据统计结果-${this.timeRange1[0]}-${this.timeRange1[1]}.xlsx`
        // fileName = fileName.replace(/-|:| /g, '')
        const blob = new Blob([res.data])
        exportFile(blob, fileName)
      }).catch((res) => {
        loading.close()
      })
    },
    fetchDeviceType() {
      getDeviceType().then(response => {
        this.deviceTypeList = []
        // 过滤掉该单位不支持的设备类型
        const deviceTypes = this.$store.getters.deviceTypes
        for (const deviceType of response.data) {
          if (deviceTypes.indexOf(deviceType.value) !== -1) {
            this.deviceTypeList.push(deviceType)
          }
        }
        this.devType = this.deviceTypeList[0].value
        this.devType1 = this.deviceTypeList[0].value
        this.devType2 = this.deviceTypeList[0].value
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.support-title {
  color: #333333;
  font-weight: bold;
  font-size: 16px;
  margin: 30px 10px 10px 10px;
}
.item-title {
  color: #333333;
  margin: 10px;
  font-size: 16px;
}
.support-contont {
  display: flex;
  margin: 10px 20px;
}
.star {
  color: red;
  padding-left: 5px;
  margin-right: 10px;
}
</style>