<template>
  <div class="river">
    <ul class="top">
      <li>
        辖区总河湖数 <span class="num">{{ riverTotal }}</span>
        <span class="unit">个</span>
      </li>
    </ul>
    <div class="table_box">
      <n-data-table
        ref="tableRef"
        size="small"
        :bordered="false"
        :max-height="300"
        :columns="columns"
        :data="data"
      ></n-data-table>
    </div>
    <div class="chart">
      <div class="radio_box">
        <span class="label">河流：</span>
        <n-radio-group v-model:value="basinValue">
          <n-radio-button v-for="v in basin" :key="v.value" :value="v.value">
            {{ v.label }}
          </n-radio-button>
        </n-radio-group>
      </div>
      <div class="radio_box line">
        <span class="label">时间：</span>
        <n-radio-group v-model:value="timeValue">
          <n-radio-button
            v-for="time in times"
            :key="time.value"
            :value="time.value"
          >
            {{ time.label }}
          </n-radio-button>
        </n-radio-group>
      </div>
      <div class="chart_box">
        <LineChart :data="chartData"></LineChart>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, h } from "vue";
import { Call, TrendingDown, TrendingUp } from "@vicons/ionicons5";
import { NIcon, NTooltip } from "naive-ui";
import LineChart from "./LineChart.vue";

export default {
  name: "river",
  components: {
    LineChart,
  },
  setup() {
    const state = reactive({
      riverTotal: 17,
      //   表格相关
      columns: [
        {
          title: "河道名称",
          key: "name",
          align: "center",
          width:'90'
        },
        {
          title: "监测点",
          key: "point",
          align: "center",
        },
        {
          title: "长度(²公里)",
          key: "length",
          align: "center",
          width:'100'
        },
        {
          title: "水位趋势",
          key: "trend",
          align: "center",
          render(row) {
            return h(
              NIcon,

              {
                size: 20,
                color: row.trend === 0 ? "#65BA6C" : "#FF4545",
              },
              {
                default: () => h(row.trend === 0 ? TrendingDown : TrendingUp),
              }
            );
          },
        },
        {
          title: "水务预测",
          key: "forecast",
          align: "center",
        },
        {
          title: "保障水位",
          key: "guarantee",
          align: "center",
        },
        {
          title: "警戒水位",
          key: "warning",
          align: "center",
        },
        {
          title: "河长",
          key: "manager",
          align: "center",
          width:'60',
          render(row) {
            return renderTooltip(
              h("span", {}, [
                h("span", { style: { "margin-right": "5px" } }),
                h(
                  NIcon,
                  {
                    size: 14,
                    color: "#38D1F8",
                  },
                  {
                    default: () => h(Call),
                  }
                ),
              ]),
              row.manager
            );
          },
        },
      ],
      data: [],
      //echarts搜索
      basinValue: 0,
      basin: [
        { label: "流域1", value: 0 },
        { label: "流域2", value: 1 },
        { label: "流域3", value: 2 },
        { label: "流域4", value: 3 },
        { label: "流域5", value: 4 },
      ],
      timeValue: 0,
      times: [
        { label: "实时", value: 0 },
        { label: "最近4小时", value: 1 },
        { label: "最近8小时", value: 2 },
        { label: "最近12小时", value: 3 },
      ],
      // echarts图表
      chartData: {
        xData: ["5:00", "5:05", "5:10", "5:15", "5:20", "5:25", "5:30"],
        info: [
          {
            name: "安全水位",
            y: [3.0, 4.0, 3.7, 1.2, 3.5, 2.6, 6],
            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)" },
            ],
          },
          {
            name: "警戒水位",
            y: [3.0, 2.0, 2.7, 4.2, 1.5, 1.6, 5],
            color: "rgba(255, 179, 50, 1)",
             bgColor: [
              { offset: 0.1, color: "rgba(255, 179, 50,0.8)" },
              { offset: 1, color: "rgba(255, 179, 50,0.1)" },
            ],
          },
          {
            name: "保障水位",
            y: [3.0, 3.0, 1.7, 2.2, 5.5, 0.6, 5],
            color: "rgba(255, 69, 70, 1)",
             bgColor: [
              { offset: 0.1, color: "rgba(255, 69, 70,0.8)" },
              { offset: 1, color: "rgba(255, 69, 70,0.1)" },
            ],
          },
        ],
        legendShow:true,
        yAxisShow: false,
        yLineShow: true,
        yAxisColor: ["rgba(13, 72, 146, .3)"],
        yName: "水位",
        smooth: true,
      },
    });
    //获取河道表格数据
    const getTableData = () => {
      state.data = Array.apply(null, { length: 10 }).map((v, j) => ({
        name: `流域${j+1}`,
        point: "A段 ",
        length: "17.50",
        trend: Math.floor(Math.random() * (2 - 0)) + 0,
        forecast: 0.2,
        guarantee: 3.2,
        warning: 3.2,
        manager: 15678902345,
      }));
    };
    const renderTooltip = (trigger, content) => {
      return h(NTooltip, null, {
        trigger: () => trigger,
        default: () => content,
      });
    };
    onMounted(() => {
      getTableData();
    });
    return {
      ...toRefs(state),
      getTableData,
    };
  },
};
</script>

<style lang='less' scoped>
.river {
  // padding: 0 10px;
  .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;
    }
  }
  .table_box {
    margin: 20px;
  }
  .chart {
    .radio_box {
      margin-bottom: 10px;
      padding:0 10px;
      &.line {
        padding-bottom: 10px;
        margin-bottom: 30px;
        border-bottom: 1px solid;
        border-color: var(--border-top);
      }
    }
    .chart_box {
      width: 100%;
      height: 200px;
    }
  }
}
::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>