<template>
  <div class="table-box">
    <div class="card table-main">
      <!-- 表格头部 操作按钮 -->
      <div class="table-header">
        <div class="header-button-lf">
          <el-form :model="pageable" label-width="auto"  :inline="true">
            <el-form-item label="站号:">
              <el-select v-model="as_code_list" @change="changeCodeList" collapse-tags  filterable placeholder="请搜索自动站" remote reserve-keyword clearable  style="width: 200px">
                <el-option
                  v-for="item in platformList"
                  :key="item.as_code"
                  :label="item.as_code +' '+item.as_name"
                  :value="item.as_code"
                />
                <template #prefix>
                  <el-icon class="el-input__icon"><search /></el-icon>
                </template>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> 查询 </el-button>
              <el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 表格主体 -->
      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small" @sort-change="handleSortChange">
        <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true" >
          <template #default="scope">
            {{ (pageable.pageNum - 1) * pageable.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <template v-for="item in columns" :key="item">
          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :sortable="item.sortable" :show-overflow-tooltip="true" >
            <template #default="scope">
              <template v-if="item.prop === 'tact_state'">
                {{findLabelByValue(tactStateList,scope.row.tact_state)}}
              </template>
              <template v-if="item.prop === 'tact_type'">
                {{findLabelByValue(dataTypeList,scope.row.tact_type)}}
              </template>
              <template v-if="item.prop === 'alarm_on_time_i'">
                {{scope.row.alarm_on_time_i?formatDate(scope.row.alarm_on_time_i):'--'}}
              </template>
              <template v-if="item.prop === 'alarm_off_time_i'">
                {{scope.row.alarm_off_time_i?formatDate(scope.row.alarm_off_time_i):'--'}}
              </template>
              <template v-if="item.prop === 'notice_type'">
                {{findLabelByValue(noticeTypeList,scope.row.notice_type)}}
              </template>
            </template>
          </el-table-column>
        </template>
        <!-- 无数据 -->
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>
      <!-- 分页组件 -->
      <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup lang="ts" name="useProTable">
import Pagination from "@/components/ProTable/components/Pagination.vue";
import {ref, reactive, onMounted, onActivated, onDeactivated} from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { getPlatformList, getTacRecordList} from "@/api/modules/allData";
import {Platform} from "@/api/interface";
const pageable = ref<any>({
  as_code_list: [],
  tact_state_on: true,
  tact_state:0,
  pageNum: 1,
  pageSize: 20,
  total: 1
});

const as_code_list = ref('')

const changeCodeList =(value)=>{
  if(value){
    pageable.value.as_code_list = [value]
  }else {
    pageable.value.as_code_list= []
  }


}

const timeBegin = ref()


const tact_state =ref(0)

const tactList = [
  {
    value: 0,
    label: '全部',
  }
]

const noticeTypeList= [
  {
    value: 0,
    label: '字幕通知',
  },
  {
    value: 1,
    label: '声音通知',
  }
]

const tactStateList= [
  {
    value: 0,
    label: '告警中',
  },
  {
    value: 1,
    label: '已消警',
  }
]


const dataTypeList= [
  {
    value: 0,
    label: '能见度',
  },
  {
    value: 1,
    label: '风速',
  },
  {
    value: 2,
    label: '大气电场',
  },{
    value: 3,
    label: '云量',
  },{
    value: 4,
    label: '云高',
  },{
    value: 5,
    label: '温度',
  },{
    value: 6,
    label: '湿度',
  },{
    value: 7,
    label: '小时雨量',
  }
]

function findLabelByValue(noticeTypeList, value) {
  const item = noticeTypeList.find(item => item.value === value);
  return item ? item.label : null;
}

const handleSortChange = ({ column, prop, order }) =>{
  // 在这里发送请求到服务器端进行远程排序
  console.log('column:', column)
  console.log('prop:', prop)
  console.log('order:', order)
}


// 查询功能
const handleQuery = () => {
  pageable.value.pageNum = 1;
  getList()
};

//清空查询
const resetQuery = () => {
  pageable.value.pageNum = 1;
  pageable.value = {
    as_code_list: [],
    tact_state_on: true,
    tact_data_on: false,
    tact_data: 0,
    begin_time: undefined,
    end_time: undefined,

    pageNum: 1,
    pageSize: 20,
    total: 1
  }
  timeBegin.value = undefined
};

/**
 * @description 每页条数改变
 * @param {Number} val 当前条数
 * @return void
 * */
const handleSizeChange = (val: number) => {
  pageable.value.pageSize = val
  getList()
};

/**
 * @description 当前页改变
 * @param {Number} val 当前页
 * @return void
 * */
const handleCurrentChange = (val: number) => {
  pageable.value.pageNum = val
  getList()
};

const processTableData = ref([]);

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "as_code", label: "站号" },
  { prop: "as_name", label: "站名" },
  { prop: "tact_name", label: "策略名称" },
  { prop: "tact_state", label: "策略状态" },
  { prop: "tact_type", label: "告警类型" },
  { prop: "data_value", label: "观测值" },
  { prop: "alarm_on_time_i", label: "告警时间",width:150,sortable: true },
  { prop: "alarm_off_time_i", label: "消警时间",width:150,sortable: true},
  { prop: "notice_type", label: "通知方式" },
  { prop: "remark", label: "告警说明",width:400 }
]);


const getList = async () => {
  const { data } = await getTacRecordList(pageable.value);
  processTableData.value = data.list
  pageable.value.total = data.total
};

let intervalId;

onMounted(() => {
  getPlatforms();
  getList();

});

onActivated(() => {
  intervalId = setInterval(() => {
    getList();
  }, 60 * 1000);
});

onDeactivated(() => {
  clearInterval(intervalId);
});



const platformList =ref<any>([])
// 查询自动站列表
const queryas = ref<Platform>({
  pagesize: 50,
  currentpage: 1
})

const getPlatforms = async () => {
  const { data } = await getPlatformList(queryas.value);
  platformList.value = data.list
};


function formatDate(timestamp) {
  const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}`;
}


</script>
