<template>
  <div id="RQ_FengXianJianCe">
    <div class="SearchBox">
      <div class="SearchLabel">年月日:</div>
      <div class="SearchSel">
        <el-date-picker
          clearable
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          v-model="AllData.dateTime"
          type="date"
          placeholder="请选择年月日"
          @change="handleQuery"
        />
      </div>
      <div class="SearchLabel">预警类型:</div>
      <div class="SearchSel">
        <el-select v-model="AllData.value2" placeholder="Select" style="width: 100%">
          <el-option v-for="item in AllData.options2" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="SearchLabel">
        累计次数: <span class="SearchLabelValue">{{ AllData.CS }}</span>
      </div>
      <div class="SearchRightBTN">切换图形</div>
    </div>
    <div class="TableBox">
      <el-table stripe v-loading="AllData.loading" :data="AllData.DataList">
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column label="预警类型" align="center" prop="warningType" />
        <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>

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

<script setup name="RQ_FengXianJianCe">
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue';
import { earlyWarningInfoPage } from '@/api/ranqi.js';
import bus from '@/bus';
const AllData = reactive({
  dateTime: '',
  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: [],
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
});
const getList = item => {
  // 获取数据
  earlyWarningInfoPage({ warningType: item }).then(res => {
    AllData.DataList = res.data;
    AllData.total = res.total;
    // console.log(res, 'shuju');
  });
};

onMounted(() => {
  bus.on('getDataListFxjc', val => {
    // console.log(val, '接受111111111111');
    getList(val.zb);
    AllData.value2 = val.value;
  });
});

onBeforeUnmount(() => {
  bus.off('getDataListFxjc');
});
</script>

<style lang="scss" scoped>
#RQ_FengXianJianCe {
  width: 100%;
  height: 100%;

  .SearchBox {
    width: 100%;
    height: 60px;
    display: flex;
    box-sizing: border-box;
    border-bottom: 1px solid #1a7494;
    height: 60px;
    line-height: 60px;

    .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-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>