<!--
  Description: 报警统计-异常位置分析
  Author: 李亚光
  Date: 2023-07-08
 -->
<script lang="ts" setup name="AlarmCount">
import { ElLoading, ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import layout from './layout.vue'
import { exportLocalAnalyse, getErrorAnalyse } from '@/api/home/dashboard/index'
import { getHistoryAlarmListPage } from '@/api/home/alarm/history'
import { getStationDevice } from '@/api/home/pipeline/pipeline'
import { shortcuts } from '@/utils/common'
import { exportFile } from '@/utils/exportUtils'
const $router = useRouter()
const listQuery = ref({
  begTime: '',
  endTime: '',
  ledgerType: '',
  timeType: '3',
})
// 开始结束时间
const datetimerange = ref()
// 默认当天
watch(() => datetimerange.value, (newVal) => {
  listQuery.value.begTime = ''
  listQuery.value.endTime = ''
  if (Array.isArray(newVal)) {
    if (newVal.length) {
      listQuery.value.begTime = `${newVal[0]}`
      listQuery.value.endTime = `${newVal[1]}`
    }
  }
})
const selectTimeType = (type: string) => {
  listQuery.value.timeType = type
}
const list = ref<any[]>([])
const loadingTable = ref(true)
// 获取数据
const fetchData = () => {
  loadingTable.value = true
  getErrorAnalyse(listQuery.value).then((res) => {
    list.value = res.data
    loadingTable.value = false
  }).catch(() => {
    loadingTable.value = false
  })
}
fetchData()
const { proxy } = getCurrentInstance() as any

// 导出列表
const exportList = () => {
  if (!list.value.length) {
    ElMessage.warning('暂无导出数据')
    return
  }
  const loading = ElLoading.service({
    lock: true,
    background: 'rgba(255, 255, 255, 0.8)',
  })
  exportLocalAnalyse(listQuery.value).then((res) => {
    exportFile(res.data, '异常位置分析.xlsx')
    loading.close()
  }).catch(() => {
    loading.close()
  })
}
// 设备详情
const toDetail = (row: any) => {
  if (!row.ledgerid) {
    ElMessage.warning(`该数据缺少${row.type}信息`)
    return
  }
  // console.log(row, 'row')
  if (row.type === '闸井') {
    $router.push({
      path: '/well/detail',
      query: {
        id: row.ledgerid
      }
    })
  }
  else if (row.type === '场站') {
    $router.push({
      path: '/station/detail',
      query: {
        id: row.ledgerid
      }
    })
  }
  else if (row.type === '管线') {
    const query = { begTime: '', endTime: '' }
    if (listQuery.value.begTime && listQuery.value.endTime) {
      query.begTime = listQuery.value.begTime
      query.endTime = listQuery.value.endTime
    }
    else {
      query.begTime = listQuery.value.timeType === '1' ? `${dayjs().format('YYYY-MM-DD')} 00:00:00` : listQuery.value.timeType === '2' ? `${dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD')} 00:00:00` : listQuery.value.timeType === '3' ? `${dayjs().startOf('month').format('YYYY-MM-DD')} 00:00:00` : ''
      query.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
    }
    getStationDevice({
      ledgerNumber: row.tagNumber,
      begTime: query.begTime,
      endTime: query.endTime
    }).then(res => {
      // console.log(res.data, '111')
      if (!res.data) {
        ElMessage.warning('未找到关联设备')
        return
      }
      $router.push({
        path: '/pipeline/monitor/detail',
        query: {
          id: row.ledgerid,
          deviceCode: res.data
        }
      })
    })
  }
}
// 报警统计
const toCount = (row: any) => {
  const query = { limit: '10', offset: '1', position: row.tagNumber, begTime: '', endTime: '' }
  if (listQuery.value.begTime && listQuery.value.endTime) {
    query.begTime = listQuery.value.begTime
    query.endTime = listQuery.value.endTime
  }
  else {
    query.begTime = listQuery.value.timeType === '1' ? `${dayjs().format('YYYY-MM-DD')} 00:00:00` : listQuery.value.timeType === '2' ? `${dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD')} 00:00:00` : listQuery.value.timeType === '3' ? `${dayjs().startOf('month').format('YYYY-MM-DD')} 00:00:00` : ''
    query.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  }
  // 判断历史报警是否有数据
  getHistoryAlarmListPage(query).then(res => {
    if (res.data.rows.length) {
      // 跳转历史报警
      // console.log('历史报警')
      $router.push({
        path: '/alarm/history',
        query: {
          type: 'localAnalyse',
          row: JSON.stringify(query)
        }
      })
    }
    else {
      //  当前报警
      // console.log('当前报警')
      $router.push({
        path: '/alarm/current',
        query: {
          type: 'localAnalyse',
          row: JSON.stringify(query)
        }
      })
    }
  })
}
</script>

<template>
  <layout title="异常位置分析">
    <!-- 查询条件 -->
    <template #search>
      <div class="search">
        <el-button :class="listQuery.timeType === '1' ? 'active' : ''" round size="small" style="margin: 0 5px;"
          @click="selectTimeType('1')">
          今日
        </el-button>
        <el-button :class="listQuery.timeType === '2' ? 'active' : ''" round size="small" style="margin: 0 5px;"
          @click="selectTimeType('2')">
          本周
        </el-button>
        <el-button :class="listQuery.timeType === '3' ? 'active' : ''" round size="small" style="margin: 0 5px;"
          @click="selectTimeType('3')">
          本月
        </el-button>
        <el-select v-model="listQuery.ledgerType" placeholder="全部类别" clearable style="width: 160px;margin: 0 5px;">
          <el-option label="闸井" value="1" />
          <el-option label="场站" value="2" />
          <el-option label="管线" value="3" />
        </el-select>
        <el-date-picker v-model="datetimerange" type="datetimerange" format="YYYY-MM-DD HH:mm:ss"
          style="width: 380px;margin: 0 5px;" value-format="YYYY-MM-DD HH:mm:ss" range-separator="至"
          start-placeholder="报警开始时间" end-placeholder="报警结束时间" clearable :shortcuts="shortcuts" />
        <el-button type="primary" style="margin: 0 5px;" @click="fetchData">
          搜索
        </el-button>
        <el-button v-if="proxy.hasPerm('/alarm/count/exportLocation')" type="primary" style="margin: 0 5px;"
          @click="exportList">
          导出
        </el-button>
      </div>
    </template>
    <template #content>
      <div class="alarm-count">
        <div class="table">
          <virtual-table :data="list" style="width: 100%;" :height="330" :columns="[
            { text: '位置类型', value: 'type', width: '100' },
            { text: '位号', value: 'tagNumber', width: 130, isCustom: true },
            { text: '名称', value: 'ledgerName', width: 200 },
            { text: '位置', value: 'place' },
            { text: '管理单位', value: 'deptName' },
            { text: '标签', value: 'marker', width: 120 },
            { text: '报警次数', value: 'alarmSum', width: 90, isCustom: true },
          ]">
            <!-- <template #preColumns>
              <vxe-column title="序号" width="80" align="center">
                <template #default="{ rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
