<template>
  <div class="rainfull">
    <ul class="top">
      <li>
        雨量站总计 <span class="num">{{ rainTotal }}</span>
        <span class="unit">个</span>
      </li>
      <li>
        在线<span class="num">{{ onLine }}</span
        ><span class="unit">个</span>
      </li>
      <li>
        离线<span class="num">{{ offLine }}</span
        ><span class="unit">个</span>
      </li>
      <li>
        在线率<span class="num">{{ rainTotal }}</span
        ><span class="unit">%</span>
      </li>
    </ul>
    <div class="table_box">
      <n-data-table
        ref="tableRef"
        size="small"
        :bordered="false"
        :max-height="380"
        :columns="columns"
        :data="data"
        :pagination="pagination"
      ></n-data-table>
    </div>
    <div class="query_form">
      <n-space>
        <n-date-picker v-model:value="queryValue1" type="datetime" clearable />
        <n-select
          v-model:value="queryValue2"
          filterable
          :options="queryOptions1"
          placeholder="请选择降雨量"
          style="width: 150px"
        />
        <n-select
          v-model:value="queryValue3"
          filterable
          :options="queryOptions2"
          placeholder="请选择雨量站"
          style="width: 150px"
        />
        <n-button type="primary">查询</n-button>
      </n-space>
    </div>
    <div class="chart_box">
      <LineChart :data="chartData"></LineChart>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, h } from "vue";
import { NTag } from "naive-ui";
import LineChart from "./LineChart.vue";

export default {
  name: "rainfull",
  components: {
    LineChart,
  },
  setup() {
    const state = reactive({
      rainTotal: 40,
      onLine: 10,
      offLine: 30,
      onlineRate: 100,
      //   表格相关
      columns: [
        {
          title: "站点名称",
          key: "name",
          align: "center",
        },
        {
          title: "观测时间",
          key: "time",
          align: "center",
        },
        {
          title: "5分钟监测雨量(mm)",
          key: "monitor5",
          align: "center",
          width: "90",
        },
        {
          title: "60气象监测雨量(mm)",
          key: "monitor60",
          align: "center",
          width: "100",
        },
        {
          title: "最强1小时(mm)",
          key: "monitor1",
          align: "center",
          width: "90",
        },
        {
          title: "重现期",
          key: "reproduce",
          align: "center",
        },
        {
          title: "预警等级",
          key: "level",
          align: "center",
          render(row) {
            return h(
              NTag,
              {
                bordered: false,
                color: {
                  color: "transparent",
                  textColor:
                    row.level === 0
                      ? "#2080f0"
                      : row.level === 1
                      ? "#d03050"
                      : "#36ad6a",
                },
              },
              {
                default:
                  row.level === 0
                    ? "蓝色预警"
                    : row.level === 1
                    ? "红色预警"
                    : "黄色预警",
              }
            );
          },
        },
      ],
      data: [],
      //搜索相关
      queryValue1: [],
      queryValue2: "5分钟",
      queryValue3: "雨量站A",
      queryOptions1: [
        {
          label: "5分钟",
          value: "0",
        },
        {
          label: "10分钟",
          value: "1",
        },
        {
          label: "15分钟",
          value: "2",
        },
        {
          label: "30分钟",
          value: "3",
        },
      ],
      queryOptions2: [
        {
          label: "雨量站A",
          value: "0",
        },
        {
          label: "雨量站B",
          value: "1",
        },
        {
          label: "雨量站C",
          value: "2",
        },
        {
          label: "雨量站D",
          value: "3",
        },
      ],
      //   折线图相关
      chartData: {
        xData: ["5:00", "5:05", "5:10", "5:15", "5:20", "5:25", "5:30"],
        info:[{
            y: [1150, 230, 224, 218, 135, 1147, 260],
            color: "rgba(70, 163, 244, 1)",
            bgColor: [
              { offset: 0.1, color: "rgba(58, 167, 255,0.8)" },
              { offset: 1, color: "rgba(58, 167, 255,0.1)" },
            ],
          },
        ],
        legendShow:false,
        yAxisShow: false,
        yLineShow: true,
        yAxisColor: ["rgba(13, 72, 146, .3)"],
        yName: "降雨量(mm)",
        smooth: false,
      },
    });
    //获取降雨表格数据
    const getTableData = () => {
      state.data = Array.apply(null, { length: 10 }).map((v, j) => ({
        name: "雨量站A",
        time: "2022.01.19",
        monitor5: "09:40",
        monitor60: "10",
        monitor1: "34.08",
        reproduce: "一年一遇",
        level: Math.floor(Math.random() * (3 - 0)) + 0,
      }));
    };
    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(state),
      getTableData,
    };
  },
};
</script>

<style lang='less' scoped>
.rainfull {
  .top {
    margin: 20px 0;
    display: flex;
    li {
      padding: 3px 5px;
      margin: 0 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      background: linear-gradient(90deg, #22a5e9 0%, #1271ff 100%);
      font-size: 16px;
      font-family: Alibaba PuHuiTi;
      color: #f8fafe;
      border-left: 2px solid #00ffff;
      .num {
        margin-left: 10px;
        font-size: 20px;
        font-family: DIN;
        font-weight: bold;
        color: #34e55e;
      }
      .unit {
        margin-left: 5px;
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #e5ecff;
      }
    }
  }
  .query_form {
    margin: 20px 0 10px;
    height: 50px;
    border-bottom: 1px solid #222665;
  }
  .chart_box {
    width: 100%;
    height: 180px;
  }
}
::v-deep(.n-data-table-td) {
  background: var(--bg-menu);
}
::v-deep(.n-data-table-table) {
  background: var(--bg-menu);
}
::v-deep(.n-data-table-thead){
   background: var(--bg-menu);

}
::v-deep(.n-data-table-th){
   background: var( --color-odd);

}
</style>