<template>
  <!-- 防汛检查 -->
  <div class="Fangxunjiancha">
    <div class="leve2Title">到岗到位</div>
    <div v-loading="loading" element-loading-background="rgba(11, 18, 52, 0.3)">
      <el-popover
        :placement="popoverPlacement"
        :visible="visibleShow"
        :width="200"
        trigger="hover"
        :show-arrow="popoverPlacement == 'top-start' ? false : true"
      >
        <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="visibleShow = false">关闭</el-button>
          <el-button size="small" type="primary" @click="confirmClick()"> 确定 </el-button>
        </div>
        <template #reference>
          <div class="sumInfo">
            <div class="dataFrame" @click="visibleClickFun('YQ')">
              <div class="sum">{{ listData.parkHasCheckNum || 0 }}/{{ listData.parkNeedCheckNum || 0 }}</div>
              <div class="name">园区</div>
            </div>
            <div class="dataFrame" @click="visibleClickFun('PT')">
              <div class="sum">{{ listData.platformHasCheckNum || 0 }}/{{ listData.platformNeedCheckNum || 0 }}</div>
              <div class="name">平台</div>
            </div>
            <div class="dataFrame" @click="visibleClickFun('JD')">
              <div class="sum">{{ listData.regionHasCheckNum || 0 }}/{{ listData.regionNeedCheckNum || 0 }}</div>
              <div class="name">街道</div>
            </div>
          </div>
        </template>
      </el-popover>
    </div>
  </div>
</template>
<script setup nama="Fangxunjiancha">
import { ref, reactive, onMounted } from 'vue';
import {
  dutyCheckInfoGetCheckCount,
  dutyCheckInfoGetCheckResultList,
  dutyCheckResultBatchSave,
} from '@/api/FloodControlAndDrainage.js';
const { proxy } = getCurrentInstance();
const visibleShow = ref(false);
const popoverPlacement = ref('top-start');
const allStr = ref([]); //当前点击类型所有数据
const atoptFor = ref([]); //当前点击类型选中数据
const loading = ref(false);
const listData = ref({});
const checkedCities = ref([]);
const cities = ref([]);
// 应到操作
function zhibanData() {
  loading.value = true;
  dutyCheckInfoGetCheckResultList().then(
    res => {
      loading.value = false;
      if (res && res.code == 200) {
        cities.value = res.data[allStr.value];
        res.data[atoptFor.value].map(e => {
          checkedCities.value.push(e.id);
        });
        console.log('cities.value', cities.value);
        visibleShow.value = true;
      }
    },
    error => {
      loading.value = false;
    }
  );
}
// 获取数据
async function dutyCheckInfoGetCheckCountFun() {
  loading.value = true;
  let res = await dutyCheckInfoGetCheckCount();
  loading.value = false;
  if (res && res.code == 200) {
    listData.value = res.data;
  }
}
async function confirmClick() {
  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();
      visibleShow.value = false;
    }
  }
}
function visibleClickFun(type) {
  checkedCities.value = [];
  if (type == 'YQ') {
    popoverPlacement.value = 'top-start';
    allStr.value = 'parkCheckList';
    atoptFor.value = 'parkHasCheckList';
  } else if (type == 'PT') {
    popoverPlacement.value = 'bottom';
    allStr.value = 'platformCheckList';
    atoptFor.value = 'platformHasCheckList';
  } else if (type == 'JD') {
    popoverPlacement.value = 'right-end';
    allStr.value = 'regionCheckList';
    atoptFor.value = 'regionHasCheckList';
  }
  zhibanData();
}
onMounted(() => {
  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%;
      cursor: pointer;
      .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>