<template>
  <!-- 水质监测站详情弹窗 -->
  <div class="shuiweiModals">
    <div class="szjcz">
      <div class="contLeft">
        <div class="title">站点基本信息</div>
        <div class="part">
          <div class="detail" v-for="(val, keys, index) in detailName" :key="index">
            <p>{{ val }}</p>
            <p v-if="keys != 'status'">{{ detailVal[keys] }}</p>
            <p v-if="keys == 'status'">{{ detailVal[keys] == 0 ? '在线' : '离线' }}</p>
          </div>
        </div>
      </div>
      <div class="contRight">
        <div class="search">
          <n-select
            :options="yinziOption"
            v-model:value="yinziValue"
            @update:value="checkLljc"
            style="width: 300px"
          ></n-select>
        </div>
        <div id="echartSw"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
import { lyInfoStationDetail, lyInfoSwlljcData } from '@/services';
import * as echarts from 'echarts';
export default {
  name: 'shuiweiModals',
  props: {
    YWstationCode: String,
  },
  setup(props) {
    const allData = reactive({
      yinziValue: 'q',
      yinziOption: [
        { value: 'q', label: '瞬时流量(m³/s)' },
        { value: 'va', label: '流速(m/s)' },
        { value: 'z', label: '液位(m)' },
      ],
      dateRange: null,
      detailName: {
        stName: '站点名称',
        stCode: '站点编码',
        stationType: '站点类型',
        area: '河道名称',
        createTime: '安装时间',
        lon: '经度',
        lat: '纬度',
        platformName: '项目名称',
        address: '安装地址',
        name: '',
        status: '站点状态',
      },
      detailVal: {},
      liuliangOption: {
        color: ['rgb(14,192,148)', 'rgb(1,153,217)', 'rgb(240,85,33)'],
        legend: {
          show: false,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        dataZoom: [
          {
            type: 'inside', // 内置在坐标系中
            xAxisIndex: 0,
            yAxisIndex: [0, 1],
            start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
            end: 100, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
            zoomLock: true, // 是否锁定选择区域（或叫做数据窗口）的大小。
          },
        ],
        grid: {
          top: '8%',
          left: '3%',
          right: '3%',
          bottom: '2%',
          containLabel: true,
        },
        xAxis: {
          data: ['0:00', '3:00', '6:00', '9:00', '12:00', '15:00', '18:00', '21:00', '23:00'],
          axisTick: {
            show: false,
          },
          axisPointer: {
            type: 'shadow',
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(25,76,90,0.8)',
            },
          },
        },
        yAxis: {
          min: 0,
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            color: 'rgb(41,111,121)',
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: '监测值',
            type: 'line',
            data: [28, 15, 15, 27, 18, 30, 20, 20, 19, 18, 14],
            tooltip: {
              valueFormatter: (value) => value,
            },
            itemStyle: {
              borderRadius: [0, 0, 10, 10],
            },
          },
        ],
      },
    });
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      prefix: () => {
        return '共 ' + paginationReactive.itemCount + ' 项';
      },
      onChange: (page) => {
        paginationReactive.page = page;
        // getTableList();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        // getTableList();
      },
    });
    // 流域内流量监测
    let echartHxhsw = null;
    const echartCount = () => {
      echartHxhsw = echarts.init(document.getElementById('echartSw'));
      echartHxhsw.clear();
      echartHxhsw.setOption(allData.liuliangOption);
    };
    // 流量监测二级
    const checkLljc = async () => {
      let params = {
        stationCode: props.YWstationCode,
      };
      let res = await lyInfoSwlljcData(params);
      if (res && res.code == 1) {
        let datas = res.data;
        allData.liuliangOption.xAxis.data = datas.tt;
        if (allData.yinziValue == 'va') {
          allData.liuliangOption.series[0].data = datas.q;
          allData.liuliangOption.series[0].name = '流速(m/s)';
        } else if (allData.yinziValue == 'q') {
          allData.liuliangOption.series[0].data = datas.q;
          allData.liuliangOption.series[0].name = '瞬时流量(m³/s)';
        } else if (allData.yinziValue == 'z') {
          allData.liuliangOption.series[0].data = datas.z;
          allData.liuliangOption.series[0].name = '液位(m)';
        }
      }
      echartCount();
    };
    // 加载基本信息数据
    const getBaseData = async () => {
      let params = {
        stCode: props.YWstationCode,
      };
      let res = await lyInfoStationDetail(params);
      if (res && res.code == 1) {
        let datas = res.data;
        allData.detailVal = datas;
      }
    };
    onMounted(() => {
      setTimeout(() => {
        getBaseData();
        checkLljc();
      });
    });
    onBeforeUnmount(() => {
      if (!!echartHxhsw) echartHxhsw.dispose();
    });
    return {
      ...toRefs(allData),
      pagination: paginationReactive,
      getBaseData,
      checkLljc,
    };
  },
};
</script>

<style lang="less">
.shuiweiModals {
  color: #b4c9e0;
  height: 475px;
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  .szjcz {
    display: flex;
    margin: 10px 0px;
    .contLeft {
      width: 40%;
      .part {
        margin-top: 10px;
        .detail {
          width: 100%;
          display: flex;
          font-size: 14px;
          background: rgba(1, 27, 46, 0.6);
          p {
            height: 34px;
            line-height: 34px;
            width: 100%;
          }

          p:nth-of-type(1) {
            width: 35%;
            text-align: center;
          }
          p:nth-of-type(2) {
            flex: 1;
            text-align: left;
          }
        }
        .detail:nth-of-type(odd) {
          background: rgba(1, 27, 46, 0.3);
        }
      }
    }
    .contRight {
      width: 40%;
      flex: 1;
      padding-left: 20px;
      margin-left: 20px;
      border-left: 2px solid rgba(1, 27, 46, 0.5);
      .search {
        display: flex;
        .n-date-picker {
          width: 260px;
          margin: 0px 20px;
        }
        .n-select {
          width: 150px;
        }
      }
      #echartSw {
        margin-top: 100px;
        width: 500px;
        height: 250px;
      }
      .table {
        width: 100%;
        margin-top: 20px;
        overflow: auto;
        .n-data-table-td,
        .n-data-table-th {
          padding: 6px !important;
          text-align: center;
        }
        .n-data-table-tbody {
          height: 160px;
          overflow: auto;
        }
      }
    }
  }
}
</style>