</vxe-column>
</template> -->
            <template #isCustom="{ scope, column }">
              <span v-if="column.text === '位号'">
                <span class="pointer link" @click="toDetail(scope.row)">
                  {{ scope.row.tagNumber }}
                </span>
              </span>
              <span v-if="column.text === '报警次数'">
                <span class="pointer link" @click="toCount(scope.row)">
                  {{ scope.row.alarmSum }}
                </span>
              </span>
            </template>
          </virtual-table>
          <!-- <el-table v-loading="loadingTable" border :data="list" stripe style="width: 100%;" :height="290">
            <el-table-column label="位置类型" prop="type" align="center" width="100" />
            <el-table-column label="位号" align="center" width="120">
              <template #default="scope">
                <span class="pointer link" @click="toDetail(scope.row)">
                  {{ scope.row.tagNumber }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="名称" prop="ledgerName" align="center" />
            <el-table-column label="位置" prop="place" align="center" />
            <el-table-column label="管理单位" prop="deptName" align="center" />
            <el-table-column label="标签" prop="marker" align="center" width="120" />
            <el-table-column label="报警次数" align="center" width="90">
              <template #default="scope">
                <span class="pointer link" @click="toCount(scope.row)">
                  {{ scope.row.alarmSum }}
                </span>
              </template>
            </el-table-column>
          </el-table> -->
        </div>
      </div>
    </template>
  </layout>
</template>

<style lang="scss" scoped>
.active {
  color: #0d76d4;
  border-color: #c5d8ff;
  outline: none;
  background-color: #ecf2ff;
}

.search {
  display: flex;
  align-items: center;
}

.alarm-count {
  display: flex;

  .bar {
    width: 60%;
    height: 450px;
  }

  .table {
    width: 100%;
    padding: 10px;
  }
}

.pointer {
  &:hover {
    cursor: pointer;
  }
}

.link {
  color: #0d76d4 !important;

  &:hover {
    text-decoration: underline !important;
  }
}
</style>