<template>
  <el-row>
    <el-col :span="24">
      <el-form :model="form" ref="dataRef" label-width="90px" :rules="rules">
        <el-form-item label="标识码:" prop="code">
          <el-input placeholder="请输入" v-model="form.code" class="inputCss" />
        </el-form-item>
        <el-form-item label="类型:" prop="pipelineType">
          <el-select
            v-model="form.pipelineType"
            placeholder="类型"
            clearable
            class="inputCss"
          >
            <el-option
              v-for="dict in typesList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="材质:" prop="material">
          <el-select
            v-model="form.material"
            placeholder="材质"
            clearable
            class="inputCss"
          >
            <el-option
              v-for="dict in materialList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="管径:" prop="diameter">
          <el-select
            v-model="form.diameter"
            placeholder="管径"
            clearable
            class="inputCss"
          >
            <el-option
              v-for="dict in diameterList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          <span class="info"></span>
        </el-form-item>
        <el-form-item label="长度:" prop="length">
          <el-input
            placeholder="请输入"
            v-model="form.length"
            readonly
            class="inputCss"
          />
          <span class="info">米</span>
        </el-form-item>
        <el-form-item label="管线起点:" prop="startData">
          <div class="inputBg">
            <div class="flex">
              <div>经度: {{  parseFloat(form.path[0][0]).toFixed(4) }}</div>
              <div>纬度: {{  parseFloat(form.path[0][1]).toFixed(4) }}</div>
            </div>
            <div class="magringTop10">
              海拔：
              <el-input
                placeholder="请输入"
                v-model="form.startAltitude"
                class="inputCss"
                @input="inputMate"
              />
            </div>
            <div class="magringTop10">
              标高：
              <el-input
                placeholder="请输入"
                v-model="form.startElevation"
                class="inputCss"
                @input="inputMate"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="管线终点:" prop="endData">
          <div class="inputBg">
            <div class="flex">
              <div>经度: {{ parseFloat(form.path[1][0]).toFixed(4) }}</div>
              <div>纬度: {{ parseFloat(form.path[1][1]).toFixed(4) }}</div>
            </div>
            <div class="magringTop10">
              海拔：
              <el-input
                placeholder="请输入"
                v-model="form.endAltitude"
                class="inputCss"
              />
            </div>
            <div class="magringTop10">
              标高：
              <el-input
                placeholder="请输入"
                v-model="form.endElevation"
                class="inputCss"
              />
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <div class="footBottm">
    <el-button
      v-hasPermi="['ldmap:role:edit']"
      type="primary"
      @click="add()"
      style="margin-right: 30px"
      :loading="loading"
      >保存</el-button
    >
    <el-button
      v-hasPermi="['ldmap:role:edit']"
      type="danger"
      @click="del()"
      style="margin-right: 30px"
      :loading="loading"
      >删除</el-button
    >
    <el-button
      type="warning"
      @click="
        () => {
          emit('closeDialog', false);
        }
      "
      >取消</el-button
    >
  </div>
</template>
<script setup lang="ts">
import { pipelineUpdate,getElevation } from "@map/api/exit.js";
import ldMap  from "@map/utils/map/init";
const loading = ref(false);
const $ldMap = inject("$ldMap"); // 调用全局变量
const props = defineProps({
  layerId: String,
  detailInfo: {
    type: Object,
    default: {},
  },
});



const checkStart = (rule, value, callback) => {
  if (form.value.startAltitude && form.value.startElevation) {
    return callback();
  }
  callback(new Error("请输入起点的海拔与标高"));
};
const checkEnd = (rule, value, callback) => {
  if (form.value.endAltitude && form.value.endElevation) {
    return callback();
  }
  callback(new Error("请输入终点的海拔与标高"));
};
const emit = defineEmits(["closeDialog"]);

const { proxy } = getCurrentInstance();
const rules = ref({
  // code: [{ required: true, message: "数据不能为空", trigger: "blur" }],
  // pipelineType: [{ required: true, message: "数据不能为空", trigger: "blur" }],
  // material: [{ required: true, message: "数据不能为空", trigger: "blur" }],
  diameter: [{ required: true, message: "数据不能为空", trigger: "blur" }],
  // length: [{ required: true, message: "数据不能为空", trigger: "blur" }],
  // startData:[{required: true,validator:checkStart,trigger: "blur"}],
  // endData:[{required: true,validator:checkEnd,trigger: "blur"}]
});

const form = ref({ ...props.detailInfo });

let diameter = form.value.diameter;
onMounted(() => {

  let lineId = form.value.lineId||form.value.id
  let graphics =ldMap.lineLayer.graphics.items
  let garphic =  graphics.filter(element => {
    return element.id == lineId
  })[0];
  getElevation({
    layersId:props.layerId,
    geoJsonData:garphic.geometry.paths[0]
  }).then(res=>{
    form.value.startElevation = res.data[0]
    form.value.endElevation = res.data[1]
  })


})
const inputMate=(e)=>{

}
const typesList = ref([{ label: "污水", value: "污水" }]);
const materialList = ref([
  { label: "PVC管道", value: "PVC管道" },
  { label: "PE管道", value: "PE管道" },
  { label: "铸铁管道", value: "铸铁管道" },
  { label: "钢制管道", value: "钢制管道" },
  { label: "玻璃钢管道", value: "玻璃钢管道" },
]);
const diameterList = ref([
  { label: "110管径", value: 110 },
  { label: "200管径", value: 200 },
  { label: "250管径", value: 250 },
  { label: "300管径", value: 300 },
  { label: "400管径", value: 400 },
  { label: "其他", value: 999 },
]);
function setOldValue() {
  props.detailInfo.code = form.value.code;
  props.detailInfo.pipelineType = form.value.pipelineType;
  props.detailInfo.material = form.value.material;
  props.detailInfo.diameter = form.value.diameter;
  props.detailInfo.styleId = form.value.diameter.toString();
  props.detailInfo.startAltitude = form.value.startAltitude;
  props.detailInfo.startElevation = form.value.startElevation;
  props.detailInfo.endAltitude = form.value.endAltitude;
  props.detailInfo.endElevation = form.value.endElevation;
}
function del(){


  $ldMap.delSketch()
  emit("closeDialog",false);
}
function add() {
  proxy.$refs["dataRef"].validate((valid) => {
    if (valid) {
      let data = {
        layersId: props.layerId,
        ...form.value,
        path: form.value.path,
      };
      delete data.color;
      delete data.width;
      console.log(data);

      if (data.id) {
        pipelineUpdate(data).then((res) => {
          setOldValue();
          emit("closeDialog", diameter != form.value.diameter);
        });
      } else {
        setOldValue();
        emit("closeDialog", diameter != form.value.diameter);
      }
    }
  });
}
</script>
<style scoped lang="scss">
:deep(.el-form-item__label) {
  color: #fff;
}
:deep(.el-textarea__inner) {
  background: transparent;
  color: #fff;
}
:deep {
  .el-input__wrapper {
    background: rgb(0, 0, 0, 0.1);
  }
  .el-input__inner {
    color: #fff;
  }
}
.footBottm {
  display: flex;
  justify-content: end;
}
.inputCss {
  width: 80%;
}
.info {
  color: #fff;
  padding-left: 8px;
}
.inputBg {
  color: #fff;
  background: rgb(15, 36, 86, 0.6);
  padding: 5px;
  width: 100%;
  border-radius: 5px;
}
.flex {
  justify-content: space-evenly;
  display: flex;
}
.magringTop10 {
  margin-top: 10px;
}
</style>
