import { $local } from './storage'
import { onMounted } from 'vue'
import { Modal } from '@opentiny/vue'

const bulletins = [
  {
    id: 'version-tip',
    content: `为了避免 @opentiny/vue 的月度版本(minor)升级带来的不确定因素，推荐在您的工程中的 package.json 中依赖包的版本号前使用 ~，
    比如 "@opentiny/vue": "~3.12.0"。`,
    time: '2023-12-04'
  }
]
const bulletinKey = 'openttiny-last-bulletin'
/**
 *  公告通知管理
 * 1、记录历史所有的公告，以备记录，每次只显示第一条公告即可！
 * 2、用户点击确认之后，不再弹出该公告
 */
export function useBulletin() {
  const lastBulletin = bulletins[0]
  if (lastBulletin.id !== $local[bulletinKey]) {
    onMounted(() => {
      Modal.confirm({
        title: '公告',
        message: (
          <div style="font-size:16px;line-height:1.5;">
            <div>尊敬的 TinyVue 用户：</div>
            <p style="text-indent: 2em;" v-html={lastBulletin.content}></p>
            <div style="text-align:right;margin-top:20px">TinyVue 团队</div>
            <div style="text-align:right;">{lastBulletin.time}</div>
          </div>
        ),
        status: null,
        width: '760',
        confirmContent: '我知道了',
        cancelContent: '关闭'
      }).then((res) => {
        if (res === 'confirm') {
          $local[bulletinKey] = lastBulletin.id
        }
      })
    })
  }
}