<template>
  <div class="water-analysis-page">
    <div class="top">
      <el-form label-width="auto" :rules="projectEstimateRules" inline ref="ruleForm" :model="FormList" :disabled="typeList.type == 1">
        <div v-for="i in FormList.monitorDynamicTableTitleList" style="display: flex; flex-direction: column">
          <el-form-item
            v-if="i.key == 'real' || i.key == 'target'"
            v-for="k in i.titleGroup"
            :label="i.key == 'real' ? '实际' + k.value + ':' : '目标' + k.value + ':'"
            :prop="k.key"
            :disabled="typeList.type == 1 || typeList.type == 2"
          >
            <el-input
              :disabled="i.key != 'real'"
              v-model="FormList[k.key]"
              :placeholder="k.placeholder"
              @change="ChangeClick(k.key, FormList[k.key])"
            >
            </el-input>
          </el-form-item>
          <el-form-item v-else :label="i.value + ':'" :prop="i.key" :disabled="typeList.type == 1 || typeList.type == 2">
            <ImageFileUpload
              v-if="i.key == 'attachFileList'"
              v-model:saveFileArr="fileSaveRequestList"
              :listType="'text'"
              :refType="'CSFHBZ'"
            />
            <div v-else-if="i.key == 'standardFlag'">
              <el-tag v-if="typeList.data.standardFlag === ''" type="warning">未填报</el-tag>
              <el-tag v-else-if="typeList.data.standardFlag === 102" type="warning">无法评价</el-tag>
              <el-tag v-else :type="typeList.data.standardFlag === 1 ? 'success' : 'error'">
                {{ typeList.data.standardFlag === 1 ? '达标' : '未达标' }}
              </el-tag>
            </div>
            <div v-else>
              {{ FormList[i.key] }}
            </div>
          </el-form-item>
        </div>
        <!-- 地图渲染河道断面，默认显示监测站站点名称、设防水位、实时水位，点击查看历史水位数据 -->
        <div class="csfhbzM">
          <gisMap2D style="position: relative" :initJson="`/static/libs/mapbox/style/HaiMianScreen.json`" @map-click="clickMap"></gisMap2D>
        </div>
      </el-form>
    </div>

    <!-- 地图标记点点击查看历史水位数据 -->
    <el-dialog v-model="dialogShow" title="河道历史水位" :modal-append-to-body="false" width="600px">
      <div style="margin-bottom: 20px">
        <el-form inline>
          <el-form-item label="日期:" prop="hisDate">
            <el-date-picker v-model="hisDate" type="daterange" value-format="YYYY-MM-DD" placeholder="请选择" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="searchData">查询</el-button>
          </el-form-item>
        </el-form>
        <div id="chartHistoryR" style="width: 100%; height: 300px"></div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import bus from '@/bus';
import { projectInfoEdit } from '@/api/spongePerformance/prevention';
import { projectEstimateRules } from '@/utils/rules';
import chartOption from '@/components/Echarts/pieChart_1.js';
import * as echarts from 'echarts';
import gisMap2D from '@/views/gisMapPage/gisMapBox1.vue';
import { getStationList } from '@/api/sponeScreen/syntherticData.js';

