<template>
  <PageWrapper
    title="多页签"
    content="有些时候，可能要操作多页签标题，比如页面特定交互，详情页面区分，该操作仅限于，当前打开过并且显示的标签"
  >
    <el-card
      shadow="never"
      title="多页签操作"
      class="mt-3 proCard"
      size="small"
      :segmented="{ content: 'hard' }"
    >
      <el-space>
        <el-button type="primary" @click="setTabsTitle">更新当前页面标题</el-button>
        <el-button type="primary" plain @click="setTabsTitleSpecific">更新指定页面标题</el-button>
        <el-button type="danger" @click="closeCurrent">关闭当前页</el-button>
      </el-space>
      <el-divider content-position="left">设置多页签状态</el-divider>
      <el-space>
        <el-button type="warning" @click="setTabState('undone')">设置当前页面状态未完成</el-button>
        <el-button type="success" @click="setTabState('done')">设置当前页面状态已完成</el-button>
      </el-space>
    </el-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { onMounted } from 'vue';
  import { useTabs } from '@/hooks/web/useTags';
  import { ElMessage } from 'element-plus';

  const useTagsHooks = useTabs();

  function setTabsTitle() {
    useTagsHooks.setTitle('货品详情：编码-3695');
    ElMessage.success('设置成功');
  }

  function setTabsTitleSpecific() {
    useTagsHooks.setTitle('指定页面标题', { name: '/list/basic-list' });
    ElMessage.success('设置成功');
  }

  function closeCurrent() {
    useTagsHooks.closeCurrent();
  }

  function setTabState(state: string) {
    useTagsHooks.setTabState({
      state,
      dialogOptions: {
        content: '页面尚未提交，是否关闭？',
      },
    });
    const msg =
      state === 'undone'
        ? '设置成功，点击当前页标签关闭按钮，试试效果'
        : '取消成功，当前页标签，可以正常关闭';
    ElMessage.success(msg);
  }

  //如果需要每次进入页面，都自定义，需要在 onMounted 中调用
  onMounted(() => {
    //setTabsTitle();
  });
</script>
