<template>
  <PageWrapper dense contentFullHeight fixedHeight>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <PermissionBtn @btn-event="onBtnClicked" />
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '编辑',
                onClick: () => {
                  viewAccount(record)
                },
              },
              {
                label: '删除',
                color: 'error',
                onClick: () => {
                  handleDelete(record)
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <a-modal
      v-model:open="open"
      :title="modalTitle"
      width="100%"
      wrap-class-name="full-modal"
      :destroyOnClose="true"
      @ok="submit"
    >
      <InsertModal :showInfoData="showInfoData"/>
    </a-modal>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, watch, createVNode } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { columns, searchFormSchema, defaultValue } from './data';
  import { getAppEnvConfig } from '@/utils/env';
  import { PageWrapper } from '@/components/Page';
  import { message, Modal } from 'ant-design-vue';
  import { PageList, Detail, AddOrEdit, Delete } from '@/api/IdleLand'
  import InsertModal from './InsertModal.vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import axios from 'axios';

  const { VITE_GLOB_API_URL } = getAppEnvConfig();

  defineOptions({ name: 'RoleManagement' });
  const showInfoData = ref();
  const modalTitle = ref('')
  const [registerTable, { reload, getForm }] = useTable({
    title: '土地资源',
    api: PageList,
    columns,
    formConfig: {
      labelWidth: 120,
      showAdvancedButton: false,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    showIndexColumn: false,
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    // 搜索
    handleSearchInfoFn(info) {
      return info;
    },
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      // slots: { customRender: 'action' },
    },
  });
  const open = ref<boolean>(false);
  async function onBtnClicked(domId) {
    switch (domId) {
      case 'add':
        modalTitle.value = '新增'
        showInfoData.value = JSON.parse(JSON.stringify(defaultValue))
        open.value = true;
        break;
      case 'export':
        const filters = await getForm();
        const values = filters?.getFieldsValue();
        const fileName = '土地资源表' + new Date().getTime() + '.xls';
        axios({
          method: 'get',
          url: VITE_GLOB_API_URL + '/api/IdleLand/Export',
          params: values,
          headers: {
            'X-Token': localStorage.getItem('X-Token'),
          },
          responseType: 'blob',
        }).then((res) => {
          const elink = document.createElement('a');
          elink.download = fileName;
          elink.style.display = 'none';
          elink.href = URL.createObjectURL(res.data);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href);
          document.body.removeChild(elink);
        });
        break;
      default:
        break;
    }
  }
  const viewAccount = (record) => {
    modalTitle.value = '编辑'
    let id = record.id
    console.log('id',id)
    Detail({ id }).then(res => {
      console.log(res)
      showInfoData.value = res
      open.value = true
    })
  }
  const handleDelete = (record) => {
    Modal.confirm({
      title: '提示',
      icon: createVNode(ExclamationCircleOutlined),
      content: '确定要删除该数据吗',
      onOk() {
        let id = `${record.id}`
        return Delete({id}).then(res => {
            message.success('删除成功')
            reload()
          })
        },
      onCancel() {},
    });
  }
  const submit = () => {
    console.log('showInfoData.value',showInfoData.value)
    AddOrEdit(showInfoData.value).then(res => {
      message.success(`${modalTitle.value}成功`)
      open.value = false
      reload()
      showInfoData.value = JSON.parse(JSON.stringify(defaultValue))
    })
  }
</script>
<style lang="less" scoped>
  .data-preview-container {
    width: 100%;
    height: calc(100% - 0px);
    position: absolute;
    padding: 30px 10px;
    top: 0px;
    left: 0px;
    background: #fff;
  }
  .data-preview-container-option {
    width: 120px;
    height: 40px;
    position: absolute;
    top: 30px;
    right: 0px;
  }
  .data-preview-container-option div {
    width: 40px;
    height: 40px;
    line-height: 40px;
    float: left;
    text-align: center;
    cursor: pointer;
  }
  .full-modal {
    .ant-modal {
      min-width: 100vw;
      top: 0px;
      padding: 0px;
      margin: 0px;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
    }
    .ant-modal-body {
      flex: 1;
    }
  }
  .exportbutton {
    width: 510px;
    height: 60px;
    margin: 5px;
  }
  .search-box {
    background: @component-background;
    margin: 16px;
    padding: 16px;
  }
  ::v-deep .ant-col-24 {
    display: inline-block;
    max-width: fit-content;
    margin-left: 20px;
  }
  .table-box {
    margin: 16px;
  }
  .scope-box {
    display: flex;
    width: 100%;
    .ant-input {
      width: 48% !important;
      max-width: 48%;
      min-width: 48%;
    }
  }
  ::v-deep .ant-select-selection-overflow-item:first-child .ant-select-selection-item {
    width: 80px;
  }
  .handoff {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: 25px;
  }
</style>
