<template>
  <el-dialog
    :title="title"
    v-model="visible"
    width="35%"
    class="x-dialog"
    :destroy-on-close="true"
    append-to-body
    @closed="handlerClose()"
  >
    <el-form
      class="dialog-data"
      :model="form"
      :rules="rules"
      ref="formRef"
      label-width="88px"
    >
      <el-form-item label="工单地址:" prop="address">
        <div class="map">
          <MarsMap
            :url="configUrl"
            :options="getMapOptions"
            map-key="workOrder"
            @onload="marsOnload"
          />
        </div>
        <el-input
          v-model="form.address"
          placeholder="请输入"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #prepend>
            <el-button icon="MapLocation" />
          </template>
          <template #append>
            <span class="location-search" @click="handleSearch">搜索</span>
          </template>
        </el-input>

        <div class="serch-list" v-show="gaodePOIList.length > 0">
          <div
            clss="list-item"
            :class="currentId === item.id ? 'activeitem' : ''"
            v-for="item in gaodePOIList"
            :key="item.id"
            @click="handleCograph(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </el-form-item>
      <el-form-item label="工单类型:" prop="gdType">
        <el-radio-group v-model="form.gdType" @change="changeType()">
          <el-radio :value="parseInt(dict.value)" v-for="dict in dict.gdlx">{{
            dict.label
          }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <section v-if="id">
        <el-form-item label="倒伏类型:" prop="dflx" v-if="form.gdType == 0">
          <el-checkbox-group v-model="form.dflx">
            <el-checkbox
              v-for="dict in dict.dflx"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="影响类型:" prop="gdtp">
          <el-checkbox-group v-model="form.dflx">
            <el-checkbox
              v-for="dict in dict.yxlx"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="工单照片:" prop="gdtp">
          <ImageUpload v-model="form.gdtp" :limit="3"></ImageUpload>
        </el-form-item>

        <el-form-item label="工单描述:" prop="gdms">
          <el-input
            v-model="form.gdms"
            :rows="2"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
      </section>

      <section v-else>
        <el-form-item label="简要描述:" prop="gdms">
          <el-input
            v-model="form.gdms"
            :rows="2"
            type="textarea"
            placeholder="请填写"
          />
        </el-form-item>
        <el-form-item label="选派人员:" prop="zzjg">
          <el-cascader
            v-model="form.zzjg"
            :options="dict.deptList"
            :props="cascaderProps"
            @change="handleChange"
          />
        </el-form-item>
      </section>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handlerClose()" icon="CloseBold">取消</el-button>
        <el-button type="primary" icon="Select" @click="confirm()"
          >确定</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { addyj, updateyj, intruderyj, getyjById } from "@/api/emergency";
import MarsMap from "@/components/mars-work/mars-map.vue";
import mapOptions from "@/components/mars-work/mapOptions";
import markerIcon from "@/assets/images/map-marker.png";
import { gaodeAddress, gaodePOI } from "@/utils/common.js";

const { proxy } = getCurrentInstance();
const gaodePOIList = ref([]);
const currentId = ref(0);
const cascaderProps = {
  value: "deptId",
  label: "deptName",
};

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  dict: {
    type: Object,
    default: {
      gdlx: [],
      dflx: [],
      gdlevel: [],
      clfa: [],
      zyxt: [],
      gdms: [],
      deptList: [],
    },
  },

  id: {
    type: Number,
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue", "confirm"]);
//地图配置
const configUrl = "lib/config/config.json";
let mapData = null;
let mapLayer = {};
let entity = null;
const data = reactive({
  form: {
    id: null,
    address: undefined, //地址
    clbz: undefined, //处理班组
    clfa: undefined, //处理方案
    clhtp: undefined, //处理后图片
    clms: undefined, //处理描述
    createBy: undefined, //创建人
    createId: undefined, //创建者id
    createTime: undefined, //创建时间
    deptId: undefined, //部门id
    dflx: [], //倒伏类型
    gdLevel: undefined, //工单等级
    gdType: undefined, //工单类型
    gdms: undefined, //工单描述
    gdtp: undefined, //工单图片
    lat: undefined, //纬度
    lon: undefined, //经度
    pqcl: undefined, //派遣车辆
    pqrs: undefined, //派遣人数
    reason: undefined, //退单原因
    status: undefined, //状态 0:待勘察，1:待派发,2:已退单.3:待处理,4:已完成
    zyxt: [], //资源协调
    zzjg: [],
  },
  rules: {
    address: [{ required: true, message: "请填写工单地址", trigger: "blur" }],
    gdType: [{ required: true, message: "请选择工单类型", trigger: "blur" }],
    gdms: [{ required: true, message: "请选择简要描述", trigger: "blur" }],
    zzjg: [{ required: true, message: "请选择选派人员", trigger: "blur" }],

    dflx: [{ required: true, message: "请选择倒伏类型", trigger: "blur" }],
    gdtp: [{ required: true, message: "请上传工单照片", trigger: "blur" }],
  },
});
const { form, rules } = toRefs(data);
const visible = ref(props.modelValue);
// 监听外部 modelValue 变化
watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
  }
);
watch(visible, (val) => {
  emit("update:modelValue", val);
});

const changeType = () => {
  form.value.dflx = [];
};

/**
 * 提交
 */
