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

      <van-field
        v-model="AllData.formData.dataTime"
        is-link
        readonly
        label="年份"
        required
        :rules="[{ required: true, message: '请选择年份' }]"
        @click="AllData.ShowTime = true"
        placeholder="请选择年份"
      />
      <van-popup v-model:show="AllData.ShowTime" round position="bottom">
        <van-date-picker
          title="填报年份"
          :columns-type="AllData.columnsType"
          @confirm="onConfirmTime"
          @cancel="cancelOne"
          v-model="AllData.currentDate"
          :min-date="AllData.minDate"
          :max-date="AllData.maxDate"
        >
        </van-date-picker>
      </van-popup>

      <van-field
        label-width="150px"
        v-model="AllData.formData.bod"
        label="进水BOD(mg/L)"
        type="number"
        placeholder="请输入进水BOD(mg/L)"
        required
        :rules="[{ required: true, message: '请输入进水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, sewageBodAdd } from '@/api/SewageReporting.js';
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const router = useRouter();
import moment from 'moment';

const AllData = reactive({
  showPicker: false,
  ShowTime: false,
  minDate: new Date(2020, 1),
  maxDate: new Date(2030, 12),
  userId: '',
  currentDate: [],
  columnsType: ['year', 'month'],
  formData: {
    sewageCode: '',
    dataTime: '2023',
    bod: '',
  },
});
//下拉框列表
const sewageCodeList = ref([]);
function getUserList() {
  facilitySewagelist().then((res) => {
    sewageCodeList.value = res.data.map((v) => {
      return {
        value: v.sewageCode,
        text: v.sewageName,
      };
    });
  });
}
// 选着污水厂
const onConfirmOne = ({ selectedOptions }) => {
  AllData.showPicker = false;
  AllData.userId = selectedOptions[0].text;
  AllData.formData.sewageCode = selectedOptions[0].value;
};

//预约时间
const onConfirmTime = () => {
  AllData.ShowTime = false;
  // AllData.Time = selectedOptions[0].text;
  AllData.formData.dataTime = `${AllData.currentDate.join('-')}`;
};
const cancelOne = () => {
  AllData.ShowTime = false;
};

// 提交上报
const onSubmitData = async () => {
  sewageBodAdd(AllData.formData).then((response) => {
    proxy.showSuccessToast('填报成功');
    router.go(-1);
  });
};
onMounted(() => {
  getUserList();
  let years = moment(new Date()).format('YYYY');
  let month = moment(new Date()).format('MM');
  AllData.currentDate = [years, month];
});
</script>

<style lang="less">
.patrolTaskWSCtb {
  width: 100%;
  height: 100%;
  .BottomView {
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    .BotBtn {
      width: 45%;
      height: 65px;
      border-radius: 20px;
    }
  }
}
</style>