<template>
  <div>
    <van-form @submit="onSubmitData">
      <div class="topSelect">
        <van-field
          label="污水厂"
          placeholder="请选择污水厂"
          show-word-limit
          required
          @click="AllData.showPicker = true"
          :rules="[{ required: true, message: '请选择污水厂' }]"
          v-model="AllData.userId"
          is-link
        />
        <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(false)">提交记录</div>
      </div>
      <van-field
        label-width="150px"
        v-model="AllData.patrolTargetIdText"
        label="一月进水BOD(mg/L)"
        type="number"
        placeholder="请输入一月进水BOD(mg/L)"
      />
      <van-field
        label-width="150px"
        v-model="AllData.patrolTargetIdText"
        label="二月进水BOD(mg/L)"
        type="number"
        placeholder="请输入二月进水BOD(mg/L)"
      />
      <van-field
        label-width="150px"
        v-model="AllData.patrolTargetIdText"
        label="三月进水BOD(mg/L)"
        type="number"
        placeholder="请输入三月进水BOD(mg/L)"
      />
      <van-field
        label-width="150px"
        v-model="AllData.patrolTargetIdText"
        label="四月进水BOD(mg/L)"
        type="number"
        placeholder="请输入四月进水BOD(mg/L)"
      />
      <van-field
        label-width="150px"
        v-model="AllData.patrolTargetIdText"
        label="五月进水BOD(mg/L)"
        type="number"
        placeholder="请输入五月进水BOD(mg/L)"
      />
      <van-field
        label-width="150px"
        v-model="AllData.patrolTargetIdText"
        label="六月进水BOD(mg/L)"
        type="number"
        placeholder="请输入六月进水BOD(mg/L)"
      />
      <van-field
        label-width="150px"
        v-model="AllData.patrolTargetIdText"
        label="七月进水BOD(mg/L)"
        type="number"
        placeholder="请输入七月进水BOD(mg/L)"
      />
      <van-field
        label-width="150px"
        v-model="AllData.patrolTargetIdText"
        label="八月进水BOD(mg/L)"
        type="number"
        placeholder="请输入八月进水BOD(mg/L)"
      />
      <van-field
        label-width="150px"
        v-model="AllData.patrolTargetIdText"
        label="九月进水BOD(mg/L)"
        type="number"
        placeholder="请输入九月进水BOD(mg/L)"
      />
      <van-field
        label-width="150px"
        v-model="AllData.patrolTargetIdText"
        label="十月进水BOD(mg/L)"
        type="number"
        placeholder="请输入十月进水BOD(mg/L)"
      />
      <van-field
        label-width="145px"
        v-model="AllData.patrolTargetIdText"
        label="十一月进水BOD(mg/L)"
        type="number"
        placeholder="请输入十一月进水BOD(mg/L)"
      />
      <van-field
        label-width="145px"
        v-model="AllData.patrolTargetIdText"
        label="十二月进水BOD(mg/L)"
        type="number"
        placeholder="请输入十二月进水BOD(mg/L)"
      />
      <div class="BottomView">
        <van-button native-type="submit" class="BotBtn" type="primary">提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
import { facilitySewagelist } from '@/api/SewageReporting.js';
const AllData = reactive({
  showPicker: false,
  userId: '',
  formData: {
    checkItem: '',
  },
});

// 选着
const onConfirmOne = ({ selectedOptions }) => {
  AllData.showPicker = false;
  AllData.userId = selectedOptions[0].text;
  AllData.formData.checkItem = selectedOptions[0].value;
};

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

// 提交上报
const onSubmitData = async () => {
  console.log(AllData.formData, 'AllData.formData');
};
onMounted(() => {
  getUserList();
});
</script>
<style lang="less">
.topSelect {
  width: 100%;
  display: flex;
  // background: red;
  .submitRecord {
    font-size: 30px;
    width: 300px;
    color: #2470ff;
    display: flex;
    align-items: center; /* 这会使容器内的所有子元素垂直居中 */
    justify-content: center; /* 这会使容器内的所有子元素水平居中 */
  }
}
.BottomView {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  .BotBtn {
    width: 45%;
    height: 65px;
    border-radius: 20px;
  }
}
</style>