<template>
  <div class="m-4 flex">
    <div class="w-1/2 xl:w-1/2">
      <div class="search-container flex justify-end items-center form-data m-4">
        <a-tree-select
          v-model:value="formState.townname"
          style="width: 30%; margin-right: 10px"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="treeData"
          placeholder="选择行政区划"
          :field-names="{ label: 'name', value: 'id' }"
        />
        <!-- formState.isonline -->
        <a-select ref="select" v-model:value="formState.isonline" style="width: 120px">
          <a-select-option :value="item.value" v-for="item in stateOptions" :key="item.value">{{
            item.label
          }}</a-select-option>
        </a-select>
        <div class="form-button" @click="getLine">
          <a-button type="primary">查询</a-button>
        </div>
      </div>
      <div class="all-count">
        <div class="online-user-count">
          在线人数
          <span style="font-size: 24px; color: #108eff; margin-left: 12px">{{
            onlineInfo.online
          }}</span>
        </div>
        <div class="online-user-count">
          离线人数
          <span style="font-size: 24px; color: #108eff; margin-left: 12px">{{
            onlineInfo.offline
          }}</span>
        </div>
      </div>
      <div class="table-container">
        <BasicTable @register="registerTable">
          <template #toolbar>
            <!-- <a-button type="primary" @click="handleCreate"> 新增角色 </a-button> -->
            <!-- <a-button type="primary" @click="handleItem"> 获取选中行 </a-button> -->
            <PermissionBtn @btn-event="onBtnClicked" />
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <TableAction
                :actions="[
                  {
                    // icon: 'ant-design:ellipsis-outlined',
                    label: '位置',
                    onClick: toPosition.bind(null, record),
                  },
                  {
                    // icon: 'ant-design:ellipsis-outlined',
                    label: '轨迹',
                    onClick: toTrajectory.bind(null, record),
                  },
                ]"
              />
            </template>
          </template>
        </BasicTable>
      </div>
    </div>
    <div class="w-1/2 xl:w-1/2" style="height: 90vh">
      <InspectionMap :routerLine="routerLine" :name="'InspectionModel'" :mapData="formState" />
    </div>
    <a-modal
      v-model:visible="patrolTrackModelVisible"
      title="巡查"
      wrap-class-name="full-modal"
      width="100%"
      :footer="null"
    >
      <PatrolTrackModel />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getPointUserOnLine } from '@/api/firegrid/firemanagement';
  import { InspectionColumns } from './data';
  import { PatrolTrackModel, InspectionMap } from './index';
  import { EventBus } from '@/utils/eventBus';
  import { useMessage } from '@/hooks/web/useMessage';
  import { getPatrolPointByTimeSubsection } from '@/api/firegrid/patrol';
  import { getDeptList } from '@/api/demo/system';

  const { createMessage } = useMessage();
  defineOptions({ name: 'DeptModal' });
  const patrolTrackModelVisible = ref(false);
  const onlineInfo = reactive({
    online: 0,
    offline: 0,
  });
  const treeData: any = ref([]);
  const getTree = () => {
    getDeptList().then((res) => {
      treeData.value = res;
    });
  };
  const routerLine = ref([]);
  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys, setTableData }] = useTable({
    // 表格名称
    title: '巡检列表',
    // 获取数据的接口
    dataSource: [],
    // 表单列信息 BasicColumn[]
    columns: InspectionColumns,
    rowKey: 'id',
    // 使用搜索表单
    useSearchForm: false,
    // 显示表格设置工具
    showTableSetting: true,
    // 是否显示表格边框
    bordered: true,
    // 序号列
    showIndexColumn: false,
    // 搜索
    handleSearchInfoFn(info) {
      return info;
    },
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
      fixed: undefined,
    },
  });
  const toPosition = (row) => {
    const lnglat = [row.lng, row.lat];
    EventBus.emit('inspectionMoldeMap', lnglat);
  };
  const toTrajectory = (row) => {
    console.log('轨迹');
    console.log(row);
    getRouteList(row);
  };
  const getRouteList = (item) => {
    let start = new Date();
    let end = new Date(start.getTime());

    let SAETime = [
      end.getFullYear() +
        '-' +
        (end.getMonth() + 1) +
        '-' +
        end.getDate() +
        ' ' +
        (end.getHours() - 2) +
        ':00:00',
      start.getFullYear() +
        '-' +
        (start.getMonth() + 1) +
        '-' +
        start.getDate() +
        ' ' +
        start.getHours() +
        ':' +
        start.getMinutes() +
        ':' +
        start.getSeconds(),
    ];

    let query = {
      id: item.createId,
      beginTime: SAETime[0],
      endTime: SAETime[1],
    };
    // LoadPatrolPointByTimeSubsection
    getPatrolPointByTimeSubsection(query).then((res) => {
      console.log(res);
      routerLine.value = res;
      if (res.length == 0) {
        return createMessage.warning('暂无1小时内轨迹');
      }
    });
  };
  const stateOptions = ref([
    {
      label: '全部',
      value: '全部',
    },
    {
      label: '在线',
      value: '在线',
    },
    {
      label: '离线',
      value: '离线',
    },
  ]);
  //   查询
  interface FormState {
    isonline: string;
    townname: string;
  }
  const formState: FormState = reactive({
    isonline: '全部',
    townname: '费县',
    page: 1,
    limit: 10,
  });
  const getLine = () => {
    getPointUserOnLine(formState).then((res) => {
      res.items.userinfo.forEach((item) => {
        item.onLineTime = friendlyDate(item.onLineTime);
      });
      onlineInfo.online = res.items.online;
      onlineInfo.offline = res.items.offline;
      setTableData(res.items.userinfo);
    });
  };
  const friendlyDate = (time) => {
    if (time > 60) {
      return Math.ceil(time / 60) + '小时前';
    } else {
      return time + '分钟前';
    }
  };
  onMounted(() => {
    getLine();
    getTree();
  });
</script>
<style lang="less" scoped>
  .form-button {
    button {
      margin-left: 10px;
    }
  }
  ::v-deep .ant-modal {
    top: 20px;
  }
  .all-count {
    width: 100%;
    padding: 20px 20px;
    padding-bottom: 60px;
    border-bottom: 1px solid @border-color-light;
    border-top: 1px solid @border-color-light;
  }

  .all-count div {
    width: 40%;
    height: 32px;
    line-height: 32px;
    border-left: 3px solid #409eff;
    float: left;
    margin-left: 20px;
    text-indent: 20px;
  }
</style>
