<template>
  <!-- 水务资产  右侧 -->
  <div class="MonitoringWarningRigh">
    <div class="moduleBox moduleBoxRight">
      <div class="TOP_Title">
        <div class="flex_sbc p56 pbottom">
          <div class="top-title">监测资产</div>
        </div>
      </div>
      <div class="small-TitleBox">水系监测({{ shuixitotal }})</div>
      <div class="one shuixijianceBox">
        <div class="boxitem" v-for="p in shuixijianceArr" :key="p">
          <img class="itemimg" :src="p.icon" />
          <div class="value">{{ p.value }}</div>
          <div class="name">{{ p.name }}</div>
        </div>
      </div>
      <div class="small-TitleBox">内涝积水点({{ jishuidiantotal }})</div>
      <div class="two" v-loading="chartInfo3.loading" element-loading-background="rgba(122, 122, 122, 0.2)">
        <neilaojishuidianEcharts
          :YAxis="chartInfo3.YAxis"
          :XAxis="chartInfo3.XAxis"
          :refresh="chartInfo3.refresh"
          :typeName="chartInfo3.typeName"
        ></neilaojishuidianEcharts>
      </div>
      <div class="small-TitleBox">管网监测({{ guanwangtotal }})</div>
      <div class="three" v-loading="chartInfo4.loading" element-loading-background="rgba(122, 122, 122, 0.2)">
        <guanwangjianceEchart
          :YAxis="chartInfo4.YAxis"
          :XAxis="chartInfo4.XAxis"
          :YAxis2="chartInfo4.YAxis2"
          :refresh="chartInfo4.refresh"
          :typeName="chartInfo4.typeName"
        ></guanwangjianceEchart>
      </div>
      <div class="small-TitleBox">视频监控({{ videototal }})</div>
      <div class="four">
        <div v-for="p in bottomvideo" :key="p" class="videoitem">
          <img class="lefticon" :src="p.fileUrl" />
          <div class="itembox">
            <div class="name">{{ p.name }}</div>
            <div class="value blue">{{ p.total }}</div>
          </div>
          <div class="itembox two_item">
            <div class="name">自建</div>
            <div class="value green">{{ p.owner }}</div>
          </div>
          <div class="itembox">
            <div class="name">共享</div>
            <div class="value yellow">{{ p.share }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="MonitoringWarningRigh">
import { ref, reactive, onMounted } from 'vue';
const { proxy } = getCurrentInstance();
import { getImageUrl } from '@/utils/ruoyi';
import neilaojishuidianEcharts from '@/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/neilaojishuidianEcharts.vue';
import guanwangjianceEchart from '@/views/pictureOnMap/page/WaterAssets/MonitoringAssetsRight/guanwangjianceEchart.vue';
import { getWaterMonitorCount, getWaterLoggingCount, getPipeMonitorCount, getCameraCount } from '@/api/WaterAssets';
import { replaceArrName } from '@/utils/ruoyi';

const chartInfo3 = ref({
  refresh: 1,
  // XAxis: ['标段1', '标段2', '标段3', '标段4', '标段5', '标段6'],
  // YAxis: [12, 14, 6, 7, 8, 8],
  XAxis: [],
  YAxis: [],
  typeName: '(个)',
  loading: true,
});

const chartInfo4 = ref({
  refresh: 1,
  XAxis: ['龙王咀水质', '南湖水质', '东湖水质', '汤逊湖水质', '南湖液位'],
  YAxis: [83, 0, 0, 0, 0],
  YAxis2: [0, 168, 16, 73, 33],
  // XAxis: [],
  // YAxis: [],
  // YAxis2: [],
  typeName: '监测点位(个)',
  loading: false,
});

const shuixitotal = ref(0);
const jishuidiantotal = ref(0);
const guanwangtotal = ref(373);
const videototal = ref(0);

const shuixijianceArr = ref([
  {
    name: '湖泊',
    value: '0',
    icon: getImageUrl('shuixi-hupo.png', 'images/shuiwuzichan'),
  },
  {
    name: '港渠',
    value: '0',
    icon: getImageUrl('shuixi-gangqu.png', 'images/shuiwuzichan'),
  },
  {
    name: '排口',
    value: '0',
    icon: getImageUrl('shuixi-hedao.png', 'images/shuiwuzichan'),
  },
  {
    name: '水库',
    value: '0',
    icon: getImageUrl('shuixi-shuiku.png', 'images/shuiwuzichan'),
  },
]);

const bottomvideo = ref([
  {
    name: '交管',
    total: '0',
    owner: '0',
    share: '0',
    fileUrl: getImageUrl('video-jiaojing.png', 'images/shuiwuzichan'),
  },
  {
    name: '堤防',
    total: '0',
    owner: '0',
    share: '0',
    fileUrl: getImageUrl('video-difang.png', 'images/shuiwuzichan'),
  },
  {
    name: '泵站',
    total: '0',
    owner: '0',
    share: '0',
    fileUrl: getImageUrl('video-bengzhan.png', 'images/shuiwuzichan'),
  },
  {
    name: '河湖',
    total: '0',
    owner: '0',
    share: '0',
    fileUrl: getImageUrl('video-hehu.png', 'images/shuiwuzichan'),
  },
]);

function GetgetWaterMonitorCount() {
  getWaterMonitorCount().then(res => {
    console.log(res);
    shuixijianceArr.value[0].value = res.data.lake;
    shuixijianceArr.value[1].value = res.data.portChannel;
    shuixijianceArr.value[2].value = res.data.outlet;
    shuixijianceArr.value[3].value = res.data.reservoir;
    shuixitotal.value = res.data.total;
  });
}

// 内涝积水点
function GetgetWaterLoggingCount() {
  chartInfo3.value.loading = true;

  getWaterLoggingCount().then(res => {
    console.log(res);
    chartInfo3.value.XAxis = res.data.name;

    chartInfo3.value.YAxis = res.data.count;
    jishuidiantotal.value = res.data.total;
    chartInfo3.value.loading = false;

    chartInfo3.value.refresh = Math.random();
  });
}

// 管网监测
function GetgetPipeMonitorCount() {
  console.log('Ssjfflsdjfsldfjlsdk');

  getPipeMonitorCount().then(res => {
    // chartInfo4.value.XAxis = res.data.name;
    chartInfo4.value.XAxis = replaceArrName(res.data.name, '水系');
    chartInfo4.value.YAxis = res.data.sewage;
    chartInfo4.value.YAxis2 = res.data.rain;
    guanwangtotal.value = res.data.total;
    chartInfo4.value.loading = false;

    chartInfo4.value.refresh = Math.random();
  });
}

function GetgetCameraCount() {
  getCameraCount().then(res => {
    console.log(res);
    videototal.value = res.data.total;
    bottomvideo.value = res.data.list;
  });
}

onMounted(() => {
  GetgetWaterMonitorCount();
  GetgetWaterLoggingCount();
  // GetgetPipeMonitorCount();
  GetgetCameraCount();
});
</script>
<style lang="scss" scoped>
@import '@/assets/styles/WaterAssets.scss';

.one {
  height: 110px;
}

.two {
  height: calc(22% - 35px);
}

.three {
  height: calc(30% - 35px);
}

.four {
  height: calc(48% - 217px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>