<template>
  <!-- 防汛检查 -->
  <div class="Fangxunjiancha">
    <div class="leve2Title" >防汛检查</div>
    <div v-loading="loading" element-loading-background="rgba(11, 18, 52, 0.3)">
      <div class="sumInfo">
        <div class="dataFrame">
          <div class="sum">{{ listData.pumpDispatchNum || 0 }}/{{ listData.pumpNum || 0 }}</div>
          <div class="name">泵站调度</div>
        </div>
        <div class="dataFrame">
          <div class="sum">{{ listData.checkGoods || '' }}</div>
          <div class="name">物资检查</div>
        </div>
        <el-popover :visible="visible" placement="top" :width="160">
          <div>
            <el-checkbox-group v-model="checkedCities">
              <el-checkbox
                v-for="item in cities"
                :key="item.id"
                :label="item.id"
                :value="item.id"
              >
                {{ item.checkObjName}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div style="text-align: right; margin: 0">
            <el-button size="small" text @click="visible = false">关闭</el-button>
            <el-button size="small" type="primary" @click="confirmClick()"> 确定 </el-button>
          </div>
          <template #reference>
            <div
              class="dataFrame"
              v-loading="loadingjiedao"
              element-loading-background="rgba(11, 18, 52, 0.3)"
              style="cursor: pointer"
              @click="jiedaoFun()"
            >
              <div class="sum">{{ jiedaoData.regionHasCheckNum || 0 }}/{{ jiedaoData.regionNeedCheckNum || 0 }}</div>
              <div class="name">街道</div>
            </div>
          </template>
        </el-popover>
      </div>
    </div>
  </div>
</template>
<script setup nama="Fangxunjiancha">
import { ref, reactive, onMounted } from 'vue';
import {
  drainageDispatchGetCheckCount,
  dutyCheckInfoGetCheckCount,
  dutyCheckInfoGetCheckResultList,
  dutyCheckResultBatchSave,
} from '@/api/FloodControlAndDrainage.js';
const { proxy } = getCurrentInstance();
const loading = ref(false);
const jiedaoData = ref({});
const visible = ref(false);
const listData = ref({});
const checkedCities = ref([]);
const cities =  ref([]);
function gitDataFun() {
  loading.value = true;
  drainageDispatchGetCheckCount().then(
    res => {
      console.log('获取防汛检查', res);
      loading.value = false;
      if (res && res.code == 200) {
        listData.value = res.data;
      }
    },
    error => {
      loading.value = false;
    }
  );
}
// 街道应到操作
const loadingjiedao = ref(false);
function jiedaoFun() {
  loadingjiedao.value = true;
  dutyCheckInfoGetCheckResultList().then(
    res => {
      console.log('获取街道数据', res);
      loadingjiedao.value = false;
      if (res && res.code == 200) {
        cities.value = res.data.regionCheckList;
        res.data.regionHasCheckList.map((e)=>{
           checkedCities.value.push(e.id)
        })
        console.log('cities.value', cities.value);
        visible.value = true;
      }
    },
    error => {
      loadingjiedao.value = false;
    }
  );
}
// 获取街道数据
async function dutyCheckInfoGetCheckCountFun() {
  let res = await dutyCheckInfoGetCheckCount();
  if (res && res.code == 200) {
    jiedaoData.value = res.data;
  }
}
async function confirmClick() {
      console.log('checkedCities', checkedCities.value);

  if(checkedCities.value.length>0){
  let paams={
    checkIds:checkedCities.value.join(',')
  }
  let res = await dutyCheckResultBatchSave(paams);
  if (res && res.code == 200) {
    proxy.$modal.msgSuccess('操作成功');
    dutyCheckInfoGetCheckCountFun();
    visible.value = false;
  }
  }

}
onMounted(() => {
  gitDataFun();
  dutyCheckInfoGetCheckCountFun();
});
</script>
<style lang="scss" scoped>
.Fangxunjiancha {
  .sumInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    .dataFrame {
      width: 136px;

      height: 76px;
      text-align: center;
      background: url('@/assets/images/pictureOnMap/dataFrame.png') no-repeat center;
      background-size: 100% 100%;
      .sum {
        font-weight: bold;
        font-size: 20px;
        color: #2cb7ff;
        line-height: 25px;
        padding-top: 16px;
      }
      .name {
        font-weight: 500;
        font-size: 16px;
        color: #ccdfff;
        font-family: 'SourceHanSansCN-Regular';
      }
    }
  }
  .el-radio__original {
    display: none !important; /* 隐藏原生 radio 输入，但仍然允许交互 */
  }
}
</style>