<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <PermissionBtn @btnEvent="buttonClick"></PermissionBtn>
      </template>
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key == 'LngLat'">
          {{ `${record.lng}, ${record.lat}` }}
        </template>
      </template>
    </BasicTable>
    <a-modal v-model:open="addOrUpdateModalOpen" :title="modalType == 'add'? '添加': '编辑'" :maskClosable="false" :footer="null" :destroyOnClose="true" @cancel="modalClose">
      <AddOrUpdateModal :modalType="modalType" :modalData="modalData" @closeAddOrUpdateModal="closeAddOrUpdateModal"/>
    </a-modal>
    <a-modal v-model:open="distributeModalOpen" title="停车场人员分配" :maskClosable="false" :footer="null" :destroyOnClose="true" @cancel="distributeModalOpen=false">
      <DistributeModal :modalData="distributeModalData" @closeDistributeModal="closeDistributeModal"/>
    </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, Delete, Get } from '@/api/illegalconstruction/parkinglot'
  import { columns, searchFormSchema } from './util';
  import AddOrUpdateModal from './AddOrUpdateModal/index.vue'
  import DistributeModal from './DistributeModal/index.vue'

  const addOrUpdateModalOpen = ref(false)
  const distributeModalOpen = ref(false)
  const modalType = ref()
  const modalData = ref({})
  const distributeModalData = 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 buttonClick = async (type) => {
    switch (type) {
      case 'btnAdd':
        modalType.value = 'add'
        addOrUpdateModalOpen.value = true
        break;
      case 'btnEdit':
        let select = getSelectRows()
        if (select.length !== 1) {
          message.warning('请选择一条数据');
          return;
        }
        console.log('getSelectRows()',getSelectRows())
        modalData.value = {...select[0]}
        modalType.value = 'update'
        addOrUpdateModalOpen.value = true
        break;
      case 'btnDelete':
        if (getSelectRows().length !== 1) {
          message.warning('请选择一条数据');
          return;
        }
        Modal.confirm({
          title: '是否确认删除?',
          icon: createVNode(ExclamationCircleOutlined),
          onCancel() {},
          onOk() {
            return Delete(getSelectRows()).then(res => {
              message.success('停车场删除成功')
              reload()
            })
          },
        });
        break;
      case 'distribute':
        let isSelected = getSelectRows()
        if (isSelected.length !== 1) {
          message.warning('请选择一条数据');
          return;
        }
        Get({id: isSelected[0].id}).then(res => {
          distributeModalData.value = {...isSelected[0], userList: res.userids.map(item => item.Id)}
          distributeModalOpen.value = true
        })
        break;
    }
  };
  const closeAddOrUpdateModal = (isReload=false) => {
    addOrUpdateModalOpen.value = false
    modalData.value = {}
    if(isReload){
      reload()
    }
  }
  const closeDistributeModal = () => {
    distributeModalOpen.value = false
  }
  const modalClose = () => {
    modalData.value = {}
  }
</script>
