<template>
  <div>
    <div class="item-container">
      <div style="padding: 0px 0px 0px 0px">
        <a-button size="mini" type="primary" round @click="emits('delView')">
          <template #icon><ArrowLeftOutlined /></template>
          返回</a-button
        >
      </div>
      <div class="item-container-left">
        <a-divider orientation="left">打卡点信息</a-divider>
        <a-descriptions class="margin-top" :column="1" :size="'mini'" border>
          <a-descriptions-item>
            <template v-slot:label>
              <BankOutlined />
              打卡点名称
            </template>
            {{ itemData.PointName }}
          </a-descriptions-item>

          <a-descriptions-item>
            <template v-slot:label>
              <HistoryOutlined />
              创建时间
            </template>
            {{ itemData.CreateTime }}
          </a-descriptions-item>
          <a-descriptions-item>
            <template v-slot:label>
              <EnvironmentOutlined />
              打卡点位置
            </template>
            {{ itemData.Lng }},{{ itemData.Lat }}&nbsp;&nbsp;
            <!-- <el-button type="primary" size="mini" round icon="el-icon-location-outline" @click="lookClockInfo(currentClockInfo)">定位</el-button> -->
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="item-container-right">
        <div class="time-box" v-if="tabActive == 1">
          <a-range-picker
            :show-time="{ format: 'HH:mm' }"
            format="YYYY-MM-DD HH:mm"
            :placeholder="['开始时间', '结束时间']"
            @change="timeChange"
            v-model:value="value1"
          />
        </div>

        <el-divider content-position="left">
          <span
            :style="{ color: tabActive == 1 ? '#409eff' : '', cursor: 'pointer' }"
            @click="tabActive = 1"
            >巡查轨迹</span
          >
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span
            :style="{ color: tabActive == 2 ? '#409eff' : '', cursor: 'pointer' }"
            @click="tabActive = 2"
            >打卡记录</span
          >
        </el-divider>

        <div
          style="width: 100%; text-align: center; padding: 100px 0px"
          v-if="currentRouters.length <= 0 && tabActive == 1"
        >
          <img src="@/assets/images/canvas/noData.png" style="width: 140px; margin-bottom: 20px" />
          <p style="color: #cfcfcf">暂无巡查轨迹</p>
        </div>

        <div class="users-container" v-show="tabActive == 1">
          <div class="history-line" v-for="(it, idx) in currentRouters" :key="idx">
            <div class="user-item">
              <div class="user-photo">
                <img src="@/assets/images/meshing/rangers-number.png" alt="" />
              </div>
              <div class="user-name">{{ it.name }}</div>
              <a-button
                type="primary"
                size="mini"
                round
                @click="getTrajectoryData(it)"
                style="float: right; position: relative; top: 8px"
                >轨迹</a-button
              >
              <a-button
                type="primary"
                size="mini"
                round
                @click="getRange(it.phone)"
                style="float: right; position: relative; top: 8px; left: -12px"
                >范围</a-button
              >
            </div>
            {{ it.startTime }}
            &nbsp;&nbsp; <SwapRightOutlined style="font-size: 20px" />
            &nbsp;&nbsp;
            {{ it.endTime }}
          </div>
        </div>

        <div
          style="width: 100%; text-align: center; padding: 100px 0px"
          v-if="clockInList.length <= 0 && tabActive == 2"
        >
          <img src="@/assets/images/canvas/noData.png" style="width: 140px; margin-bottom: 20px" />
          <p style="color: #cfcfcf">暂无打卡记录</p>
        </div>
        <div class="users-container" v-show="tabActive == 2">
          <div class="clockIn-box" v-for="(item, idx) in clockInList" :key="idx">
            <p>
              <span><UserOutlined /> 打卡人员：</span>{{ item.Name }}
              <span
                >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<HistoryOutlined />打卡时间：</span
              >
              {{ item.clockontime }}
            </p>
            <p>
              <span><EnvironmentOutlined /> 打卡位置：</span>
              {{ parseFloat(item.Lng).toFixed(6) }},{{ parseFloat(item.Lat).toFixed(6) }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue';
  import {
    SwapRightOutlined,
    UserOutlined,
    HistoryOutlined,
    EnvironmentOutlined,
    BankOutlined,
    ArrowLeftOutlined,
  } from '@ant-design/icons-vue';
  import { getCheckInfoByPointId } from '@/api/firegrid/index';
  import { getPatrolInfoByUserId } from '@/api/firegrid/patrol';
  import { EventBus } from '@/utils/eventBus';
  import moment from 'moment';

  const props = defineProps({
    itemData: Object,
  });
  const emits = defineEmits(['delView']);
  const tabActive = ref(1);
  const currentRouters = ref([]);
  const clockInList = ref([]);
  //   查询
  interface FormState {
    begintime: string | null;
    endtime: string | null;
  }
  const formState: FormState = reactive({
    begintime: null,
    endtime: null,
  });
  const timeChange = (value: any, dateString: string) => {
    formState.begintime = dateString[0];
    formState.endtime = dateString[1];
    getPatrolInfo();
  };
  // 获取打卡记录
  const getPointInfo = () => {
    getCheckInfoByPointId({ id: props.itemData.Id, page: 1, limit: 999999 }).then((res) => {
      clockInList.value = res.items;
    });
  };
  // 获取巡查轨迹
  const getPatrolInfo = () => {
    const params = {
      ...formState,
      id: props.itemData.Id,
    };
    getPatrolInfoByUserId(params).then((res) => {
      currentRouters.value = res;
    });
  };
  const value1: any = ref([]);

  onMounted(() => {
    getPointInfo();
    getPatrolInfo();
    let start = new Date();
    let end = new Date();
    const time = [
      end.getFullYear() + '-' + (end.getMonth() + 1) + '-' + end.getDate() + ' 00:00:00',
      start.getFullYear() +
        '-' +
        (start.getMonth() + 1) +
        '-' +
        start.getDate() +
        ' ' +
        start.getHours() +
        ':' +
        start.getMinutes() +
        ':' +
        start.getSeconds(),
    ];
    formState.begintime = time[0];
    formState.endtime = time[1];
    value1.value = [moment(time[0], 'YYYY-MM-DD HH:mm'), moment(time[1], 'YYYY-MM-DD HH:mm')];
  });
</script>
<style lang="less" scoped>
  .item-container {
    width: inherit;
    height: 100%;
    float: left;
    padding: 30px;
    border-right: 1px solid #636262;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: @component-background;
  }

  .item-container-left {
    width: 100%;
  }

  .item-container-right {
    width: 100%;
    margin: 0px 0px;
    padding: 0px;
    position: relative;
  }
  .users-container {
    width: 100%;
    padding-right: 15px;
    height: calc(100vh - 440px);
    overflow-y: auto;
    margin-top: 15px;
  }
  .clockIn-box {
    width: 100%;
    height: 80px;
    /* background:rgba(0,0,0,0.25); */
    border-bottom: 1px solid #76838f;
    padding: 5px;
    border-radius: 0px;
    margin-bottom: 10px;
  }
  .item-container-right div {
    float: left;
  }
  .user-item {
    width: 100%;
    padding: 0px 0px;
    line-height: 50px;
  }
  .history-line {
    width: 100%;
    line-height: 20px;
    margin-bottom: 20px;
    text-indent: 0px;
    cursor: pointer;
  }
  .history-line-button:hover {
    color: #108eff;
  }
  .history-line-button {
  }
  .user-item::after {
    content: '';
    clear: both;
    display: block;
    visibility: hidden;
    height: 0;
  }

  .user-photo {
    float: left;
    width: 36px;
    height: 36px;
    margin-top: 6px;
    border-radius: 50%;
    line-height: 36px;
    text-align: center;
  }
  .user-photo img {
    width: 32px;
    height: 32px;
    margin: 0px;
  }
  .user-name {
    width: 70px;
    text-align: center;
  }

  .user-phone {
    width: 100px;
    text-align: center;
  }
  .time-box {
    padding: 0px 20px;
    margin: 0px 0px 15px 0px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: @component-background;
    z-index: 100000;
  }
  ::v-deep .ant-descriptions-item-label {
    margin-right: 20px;
    .anticon {
      margin-right: 4px;
    }
  }
</style>