const { proxy } = getCurrentInstance();
const dialogShow = ref(false);
const hisDate = ref([proxy.moment(new Date()).subtract(60, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);
const { typeList } = defineProps(['typeList']);
const emits = defineEmits();
defineExpose({ submit, closed, resetFiled });
const IsStandFlag1 = ref(0);
const fileSaveRequestList = ref([]);
let FormList = ref({ projectNo: '', fileSaveRequestList: [] });
function ChangeClick(v, m) {
  typeList.iSstandardFlag = null;
  if (v == 'realMB') {
    IsStandFlag1.value = m * 1 - FormList.value.targetMB * 1;
  }
  if (IsStandFlag1.value >= 0) typeList.data.standardFlag = 1;
  else typeList.data.standardFlag = 0;
}

function submit() {
  proxy.$refs.ruleForm.validate(valid => {
    if (valid) {
      const itemUpdateFieldRequestList = [
        { id: typeList.data['MB-id'], realValue: FormList.value.realMB, standardFlag: typeList.data.standardFlag },
      ];
      FormList.value = {
        itemDataType: typeList.itemDataType,
        standardFlag: typeList.data.standardFlag,
        itemUpdateFieldRequestList,
        fileSaveRequestList: fileSaveRequestList.value,
        performanceEvaluateId: typeList.data.performanceEvaluateId,
      };
      console.log('FormList.value', FormList.value);
      projectInfoEdit(FormList.value).then(({ code }) => {
        if (code == 200) {
          emits('onModalClose');
        }
      });
    }
  });
}
function loadProjerctListData() {
  console.log('typeListtypeList', typeList);
  let ln = typeList.monitorDynamicTableTitleList?.length;
  FormList.value = typeList.data;
  fileSaveRequestList.value = typeList.fileList1;
  FormList.value.monitorDynamicTableTitleList = typeList.monitorDynamicTableTitleList.slice(0, ln - 2);
  proxy.$refs.ruleForm.resetFields();
}
function resetFiled() {
  proxy.$refs.ruleForm.resetFields();
}

function closed() {
  emits('onModalClose');
}

// 历史水位查询
function searchData() {
  setTimeout(() => {
    getRiverData();
  }, 0);
}

// 河道echarts
let chartRiver = null;
async function getRiverData() {
  if (!!chartRiver) chartRiver.dispose();
  chartRiver = echarts.init(document.getElementById('chartHistoryR'));
  // echarts赋值
  let arrs = [
    {
      riverX: [0, 10, 17, 25, 34, 55],
      riverY: [25, 20, 15, 8, 10, 28],
      sfZ: 23.5,
      z: 22,
    },
  ];
  chartOption.floodOneMapFXYP.xAxis[0].data = arrs[0].riverX;
  chartOption.floodOneMapFXYP.series[1].data = arrs[0].riverY;
  chartOption.floodOneMapFXYP.series[1].markLine.data[0].yAxis = arrs[0].sfZ;
  chartOption.floodOneMapFXYP.series[1].markLine.data[0].label.formatter = '设防水位 ' + arrs[0].sfZ + 'm';
  let arrs2 = [];
  arrs[0].riverX.map(item => {
    arrs2.push(arrs[0].z);
  });
  chartOption.floodOneMapFXYP.series[0].data = arrs2;
  if (arrs[0].riverX.length == 0) {
    chartOption.floodOneMapFXYP.graphic.invisible = false; //暂无数据
  } else {
    chartOption.floodOneMapFXYP.graphic.invisible = true; //暂无数据
  }
  chartRiver.clear();
  chartRiver.setOption(chartOption.floodOneMapFXYP);
}
//添加河道监测
const addRiverSuperVise = async () => {
  let res = await getStationList();
  if (res && res.code == 200) {
    let riverDataList = res.data.filter(data => data.siteType == 'water_level');
    let riverFeaturcs = [];
    riverDataList.forEach(data => {
      riverFeaturcs.push(turf.point(data.lonLat.split(',').map(Number), data));
    });
    let riverGeojson = {
      type: 'FeatureCollection',
      features: riverFeaturcs,
    };
    bus.emit('setLegendData', [{ data: riverGeojson, layername: 'waterCourse', type: 'point' }]);
    bus.emit('setLayerVisible', { layername: 'waterCourse', isCheck: true });
  }
};
//地图点击事件
const clickMap = (point, properties) => {
  console.log('point', point);
  console.log('properties', properties);
  dialogShow.value = true;
  setTimeout(() => {
    getRiverData();
  }, 0);
};
onMounted(() => {
  loadProjerctListData();
  searchData(); //搜索
  setTimeout(() => {
    addRiverSuperVise();
  }, 2000);
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
  .csfhbzM {
    width: 100%;
    height: 400px;
    // border: 1px solid red;
  }
}
</style>