<template>
  <div id="rengongshuizhi">
    <div class="topfilter">
      <div class="selectbox">
        <div class="label">年度范围选择：</div>
        <div class="input">
          <el-date-picker
            v-model="value1"
            type="yearrange"
            range-separator="-"
            start-placeholder="开始年份"
            end-placeholder="结束年份"
          />
        </div>
      </div>
    </div>
    <div class="bottomtable">
      <el-table height="calc(100% - 50px)" v-loading="loading" :data="tablelist">
        <el-table-column label="监测点位" align="center" prop="dataCode">
          <template #default="{ row }">
            <!-- <dict-tag :options="basis_data_type" :value="row.dataCode" /> -->
          </template>
        </el-table-column>
        <el-table-column label="检测日期" align="center" prop="dataName" />
        <el-table-column label="当前水质" align="center" prop="stType">
          <template #default="{ row }">
            <!-- <dict-tag :options="basis_site_type" :value="row.stType" /> -->
          </template>
        </el-table-column>
        <el-table-column label="目标水质" align="center" prop="stName" />
        <el-table-column label="达标情况" align="center" prop="stConfigsName" />
        <el-table-column label="营养状态" align="center" prop="stConfigsName" />
        <el-table-column width="200" label="主要污染物及超标倍数" align="center" prop="stConfigsName" />
        <el-table-column label="数据来源" align="center" prop="stConfigsName" />
      </el-table>

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

<script setup name="rengongshuizhi">
const value1 = ref('');
const onelist = ref([
  {
    name: '全部',
    value: '',
  },
  {
    name: '需要监测',
    value: '2',
  },
  {
    name: '已监测',
    value: '3',
  },
  {
    name: '无需监测',
    value: '4',
  },
]);
const twolist = ref([
  {
    name: '全部',
    value: '',
  },
  {
    name: '整治完成',
    value: '2',
  },
  {
    name: '整治中',
    value: '3',
  },
  {
    name: '无需整治',
    value: '4',
  },
]);
const threelist = ref([
  {
    name: '全部',
    value: '',
  },
  {
    name: '无需溯源',
    value: '2',
  },
  {
    name: '一级溯源',
    value: '3',
  },
  {
    name: '二级溯源',
    value: '4',
  },
]);
const total = ref(0);
const paikouType = ref('');
const paikouTypeList = ref([{}]);

const loading = ref(true);
const tablelist = ref([]);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  one: '',
  two: '4',
  three: '2',
});

function getList() {
  loading.value = false;
  // pagedataCameraRelation(queryParams.value).then(response => {
  //   dataCameraRelationList.value = response.data;
  //   total.value = response.total;
  //   loading.value = false;
  // });
}

function onechange(item) {
  queryParams.value.one = item.value;
}

function twochange(item) {
  queryParams.value.two = item.value;
}
function threechange(item) {
  queryParams.value.three = item.value;
}

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mapcss.scss';

#rengongshuizhi {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  color: #ccefff;
}

:deep(.el-select .el-input) {
  height: 25px;
}

:deep(.el-input__wrapper) {
  height: 25px;
}
</style>