<template>
  <div class="publicContainerA">
    <div class="partTitleHM">项目评估</div>
    <div class="ConstrucClass">
      <div class="WaterList">
        <div class="DropdownBox">
          <div class="analysis">
            <img :src="WaterAnalysis_icon" alt="" class="ICON_zp" />
            <span @click="jishuiClick">积水分析</span>
          </div>
          <div class="Selectionbox">
            <el-form-item prop="BODName" style="width: 220px; margin-left: 60px; margin-top: 18px">
              <el-select v-model="queryParams.BODName" placeholder="请选择积水分析" @change="jishuichange">
                <el-option v-for="item in ListBod" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!-- 积水分析 -->
        <div class="assessment" v-if="jishui">
          <AssessmentjsEcharts :data="chartData1" :refresh="chartData1.refresh1"></AssessmentjsEcharts>
        </div>

        <div class="DropdownBox">
          <div class="analysis">
            <img :src="ssfx" alt="" class="ICON_zp" />
            <span @click="textClick">设施分析</span>
          </div>
          <div class="Selectionbox">
            <el-form-item prop="XmQ" style="width: 41%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="queryParams.Xm" placeholder="请选择设施分析">
                <el-option v-for="item in XmList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item prop="XmAQ" style="width: 50%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="queryParams.XmAQ" @change="change" placeholder="请选择">
                <el-option v-for="item in XmListA" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!-- 设施分析 -->
        <div class="assessment" v-if="unfold">
          <AssessmentEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentEcharts>
        </div>

        <div class="DropdownBox">
          <div class="analysis">
            <img :src="xmfx" alt="" class="ICON_zp" />
            <span>项目分析</span>
          </div>
          <div class="Selectionbox">
            <el-form-item prop="Xm" style="width: 41%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="queryParams.Xm" placeholder="请选择项目分析">
                <el-option v-for="item in XmList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item prop="XmA" style="width: 50%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="queryParams.XmA">
                <el-option v-for="item in XmListA" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </div>
        </div>

        <div class="DropdownBox">
          <div class="analysis">
            <img :src="pipefx" alt="" class="ICON_zp" />
            <span>片区分析</span>
          </div>
          <div class="Selectionbox">
            <el-form-item prop="area" style="width: 41%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="queryParams.area" placeholder="请选择片区分析" @change="changeArea">
                <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item prop="pipe" style="width: 50%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="queryParams.pipe" @change="change" placeholder="请选择">
                <el-option v-for="item in pipeList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import AssessmentEcharts from '@/views/sponeScreen/Echarts/AssessmentEcharts.vue'; // 设施分析
import AssessmentjsEcharts from '@/views/sponeScreen/Echarts/AssessmentjsEcharts.vue'; //积水分析
import pipefx from '@/assets/newImgs/HMScreen/pipefx.png';
import ssfx from '@/assets/newImgs/HMScreen/ssfx.png';
import xmfx from '@/assets/newImgs/HMScreen/xmfx.png';
import bus from '@/bus';

import WaterAnalysis_icon from '@/assets/newImgs/HMScreen/WaterAnalysis_icon.png';

