<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <!-- <PermissionBtn @btnEvent="buttonClick"></PermissionBtn> -->
         <a-button type="primary" @click="buttonClick('audit')">审核</a-button>
      </template>
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.key == 'Status'">
          {{ getLabel('Status', text) }}
        </template>
      </template>
    </BasicTable>
    <a-modal width="100%" wrap-class-name="getcar-show-info-modal" v-model:open="showInfoModalOpen" title="提车审核" :maskClosable="false" :footer="null" :destroyOnClose="true" @cancel="modalClose">
      <ShowInfoModal :modalType="modalType" :modalData="modalData" :carTypeOptions="carTypeOptions" @closeModal="closeModal"/>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive, watch, createVNode, unref } from 'vue';
  import { Modal, message } from 'ant-design-vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { LoadAllPage, Get } from '@/api/illegalconstruction/getcar'
  import { columns, searchFormSchema, statusOptions, carTypeOptions } from './util';
  import ShowInfoModal from './ShowInfoModal/index.vue'

  const showInfoModalOpen  = ref(false)
  const modalType = ref()
  const modalData = ref({})

  // 表格
  const [registerTable, { reload, getSelectRows, getPaginationRef }] = 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;
    },
  });
  const getLabel = (type, value) => {
    let result: any[] = [];
    let label = '';
    switch (type) {
      case 'Status':
        result = statusOptions;
        break;
    }
    result.forEach((item) => {
      if (item.value == value) {
        label = item.label;
      }
    });
    return label;
  };
  // 按键分类
  const buttonClick = async (type) => {
    switch (type) {
      case 'audit':
      let select = getSelectRows()
      if (select.length !== 1) {
        message.warning('请选择一条数据');
        return;
      }
      modalType.value = 'process'
      Get({id: select[0].Id}).then(res => {
        modalData.value = res
        showInfoModalOpen.value = true
      })
      break;
    }
  };
  const closeModal = (isReload=false) => {
    showInfoModalOpen.value = false
    modalData.value = {}
    if(isReload){
      reload()
    }
  }
  const modalClose = () => {
    modalData.value = {}
  }
</script>
<style lang="scss">
.getcar-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>
