<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <div :class="`${prefixCls}`">
      <div :class="`${prefixCls}-header`">
        <div></div>
        <div class="flex">
          <a-tree-select
            v-if="selectOptions1.length > 0"
            v-model:value="selectValues1"
            show-search
            style="width: 230px"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="查询地区"
            allow-clear
            :tree-data="selectOptions1"
            :field-names="{
              children: 'children',
              value: 'id',
              label: 'name',
            }"
            tree-node-filter-prop="name"
            @change="areaChange"
          />
          <a-select
            ref="select"
            v-model:value="is_illegal"
            style="width: 150px"
            class="ml-3"
            allowClear
            :options="selectOptions2"
            placeholder="现场状况"
            @change="reload1"
          />
          <a-select
            ref="select"
            v-model:value="is_drawback"
            :options="selectOptions3"
            style="width: 150px"
            class="ml-3"
            allowClear
            placeholder="新增退回"
            @change="reload1"
          />
          <a-input
            style="width: 150px"
            class="ml-3"
            v-model:value="searchCaseNo"
            placeholder="案件编号"
          />
          <a-input
            style="width: 150px"
            class="ml-3"
            v-model:value="searchKey"
            placeholder="请输入"
          />
          <a-button class="ml-3" :icon="h(SearchOutlined)" @click="reload1">搜索</a-button>
          <a-button type="success" class="ml-3" :icon="h(DownloadOutlined)">导出</a-button>
        </div>
      </div>
      <div :class="`${prefixCls}-content`">
        <div :class="`${prefixCls}-content-tabbox`">
          <div :class="`${prefixCls}-content-tabbox-left`">
            <BasicTable @register="registerTable" v-if="!caseDetailVisible">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'action'">
                  <TableAction
                    :actions="[
                      {
                        label: '核验',
                        onClick: () => {
                          handleAuditing(record);
                        },
                      },
                    ]"
                  />
                </template>
              </template>
            </BasicTable>
            <div :class="`${prefixCls}-content-tabbox-left-collenction`" v-if="caseDetailVisible">
              <div :class="`${prefixCls}-content-tabbox-left-collenction-header`">
                <div>案件详情</div>
                <div
                  :class="`${prefixCls}-content-tabbox-left-collenction-header-close`"
                  @click="closeCaseDetail"
                  ><CloseOutlined
                /></div>
              </div>
              <div :class="`${prefixCls}-content-tabbox-left-collenction-box`">
                <CaseView :caseId="selectRowDetail.id" :mapShow="false"></CaseView>
              </div>
              <div :class="`${prefixCls}-content-tabbox-left-collenction-footer`">
                <a-input
                  size="mini"
                  class="ml-3"
                  v-model:value="caseBackReason"
                  placeholder="退回原因"
                />
                <a-button type="error" class="ml-3" @click="handleCaseBack"> 退回 </a-button>
                <a-button type="primary" class="ml-3" @click="handlePassForm"> 核验 </a-button>
              </div>
            </div>
          </div>
        </div>
        <div :class="`${prefixCls}-content-mapbox`">
          <MapDetail :ruleForm="selectRowDetail"></MapDetail>
        </div>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { onMounted, ref, h } from 'vue';
  import { SearchOutlined, DownloadOutlined, CloseOutlined } from '@ant-design/icons-vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
  import {
    getTableListData,
    passVerificatCase,
    backVerificcatCase,
  } from '@/api/summaryverification/index';
  import { getDeptList } from '@/api/demo/system';
  import { columns } from './index.data';
  import { useMessage } from '@/hooks/web/useMessage';
  import { CaseView } from '@/views/demo/monitor/index';
  import MapDetail from './mapDetail.vue';

  const { createMessage } = useMessage();
  const caseBackReason: any = ref();
  const caseDetailVisible: any = ref(false);
  const selectRowDetail: any = ref({});
  const selectValues1: any = ref();
  const selectOptions1: any = ref([]);
  const searchKey: any = ref();
  const searchCaseNo: any = ref();
  const countyid: any = ref();
  const streetid: any = ref();
  const communityid: any = ref();
  const is_illegal: any = ref();
  const selectOptions2: any = ref([
    { label: '合法', value: 0 },
    { label: '违法', value: 1 },
    { label: '伪变化', value: 2 },
  ]);
  const is_drawback: any = ref();
  const selectOptions3: any = ref([
    { label: '新增', value: 0 },
    { label: '退回', value: 1 },
  ]);

  const [registerTable, { reload: reload1 }] = useTable({
    title: '',
    api: getTableListData,
    columns,
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
    },
    // rowSelection: {
    //   type: 'checkbox',
    // },
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
    },
    beforeFetch: (data) => {
      let temp = {
        page: data.page,
        limit: data.limit,
        is_illegal: is_illegal.value,
        is_drawback: is_drawback.value,
        countyid: countyid.value,
        streetid: streetid.value,
        communityid: communityid.value,
        case_no: searchCaseNo.value,
        key: searchKey.value,
      };
      return temp;
    },
    handleSearchInfoFn(info) {
      return info;
    },
  });
  function closeCaseDetail() {
    caseDetailVisible.value = false;
  }
  function handleCaseBack() {
    if (!caseBackReason.value) {
      createMessage.error('退回原因不能为空');
      return;
    }
    const param = {
      id: selectRowDetail.value.id,
      drawbackReason: caseBackReason.value,
    };
    backVerificcatCase(param).then((res) => {
      if (res) {
        createMessage.success('操作成功');
        reload1();
        caseDetailVisible.value = false;
      } else {
        createMessage.error('此案件未办理，无需退回。');
      }
    });
  }
  function handlePassForm() {
    passVerificatCase([selectRowDetail.value.id]).then((res) => {
      if (res) {
        caseDetailVisible.value = false;
        createMessage.success('操作成功');
      } else {
        createMessage.error('操作失败');
      }
    });
  }
  function areaChange(items) {
    countyid.value = null;
    streetid.value = null;
    communityid.value = null;
    if (items && JSON.stringify(items).length == 6) {
      countyid.value = items;
    }
    if (items && JSON.stringify(items).length == 9) {
      streetid.value = items;
    }
    if (items && JSON.stringify(items).length == 12) {
      communityid.value = items;
    }
    reload1();
  }
  function handleAuditing(record) {
    console.log('record', record);
    const formData = record;
    formData.homeAddress =
      record.countyname + record.streetname + record.communityname + record.address;
    formData.lngLat = record.lng + ' , ' + record.lat;
    selectRowDetail.value = record;
    caseDetailVisible.value = true;
  }
  function getOrgList() {
    getDeptList().then((res) => {
      res.forEach((item) => {
        if (item.id == '371300') {
          selectOptions1.value = item.children;
        }
      });
    });
  }
  onMounted(() => {
    getOrgList();
  });
  const prefixCls = 'form-box';
</script>
<style lang="less" scoped>
  .form-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    &-header {
      width: 100%;
      padding: 0 10px;
      height: 60px;
      background: #f8f8f8;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    &-content {
      width: 100%;
      height: calc(100% - 60px);
      display: flex;

      &-tabbox {
        width: 70%;
        display: flex;
        justify-content: space-between;

        &-left {
          flex: 1;
          border: 1px solid #eee;

          &-collenction {
            display: flex;
            flex-direction: column;
            height: 100%;

            &-box {
              height: calc(100% - 110px);
              overflow: auto;
            }

            &-footer {
              height: 60px;
              background: #fff;
              display: flex;
              align-items: center;
            }

            &-header {
              padding: 0 10px;
              height: 50px;
              overflow: auto;
              border-bottom: 1px solid #eee;
              display: flex;
              background: #fff;
              align-items: center;
              justify-content: space-between;

              &-close {
                cursor: pointer;
              }
            }
          }
        }
      }

      &-mapbox {
        width: calc(30% - 20px);
        margin: 0 15px 15px 15px;
        border: 1px solid red;
      }
    }
  }
</style>
