<template>
  <div class="m-4">
    <div class="search-container flex justify-end items-center form-data m-4">
      <a-tree-select
        v-model:value="formState.areaid"
        style="width: 30%; margin-right: 10px"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-data="treeData"
        placeholder="选择行政区划"
        :field-names="{ label: 'name', value: 'id' }"
      />
      <a-range-picker
        :show-time="{ format: 'HH:mm' }"
        format="YYYY-MM-DD HH:mm"
        :placeholder="['开始时间', '结束时间']"
        @change="timeChange"
        v-model:value="value1"
      />
      <div class="form-button">
        <a-button type="primary" @click="inquire">查询</a-button>
        <a-button type="primary">导出</a-button>
      </div>
    </div>
    <div class="cate-title">数据总览</div>
    <div class="count-item-container">
      <div class="count-item">
        <div class="count-item-icon">
          <img src="@/assets/images/meshing/rangers-number.png" />
        </div>
        <div class="count-item-title"> 护林员数量 </div>
        <div class="count-item-value"> {{ allData.hulinyuan }} <span class="unit">人</span> </div>
      </div>

      <div class="count-item">
        <div class="count-item-icon">
          <img src="@/assets/images/meshing/punch-track.png" />
        </div>
        <div class="count-item-title"> 全部巡查总数 </div>
        <div class="count-item-value">
          {{ allData.xunchazongshu }} <span class="unit">次</span>
        </div>
      </div>

      <div class="count-item">
        <div class="count-item-icon">
          <img src="@/assets/images/meshing/punch-times.png" />
        </div>
        <div class="count-item-title"> 全部打卡总数 </div>
        <div class="count-item-value"> {{ allData.dakacishu }} <span class="unit">次</span> </div>
      </div>

      <div class="count-item">
        <div class="count-item-icon">
          <img src="@/assets/images/meshing/significant-frequency.png" />
        </div>
        <div class="count-item-title"> 全部打卡点数 </div>
        <div class="count-item-value"> {{ allData.dakadian }} <span class="unit">个</span> </div>
      </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: getGuiji.bind(null, record),
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </div>
    <a-modal
      v-model:visible="patrolTrackModelVisible"
      title="巡查"
      wrap-class-name="full-modal"
      width="100%"
      :footer="null"
    >
      <PatrolTrackModel :data="patrolTrackData" />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { getStatistics, getStatisticsCount } from '@/api/firegrid/index';
  import { columns } from './data';
  import { PatrolTrackModel } from './index';
  import { getDeptList } from '@/api/demo/system';
  import moment from 'moment';

  defineOptions({ name: 'DeptModal' });
  const patrolTrackModelVisible = ref(false);
  const treeData: any = ref([]);
  const getTree = () => {
    getDeptList().then((res) => {
      treeData.value = res;
    });
  };
  const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
    // 表格名称
    title: '角色列表',
    // 获取数据的接口
    api: getStatistics,
    // 表单列信息 BasicColumn[]
    columns,
    rowKey: 'id',
    // 使用搜索表单
    useSearchForm: false,
    // 显示表格设置工具
    showTableSetting: true,
    // 是否显示表格边框
    bordered: true,
    // 序号列
    showIndexColumn: false,
    // 勾选列
    rowSelection: {
      //多选框
      // type: 'checkbox',
      type: 'radio',
    },
    // 搜索
    handleSearchInfoFn(info) {
      return info;
    },
    actionColumn: {
      width: 80,
      title: '查看账号',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
      fixed: undefined,
    },
  });
  const patrolTrackData = ref({});
  const getGuiji = (item: any) => {
    patrolTrackModelVisible.value = true;
    patrolTrackData.value = item;
  };
  const allData: any = ref({});
  //   查询
  interface FormState {
    begintime: string | null;
    endtime: string | null;
    areaid: string | null;
  }
  const formState: FormState = reactive({
    begintime: null,
    endtime: null,
    areaid: null,
  });
  const timeChange = (value: any, dateString: string) => {
    console.log(dateString);
    formState.begintime = dateString[0];
    formState.endtime = dateString[1];
  };
  const getCount = () => {
    getStatisticsCount(formState).then((res) => {
      allData.value = res;
    });
  };
  const inquire = () => {
    getCount();
    reload();
  };
  const value1: any = ref([]);
  onMounted(() => {
    getCount();
    getTree();
    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>
  .form-button {
    button {
      margin-left: 10px;
    }
  }
  ::v-deep .ant-modal {
    top: 20px;
  }
  .cate-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .count-item-container {
    width: 100%;
    min-height: 100px;
    padding: 15px 0px;
  }

  .count-item {
    width: calc(25% - 20px);
    padding: 5px 15px;
    float: left;
    margin-right: 20px;
    border-radius: 0px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  }

  .count-item .count-item-icon {
    float: left;
    color: #fff;
  }

  .count-item-icon img {
    width: 40px;
    height: 40px;
    margin-top: 4px;
    opacity: 0.9;
  }
  .count-item-title {
    line-height: 50px;
    margin-left: 15px;
    font-size: 14px;
    float: left;
    color: #9da1bd;
  }
  .count-item-value {
    font-size: 20px;
    line-height: 50px;
    margin-left: 30px;
    float: right;
  }
  .count-item .unit {
    font-size: 14px;
    color: #ccc;
  }
</style>
