<template>
  <div>
    <PageWrapper dense contentFullHeight contentClass="flex">
      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" listType="equipment"/>
      <BasicTable style="flex: auto" @register="registerTable" class="w-5/6 xl:w-4/5 device-table">
        <template #toolbar>
          <Authority :value="DeviceListAuthEnum.CREATE">
            <a-button type="primary" @click="handleBussinessDrawer('add', null)" v-if="authBtn(role)">
              {{ t('equipment.ledger.createLedgerText') }}
            </a-button>
          </Authority>
        </template>
        <template #status="{ record }">
          <Tag
            :color="
              record.status == SbStatusEnum.SCRAP
                ? 'warning'
                : record.status == SbStatusEnum.NORMAL
                ? 'success'
                : record.status == SbStatusEnum.FAULT
                ? 'error'
                : 'error'
            "
            class="ml-2"
          >
            {{ t(`enum.sbStatus.${record.status}`) }}
          </Tag>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
            {
              label: t('common.viewText'),
              icon: 'ant-design:eye-outlined',
              onClick: handleBussinessDrawer.bind(null, 'view', record),
            },
            {
              label: t('common.editText'),
              icon: 'clarity:note-edit-line',
              onClick: handleBussinessDrawer.bind(null, 'edit', record),
            },
            {
              label: t('common.delText'),
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: t('common.isDelete'),
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
          >
          </TableAction>
        </template>
      </BasicTable>
      <LedgerDrawer @register="registerDrawer" @success="handleSuccess" @reload="handleSuccess"  />
    </PageWrapper>
  </div>
</template>
<script setup lang="ts">
import { reactive} from "vue";
import { PageWrapper } from '/@/components/Page';
import { LedgerDrawer } from "./components/modal/index"
const searchInfo = reactive<Recordable>({});
const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo,'equipment');
import {BasicTable, TableAction, useTable} from "/@/components/Table";
import {OrganizationIdTree, useResetOrganizationTree} from "/@/views/common/organizationIdTree";
import { getLedgerList, deleteLedger } from "/@/api/equipment/ledger"
import {
  columns,
  DeviceListAuthEnum,
  searchFormSchema
} from "/@/views/equipment/ledger/config/ledger.data";
import { SbStatusEnum } from '/@/enums/deviceEnum';

import {useI18n} from "/@/hooks/web/useI18n";
import {authBtn} from "/@/enums/roleEnum";
import {Button, Tag} from "ant-design-vue";
import {Authority} from "/@/components/Authority";
import {getAuthCache} from "/@/utils/auth";
import {USER_INFO_KEY} from "/@/enums/cacheEnum";
import {useMessage} from "/@/hooks/web/useMessage";

import {useDrawer} from "/@/components/Drawer";

// 业务弹窗
const [registerDrawer, { openDrawer }] = useDrawer();
const { t } = useI18n();
const userInfo: any = getAuthCache(USER_INFO_KEY);
const role: string = userInfo.roles[0];

const { createMessage } = useMessage();

const [
  registerTable,
  {
    reload,
    setLoading,
    setSelectedRowKeys,
    getForm,
    getSelectRowKeys,
    setProps,
    getRowSelection,
    clearSelectedRowKeys,
  },
] = useTable({
  title: t('equipment.ledger.ledgerListText'),
  api: getLedgerList,
  columns,
  beforeFetch: (params) => {
    const { deviceProfileId } = params;
    if (!deviceProfileId) return;
    const obj = {
      ...params,
      ...{
        deviceProfileIds: deviceProfileId ? [deviceProfileId] : null,
      },
    };
    delete obj.deviceProfileId;
    return obj;
  },
  formConfig: {
    labelWidth: 140,
    schemas: searchFormSchema,
    resetFunc: resetFn,
  },
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  showIndexColumn: false,
  rowKey: 'id',
  searchInfo: searchInfo,
  clickToRowSelect: false,
  rowClassName: (record) => ((record as any).alarmStatus ? 'device-alarm-badge' : ''),
  actionColumn: {
    width: 200,
    title: t('common.actionText'),
    slots: { customRender: 'action' },
    fixed: 'right',
  },
  rowSelection: {
    type: 'checkbox',
    getCheckboxProps: (record: any) => {},
  },
});


// 业务弹窗
const handleBussinessDrawer = (text, record) => {
  const modalParams = {
    text,
    record,
  };
  openDrawer(true, modalParams);
};


const handleDelete = async (record?: any) => {
  let _id: string = record.id;

  try {
    setLoading(true);
    await deleteLedger({id: _id});
    createMessage.success(t('common.deleteSuccessText'));
    handleReload();
  } catch (error) {
    throw error;
  } finally {
    setLoading(false);
  }
};


function handleReload() {
  setSelectedRowKeys([]);
  handleSuccess();
}


function handleSuccess() {
  reload();
}

function handleSelect(organization) {
  searchInfo.categoryId = organization;
  handleSuccess();
}

</script>

<style scoped lang="less">
.device-table {
  :deep(.ant-form-item-control-input-content) {
    & > div > div {
      width: 100%;
    }
  }
}
</style>

<style lang="less">
.device-status {
  position: relative;

  .device-collect {
    width: 0;
    height: 0;
    border-top: 30px solid #377dff;
    border-right: 30px solid transparent;
  }
}

.device-name-edge {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  position: relative;
}
</style>