<template>
  <div class="typicalLandDiaLogDetail" id="aiSuggestData">
    <!-- 综合分析右侧列表 -->
    <div class="ZhongheFenXi">
      <!--海绵设施点位详情 -->
      <div class="publicDetail">
        <div class="part">
          <div class="title">设计降雨量：</div>
          <div class="content">{{ pointInf.sjjyl }}</div>
        </div>
        <div class="part">
          <div class="title">年径流总量控制率目标值：</div>
          <div class="content">{{ pointInf.jlzlkzlmb }}%</div>
        </div>
        <div class="part">
          <div class="title">年径流污染削减率目标值：</div>
          <div class="content">{{ pointInf.jlwrxjmb }}%</div>
        </div>
        <div class="part">
          <div class="title">年径流总量控制率实际值：</div>
          <div class="content">{{ pointInf.jlzlkzlsj }}%</div>
        </div>
        <div class="part">
          <div class="title">年径流污染削减率实际值：</div>
          <div class="content">{{ pointInf.jlwrxjsj }}%</div>
        </div>
        <div class="part">
          <div class="title">安装时间：</div>
          <div class="content">{{ pointInf.azTime }}</div>
        </div>
        <div class="part">
          <div class="title">联系人：</div>
          <div class="content">王超</div>
        </div>
      </div>

      <!-- 数据展示 -->
      <div class="contAnaly">
        <!-- 日期搜索 -->
        <div class="search">
          <el-form :model="search" :inline="true">
            <el-form-item label="站点选择" prop="stCode">
              <el-select
                filterable
                v-model="stationIndex"
                :clearable="false"
                placeholder="请选择"
                @change="changeSite"
                style="width: 220px"
              >
                <el-option v-for="item in equipArr" :key="item.index" :label="item.stName" :value="item.index" />
              </el-select>
            </el-form-item>
            <el-form-item label="日期选择" prop="dateRange">
              <el-date-picker
                v-model="search.dateRange"
                value-format="YYYY-MM-DD"
                type="daterange"
                :clearable="false"
                style="width: 260px"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchData">查询</el-button>
              <el-button type="warning" @click="aiSearchData">AI分析建议</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 数据趋势 -->
        <typicalLandSiteShuJuQuShi
          :searchDate="search.dateRange"
          :typicalLandInfo="typicalLandInfo"
          :domSelect="domSelect"
          ref="dataStatus"
        >
        </typicalLandSiteShuJuQuShi>
      </div>
    </div>
  </div>
</template>
<script setup name="rainDiaLogDetail">
import typicalLandSiteShuJuQuShi from './ZhongheFenXi_component/typicalLandSiteShuJuQuShi.vue'; //数据趋势

const props = defineProps({
  pointInf: Object,
  dateRain: String,
});
const domSelect = ref(null);
const { proxy } = getCurrentInstance();
// 变量声明
const typicalLandInfo = ref({});
//搜索条件
const search = ref({
  dateRange: [],
  monitorCodeList: [],
});
const dateRange = ref([]);
const dataStatus = ref(null);
const equipList = ref([
  [
    // 汴京路项目,和上一个页面保持对应关系
    { stName: '汴京路与公园路交叉出口', stCode: '0371000037', referRainStCode: '0371000003', index: 0 },
    { stName: '汴京路与劳动路交叉进口', stCode: '0371000038', referRainStCode: '0371000003', index: 1 },
    { stName: '汴京路与大花园街交叉口', stCode: '0371000037', referRainStCode: '0371000003', index: 2 },
    { stName: '汴京路与工农路交叉出口', stCode: '0371000044', referRainStCode: '0371000003', index: 3 },
  ],
  [
    // 金明池项目
    { stName: '金明池调蓄池进口', stCode: '0371000060', referRainStCode: '0371000001', index: 0 },
    { stName: '金明池调蓄池出口', stCode: '0371000064', referRainStCode: '0371000001', index: 1 },
    { stName: '金明广场雨水管网总出口', stCode: '0371000061', referRainStCode: '0371000001', index: 2 },
  ],
]);
const stationIndex = ref(0);
const equipArr = ref([]);

// AI分析建议
function aiSearchData() {
  setTimeout(() => {
    dataStatus.value.showDialogAI();
  });
}

// 切换站点
function changeSite() {
  typicalLandInfo.value = equipArr.value[stationIndex.value];
}

// 搜索数据
function searchData() {
  setTimeout(() => {
    dataStatus.value.getPipelineEcharts();
  });
}

// 初始化
onMounted(() => {
  domSelect.value = document.getElementById('aiSuggestData');
  let time = localStorage.getItem('setRainDateKF');
  if (time) {
    search.value.dateRange = [proxy.moment(time).format('YYYY-MM-DD'), proxy.moment(time).add(1, 'days').format('YYYY-MM-DD')];
  } else {
    search.value.dateRange = [proxy.moment().subtract(1, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')];
  }
  localStorage.setItem('searchDateRangeEquip', dateRange.value);
  equipArr.value = equipList.value[props.pointInf.index];
  typicalLandInfo.value = equipArr.value[stationIndex.value]; //传递站点详情
  searchData(); //搜索数据
});
</script>
<style lang="scss" scoped>
.typicalLandDiaLogDetail {
  background: #00314e;
  .ZhongheFenXi {
    width: 100%;
    .publicDetail {
      margin-bottom: 10px;
      .part {
        width: 30%;
        .title {
          font-size: 14px;
        }
        .content {
          color: #3afff8;
        }
      }
    }
    .contAnaly {
      border-radius: 6px;
      padding: 0px 10px;
      width: 100%;
      height: 100%;
    }
  }
}
</style>