<template>
  <div class="water-analysis-page3">
    <div class="top">
      <el-form
        ref="ruleForm"
        inline
        :model="FormList"
        label-width="auto"
        :disabled="typeList.type == 1"
      >
        <el-row>
          <el-form-item label="项目名称" style="width: 45%">
            <el-select
              v-model="FormList.projectNo"
              placeholder="请选择项目名称"
              style="width: 100%"
              @change="ProjectChange"
            >
              <el-option
                v-for="dict in ProjectListData"
                :key="dict.projectNo"
                :label="dict.projectName"
                :value="dict.projectNo"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目编码:" style="width: 45%" prop="projectNo">
            <el-input
              disabled
              v-model="FormList.projectNo"
              placeholder="请输入项目编码"
            />
          </el-form-item>
          <el-form-item label="编码:" style="width: 45%" prop="gisNo">
            <el-input v-model="FormList.gisNo" placeholder="请输入编码" />
          </el-form-item>
          <el-form-item label="名称:" style="width: 45%" prop="gisName">
            <el-input v-model="FormList.gisName" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="类型:" style="width: 45%" prop="facilityType">
            <el-select
              clearable
              v-model="FormList.facilityType"
              class="m-2"
              placeholder="请选择类型"
              size="mini"
              style="width: 100%"
            >
              <el-option
                v-for="item in facility_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="边界类型:"
            style="width: 45%"
            prop="boundaryType"
          >
            <el-select
              clearable
              v-model="FormList.boundaryType"
              class="m-2"
              placeholder="请选择边界类型"
              size="mini"
              style="width: 100%"
            >
              <el-option
                v-for="item in boundary_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="颜色:" style="width: 45%" prop="color">
            <el-color-picker
              size="large"
              v-model="FormList.color"
              show-alpha
              color-format="hex"
              @change="colorChangeClick"
            ></el-color-picker>
          </el-form-item>
          <el-form-item
            label="边界颜色:"
            style="width: 20%"
            prop="boundaryColor"
          >
            <el-color-picker
              size="large"
              color-format="hex"
              @change="boundaryColorChange"
              v-model="FormList.boundaryColor"
            ></el-color-picker>
          </el-form-item>

          <el-form-item label="是否启用:" style="width: 93%" prop="status">
            <el-select
              clearable
              v-model="FormList.status"
              class="m-2"
              placeholder="请选择是否启用"
              size="mini"
              style="width: 100%"
            >
              <el-option
                v-for="item in isShowList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="描述:" style="width: 93%" prop="remark">
            <el-input
              type="textarea"
              v-model="FormList.remark"
              placeholder="请输入描述"
            />
          </el-form-item>
          <!-- gis地图 -->
          <el-form-item
            style="margin-top: 20px"
            label="图片上传"
            :rules="[
              { required: true, message: '图片上传', trigger: 'change' },
            ]"
            props="fileSaveRequestList"
          >
            <el-upload
              list-type="picture"
              v-model:file-list="FormList.fileSaveRequestList"
              class="upload-demo"
              action="/prod-api/system/upload"
              :headers="uploadHeader"
              multiple
              :on-preview="handleExceed"
              :before-remove="beforeRemove"
            >
              <template #trigger>
                <el-icon class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </template>
              <template #tip> </template>
            </el-upload>
          </el-form-item>
        </el-row>
      </el-form>
      <div class="mapBox">
        <mapBox
          @endDraw="endDraw"
          @getPlace="getPlace"
          :isShowSearch="typeList.type == 2 || !typeList.type"
          :isShowTool="typeList.type == 2 || !typeList.type"
          :color="color"
          :material="material"
        ></mapBox>

        <!-- <mapBox v-else :isShowTool="false" :isShowSearch="false"  :color="color"  :material="material"></mapBox> -->
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, defineEmits, defineProps, defineExpose } from "vue";
import mapBox from "@/components/Map/index.vue";
import { projectInfoAdd, projectInfoEdit } from "@/api/xmGis";
import { projectInfoList } from "@/api/project/tenderReview";
import { FileSystemList } from "@/api/project/tenderReview";
import { getToken } from "@/utils/auth";
import {hexToRgba} from "@/utils"
// import GisMap from "@/components/GisMap/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const { typeList } = defineProps(["typeList"]);
const { proxy } = getCurrentInstance();
const { ownership, boundary_type, facility_type } = proxy.useDict(
  "ownership",
  "boundary_type",
  "facility_type"
);
const color=ref('')
const material=ref('')
const uploadHeader = ref({
  Authorization: "Bearer " + getToken(),
});
const emits = defineEmits();
const ProjectListData = ref([]);
let FormList = ref({});
const isShowList = ref([
  { label: "是", value: "0" },
  { label: "否", value: "1" },
]);
const form = ref({ patrolSectionLine: {} });
//结束点、线、面的绘制
function endDraw(val) {
  // debugger
  form.value.sectionType = val.currentTool;
  form.value.patrolSectionLine.length = val.lengthKM;
  form.value.geometry = val.geometry;
  form.value.geometryBuffer = val.geometryBuffer;
  form.value.patrolSectionLine.startPlace = "";
  form.value.patrolSectionLine.endPlace = "";
  form.value.patrolSectionLine.startPlaceFull = "";
  form.value.patrolSectionLine.endPlaceFull = "";
  // layerId.value = val.layerId;
}
//获取起始地址、获取终点地址
function getPlace(val) {
  console.log(
    val[0].formatted_address.split(val[0].addressComponent.township),
    222
  );
  if (val.length > 0) {
    form.value.patrolSectionLine.startPlaceFull = val[0].formatted_address;
    form.value.patrolSectionLine.endPlaceFull = val[1].formatted_address;
    form.value.patrolSectionLine.startPlace =
      val[0].addressComponent.township +
      val[0].formatted_address.split(val[0].addressComponent.township)[1];
    form.value.patrolSectionLine.endPlace =
      val[1].addressComponent.township +
      val[1].formatted_address.split(val[1].addressComponent.township)[1];
  }
}
function submit() {
  proxy.$refs.ruleForm.validate((valid) => {
    if (valid) {
      let img = [];
      FormList.value.fileSaveRequestList.forEach((element) => {
        if (element.hasOwnProperty("response")) {
          element.response.data.refType = "proProjectGisConfig";
          element.response.data.refField = "profile";
          img.push(element.response.data);
        } else {
          img.push(element);
        }
      });

      FormList.value.fileSaveRequestList = img;
      FormList.value.geometrys = form.value.geometry;
      if (typeList.type) {
        projectInfoEdit({ ...FormList.value, ...form.value }).then(
          ({ code }) => {
            if (code == 200) {
              desertFilds();
              emits("onModalClose");
            }
          }
        );
      } else {
        projectInfoAdd({ ...FormList.value, ...form.value }).then(
          ({ code }) => {
            if (code == 200) {
              desertFilds();
              emits("onModalClose");
            }
          }
        );
      }
    }
  });
}
function desertFilds() {
  FormList.value = { fileSaveRequestList: [] };
}
defineExpose({ submit, desertFilds });
function loadProjerctListData() {
  projectInfoList().then((response) => {
    ProjectListData.value = response.data;
    nextTick(() => {
      FormList.value = typeList;
      if (typeList.type) {
        systemUploadM({ refId: typeList.id, refType: "proProjectGisConfig" });
      }
    });
  });
}
const systemUploadM = async (p) => {
  let { data } = await FileSystemList(p);
  FormList.value.fileSaveRequestList = data;
};
function handleExceed(uploadFile) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
function beforeRemove(file) {
  return true;
}
function colorChangeClick(v) {
  // color.value=hexToRgba(v)
  color.value=v
  console.log(hexToRgba(v),333)
  FormList.value.color = v;
}
function boundaryColorChange(v) {
  // material.value=hexToRgba(v)
  material.value=v
  FormList.value.boundaryColor = v;
}
// 渲染点线面
function intMapDraw(form) {
  console.log("form", form);
  let data = [];
  //点,渲染多点
  if (form.sectionType == "point") {
    data = [
      {
        //type: NewFiberMap.Enum.VectorType.ICON,
        type: NewFiberMap.Enum.VectorType.POINT,
        id: form.sectionType,
        style: {
          width: 5,
          material: typeList.boundaryColor,
          clampToGround: true,
        },
        geometrys: form.geometry,
      },
    ];
  }
  //线
  if (form.sectionType == "line") {
    data = [
      {
        type: NewFiberMap.Enum.VectorType.POLYLINE,
        id: form.sectionType,
        geometrys: form.geometry,
        style: {
          width: 5,
          material: typeList.boundaryColor,
          clampToGround: true,
        },
      },
    ];
  }
  //面
  if (form.sectionType == "area") {
    data = [
      {
        type: NewFiberMap.Enum.VectorType.POLYGON,
        style: { material: typeList.boundaryColor, color: typeList.color },
        geometrys: form.geometry,
        id: form.sectionType,
        labelOptions: {
          font: "20px PingFang SC",
          color: typeList.color,
          pixelOffset: [0, -60],
          backgroundColor: typeList.color,
          showBackground: true,
          distanceDisplayCondition: [Number.MIN_VALUE, 5000000],
        },
      },
    ];
  }
  if (form.geometryBuffer) {
    //类型是点的时候，缓冲区渲染多面
    let geometryBufferData = [
      {
        type: NewFiberMap.Enum.VectorType.POLYGON,
        style: { material: "rgba(255,0,0,0.1)", color: "rgba(255,33,323)" },
        geometrys: form.geometryBuffer,
        id: "geometryBuffer",
      },
    ];
    newfiberMap.geojsonToMap(
      NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson(geometryBufferData)
    );
  }
  if (data.length) {
    let geojson = NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson(data);
    newfiberMap.geojsonToMap(
      geojson
    );

    toCenterByGeoJson(geojson)
  }
}
const toCenterByGeoJson = (geojson) => {
  let coords = turf.getCoords(geojson.features[0].geometry).flat();
  let flag = geojson.features.length == 1 && coords.length == 2;
  if (!!geojson.features.length && !flag) {
    newfiberMap.getMap().camera.flyTo({destination: new Cesium.Rectangle.fromDegrees(...turf.bbox(turf.transformScale(turf.bboxPolygon(turf.bbox(geojson)), 2)))});
  } else {
    newfiberMap.setCenter({
      "roll": 0.01658908985506884,
      "pitch": -87.24924906709752,
      "heading": 5.026928271138224,
      "lng": coords[0],
      "lat": coords[1],
      "height": 943.5996932813425
    })
  }
}

onMounted(() => {
  loadProjerctListData();
  setTimeout(() => {
    if([1, 2].includes(typeList.type)){
      intMapDraw({
        geometry: typeList.geometrys||'',
        sectionType: typeList.sectionType||'line',
      });
    }
  }, 100);
});
</script>
<style lang="scss" scoped>
.water-analysis-page3 {
  padding: 20px;
  :deep(.el-upload-list__item) {
    width: 102px;
    margin: 0 10px;
  }
  :deep(.el-upload-list) {
    width: 100%;
    display: flex;
  }
  :deep(.el-upload-list__item-file-name) {
    color: #fff;
  }
  :deep(.el-upload-list__item .el-icon--close-tip) {
    color: #fff;
  }
  :deep(.el-upload-list__item .el-upload-list__item-info) {
    margin-left: 51.2px;
  }
}

.pagination {
  float: right;
  margin-top: 10px;
}

.iconCLass {
  ::v-deep .el-input__wrapper {
    box-shadow: 0 0 0 0;
  }
}

.mapBox {
  width: 100%;
  height: 400px;
}
</style>