import { ref, watch, computed } from "vue"
import { createStore } from 'vuex'
import penUrl from '@/assets/images/pen.png'
import knifeUrl from '@/assets/images/knife.png'
import paintUrl from '@/assets/images/paint.png'
import rollerUrl from '@/assets/images/roller.png'
import mushroomUrl from '@/assets/images/mushroom.png'
import copyingPaperUrl from '@/assets/images/copying-paper.png'
import rubberBoardUrl from '@/assets/images/rubber-board.png'
import engravingPaperUrl from '@/assets/images/engraving-paper.png'


export const toolList = ref([
  {
    name: '笔',
    selected: false,
    url: penUrl,
  },
  {
    name: '刻刀',
    selected: false,
    url: knifeUrl,
  },
  {
    name: '颜料',
    selected: false,
    url: paintUrl,
  },
  {
    name: '滚筒',
    selected: false,
    url: rollerUrl,
  },
  {
    name: '木蘑菇',
    selected: false,
    url: mushroomUrl,
  },
  {
    name: '复写纸',
    selected: false,
    url: copyingPaperUrl,
  },
  {
    name: '胶版',
    selected: false,
    url: rubberBoardUrl,
  },
  {
    name: '版画纸',
    selected: false,
    url: engravingPaperUrl,
  },
])
export const selectedToolNum = computed(() => {
  return toolList.value.filter((item) => {
    return item.selected
  }).length
})

export const workState = ref('init') // init, working, done

export const toastTxt = ref('ksfsdfl')
export const isShowToast = ref(false)
export function showToast(txt) {
  toastTxt.value = txt
  isShowToast.value = true
  setTimeout(() => {
    isShowToast.value = false
  }, 2000)
}

export default createStore({
  state: {
    usingChinese: true,
  },
  getters: {
  },
  mutations: {
    setUsingChinese(state, value) {
      state.usingChinese = value
    },
  },
  actions: {
  },
  modules: {
  }
})