<template>
  <div id="JC_oldList">
    <div class="SearchBox">
      <div class="SearchLabel">监测时间:</div>
      <div class="SearchSel">
        <el-date-picker
          clearable
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          v-model="dateTime"
          type="datetimerange"
          placeholder="请选择年月日"
        />
      </div>
      <el-button type="primary" class="searchBtn btn">搜索</el-button>
      <el-button type="primary" class="exportBtn btn">导出</el-button>
    </div>
    <div class="TableBox">
      <el-table stripe v-loading="loading" :data="DataList">
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column :label="item.label" align="center" :prop="item.prop" v-for="(item, index) in dataTitle" :key="index" />
        <!-- <el-table-column label="水深(米)" align="center" prop="position" />
        <el-table-column label="安装高度(米)" align="center" prop="warninValue" />
        <el-table-column label="信号强度(百分比)" align="center" prop="endTime" />
        <el-table-column label="电量(百分比)" align="center" prop="endTime" />
        <el-table-column label="信号强度(百分比)" align="center" prop="endTime" />
        <el-table-column label="信号强度(百分比)" align="center" prop="endTime" /> -->
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script setup name="JC_oldList">
import { ref, reactive, toRefs, onMounted } from 'vue';
import bus from '@/bus';
import { waterloggingArchiveList } from '@/api/system/tanchuang';
const AllData = reactive({
  dateTime: ['2024-10-21 00:00:00', '2024-10-24 23:59:59'],
  options: [
    {
      value: '2021',
      label: '2021年',
    },
    {
      value: '2022',
      label: '2022年',
    },
    {
      value: '2023',
      label: '2023年',
    },
    {
      value: '2024',
      label: '2024年',
    },
  ],
  value2: '0',
  options2: [
    {
      value: '0',
      label: '全部',
    },
    {
      value: '1',
      label: '甲烷浓度',
    },
    {
      value: '2',
      label: '压力',
    },
    {
      value: '3',
      label: '温度',
    },
  ],
  CS: 4,
  loading: false,
  DataList: [
    {
      siteNo: '2024101601',
      siteName: '王家坪旧址门口',
      shebei: '水位计',
      weizhi: '延安市宝塔区凤凰山街道王家坪革命旧址-大门',
      z: '0',
      h: '0.017',
      q: '96%',
      dl: '74%',
      dy: '3.96',
      state: '正常',
      jcTime: '2024-10-24 10:20:00',
      cunchuTime: '2024-10-24 10:20:05',
    },
    {
      siteNo: '2024101601',
      siteName: '王家坪旧址门口',
      shebei: '水位计',
      weizhi: '延安市宝塔区凤凰山街道王家坪革命旧址-大门',
      z: '0',
      h: '0.017',
      q: '96%',
      dl: '74%',
      dy: '3.96',
      state: '正常',
      jcTime: '2024-10-24 10:15:00',
      cunchuTime: '2024-10-24 10:15:04',
    },
  ],
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
});

const { DataList, loading, queryParams, total, dateTime } = toRefs(AllData);

const dataTitle = ref([
  {
    label: '站点编码',
    prop: 'siteNo',
  },
  {
    label: '水深(米)',
    prop: 'z',
  },
  {
    label: '安装高度(米)',
    prop: 'h',
  },
  {
    label: '信号强度(百分比)',
    prop: 'q',
  },
  {
    label: '电量(百分比)',
    prop: 'dl',
  },
  {
    label: '电源电压(伏特)',
    prop: 'dy',
  },
  {
    label: '监测时间',
    prop: 'jcTime',
  },
  {
    label: '存储时间',
    prop: 'cunchuTime',
  },
]);

const getList = item => {
  // 获取数据
  // earlyWarningInfoPage({ warningType: item }).then((res) => {
  //   AllData.DataList = res.data;
  //   AllData.total = res.total;
  //   AllData.CS = res.total;
  //   // console.log(res, 'shuju');
  // });
};

onMounted(() => {
  // getInfo();
  total.value = DataList.value.length;
});
</script>

<style lang="scss" scoped>
#JC_oldList {
  width: 100%;
  height: 100%;
  margin-top: 15px;
  .SearchBox {
    width: 100%;
    height: 60px;
    display: flex;
    box-sizing: border-box;
    border-bottom: 1px solid #1a7494;
    height: 60px;
    line-height: 60px;
    display: flex;
    align-items: center;
    .btn {
      background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%) !important;
    }
    .searchBtn {
      margin-left: 40px;
    }
    .exportBtn {
      margin-left: 20px;
    }

    .SearchLabel {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      padding: 0 10px;
      margin-left: 40px;
      height: 60px;
      line-height: 60px;

      .SearchLabelValue {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 16px;
        color: #1cf5fc;
        margin: 0 10px;
      }
    }
    :deep(.SearchSel) {
      // width: 180px;
      --el-text-color-regular: #fff;

      .el-input__wrapper {
        background: #0e4559;
        border: 1px solid #1cf5fc;
        box-shadow: none;

        .el-input__inner {
          color: #c1d3d4;
        }
      }
    }

    .SearchRightBTN {
      float: right;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #1cf5fc;
    }
  }

  :deep(.TableBox) {
    width: 100%;
    height: calc(100% - 60px);
    .el-table {
      background-color: transparent;
      --el-table-row-hover-bg-color: transparent;
      //   表头
      .el-table__header-wrapper {
        background-color: transparent !important;
        .el-table__header {
          tr {
            background-color: transparent !important;
          }
          .el-table__cell {
            background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%) !important;
            background: none;
            border-radius: 2px;
            border: 1px solid #74dde1;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: 58px;
          }
        }
      }
      //   内容
      .el-table__body-wrapper {
        .el-table__row {
          background-color: transparent;
          border: none;
          td.el-table__cell {
            border: none;
            .cell {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 14px;
              color: #ffffff;
            }
          }
        }
        .el-table__row--striped {
          td.el-table__cell {
            background: linear-gradient(0deg, #008599 0%, #08596d 100%);
            border: none;
          }
        }
      }
    }

    .pagination-container {
      background: none;
      padding: 32px 16px;

      .el-pagination__total,
      .el-pagination__goto,
      .el-pagination__classifier {
        color: white;
      }
    }
  }
}
</style>