<template>
  <!-- scada 厂站数据统计报表 -->
  <div class="over-view publicContainer">
    <div class="content">
      <el-tabs v-model="AllData.typetime" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="日报表" name="hour"></el-tab-pane>
        <el-tab-pane label="月报表" name="day"></el-tab-pane>
        <el-tab-pane label="年报表" name="month"></el-tab-pane>
      </el-tabs>
      <div class="layout-body">
        <el-form label-width="auto" ref="ruleForm" inline :model="formData">
          <el-form-item label="站点名称" prop="title">
            <el-select filterable clearable v-model="searchVal" placeholder="请选择">
              <el-option v-for="item in projectDate" :key="item.stationCode" :label="item.stationName" :value="item.stationCode" />
            </el-select>
          </el-form-item>
          <el-form-item label="月报表查询:" v-if="AllData.typetime == 'month'">
            <el-date-picker clearable format="YYYY" value-format="YYYY" type="year" v-model="AllData.dateMonth" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="日报表查询:" v-if="AllData.typetime == 'day'">
            <el-date-picker format="YYYY-MM" value-format="YYYY-MM" type="month" v-model="AllData.dateDay" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="时报表查询:" v-if="AllData.typetime == 'hour'">
            <el-date-picker
              clearable
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              v-model="AllData.dateHour"
              type="date"
              placeholder="请选择"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="searchData">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="dataList" v-loading="tableLoading" max-height="650">
          <el-table-column type="index" width="55" :index="getIndex" label="序号" />
          <el-table-column v-for="i in headerList" :key="i.key" :label="i.name" show-overflow-tooltip :prop="i.key" width="130" />
        </el-table>
        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="formData.pageNum"
          v-model:limit="formData.pageSize"
          @pagination="searchData"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { getInfolist } from '@/api/scada/stationInfo';
import { reportDataHead, reportDataPage } from '@/api/scada/monitor';

const { proxy } = getCurrentInstance();
const searchVal = ref('');
const projectDate = ref([]);
const total = ref(0);
const headerList = ref([]);
const dataList = ref([]);
const tableLoading = ref(false);
const AllData = reactive({
  typetime: 'hour',
  dateMonth: proxy.moment(new Date()).format('YYYY'),
  dateDay: proxy.moment(new Date()).format('YYYY-MM'),
  dateHour: proxy.moment(new Date()).format('YYYY-MM-DD'),
  formData: { pageNum: 1, pageSize: 10 },
  queryParams: {},
});
const { formData } = toRefs(AllData);

const getIndex = index => {
  return (formData.value.pageNum - 1) * formData.value.pageSize + index + 1;
};
// 搜索数据
const searchData = async p => {
  tableLoading.value = true;
  data_queryheadsM(); // 表格头部
  if (AllData.typetime == 'month') {
    formData.value.dataTime = AllData.dateMonth;
  } else if (AllData.typetime == 'day') {
    formData.value.dataTime = AllData.dateDay;
  } else {
    formData.value.dataTime = AllData.dateHour;
  }
  let res = await reportDataPage({ ...formData.value, stationCode: searchVal.value, reportType: AllData.typetime });
  if (res.code == 200) {
    dataList.value = res.data;
    total.value = res.total;
    tableLoading.value = false;
  }
};

//获取站点
const getInfolistM = async p => {
  let { data, code } = await getInfolist(p);
  if (code == 200) {
    projectDate.value = data;
    let stationCode = data[0]?.stationCode;
    searchVal.value = stationCode;
    searchData();
  }
};

// 表格头部
const data_queryheadsM = async () => {
  let params = {
    stationCode: searchVal.value,
  };
  let { data } = await reportDataHead(params);
  headerList.value = data;
};
function handleClick(v) {
  AllData.typetime = v.props.name;
  searchData();
}
onMounted(() => {
  getInfolistM();
});
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
.over-view {
  width: 100%;
  .layout-body {
    margin-top: 15px;
    .top {
      margin-bottom: 15px;
    }
  }
}
</style>