<template>
  <div class="longYW">
    <div class="partTitleHM">
      污水厂进口BOD
      <div class="head-right" style="">
        <el-form-item prop="sewageCode" style="width: 55%">
          <el-select :clearable="false" v-model="queryParams.sewageCode" size="small" @change="changeSewage">
            <el-option v-for="item in ListBod" :key="item.sewageCode" :label="item.sewageName" :value="item.sewageCode" />
          </el-select>
        </el-form-item>
        <el-form-item style="width: 41%; margin-left: 10px">
          <el-date-picker
            type="year"
            v-model="queryParams.dataTime"
            value-format="YYYY"
            placeholder="请选择年"
            style="width: 100%"
            size="small"
            @change="changeDataTime"
            :clearable="false"
          ></el-date-picker>
        </el-form-item>
      </div>
    </div>
    <div class="ConstrucClass">
      <SewageBODEchaer :data="chartData3" :key="refresh1"></SewageBODEchaer>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted, reactive } from 'vue';
import SewageBODEchaer from '@/views/sponeScreen/Echarts/SewageBODEchaer.vue';
import { sewageBodPage, facilitySewagelist } from '@/api/publicService/index';
const { proxy } = getCurrentInstance();
const ListBod = ref([]);

const refresh1 = ref(1);
const chartData3 = ref({
  XName: [],
  data1: [],
  controlMarkLine: [],
  controlGraphic: '',
});
const AllData = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10000,
    sewageCode: undefined,
    dataTime: undefined,
  },
});
const { queryParams } = toRefs(AllData);

//下拉框列表
function getUserList() {
  facilitySewagelist().then(res => {
    ListBod.value = res.data || [];
    queryParams.value.sewageCode = res.data[2].sewageCode;
  });
}
/** 获取搜索数据列表 */
function getDataList() {
  sewageBodPage(queryParams.value).then(response => {
    if (queryParams.value.dataTime == '2022') {
      chartData3.value.controlMarkLine = [{ typeName: '考核达标', value: '130', Opacity: 1, color: '#e15a6b' }];
    } else if (queryParams.value.dataTime == '2023') {
      chartData3.value.controlMarkLine = [{ typeName: '考核达标', value: '132', Opacity: 1, color: '#e15a6b' }];
    } else {
      chartData3.value.controlMarkLine = [{ typeName: '考核达标', value: '135', Opacity: 1, color: '#e15a6b' }];
    }
    let SewageList = [];
    let SewageTime = [];
    response.data.forEach(element => {
      SewageList.push(Number(element.bod));
      SewageTime.push(element.dataTime);
    });
    chartData3.value.data1 = SewageList;
    chartData3.value.XName = SewageTime;
    refresh1.value++;
  });
}
// 下拉框事件
function changeSewage(val) {
  queryParams.value.sewageCode = val;
  getDataList();
}

// 年份事件
function changeDataTime(val) {
  queryParams.value.dataTime = val;
  getDataList();
}

onMounted(() => {
  queryParams.value.dataTime = '2023';
  getUserList();
  setTimeout(() => {
    getDataList();
  }, 350);
});
</script>

<style lang="scss" scoped>
.longYW {
  margin-top: 10px;
  width: 100%;
  height: 30%;

  opacity: 0.8;
  .head-right {
    cursor: pointer;
    position: relative;
    left: 180px;
    top: -33px;
    width: 210px;
    height: 32px;
    display: flex;
    // background: red;
  }
}
.ConstrucClass {
  height: calc(100% - 15%);
  background: #004565;
  margin-top: -3px;
  // background: red;
}
</style>