<template>
  <BasicModal
    :maskClosable="false"
    width="1400px"
    v-bind="$attrs"
    @register="registerModal"
    :title="getTitle"
    @ok="handleSubmit"
    :useWrapper="true"
    :minHeight="600"
  >
    <div style="height: 34vh">
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="基础信息">
          <!-- Content of Tab Pane 1 -->
        </a-tab-pane>
        <a-tab-pane key="2" tab="附件">
          <!-- Content of Tab Pane 2 -->
        </a-tab-pane>
      </a-tabs>
      <BasicForm @register="registerForm" v-show="active == 1">
        <!-- <template #title>
          <div class="text-center text-black text-2xl">
            <a-typography-title style="font-size: 16px">流域基础信息</a-typography-title>
          </div>
        </template>
        <template #titleL>
          <div class="text-center text-black text-2xl">
            <a-typography-title style="font-size: 16px">地理坐标</a-typography-title>
          </div>
        </template>
        <template #titleT>
          <div class="text-center text-black text-2xl">
            <a-typography-title style="font-size: 16px">区域地形条件</a-typography-title>
          </div>
        </template> -->
        <template #fanwei>
          <div style="padding: 0 20px">
            <span
              style="
                position: relative;
                display: inline-flex;
                align-items: center;
                height: 32px;
                color: rgba(0, 0, 0, 0.85);
                font-size: 14px;
              "
              >分段范围</span
            >
            <div class="fanwei">
              <!-- <button @click="console.log('value',value)"></button> -->
              <a-input placeholder="导入GeoJSON,KML" v-model:value="GeoJson" @change="getFile" />
              <!-- <a-button @click="getFile">导入</a-button> -->
              <span
                @click="fenduanClick"
                style="position: absolute; right: 59px; top: 36px; color: #2d74e7; font-size: 14px"
                >定位</span
              >
              <span
                @click="startClick"
                style="
                  position: absolute;

                  /* right: 259px; */
                  top: 130px;
                  color: rgb(45, 116, 231);
                  font-size: 14px;
                  z-index: 99;
                  left: 289px;
                "
                >定位</span
              >
              <span
                @click="endClick"
                style="
                  position: absolute;

                  /* right: 259px; */
                  top: 223px;
                  z-index: 99;
                  left: 289px;
                  color: rgb(45, 116, 231);
                  font-size: 14px;
                "
                >定位</span
              >
              <img
                src="../../../../assets/images/uploadGeo.png"
                style="position: absolute; right: 32px; top: 40px"
                alt=""
                @click="getFile"
              />
              <input
                type="file"
                ref="fileInputRef"
                style="display: none"
                @change="handleFileChange"
              />
            </div>
          </div>
        </template>
        <template #startLocationLon>
          <div>
            <a-button @click="getStart()" />
          </div>
        </template>

        <template #endLocationLon>
          <div>
            <a-button @click="getEnd()" />
          </div>
        </template>

        <template #map>
          <div style="display: flex; padding: 14px 20px">
            <span style="color: #000">地图</span>
            <div style="color: #2d74e7; display: flex; margin-left: 10px" @click="toggleContent">
              <span style="padding-right: 5px">{{ content }}</span>
              <img
                class="imgs"
                :style="{ transform: rotateStyle }"
                src="../../../../assets/images/shou.png"
                alt=""
              />
            </div>
          </div>

          <div class="map" style="padding: 0 20px" v-show="mapshow">
            <Map ref="mapref" @toolCallBack="toolCallBack" @postGeojson="postGeojson">
              <!-- <mapTool  ></mapTool> -->
            </Map>
          </div>

          <div style="display: flex; padding: 14px 20px">
            <span style="color: #000; font-weight: 800">环境条件</span>
            <div style="color: #2d74e7; display: flex; margin-left: 10px" @click="toggleContent2">
              <span style="padding-right: 5px">{{ content2 }}</span>
              <img
                class="imgs"
                :style="{ transform: rotateStyle2 }"
                src="../../../../assets/images/shou.png"
                alt=""
              />
            </div>
          </div>
        </template>

        <template #upload>
          <!-- <a-upload name="file" :multiple="true">
            <a-button type="primary">
              <upload-outlined />
              选择文件
            </a-button>
            <span style="font-size: 14px; margin-left: 10px"
              >支持上传png、jpeg、gif、tif、doc、xls、pdf等格式文件</span
            >
          </a-upload> -->
          <!-- <a-upload
            :action="uploadUrl"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :on-error="handleError"
            :data="uploadData"
          >
            <a-button type="primary">上传附件</a-button>
          </a-upload> -->
        </template>
      </BasicForm>
      <div v-show="active == 2">
        <a-upload-dragger
          name="avatar"
          accept="image/jpeg,image/png"
          list-type="picture-card"
          class="avatar-uploader"
          :show-upload-list="false"
          :customRequest="customUpload"
        >
          <img
            class="image h-32 w-32"
            v-if="tenantLogo"
            fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
            :src="tenantLogo[0]"
            alt="avatar"
          />
          <div v-else>
            <LoadingOutlined v-if="loading" />
            <plus-outlined v-else />
            <div class="ant-upload-text">选择图片</div>
          </div>
        </a-upload-dragger>

        <a-button @click="addfile">添加假数据</a-button>
        <a-table :columns="columns" :data-source="data" bordered style="margin-top: 62px">
          <template #action="{ record }">
            <a>预览</a>| <a>下载</a>|
            <a @click="deleteOp(record)">删除</a>
          </template>
        </a-table>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, reactive, onMounted } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { accountFormSchema } from './account.data';
  import { filterRoleList } from '/@/api/system/system';
  // import { addDzsbsjjr } from '/@/api/datamanager/groundDisasterId/muSourceData';

  // import { Upload } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { FileItem } from '/@/components/Upload/src/typing';
  import { TOption } from '/@/views/rule/linkedge/config/config.data';
  // import { PlusOutlined } from '@ant-design/icons-vue';
  // import { upload } from '/@/api/oss/ossFileUploader';
  import Map from '../../components/Map.vue';
  // import mapTool from '../../components/mapTool.vue';
  import { useMapStore } from '/@/store/modules/map';
  import { addBasinInformation } from '../../method/api';
  import { PlusOutlined } from '@ant-design/icons-vue';
  import { LoadingOutlined } from '@ant-design/icons-vue';
  // import Cesium from 'Cesium'
  export default defineComponent({
    name: 'AccountModal',
    components: {
      BasicModal,
      BasicForm,
      // Upload,
      // PlusOutlined,
      Map,
      // mapTool,
      PlusOutlined,
      LoadingOutlined,
    },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const uploadUrl = '/yxBase/file'; // 后端接口地址
      const uploadData = ref(new FormData()); // 上传时的额外参数
      const GeoJson = ref('');
      const tenantLogo = ref([] as any);
      const fileR: any = ref();
      const loading = ref(false);
      const roleOptions = ref<TOption[]>([]);
      const isUpdate = ref(true);
      const rowId = ref('');
      const postData = reactive({});
      const columns = ref([
        {
          title: '序号',
          dataIndex: 'index',
        },
        {
          title: '附件管理信息',
          dataIndex: 'fileMessage',
        },
        {
          title: '附件名称',
          className: 'column-money',
          dataIndex: 'fileName',
        },
        {
          title: '文件大小',
          dataIndex: 'fileSize',
        },
        {
          title: '上传时间',
          dataIndex: 'uploadTime',
        },
        {
          title: '操作',
          key: 'action',
          slots: { customRender: 'action' },
        },
      ]);

      const data = ref([
        {
          index: 1,
          fileMessage: '关于薄熙来的议程',
          fileName: '国策树',
          fileSize: '1GB',
          uploadTime: '2023/7/27',
        },
      ]);
      const fenduanLocation = ref({});
      const startLocation = ref({});
      const endLocation = ref({});

      const getRoleList = async () => {
        const res = await filterRoleList();
        console.log(res);
        roleOptions.value = res.map((m) => {
          return {
            label: m.name,
            value: m.id,
          };
        });
      };
      onMounted(async () => {
        await getRoleList();
      });

      const [
        registerForm,
        { setFieldsValue, resetFields, updateSchema, validate, getFieldsValue },
      ] = useForm({
        labelWidth: 100,
        schemas: accountFormSchema, //这是account.data.ts中的数据
        showActionButtonGroup: false,
        actionColOptions: {
          span: 18,
        },
      });

      const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
        console.log('data', data);

        await resetFields(); //重置表单
        setModalProps({ confirmLoading: false }); //修改确认按钮的状态
        isUpdate.value = !!data?.isUpdate;
        if (unref(isUpdate)) {
          let parm = data.currentData[0];
          rowId.value = data.currentData[0].id;
          GeoJson.value = parm.fanwei;
          data.currentData[0].startLocationLon =
            data.currentData[0].startLocationLon + ',' + data.currentData[0].startLocationLat;

          data.currentData[0].endLocationLon =
            data.currentData[0].endLocationLon + ',' + data.currentData[0].endLocationLat;
          setFieldsValue(data.currentData[0]);

          // const Data = e.target.result;
          //   const fileExtension = file.name.split('.').pop().toLowerCase();
          // if (fileExtension === 'kml') {
          //     loadKml(Data);
          //   } else if (fileExtension === 'geojson') {
          //     loadGeoJson(Data);
          //   }
        }
      });
      const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
      const { createMessage } = useMessage();
      async function handleSubmit() {
        console.log('点击提交了');
        setModalProps({ confirmLoading: true });
        try {
          const values = await validate([
            'id',
            'lymc',
            'startLocationLon',
            'startLocationX',
            'startLocationY',
            'startLocationZ',
            'endLocationLat',
            'endLocationX',
            'endLocationY',
            'endLocationZ',
            'bz',
            'fanwei',
            'qxgkNjy',
            'qxgkQw',
            'dztjFyptzzq',
            'dztjDzgs',
            'dztjDztj',
            'dztjDcyx',
            'dztjGzgk',
            'dztjXgz',
            'dztjSwdztj',
            'dztjWldztj',
            'dztjDzld',
            'dztjDzdfzjsd',
            'qxgkSsqhd',
          ]);
          console.log(values, 'values');
          if (values.startLocationLon) {
            [values.startLocationLon, values.startLocationLat] = values.startLocationLon.split(',');
          }
          if (values.endLocationLon) {
            [values.endLocationLon, values.endLocationLon] = values.endLocationLon.split(',');
          }
          values.txjson = GeoJson.value;
          console.log(values, 'values');
          console.log(postData, 'postData');
          Object.assign(postData, values);
          console.log(postData, 'postData');
          console.log('准备传递的参数' + JSON.stringify(postData));
          const data = paramsToFormData(postData as any);
          if (fileR.value) {
            data.append('file', fileR.value);
          }

          const res = await addBasinInformation(data, unref(isUpdate));
          if (res.code === 1) {
            closeModal(); //关闭模块
            emit('success');
            createMessage.success(unref(isUpdate) ? '编辑成功' : '新增成功');
            console.log('成功添加');
          } else {
            createMessage.error(res.message);
          }
        } finally {
          setTimeout(() => {
            setModalProps({ confirmLoading: false });
          }, 300);
        }
      }
      // async function customUpload({ file }) {
      //   if (beforeUpload(file)) {
      //     tenantLogo.value = '';
      //     loading.value = true;
      //     const formData = new FormData();
      //     formData.append('file', file);
      //     const response = await upload(formData);
      //     if (response.fileStaticUri) {
      //       tenantLogo.value = response.fileStaticUri;
      //       loading.value = false;
      //     }
      //   }
      // }
      // const beforeUpload = (file: FileItem) => {
      //   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      //   if (!isJpgOrPng) {
      //     message.error('只能上传图片文件!');
      //   }
      //   const isLt2M = (file.size as number) / 1024 / 1024 < 5;
      //   if (!isLt2M) {
      //     message.error('图片大小不能超过5MB!');
      //   }
      //   return isJpgOrPng && isLt2M;
      // };
      const mapref = ref();
      function getStart() {
        console.log('获取起点');
        mapref.value.getstart();
        console.log('获取成功');
      }
      function getEnd() {
        console.log('获取终点');
        mapref.value.getstart();
        console.log('获取成功');
      }
      function preProcessData(data) {
        Object.keys(data).forEach((item) => {
          if (typeof data[item] === 'undefined' || data[item] === null || data[item] === '') {
            delete data[item];
          }
        });
        return data;
      }

      function paramsToFormData(obj) {
        const data = preProcessData(obj);
        const formData = new FormData();
        Object.keys(data).forEach((key) => {
          if (data[key] instanceof Array) {
            data[key].forEach((item) => {
              formData.append(key, item);
            });
            return;
          }
          formData.append(key, obj[key]);
        });
        return formData;
      }
      function postGeojson(data: any) {
        console.log('触发');

        loadGeoJson(data);
      }
      // 点击地图的回调函数，在表单中填入经纬度
      async function toolCallBack(data: any) {
        console.log(data, 'data,触发了表单中的函数');
        console.log(data.position.x, data.position.y, 'data,触发了表单中的函数');
        const fieldsList = await getFieldsValue();
        console.log(fieldsList, '初始值');
        if (data.position && data.type == 'start') {
          console.log('这是起点');
          fieldsList['startLocationLon'] = data.position.x + ',' + data.position.y;
          // fieldsList['startLocationX'] = data.position.x + '';
          // fieldsList['startLocationY'] = data.position.y + '';
          console.log(fieldsList, '设置中');
          startLocation.value = data.position;
        } else if (data && data.type == 'end') {
          console.log('这是终点');

          fieldsList['endLocationLon'] = data.position.x + ',' + data.position.y;
          // fieldsList['endLocationX'] = data.position.x + '';
          // fieldsList['endLocationY'] = data.position.y + '';
          console.log(fieldsList, '设置中');
          endLocation.value = data.position;
        }
        console.log(fieldsList, '开始设置');

        console.log(fieldsList, '设置完成');
        await setFieldsValue(fieldsList);
        const retest = await getFieldsValue();
        console.log(retest, 'retest'); /*  */
        /*  */
      }

      const mapStore = useMapStore();

      const beforeUpload = (file) => {
        // 文件校验逻辑
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          createMessage.error('只能上传 JPG/PNG 格式的图片');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          createMessage.error('图片大小不能超过 2MB');
        }
        if (isJpgOrPng && isLt2M) {
          // 将tableId和tableName添加到FormData中
          uploadData.value.append('tableId', '关联表名对应关键字ID');
          uploadData.value.append('tableName', '关联表名字');
        }
        return isJpgOrPng && isLt2M;
      };

      const handleSuccess = (response) => {
        // 上传成功的处理逻辑
        createMessage.success('上传成功');
        console.log(response);
      };

      async function customUpload({ file }) {
        console.log('file', file);
        // tenantLogo.value = '';
        loading.value = true;
        fileR.value = file;

        tenantLogo.value.push({ url: URL.createObjectURL(file) });
        console.log('tenantLogo.value', tenantLogo.value);

        data.value.push({
          index: data.value.length + 1,
          fileMessage: file.uid,
          fileName: file.name,
          fileSize: file.Size,
          uploadTime: file.lastModifiedDate,
        });
        return false;
      }

      const handleError = (error) => {
        // 上传失败的处理逻辑
        createMessage.error('上传失败');
        console.log(error);
      };
      const callback = (e) => {
        console.log(e, 'e');

        active.value = e;
        //选择基础信息时
        // if (e==1) {
        //   updateSchema({
        //     ifShow: true,
        //   });
        //   updateSchema({
        //     field: 'file',
        //     ifShow: false,
        //   });
        // }
        // //选择附件时
        // else{
        //   updateSchema({
        //     ifShow: false,
        //   });
        //   updateSchema({
        //     field: 'file',
        //     ifShow: true,
        //   });
        // }
      };
      // const getFile = (event) => {

      // };

      const fileInputRef = ref(null);

      const getFile = () => {
        fileInputRef.value.click();
      };

      const handleFileChange = (event) => {
        const file = event.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = (e) => {
            console.log('e', e);

            const Data = e.target.result;
            const fileExtension = file.name.split('.').pop().toLowerCase();
            if (fileExtension === 'kml') {
              loadKml(file, Data);
            } else if (fileExtension === 'geojson') {
              loadGeoJson(Data);
            } else {
              console.error('Unsupported file format');
            }
          };
          reader.readAsText(file);
        }
      };

      const loadKml = (kmlData, Data) => {
        GeoJson.value = kmlData;
        console.log('加载kmlData', kmlData);
        const dataSource = Cesium.KmlDataSource.load(kmlData, {
          clampToGround: true,
          camera: window.map.viewer.scene.camera,
          canvas: window.map.viewer.scene.canvas,
        });
        window.map.viewer.dataSources.add(dataSource);
        console.log('dataSource', dataSource);
        setTimeout(() => {
          console.log('dataSource', dataSource);
          dataSource.then((val) => {
            console.log(val, 'val');
            val.entities.values.forEach((entity) => {
              if (entity.polyline) {
                console.log('给线实体设置样式');
                entity.polyline.material = Cesium.Color.RED;
                entity.polyline.clampToGround = true;
              }
              if (entity.polygon) {
                console.log('给面实体设置样式');
                entity.polygon.material = Cesium.Color.RED;
                entity.polygon.outline = false;
                entity.polygon.clampToGround = true;
              }
              if (entity.point) {
                console.log('给点实体设置样式');
                entity.point.color = Cesium.Color.RED;
                entity.point.pixelSize = 10;
                entity.point.outlineColor = Cesium.Color.WHITE;
                entity.point.outlineWidth = 2;
              }
              entity.show = true; // 将实体设置为可见状态
            });
            window.map.viewer.dataSources.add(val);
            let par = parseKmlData(Data);
            par.z = 42689;
            fenduanLocation.value = par;
            const tempData = {
              destination: par,
              orientation: {
                heading: 0,
                pitch: -1.5707963267948966,
                roll: 0,
              },
            };
            window.map.setView(tempData);
            console.log('成功加载???', tempData);
          });
        }, 5000);
      };

      const loadGeoJson = (geoJsonData) => {
        GeoJson.value = geoJsonData;
        // console.log('loadGeoJson', geoJsonData);
        // let files = URL.createObjectURL(geoJsonData);
        const dataSource = Cesium.GeoJsonDataSource.load(geoJsonData);
        dataSource
          .then((val) => {
            console.log(val, 'dataSource');

            val.entities.values.forEach((entity) => {
              if (entity.polyline) {
                console.log('给线设置样式');
                entity.polyline.material = Cesium.Color.RED;
                entity.polyline.clampToGround = true;
                entity.polyline.width = 2; // 设置线的宽度为2
                console.log('设置样式完毕');
              }
            });
            window.map.viewer.dataSources.add(val);
            console.log('geojson加载完毕');

            // fenduanLocation.value = par;

            // 根据需要设置视图
          })
          .otherwise((error) => {
            console.error('Failed to load GeoJSON:', error);
          });
      };

      const geoLocation = (e) => {
        console.log('e', e);
      };

      const parseKmlData = (kmlData) => {
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(kmlData, 'text/xml');
        const coordinates = xmlDoc.getElementsByTagName('coordinates')[0].textContent;
        const [longitude, latitude, height] = coordinates.split(',').map(parseFloat);
        const result = {
          x: longitude,
          y: latitude,
          z: height,
        };
        return result;
      };
      let active = ref(1);
      const addfile = () => {
        data.value.push({
          index: data.value.length + 1,
          fileMessage: '这是附件信息222222',
          fileName: '这是附件名称',
          fileSize: '1GB',
          uploadTime: '2023/7/27',
        });
      };

      const startClick = () => {
        const tempData = {
          destination: startLocation.value,
          orientation: {
            heading: 0,
            pitch: -1.5707963267948966,
            roll: 0,
          },
        };
        window.map.setView(tempData);
      };
      const endClick = () => {
        const tempData = {
          destination: endLocation.value,
          orientation: {
            heading: 0,
            pitch: -1.5707963267948966,
            roll: 0,
          },
        };
        window.map.setView(tempData);
      };
      const fenduanClick = () => {
        const tempData = {
          destination: fenduanLocation.value,
          orientation: {
            heading: 0,
            pitch: -1.5707963267948966,
            roll: 0,
          },
        };
        window.map.setView(tempData);
      };
      const content = ref('收起');
      const rotateStyle = ref('');
      const content2 = ref('收起');
      const rotateStyle2 = ref('');

      function toggleContent() {
        mapshow.value = !mapshow.value;

        if (content.value === '收起') {
          content.value = '展开';
          rotateStyle.value = 'rotate(180deg)';
        } else {
          content.value = '收起';
          rotateStyle.value = 'rotate(0deg)';
        }
      }
      function toggleContent2() {
        huanjshow.value = !huanjshow.value;

        accountFormSchema.forEach((e, index) => {
          if (index >= 13) {
            e.ifShow = huanjshow.value;
          }
        });
        updateSchema(accountFormSchema);

        if (content2.value === '收起') {
          content2.value = '展开';
          rotateStyle2.value = 'rotate(180deg)';
        } else {
          content2.value = '收起';
          rotateStyle2.value = 'rotate(0deg)';
        }
      }
      const mapshow = ref(true);
      const huanjshow = ref(true);
      const deleteOp = (record) => {
        const index = data.value.findIndex((item) => item.index === record.index);
        if (index !== -1) {
          data.value.splice(index, 1);
        }
      };

      return {
        deleteOp,
        huanjshow,
        mapshow,
        content2,
        rotateStyle2,
        content,
        rotateStyle,
        toggleContent2,
        toggleContent,
        fenduanClick,
        endClick,
        startClick,
        postData,
        fenduanLocation,
        startLocation,
        endLocation,
        loadGeoJson,
        loadKml,
        parseKmlData,
        fileInputRef,
        handleFileChange,
        addfile,
        columns,
        data,
        geoLocation,
        getFile,
        GeoJson,
        active,
        callback,
        uploadUrl,
        uploadData,
        beforeUpload,
        handleSuccess,
        handleError,
        customUpload,
        getStart,
        getEnd,
        postGeojson,
        toolCallBack,
        mapStore,
        registerModal,
        registerForm,
        handleSubmit,
        getTitle,
        roleOptions,
        // customUpload,
        // beforeUpload,
        tenantLogo,
        fileR,
        loading,
      };
    },
  });
</script>
<style scoped lang="less">
  :deep(.ant-input) {
    resize: both !important;
    height: auto;
  }

  .imgs {
    height: 18px;
    width: 17px;
  }

  .map {
    height: 529px;
  }

  .fanwei {
    display: flex;
  }

  :deep(.vben-basic-tree) {
    width: 100% !important;
  }

  :deep(.is-unflod) {
    display: none !important;
  }

  :deep(.is-flod) {
    display: none !important;
  }

  :deep(.ant-form-item) {
    display: flex !important;
    flex-direction: column !important;
  }

  :deep(.ant-form-item-label) {
    text-align: left;
    // width: 80px !important;
    padding: 5px 0 !important;
  }

  :deep(.ant-col) {
    min-height: unset !important;
    width: 100% !important;
  }

  :deep(.scrollbar) {
    padding: 14px 0 14px 63px;
  }

  :deep(.ant-col-6) {
    padding: 0 20px;
  }

  :deep(.ant-col-24) {
    padding: 0 20px;
  }

  :deep(.ant-col-8) {
    padding: 0 20px;
  }

  :deep(.ant-col-12) {
    padding: 0 20px;
  }

  :deep(.ant-col-18) {
    padding: 0 20px;
  }
</style>