const jishui = ref(true);
const unfold = ref(false);
const chartData2 = ref({
  xAxis: [
    '06-12 08:00',
    '06-12 09:00',
    '06-12 10:00',
    '06-12 11:00',
    '06-12 12:00',
    '06-12 13:00',
    '06-12 14:00',
    '06-12 15:00',
    '06-12 16:00',
    '06-12 17:00',
    '06-12 18:00',
    '06-12 19:00',
  ],
  inverse: true,
  yAxis: [2, 1, 1.6, 2.1, 1.2, 0.5, 1.9, 1.2, 1.3, 1.1, 0.7, 0.2],
  yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.3, 0.03, 0.6, 0.1, 0.2, 0.5, 0.3, 0.1],
  yAxis3: [50, 55, 80, 80, 86, 65, 70, 80, 78, 90, 69, 60],
  refresh: 1,
});
const chartData1 = ref({
  xAxis: [
    '2024-06-12 08:00',
    '2024-06-13 08:00',
    '2024-06-14 08:00',
    '2024-06-15 08:00',
    '2024-06-16 08:00',
    '2024-06-17 08:00',
    '2024-06-18 08:00',
    '2024-06-19 08:00',
    '2024-06-20 08:00',
  ],
  yAxis: [2, 5, 10, 8, 2, 4, 5, 5, 7, 10, 5, 1],
  yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1, 0.3, 0.4],
  refresh: 1,
});
const ListBod = ref([
  { name: '明伦桥俩侧积水点', value: '1' },
  { name: '复兴大道四季城积水点', value: '2' },
]);
const areaList = ref([
  { name: '古城片区', value: '0', lonlat: [114.35, 34.802] },
  { name: '城东南片区', value: '1', lonlat: [114.37, 34.792] },
  { name: '保税区片区', value: '2', lonlat: [114.209, 34.782] },
]);

const pipeList = ref([
  { name: '向阳路管网监测点', value: '1' },
  { name: '汴京路管网监测点', value: '2' },
]);

const XmList = ref([
  { name: '汴京路管网及道路海绵化改造', value: '1' },
  { name: '市民公共文化服务综合体建设', value: '2' },
]);

const XmListA = ref([
  { name: '出口监测点', value: '1' },
  { name: '进口监测点', value: '2' },
]);

const AllData = reactive({
  queryParams: { BODName: '1', area: '0', pipe: '1', Xm: '1', XmA: '1', XmQ: '1', XmAQ: '' },
});
const { queryParams } = toRefs(AllData);

function jishuiClick() {
  jishui.value = false;
}
const jishuichange = () => {
  jishui.value = true;
  unfold.value = false;
  // console.log(unfold.value, 'unfold.value');
};

const change = val => {
  unfold.value = true;
  jishui.value = false;
  // console.log(jishui.value, ' jishui.value');
};
function textClick() {
  unfold.value = false;
}

// 片区分析点击
function changeArea(val) {
  bus.emit('checkProjectArea', areaList.value[val]);
  newfiberMapbox.map.easeTo({
    center: areaList.value[val].lonlat,
    zoom: 13.9,
    pitch: 55,
  });
}
</script>

<style lang="scss" scoped>
.publicContainerA {
  margin-top: 10px;
}
.ConstrucClass {
  width: 460px;
  height: calc(100vh - 510px);
  background: #004565;
  opacity: 0.8;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: -3px;
  .WaterAccumulation {
    width: 95%;
    // height: 270px;
    margin: auto;
    background: yellow;
    .HeadContent {
      width: 100%;
      height: 40px;
      background: #217dc8;
      border: 1px solid #61aff0;
      position: relative;
      top: 2px;
      span {
        position: relative;
        top: 8px;
        left: 15px;
        color: #ffffff;
        font-family: Source Han Sans CN;
        font-weight: 500;
      }
    }
  }
  .WaterList {
    position: relative;
    top: 8px;
    width: 95%;
    // height: calc(100vh - 720px);
    margin: auto;
    // background: yellow;
    .DropdownBox {
      height: 45px;
      background: #217dc8;
      border: 1px solid #61aff0;
      display: flex;
      justify-content: space-around;
      margin: 5px;
      .analysis {
        width: 35%;
        display: flex;
        align-items: center;
        // background: red;
        .ICON_zp {
          width: 28px;
          height: 28px;
          position: relative;
          top: 32x;
        }
      }
      .Selectionbox {
        width: 65%;
        display: flex;
        align-items: center;
        // background: yellowgreen;
      }
    }
    .assessment {
      margin-top: 5px;
      width: 100%;
      height: 260px;
      // background: red;
    }
  }
}
</style>