import { defineComponent, onMounted, watchEffect } from "vue";
import { RouterView, useRoute, useRouter } from 'vue-router';
import MarkerMap from '@/components/MarkerMap';
import './index.scss';
import { useIncidentStore, useDaHuaStore } from '@/store';
import { constants } from 'zlib';
import clsx from "clsx";

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();

    const store = useIncidentStore();
    const daHuaStore = useDaHuaStore();
    // console.log(daHuaStore.dhuser);

    // const list = computed(() => [

    // ]);

    // login da hua
    onMounted(() => {
      // if (!localStorage.getItem('DAHUA_token')) {
      //   daHuaStore.DAHUALogin();
      // } else {
      //   daHuaStore.KEEPAlive(); //保活 //获取当前用户信息
      //   daHuaStore.DAHUAUserInfo().then((res) => {
      //     console.log(res);
      //     daHuaStore.DAHUACreateMeet(res).then((data) => {
      //       //创建会议
      //       console.log(data);
      //       let obj = {
      //         user: res,
      //         meetId: data.id,
      //         member: [
      //           {
      //             userName: res.userName,
      //             userId: res.userCode,
      //             region: res.paasId,
      //             type: 'client',
      //             // speak:'true',
      //             number: res.userPhone,
      //             // department:'根组织'
      //           },
      //         ],
      //       };
      //       localStorage.setItem('meeting', JSON.stringify(obj));
      //       // console.log(obj);
      //       // daHuaStore.DAHUAMeetingMember(obj);
      //       // daHuaStore.DAHUAMeetingUser(data.id);
      //       // daHuaStore.DAHUADeleteMeet(data.id);
      //     });
      //   });
      //   // console.log(dhUser);
      //   daHuaStore.DAHUADeviceList('S4NbecfYB1DFLAIM9FFHQ8'); //测试执法记录仪
      //   daHuaStore.DAHUADeviceList('S4NbecfYB1DGB68AN187Q8'); //执法人员设备列表
      //   daHuaStore.DAHUADeviceList('S4NbecfYB1DGB68S6S0UFC'); //执法车辆列表
      // }
      const DAHUA = document.getElementById('DAHUA') as HTMLIFrameElement;
      if (!DAHUA) return
      DAHUA.onload = function(){
        // @ts-ignore
        DAHUA.contentWindow.postMessage('onload','*');
      }
    });

    return () => (
      <section class="base-layout-container">
        <iframe style={{opacity: 0}} class={clsx('dahua-content',{['display']: daHuaStore.dahuaUserVisible})}
                id="DAHUA" name="DAHUA" src="http://127.0.0.1:8080" frameborder="0" />
        <header class="base-layout-title-contatisner">
          <div class="back-to-home" onClick={() => router.push('/home')}></div>
        </header>
        <main>
          <RouterView />
          <MarkerMap
            readonly={route.path.includes('incidentDetail')}
            // marker={store.incidentDetail}
          />
        </main>
      </section>
    );
  },
});