<template>
  <!-- 湖泊监测站详情弹窗 -->
  <div class="shuiweiModals">
    <div class="hpjcz">
      <div class="contLeft">
        <!-- <div class="title">站点基本信息</div> -->
        <div class="part">
          <n-space>
            <div class="infoContent flexs">
              <div class="infoName">经度：</div>
              <div class="infoData">{{ datas.LGTD }}</div>
            </div>
            <div class="infoContent flexs">
              <div class="infoName">纬度：</div>
              <div class="infoData">{{ datas.LTTD }}</div>
            </div>
          </n-space>

          <n-space>
            <div class="infoContent flexs">
              <div class="infoName">测站编码：</div>
              <div class="infoData">{{ datas.STCD || '--' }}</div>
            </div>
            <div class="infoContent flexs">
              <div class="infoName">测站类型：</div>
              <div class="infoData">港渠</div>
            </div>
          </n-space>
        </div>
      </div>
      <div class="conttable">
        <n-data-table
          class="gqtables"
          :columns="columnsJ"
          :max-height="280"
          style="margin-top: 10px"
          striped
          :data="tableDataJ"
          :loading="tableLoadingJ"
          :bordered="false"
          :row-key="(row) => row.id"
          @row-click="handleRowClick"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
import { formatDate } from '@/utils/util';
import { lyInfoStationDetail, lyInfoSwlljcData, canldaydata } from '@/services';
import * as echarts from 'echarts';
import moment from 'moment';
export default {
  name: 'shuiweiModals',
  props: {
    valueModalgq: Object,
  },
  setup(props) {
    const allData = reactive({
      yinziValue: 'q',
      datas: [],
      datetime: '',
      columnsJ: [
        {
          title: '序号',
          key: 'key',
          render: (_, index) => {
            return `${index + 1}`;
          },
        },
        {
          title: '监测时间',
          key: 'TM',
          render(row) {
            return row.TM || '--';
          },
        },
        {
          title: '实时水位(米)',
          key: 'Z',
          width: '160',
          render(row) {
            return row.Z || '--';
          },
        },
      ],
      tableDataJ: [],
      detailVal: {},
    });
    //分页
    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 getBaseData = async () => {
      let params = {
        currentPage: 1,
        pageSize: 10,
        searchFilters: [],
        paramMap: {
          stcd: props.valueModalgq.STCD,
          datatime: allData.datetime,
        },
      };
      let res = await canldaydata(params);
      if (res) {
        allData.tableDataJ = res.result;
        console.log(allData.tableDataJ, 'res');
      }
    };
    onMounted(() => {
      allData.datas = props.valueModalgq;

      allData.datetime = moment().format('YYYY-MM-DD');
      if (allData.datetime) {
        getBaseData();
      }
    });
    onBeforeUnmount(() => {
      if (!!echartHxhsw) echartHxhsw.dispose();
    });
    return {
      ...toRefs(allData),
      pagination: paginationReactive,
      getBaseData,
    };
  },
};
</script>

<style lang="less" scoped>
.shuiweiModals {
  color: #b4c9e0;
  height: 475px;
  .title {
    font-size: 18px;
    font-weight: bold;
  }
  .hpjcz {
    // display: flex;
    margin: 10px 0px;
    .contLeft {
      width: 100%;
      height: 50%;
      .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);
        }
      }
    }
    .conttable {
      width: 100%;
      flex: 1;
    }
  }
}
.flexs {
  display: flex;
}
.infoContent {
  width: 250px;
}
.conttable {
  margin-top: 20px;
  .gqtables {
    ::v-deep .n-data-table-thead .n-data-table-tr .n-data-table-th {
      text-align: center;
    }
    ::v-deep .n-data-table-tr .n-data-table-td {
      text-align: center;
    }
  }
}
</style>