<template>
  <div id="wuransuyuan">
    <div class="topfilter">
      <div class="selectbox">
        <div class="label">是否监测：</div>
        <div
          class="value"
          v-for="item in onelist"
          :class="queryParams.one == item.value ? 'actived' : ''"
          :key="item"
          @click="onechange(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="selectbox">
        <div class="label">是否整治：</div>
        <div
          class="value"
          v-for="item in twolist"
          :class="queryParams.two == item.value ? 'actived' : ''"
          :key="item"
          @click="twochange(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="selectbox">
        <div class="label">是否溯源：</div>
        <div
          class="value"
          v-for="item in threelist"
          :class="queryParams.three == item.value ? 'actived' : ''"
          :key="item"
          @click="threechange(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="selectbox">
        <div class="label">排口类型：</div>
        <div class="input">
          <el-select v-model="paikouType" placeholder="请选择排口类型" clearable filterable style="width: 200px">
            <el-option v-for="dict in paikouTypeList" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </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 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="wuransuyuan">
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([{ dataCode: '排口名称' }]);

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';

#wuransuyuan {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  color: #ccefff;
}
</style>