<!-- eslint-disable vue/no-deprecated-v-on-native-modifier -->
<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <BasicTable
      class="w-4/4 xl:w-5/5"
      @register="registerTable"
      @fetch-success="onFetchSuccess"
      :searchInfo="searchInfo"
    >
      <template #toolbar>
        <!-- 日期选择框 -->
        <div style="display: inline; margin-right: 10px; width: 200px">
          <a-range-picker
            v-model:value="startEndTime"
            size="mini"
            align="right"
            :presets="rangePresets"
            @change="getCaseList"
          />
        </div>
        <!-- 案件类型 -->
        <div style="display: inline; margin-right: 10px; width: 100px">
          <a-select
            :options="caseTypeOptions"
            v-model:value="listQuery.typeid"
            placeholder="案件类型"
            style="width: 100px"
            :field-names="{ label: 'name', value: 'id' }"
            @change="getCaseList"
          />
        </div>
        <!-- 查询地区 -->
        <div style="display: inline; margin-right: 10px; width: 100px">
          <a-cascader
            :options="OrgList"
            v-model:value="listQuery.org"
            placeholder="查询地区"
            size="mini"
            style="width: 100px"
            @change="handleChange"
          />
        </div>
        <!-- 现场状况 -->
        <div style="display: inline; margin-right: 10px; width: 100px">
          <a-select
            :options="illegalOptions"
            v-model:value="listQuery.is_illegal"
            placeholder="现场状况"
            style="width: 100px"
            :field-names="{ label: 'name', value: 'id' }"
            @change="getCaseList"
          />
        </div>
        <!-- 案件编号 -->
        <div style="display: inline; margin-right: 10px">
          <a-input
            @keyup.enter="getCaseList"
            size="mini"
            style="width: 120px"
            class="filter-item"
            :placeholder="'案件编号'"
            v-model:value="listQuery.case_no"
          />
        </div>
        <!-- 处理人姓名 -->
        <div style="display: inline; margin-right: 10px">
          <a-input
            @keyup.enter="getCaseList"
            size="mini"
            style="width: 120px"
            class="filter-item"
            :placeholder="'处理人姓名'"
            v-model:value="listQuery.deal_username"
          />
        </div>
        <!-- 审核人姓名 -->
        <div style="display: inline; margin-right: 10px">
          <a-input
            @keyup.enter="getCaseList"
            size="mini"
            style="width: 120px"
            class="filter-item"
            :placeholder="'审核人姓名'"
            v-model:value="listQuery.verifyuser"
          />
        </div>
        <!-- 请输入关键字 -->
        <div style="display: inline; margin-right: 10px">
          <a-input
            @keyup.enter="getCaseList"
            size="mini"
            style="width: 120px"
            class="filter-item"
            :placeholder="'请输入关键字'"
            v-model:value="listQuery.key"
          />
        </div>
        <!-- 搜索按钮 -->
        <a-button class="filter-item" type="primary" @click="getCaseList" size="mini">
          查询
        </a-button>
        <a-button class="filter-item" @click="resetListQuery" size="mini"> 重置 </a-button>
        <a-button class="filter-item" type="success" @click="exportExcelList" size="mini">
          导出
        </a-button>
      </template>
      <template #bodyCell="{ column, record }">
        <!-- 地点特殊处理 -->
        <template v-if="column.key === 'address'">
          <span>{{ record.streetname }}</span>
          <span>{{ record.streetname }}</span>
          <span>{{ record.communityname }}</span>
        </template>
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '详情',
                onClick: () => {
                  openDetailModal(record);
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <DetailModal
      @register="registerModal"
      @close-modal="closeModal"
      :caseDetailId="caseDetailId"
      :isShowMap="true"
      width="80%"
    />
  </PageWrapper>
</template>
<script lang="ts" setup>
  // vue
  import { ref, reactive, onMounted } from 'vue';
  // vben
  import { PageWrapper } from '@/components/Page';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { TreeItem } from '@/components/Tree';
  import { useModal } from '@/components/Modal';
  import dayjs, { Dayjs } from 'dayjs';
  // 子组件
  import DetailModal from './detailModal.vue';
  // api
  import {
    fun_LoadDataBaseInfo,
    fun_LoadList,
    fun_load,
    fun_OrgList,
    fun_ExportCaseInfoList,
  } from '@/api/demo/query';
  // ts
  import { tableColums, searchFormSchema } from './columns.data';

  // 日期选择框
  type RangeValue = [Dayjs, Dayjs];
  const startEndTime = ref<RangeValue>();
  // 日期选择表-事件预选项
  const rangePresets = ref([
    { label: '今天', value: [dayjs(), dayjs()] },
    { label: '最近三天', value: [dayjs().add(-3, 'd'), dayjs()] },
    { label: '最近一周', value: [dayjs().add(-7, 'd'), dayjs()] },
    { label: '最近两周', value: [dayjs().add(-14, 'd'), dayjs()] },
    { label: '最近一个月', value: [dayjs().add(-30, 'd'), dayjs()] },
    { label: '最近三个月', value: [dayjs().add(-90, 'd'), dayjs()] },
    { label: '最近半年', value: [dayjs().add(-180, 'd'), dayjs()] },
    { label: '最近一年', value: [dayjs().add(-365, 'd'), dayjs()] },
  ]);
  // 搜索条件
  const searchInfo = reactive<Recordable>({});
  // 导出
  const BASE_API = process.env.VUE_APP_BASE;

  // 查询条件
  let listQuery = ref({
    typeid: null,
    org: null,
    is_illegal: null,
    case_no: null,
    key: undefined,
    deal_username: null,
    verifyuser: null,
    report_start_time: null,
    report_end_time: null,
    countyid: null,
    streetid: null,
    communityid: null,
  });
  // 现场状况
  let illegalOptions = [
    { id: 0, name: '合法' },
    { id: 1, name: '违法' },
    { id: 2, name: '伪变化' },
  ];
  // 案件类型
  const caseTypeOptions = ref<[]>([]);
  // 查询地区
  const OrgList = ref<TreeItem[]>([]);

  // 弹窗
  const [registerModal, { openModal }] = useModal();
  // 办结查询列表
  const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
    api: fun_LoadDataBaseInfo,
    columns: tableColums,
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    striped: false,
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    // 序号列
    showIndexColumn: true,
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
    },
    beforeFetch: (data) => {
      // 接口请求前 参数处理
      var temp = {
        page: data.page,
        rows: data.limit,
        value: data.value,
        handle_status_id: 2, //处理进度为：审核完成
      };
      return temp;
    },
    handleSearchInfoFn(info) {
      return info;
    },
  });

  // 搜索条件-查询地区
  function handleChange(itemIdArr) {
    if (itemIdArr.length === 0) {
      listQuery.value.countyid = null;
      listQuery.value.streetid = null;
      listQuery.value.communityid = null;
    }
    if (itemIdArr.length === 1) {
      listQuery.value.countyid = itemIdArr[0];
      listQuery.value.streetid = null;
      listQuery.value.communityid = null;
    } else if (itemIdArr.length == 2) {
      listQuery.value.countyid = null;
      listQuery.value.streetid = itemIdArr[1];
      listQuery.value.communityid = null;
    } else if (itemIdArr.length == 3) {
      listQuery.value.countyid = null;
      listQuery.value.streetid = null;
      listQuery.value.communityid = itemIdArr[2];
    }
    getCaseList();
  }

  // 条件搜索
  async function getCaseList() {
    // 日期选择框
    if (startEndTime.value != null) {
      listQuery.value.report_start_time = startEndTime.value[0].format('YYYY-MM-DD');
      listQuery.value.report_end_time = startEndTime.value[1].format('YYYY-MM-DD');
    } else {
      listQuery.value.report_start_time = null;
      listQuery.value.report_end_time = null;
    }
    searchInfo.value = listQuery.value;
    clearSelectedRowKeys();
    reload();
  }

  // 重置
  function resetListQuery() {
    startEndTime.value = null;
    // 查询条件
    listQuery.value = {
      typeid: null,
      org: null,
      is_illegal: null,
      case_no: null,
      key: undefined,
      deal_username: null,
      verifyuser: null,
      report_start_time: null,
      report_end_time: null,
      countyid: null,
      streetid: null,
      communityid: null,
    };
    getCaseList();
  }

  // 导出
  async function exportExcelList() {
    await fun_ExportCaseInfoList(listQuery.value).then((res) => {
      console.log('导出', res);
      if (res.code === 200) {
        window.location.href = BASE_API + '/' + res.result;
      }
    });
  }

  // 打开详情窗口
  let caseDetailId = '';
  function openDetailModal(record: Recordable) {
    caseDetailId = record.id;
    openModal(true, { record });
  }

  // 初始化
  async function fetch() {
    getCaseList();
    let data0 = await fun_LoadList({ typeid: 'SYS_NOBUILD_TYPE' });
    console.log(data0);
    // 案件类型
    let data1 = await fun_load({ page: 1, limit: 99, typeid: 'DRONE_CASE_TYPE' });
    // caseTypeOptions.value =
    console.log(data1);

    // 查询地区
    let data2 = await fun_OrgList({ name: '费县' });
    // OrgList.value =
    console.log(data2);
  }

  onMounted(() => {
    fetch();
  });
</script>
