<template>
  <div class="p-style">
    <BasicTable
      :rowSelection="{ type: 'checkbox' }"
      :clickToRowSelect="false"
      @register="registerTable"
    >
      <template #toolbar>
        <div class="p-column">
          <div class="p-content">
            <a-alert v-if="!isShowBtn" style="width: 511px" type="info" show-icon>
              <template #message>
                <span
                  >当前展示的是已发布到线上的功能定义，如需修改，请点击
                  <span
                    @click="handleEditPhysicalModel"
                    class="ml-2"
                    style="color: #409eff; cursor: pointer"
                    size="small"
                    >“编辑物模型”</span
                  ></span
                >
              </template>
            </a-alert>
          </div>
          <div style="height: 20px"></div>
          <div class="p-bottom">
            <div>
              <Authority value="">
                <div style="display: flex">
                  <a-button
                    v-if="isShowBtn"
                    style="margin-left: -20px"
                    type="primary"
                    @click="handleCreateOrEdit(null)"
                  >
                    新增物模型
                  </a-button>
                  <a-button
                    :style="[isShowBtn ? { left: 0 + 'px' } : { left: -29 + 'px' }]"
                    class="ml-2"
                    type="primary"
                    @click="handleOpenTsl"
                  >
                    物模型TSL
                  </a-button>
                </div>
              </Authority>
            </div>
            <div>
              <Authority value="">
                <div style="display: flex">
                  <Popconfirm
                    title="是否需要发布上线？"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="handleEmit"
                  >
                    <a-button v-if="isShowBtn" type="primary"> 发布上线 </a-button>
                  </Popconfirm>
                  <a-button
                    style="background: #d7d7d7"
                    v-if="isShowBtn"
                    class="ml-2"
                    type="text"
                    @click="handleReturn"
                  >
                    返回
                  </a-button>
                  <Popconfirm
                    title="您确定要批量删除数据"
                    ok-text="确定"
                    cancel-text="取消"
                    @confirm="handleDeleteOrBatchDelete(null)"
                  >
                    <a-button
                      style="display: none"
                      type="primary"
                      color="error"
                      :disabled="hasBatchDelete"
                    >
                      批量删除
                    </a-button>
                  </Popconfirm>
                </div>
              </Authority>
            </div>
          </div>
        </div>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '查看',
              icon: 'ant-design:eye-outlined',
              onClick: handleViewDetail.bind(null, record),
              ifShow: isShowBtn ? false : true,
            },
            {
              label: '编辑',
              icon: 'clarity:note-edit-line',
              auth: '',
              onClick: handleCreateOrEdit.bind(null, record),
              ifShow: !isShowBtn ? false : true,
            },
            {
              label: '删除',
              icon: 'ant-design:delete-outlined',
              auth: '',
              color: 'error',
              ifShow: !isShowBtn ? false : true,
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDeleteOrBatchDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <PhysicalModelModal @register="registerModal" @success="handleSuccess" />
    <PhysicalModelTsl @register="registerModalTsl" />
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { physicalColumn } from '../device.profile.data';
  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  import { deleteReportManage } from '/@/api/report/reportManager';
  import { Authority } from '/@/components/Authority';
  // import { mockData } from '/@/api/device/deviceConfigApi';
  import PhysicalModelModal from './cpns/physical/PhysicalModelModal.vue';
  import PhysicalModelTsl from './cpns/physical/PhysicalModelTsl.vue';
  import { Popconfirm } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { mockData } from '../device.profile.data';

  defineEmits(['register']);
  const { createMessage } = useMessage();
  const isShowBtn = ref(false);
  const [registerModal, { openModal }] = useModal();
  const [registerModalTsl, { openModal: openModalTsl }] = useModal();

  const [registerTable, { reload, setProps }] = useTable({
    // api: deviceConfigGetQuery,
    api: mockData,
    columns: physicalColumn,
    showIndexColumn: false,
    clickToRowSelect: false,
    useSearchForm: false,
    // rowKey: 'id',
    showTableSetting: true,
    bordered: true,
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  });
  // 刷新
  const handleSuccess = () => {
    reload();
  };

  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
    deleteReportManage,
    handleSuccess,
    setProps
  );
  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
    // Demo:status为1的选择框禁用
    if (record.status === 1) {
      return { disabled: true };
    } else {
      return { disabled: false };
    }
  };
  const handleViewDetail = (record: Recordable | null) => {
    if (record) {
      openModal(true, {
        isUpdate: true,
        record,
        isView: true,
        isText: 'view',
      });
    }
  };
  // 新增或编辑
  const handleCreateOrEdit = (record: Recordable | null) => {
    if (record) {
      openModal(true, {
        isUpdate: false,
        record,
        isView: false,
        isText: 'edit',
      });
    } else {
      openModal(true, {
        isUpdate: true,
        isView: false,
        isText: 'add',
      });
    }
  };
  const handleOpenTsl = () => {
    openModalTsl(true, {
      isUpdate: true,
    });
  };
  const handleEditPhysicalModel = () => (isShowBtn.value = true);

  const handleReturn = () => (isShowBtn.value = false);
  const handleEmit = () => {
    createMessage.success('发布成功');
  };

  defineExpose({});
</script>
<style lang="less" scoped>
  @import url('./common/PhysicalModelManagementStep.less');

  :deep(.ant-table-body) {
    height: auto !important;
  }

  :deep(.ant-divider) {
    margin-top: 58px;
  }

  :deep(.table-settings) {
    margin-top: 58px;
  }
</style>