<template>
  <div class="patrolTaskWSCtb">
    <div class="topSelect">
      <van-field
        placeholder="请选择年份"
        show-word-limit
        required
        @click="AllData.showYearPicker = true"
        :rules="[{ required: true, message: '请选择年份' }]"
        v-model="AllData.YearN"
        is-link
        readonly
      />
      <van-field
        placeholder="请选择污水厂"
        show-word-limit
        required
        @click="AllData.showPicker = true"
        :rules="[{ required: true, message: '请选择污水厂' }]"
        v-model="AllData.userId"
        is-link
        readonly
      />
      <!-- 请选择年份 -->
      <van-popup v-model:show="AllData.showYearPicker" round position="bottom">
        <van-picker :columns="YearList" @confirm="onConfirmTne" @cancel="AllData.showYearPicker = false"> </van-picker>
      </van-popup>
      <!-- 请选择污水厂 -->
      <van-popup v-model:show="AllData.showPicker" round position="bottom">
        <van-picker :columns="sewageCodeList" @confirm="onConfirmOne" @cancel="AllData.showPicker = false">
        </van-picker>
      </van-popup>

      <div class="submitRecord" @click="patrolFilling">
        <van-button native-type="submit" type="primary" size="small">新增填报</van-button>
      </div>
    </div>
    <!-- 数据列表 -->
    <div class="WSCtbList">
      <van-list :finished="finished" finished-text="已经到底了~~" :offset="50">
        <div class="contPart" v-for="item in tableData" :key="item">
          <div class="content">
            <p>污水厂名称: {{ item.sewageName }}</p>
            <p>进口BOD浓度(mg/L): {{ item.bod }}</p>
            <p>日期: {{ item.dataTime }}</p>
          </div>
        </div>
      </van-list>

      <van-empty v-if="tableData.length == 0" style="margin-top: 100px" description="暂无数据" />
    </div>
  </div>
</template>
<script setup>
import { facilitySewagelist, sewageBodList } from '@/api/SewageReporting.js';
import { useRouter } from 'vue-router';
import { useStore } from '@/pinia/store.js';
const pinias = useStore();
const router = useRouter();
const finished = ref(false);
const YearList = ref([
  { text: '2022', value: '2022' },
  { text: '2023', value: '2023' },
  { text: '2024', value: '2024' },
]);
const AllData = reactive({
  showPicker: false,
  showYearPicker: false,
  userId: '',
  YearN: '2023',
  formData: {
    sewageCode: '',
    dataTime: '',
  },
});

// 选着污水厂
const onConfirmOne = ({ selectedOptions }) => {
  AllData.showPicker = false;
  AllData.userId = selectedOptions[0].text;
  AllData.formData.sewageCode = selectedOptions[0].value;
  getDataList();
};
// 选着年份
const onConfirmTne = ({ selectedOptions }) => {
  AllData.showYearPicker = false;
  AllData.YearN = selectedOptions[0].text;
  AllData.formData.dataTime = selectedOptions[0].value;
  getDataList();
};

//下拉框列表
const sewageCodeList = ref([]);
function getUserList() {
  facilitySewagelist().then((res) => {
    sewageCodeList.value = res.data.map((v) => {
      return {
        value: v.sewageCode,
        text: v.sewageName,
      };
    });
    sewageCodeList.value.unshift({
      text: '全部污水厂',
      value: '',
    });
    AllData.userId = sewageCodeList.value[0].text;
    AllData.formData.sewageCode = sewageCodeList.value[0].value;
  });
}

/** 获取搜索数据列表 */
const tableData = ref([]);
function getDataList() {
  pinias.showLoading();
  sewageBodList(AllData.formData).then((response) => {
    tableData.value = response.data;
    pinias.hideLoading();
    finished.value = true;
  });
}

const patrolFilling = () => {
  router.push({
    path: '/SubmitRecords',
  });
};
onMounted(() => {
  getDataList();
  getUserList();
  AllData.formData.dataTime = '';
});
</script>
<style lang="less" scoped>
.patrolTaskWSCtb {
  width: 100%;
  height: 100%;
  .topSelect {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .submitRecord {
      display: flex;
      align-items: center;
      width: 390px;
      margin-right: 20px;
    }
  }
  .WSCtbList {
    width: 100%;
    height: calc(100vh - 190px);
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
    // background: yellowgreen;
    .contPart {
      box-shadow: 0px 5px 21px 0px rgba(18, 69, 101, 0.15);
      padding: 20px;
      background: #fff;
      margin: 0px auto 20px auto;
      width: 94%;
      border-radius: 10px;
      font-size: 24px;
      color: #565656;

      .content {
        display: flex;
        flex-wrap: wrap;

        p {
          width: 100%;
          margin: 10px auto;
          line-height: 30px;
        }
      }
    }
  }
}
</style>