<template>
  <div>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record, index, text }">
        <template v-if="column.key == 'PunchStatus'">
          {{ getLabel('PunchStatus', text) }}
        </template>
        <template v-if="column.key == 'LngLat'">
          {{ `${record.Lng}, ${record.Lat}` }}
        </template>
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '详情',
                onClick: () => {
                  showInfo(record)
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <a-modal width="100%" wrap-class-name="checkiinformation-show-info-modal" v-model:open="showInfoModalOpen" title="详情" :maskClosable="false" :footer="null" :destroyOnClose="true">
      <ShowInfoModal :modalData="modalData" @closeModal="closeModal"/>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { LoadAllPage, Get } from '@/api/illegalconstruction/checkiinformation'
  import { columns, searchFormSchema, statusOptions } from './util';
  import ShowInfoModal from './ShowInfoModal/index.vue';

  const modalData = ref({})
  const showInfoModalOpen = ref(false)
  // 表格
  const [registerTable] = useTable({
    title: '巡查信息列表',
    api: LoadAllPage,
    columns: columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    showIndexColumn: false,
    rowSelection: {
      type: 'radio',
    },
    useSearchForm: true,
    bordered: true,
    showTableSetting: true,
    handleSearchInfoFn(info) {
      return info;
    },
    actionColumn: {
      width: 100,
      title: '操作',
      dataIndex: 'action',
    },
  });
  const getLabel = (type, value) => {
    let result: any[] = [];
    let label = '';
    switch (type) {
      case 'PunchStatus':
        result = statusOptions;
        break;
    }
    result.forEach((item) => {
      if (item.value == value) {
        label = item.label;
      }
    });
    return label;
  };
  const showInfo = (record) => {
    Get({id: record.Id}).then(res => {
      modalData.value = res
      showInfoModalOpen.value = true
    })
  }
  const closeModal = () => {
    showInfoModalOpen.value = false
  }
</script>
<style lang="scss">
.checkiinformation-show-info-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>
