<template>
  <div>
    <PageWrapper dense contentFullHeight contentClass="flex">
      <BasicTable
        style="flex: auto"
        @register="registerTable"
        class="w-5/6 xl:w-4/5 position-table"
      >
        <template #toolbar>
          <Authority :value="PositionListAuthEnum.CREATE">
            <a-button
              type="primary"
              @click="handleBussinessDrawer('add', null)"
              v-if="authBtn(role)"
            >
              {{ t('common.createText') }}
            </a-button>
          </Authority>
          <Authority :value="PositionListAuthEnum.DELETE">
            <Popconfirm :title="t('common.deleteConfirmText')" @click="handleDelete()">
              <a-button color="error" :disabled="!isExistOption">
                {{ t('common.batchDeleteText') }}
              </a-button>
            </Popconfirm>
          </Authority>
          <Authority :value="PositionListAuthEnum.ENABLE">
            <a-button
              @click="handleChangeStatus('enable')"
              v-if="authBtn(role)"
              :disabled="!isExistOption"
            >
              {{ t('common.enableText') }}
            </a-button>
          </Authority>
          <Authority :value="PositionListAuthEnum.STOP">
            <a-button
              @click="handleChangeStatus('stop')"
              v-if="authBtn(role)"
              :disabled="!isExistOption"
            >
              {{ t('common.stop') }}
            </a-button>
          </Authority>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              // {
              //   label: t('common.viewText'),
              //   auth: 'api:yt:ledger:get',
              //   icon: 'ant-design:eye-outlined',
              //   onClick: handleBussinessDrawer.bind(null, 'view', record),
              // },
              {
                label: t('common.editText'),
                auth: PositionListAuthEnum.UPDATE,
                icon: 'clarity:note-edit-line',
                onClick: handleBussinessDrawer.bind(null, 'edit', record),
              },
              {
                label: t('common.delText'),
                icon: 'ant-design:delete-outlined',
                auth: PositionListAuthEnum.DELETE,
                color: 'error',
                popConfirm: {
                  title: t('common.isDelete'),
                  confirm: handleDelete.bind(null, record),
                },
              },
              {
                label: t('common.stop'),
                auth: PositionListAuthEnum.STOP,
                icon: 'ant-design:check-circle-outlined',
                onClick: handleChangeStatus.bind(null, 'stop', record),
                ifShow: record.status === 'ENABLE',
              },
              {
                label: t('common.enableText'),
                auth: PositionListAuthEnum.ENABLE,
                icon: 'ant-design:close-circle-outlined',
                ifShow: record.status === 'STOP',
                onClick: handleChangeStatus.bind(null, 'enable', record),
              },
            ]"
          />
        </template>
      </BasicTable>
      <TypeDrawer @register="registerDrawer" @success="handleSuccess" @reload="handleSuccess" />
    </PageWrapper>
  </div>
</template>
<script setup lang="ts">
  import { reactive } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { TypeDrawer } from './components/modal/index';
  const searchInfo = reactive<Recordable>({});
  import { BasicTable, TableAction, useTable } from '/@/components/Table';
  import {
    getEquipmentPositionList,
    deleteEquipmentPosition,
    updateEquipmentPositionStatus,
  } from '/@/api/archive/position';
  import { columns, searchFormSchema, PositionListAuthEnum } from './config/position.data';
  import { useBatchOperation } from '/@/utils/useBatchOperation';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { authBtn } from '/@/enums/roleEnum';
  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, getSelectRowKeys, setSelectedRowKeys, getRowSelection },
  ] = useTable({
    title: t('archive.position.positionListText'),
    api: getEquipmentPositionList,
    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,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'id',
    searchInfo: searchInfo,
    clickToRowSelect: false,
    rowClassName: (record) => ((record as any).alarmStatus ? 'device-alarm-badge' : ''),
    rowSelection: { type: 'checkbox' },
    actionColumn: {
      width: 200,
      title: t('common.actionText'),
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });

  const { isExistOption } = useBatchOperation(getRowSelection, setSelectedRowKeys);

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

  // 删除
  const handleDelete = async (record?: any) => {
    // eslint-disable-next-line no-console
    console.log(record, '这是一条临时调试用的日志');
    let ids: string[] = [];
    if (record) {
      ids = [record.id];
    } else {
      ids = getSelectRowKeys();
    }
    try {
      setLoading(true);
      await deleteEquipmentPosition({ ids });
      createMessage.success(t('common.deleteSuccessText'));
      handleReload();
    } catch (error) {
      throw error;
    } finally {
      setLoading(false);
    }
  };

  // 启用 停用
  const handleChangeStatus = async (type: 'enable' | 'stop', record?: any) => {
    let ids: string[] = [];
    if (record) {
      ids = [record?.id];
    } else {
      ids = getSelectRowKeys();
    }
    if (ids?.length)
      try {
        setLoading(true);
        if (type === 'enable') {
          await updateEquipmentPositionStatus({ ids, status: 'ENABLE' });
        } else {
          await updateEquipmentPositionStatus({ ids, status: 'STOP' });
        }
        createMessage.success(t('common.editSuccessText'));
        handleReload();
      } catch (error) {
        throw error;
      } finally {
        setLoading(false);
      }
  };

  // 重置
  function handleReload() {
    setSelectedRowKeys([]);
    handleSuccess();
  }

  function handleSuccess() {
    reload();
  }
</script>

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

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

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

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