const confirm = () => {
  proxy.$refs["formRef"].validate(async (valid) => {
    if (valid) {
      if (!form.value.lat || !form.value.lon) {
        proxy.$modal.msgWarning("请先落点至地图上！");
        return;
      }
      form.value.zzjg = filterArray(form.value.zzjg, "join");
      form.value.dflx = filterArray(form.value.dflx, "join");
      form.value.zyxt = filterArray(form.value.zyxt, "join");
      if (form.value.id) {
        if (form.value.status === 0) {
          await intruderyj(form.value);
          proxy.$modal.msgSuccess(`${props.title}成功`);
        }
        if (form.value.status === 1) {
          await updateyj(form.value);
          proxy.$modal.msgSuccess(`编辑成功`);
        }
      } else {
        await addyj(form.value);
        proxy.$modal.msgSuccess("新增成功");
      }
      try {
        emit("confirm");
        handlerClose();
      } catch {
        form.value.zzjg = form.value.zzjg.split(",");
      }
    }
  });
};

/**
 * 获取详情
 */
const getInfo = async (val) => {
  if (!props.id || !visible.value) return;
  console.log(props.id, visible.value);
  const res = await getyjById(props.id);
  res.data.zzjg = res.data.zzjg.split(",").map((item) => parseInt(item));
  res.data.zyxt = filterArray(res.data.zyxt);
  res.data.dflx = filterArray(res.data.dflx);
  form.value = res.data;
  if (form.value.lat && form.value.lon && mapData) {
    nextTick(() => {
      handleMapClick(form.value.lat, form.value.lon);
      mapData.flyToGraphic(mapLayer.marker, { radius: 300 });
    });
  }
};

const filterArray = (data, type) => {
  if (!type) {
    if (data) {
      return data.split(",");
    } else {
      return [];
    }
  } else {
    if (data) {
      return data.join();
    } else {
      return "";
    }
  }
};

/**
 *
 */
const handlerClose = () => {
  visible.value = false;
  proxy.resetForm("formRef");
  gaodePOIList.value = [];
  if (mapData) {
    mapData.destroy();
    mapData = null;
    mapLayer.marker?.clear();
    entity = null;
  }
};

/**
 * 地址搜索
 */
const handleSearch = async () => {
  if (!form.value.address) {
    proxy.$modal.msgWarning("请输入关键字");
    return;
  }
  const res = await gaodePOI(form.value.address);
  gaodePOIList.value = res;
};

/**
 * 结果上图
 * @param item
 */
const handleCograph = (item) => {
  if (currentId.value != item.id) {
    const point = item.location.split(",");
    handleMapClick(parseFloat(point[0]), parseFloat(point[1]));
    mapData.flyToGraphic(mapLayer.marker, { radius: 300 });
    currentId.value = item.id;
    form.value.address = item.name;
  }
};
/**
 * 级联取人员deptID
 */
const handleChange = (value) => {
  form.value.deptId = value[value.length - 1];
};

/**
 * 获取地图配置
 */
const getMapOptions = computed(() => {
  mapOptions.scene.sceneMode = 2;
  mapOptions.basemaps[0] = {
    pid: 10,
    name: "高德电子",
    type: "gaode",
    icon: "//data.mars3d.cn/img/thumbnail/basemap/gaode_vec.png",
    layer: "vec",
    show: true,
  };
  return mapOptions;
});
/**
 * 地图初始化成功
 * @param map
 */
const marsOnload = (map) => {
  mapData = map;
  mapLayer.marker = new mars3d.layer.GraphicLayer({
    allowDrillPick: true,
  });
  mapData.addLayer(mapLayer.marker);
  map.on(mars3d.EventType.click, async ({ cartesian }) => {
    const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    const longitude = Cesium.Math.toDegrees(cartographic.longitude);
    const latitude = Cesium.Math.toDegrees(cartographic.latitude);
    const res = await gaodeAddress(`${longitude},${latitude}`);
    form.value.address = res.formatted_address;
    handleMapClick(longitude, latitude);
  });
  getInfo();
};
/**
 * @description: 处理地图点击
 * @private
 * @param {number} longitude 经度
 * @param {number} latitude 纬度
 * @returns
 */
const handleMapClick = (longitude, latitude) => {
  if (!isPositiveDecimal(longitude)) longitude = parseFloat(longitude);
  if (!isPositiveDecimal(latitude)) latitude = parseFloat(latitude);
  console.log(entity, "sss");
  if (entity) {
    entity.position = [longitude, latitude];
  } else {
    entity = new mars3d.graphic.BillboardEntity({
      position: [longitude, latitude],
      style: {
        image: markerIcon,
        width: 35,
        height: 36,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      },
    });
    mapLayer.marker?.addGraphic(entity);
  }
  form.value.lat = longitude; //纬度
  form.value.lon = latitude; //经度
};

const isPositiveDecimal = (num) => {
  return typeof num === "number" && num >= 0 && !Number.isInteger(num);
};
</script>

<style lang="scss" scoped>
.map {
  height: 400px;
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 15px;
}

.map-gps {
  height: 25px;
  width: 25px;
}
.serch-list {
  width: 100%;
  min-height: 50px;
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #ccc;
  & > div {
    cursor: pointer;
    padding: 3px 10px;
    font-size: 14px;
  }
  & > div:hover,
  .activeitem {
    background-color: #4776eb;
    color: white;
    font-weight: bold;
  }
}
.location-search {
  font-size: 14px;
  cursor: pointer;
}
</style>
