<template>
  <div class="m-4 mr-0 overflow-hidden bg-white" style="overflow: auto">
    <div class="flex justify-around items-center form-data m-4">
      <a-input v-model:value="formState.keyWord" placeholder="输入关键字" style="width: 30%" />
      <a-tree-select
        v-model:value="formState.areaid"
        style="width: 30%"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="treeData"
        :field-names="{ label: 'name', value: 'id' }"
        placeholder="选择行政区划"
        allow-clear
      />
      <div class="form-button">
        <a-button type="primary" @click="getTaskList">查询</a-button>
        <a-button type="primary" @click="toStatic">统计</a-button>
        <a-button type="primary" @click="toInspection">巡检</a-button>
      </div>
    </div>
    <div class="table-data">
      <div style="width: 100%; text-align: center; padding: 100px 0px" v-if="tasklist.length <= 0">
        <img src="@/assets/images/canvas/noData.png" style="width: 140px; margin-bottom: 20px" />
        <p style="color: #cfcfcf">暂无数据</p>
      </div>
      <div class="clock-item-container" v-else>
        <div class="clock-item" v-for="(item, index) in tasklist" :key="index">
          <div class="clock-item-icon">
            <img src="@/assets/images/meshing/clockIn-bg.png" />
          </div>
          <div class="clock-item-info">
            <p>打卡点名称：{{ item.PointName }}</p>
            <p>创建时间：{{ item.CreateTime }}</p>
            <p>负责人员：{{ item.CreateUserName }}</p>
            <p style="text-align: right">
              <a-popconfirm
                title="确定删除吗？"
                ok-text="是"
                cancel-text="否"
                @confirm="deleteTask(item.Id)"
              >
                <a-button type="primary" danger size="mini">删除</a-button>
              </a-popconfirm>
              <a-button type="primary" round size="mini" @click="editClockInfo(item)"
                >编辑</a-button
              >
              <a-button type="primary" round size="mini" @click="lookClockInfo(item)"
                >查看</a-button
              >
            </p>
          </div>
        </div>
      </div>
      <div class="table-data-pagination m-4">
        <a-pagination
          show-size-changer
          show-quick-jumper
          v-model:current="pageData.current"
          :total="pageData.total"
          @change="paginationOnChange"
          @showSizeChange="onShowSizeChange"
          :show-total="(total) => `共 ${total} 条`"
        />
      </div>
    </div>
    <EditModal @register="editModal" @success="editSuccess" />
    <a-modal
      v-model:visible="statisticsModalVisible"
      title="统计"
      wrap-class-name="full-modal"
      width="100%"
      :footer="null"
    >
      <StatisticsModel />
    </a-modal>
    <a-modal
      v-model:visible="InspectionModelVisible"
      title="巡检"
      wrap-class-name="full-modal"
      width="100%"
      :footer="null"
      destroyOnClose
    >
      <InspectionModel />
    </a-modal>
  </div>
</template>
<script setup lang="ts">
  import { reactive, UnwrapRef, ref, onMounted } from 'vue';
  import { useModal } from '@/components/Modal';
  import { EditModal, StatisticsModel, InspectionModel } from './index';
  import { getCheckPointList, deleteCheckPoint } from '@/api/firegrid/index';
  import { useMessage } from '@/hooks/web/useMessage';
  import { EventBus } from '@/utils/eventBus';
  import { getDeptList } from '@/api/demo/system';

  const { createMessage } = useMessage();
  const emits = defineEmits(['viewHandle']);
  const [editModal, { openModal: openEidtModal }] = useModal();
  const statisticsModalVisible = ref(false);
  const InspectionModelVisible = ref(false);
  onMounted(() => {
    getTree();
    getTaskList();
    EventBus.on('addCheckPoint', (data) => {
      getTaskList();
    });
  });
  //   查询
  interface FormState {
    keyWord: string | null;
    areaid: string | null;
  }
  interface listObj {
    Id: number;
    PointName: string;
    Lat: string;
    Lng: string;
    CreateTime: string;
    CreateUserName: string;
  }
  const formState: UnwrapRef<FormState> = reactive({
    keyWord: null,
    areaid: null,
  });
  const treeData: any = ref([]);
  //   分页
  const pageData = reactive({
    total: 100,
    current: 1,
    pageSize: 10,
  });
  const getTree = () => {
    getDeptList().then((res) => {
      treeData.value = res;
    });
  };
  const paginationOnChange = (page: number) => {
    pageData.current = page;
    getTaskList();
  };
  const onShowSizeChange = (current: number, pageSize: number) => {
    pageData.current = current;
    pageData.pageSize = pageSize;
    getTaskList();
  };
  //   列表
  const tasklist = ref<listObj[]>([]);
  const getTaskList = () => {
    const params = {
      page: pageData.current,
      limit: pageData.pageSize,
      pointName: formState.keyWord,
      areaid: formState.areaid,
    };
    EventBus.emit('getPatrolMap', params);
    getCheckPointList(params).then((res) => {
      tasklist.value = res.items;
      pageData.total = res.total;
    });
  };
  // 删除
  const deleteTask = (id) => {
    deleteCheckPoint({ id }).then((res) => {
      if (res) {
        getTaskList();
        return createMessage.success('删除成功');
      } else {
        return createMessage.error('删除成功');
      }
    });
  };
  //   编辑
  const editClockInfo = (row) => {
    openEidtModal(true, {
      isUpdate: true,
      id: row.Id,
    });
  };
  //   编辑成功
  const editSuccess = () => {
    getTaskList();
  };
  //   统计
  const toStatic = () => {
    statisticsModalVisible.value = true;
  };
  // 查看
  const lookClockInfo = (row) => {
    emits('viewHandle', row);
    const lnglat = [row.Lng, row.Lat];
    EventBus.emit('inspectionMap', lnglat);
  };
  // 巡检
  const toInspection = () => {
    InspectionModelVisible.value = true;
  };
</script>
<style lang="less" scoped>
  .form-button {
    button {
      margin-left: 4px;
    }
  }
  .clock-item-container {
    width: calc(100% - 10px);
    height: calc(100% - 40px);
    padding: 0px 15px;
    margin: 15px 0px;
    overflow: auto;
    border-top: 1px solid @border-color-light;

    .clock-item {
      width: 100%;
      height: 150px;
      margin: 10px 0px;
      padding: 10px 15px;
      border-bottom: 1px solid @border-color-light;
    }
    .clock-item-icon {
      width: 100px;
      height: 80px;
      float: left;
    }
    .clock-item-icon img {
      width: 80px;
      height: 80px;
      margin-top: 6px;
    }
    .clock-item-info {
      float: left;
      width: calc(100% - 100px);
      height: 100px;
      line-height: 18px;
      font-size: 12px;
      button {
        margin-right: 4px;
      }
    }
    .clock-item-info p {
      margin-bottom: 0px;
      margin-top: 10px;
    }
  }
  .table-data {
    position: relative;
    height: calc(100% - 68px);
    .table-data-pagination {
      position: absolute;
      bottom: 0px;
      background-color: @component-background;
    }
  }
</style>
<style lang="less" scoped>
  .full-modal {
    .ant-modal {
      max-width: 100%;
    }

    .ant-modal-content {
      height: calc(100vh);
    }

    .ant-modal-body {
      height: 80%;
    }
  }
</style>
