import { defineComponent, onMounted, ref, reactive } from 'vue';

/** @ts-ignore */
import icon_sys_zfzhdd from '@/assets/icons/syslink/zfzhdd.png';
/** @ts-ignore */
import icon_sys_zfyxjc from '@/assets/icons/syslink/zfyxjc.png';
/** @ts-ignore */
import icon_sys_sjyxjc from '@/assets/icons/syslink/sjyxjc.png';
/** @ts-ignore */
import icon_sys_jtyjzh from '@/assets/icons/syslink/jtyjzh.png';

/** @ts-ignore */
import icon_sys_dlyxjc from '@/assets/icons/syslink/dlyxjc.png';

/** @ts-ignore */
import icon_sys_ghyxjc from '@/assets/icons/syslink/ghyxjc.png';

/** @ts-ignore */
import icon_sys_up from '@/assets/icons/syslink/up.png';

/** @ts-ignore */
import icon_sys_down from '@/assets/icons/syslink/down.png';



let ispro = process.env.NODE_ENV === 'production';
export default defineComponent({
  props: {
    map: Object,
  },
  setup(props, ctx) {
    const mapRef = ref<Element>();

    const isopen = ref(false);

    let tipcontentRef = ref<Element>();

    const linksysdata = reactive([
      {
        name: '市局运行监测',
        image: icon_sys_sjyxjc,
        url: 'http://10.11.208.39:9999/screen/#/home/country-home',
      },
      {
        name: '交通应急指挥',
        image: icon_sys_jtyjzh,
        url: 'http://sqpchd.xt.wenhq.top:8083/#/home',
      },
      {
        name: '执法运行监测',
        image: icon_sys_zfyxjc,
        url: 'http://10.11.208.13:30080/tles-hcdp-web/#/OperationMonitoring',
      },
      {
        name: '执法指挥调度',
        image: icon_sys_zfzhdd,
        url: 'http://10.11.208.13:30080/tles-hcdp-web/#/HCdpView',
      },
      {
        name: '港航运行监测',
        image: icon_sys_ghyxjc,
        url: 'http://sqpchd.xt.wenhq.top:8083/#/home',
      },
      {
        name: '公路运行监测',
        image: icon_sys_dlyxjc,
        url: 'http://sqpchd.xt.wenhq.top:8083/#/home',
      },
    ]);

    const openclose = () => { 
      isopen.value = !isopen.value;

    }

    const classindex=ref("")
    const enter = (index) => {

      classindex.value = index;
    };
    const leave = (index) => {
 
      classindex.value = '';
    };

    onMounted(() => {
      const map = new window.minemap.Map({
        container: 'map',
        style:
          (import.meta.env.VITE_MAP_SERVER as string) +
          '/service/solu/style/id/12887' /*底图样式*/,
        center: [118.29564, 33.97441] /*地图中心点*/,
        zoom: 14 /*地图默认缩放等级*/,
        pitch: 0 /*地图俯仰角度*/,
        maxZoom: 17 /*地图最大缩放等级*/,
        minZoom: 3 /*地图最小缩放等级*/,
        // projection: 'MERCATOR',
        logoControl: false,
      });
      map["tipcontentRef"] = tipcontentRef.value;
      ctx.emit('update:map', map);
      window["map"] = map;
    });
   
    
    return () => (
      <>
        <div id="map" style={{ height: '100%',width:'100%',position: "absolute",
    top: 0,
    left: 0 }} ref={mapRef} />{' '}
        <div
          class={
            'othersystem ' +
            (isopen.value
              ? 'animate__animated animate__fadeInUp'
              : 'animate__animated animate__fadeOutDown')
          }>
          {linksysdata.map((i, index) => (
            <div
              onMouseenter={(w) => {
                enter(index);
              }}
              onMouseleave={(w) => {
                leave(index);
              }}
              class={
                'sys-item ' +
                (index.toString() == classindex.value
                  ? 'animate__animated animate__shakeY'
                  : '')
              }
              datatype={`${index + 1 == linksysdata.length ? '1' : '0'}`}>
              <a href={i.url}>
                <div class="sys-item-img">
                  <img src={i.image} />
                </div>
                <div class="sys-item-title">{i.name}</div>
              </a>
            </div>
          ))}
        </div>
        <div class="openclose " onClick={openclose}>
          <img
            style={!isopen.value ? 'display:block' : 'display:none'}
            class="animate__animated animate__fadeInUp"
            src={icon_sys_up}
          />
          <img
            style={!isopen.value ? 'display:none' : 'display:block'}
            class="animate__animated animate__fadeInDown"
            src={icon_sys_down}
          />
        </div>
        <div class="maptip" ref={tipcontentRef}>
          {' '}
        </div>
      </>
    );
  },
});
