<!-- 按钮集合 -->
<script lang="ts" setup name="ButtonSet">
import { ElMessage } from 'element-plus'
const $router = useRouter()
const buttons = [
  {
    id: '1',
    name: '我的任务',
    path: '/taskMeasure/myTaskList',
    color: '#828af5',
  },
  {
    id: '2',
    name: '检定项分类管理',
    path: '/businessMeasure/classification',
    color: '#3d7eff',
  },
  {
    id: '3',
    name: '检定数据管理',
    path: '/taskMeasure/measureDataList',
    color: '#1aa034',
  },
  {
    id: '4',
    name: '标准装置管理',
    path: '/standard/bookInfoList',
    color: '#d284fd',
  },
  {
    id: '5',
    name: '核查数据管理',
    path: '/standard/checkDataList',
    color: '#e63e31',
  },
  {
    id: '6',
    name: '任务单管理',
    path: '/manager/orderList',
    color: '#d3a16a',
  },
  {
    id: '7',
    name: '现行测试校准检定方法',
    path: '/technology/methodList',
    color: '#002f8e',
  },
  {
    id: '8',
    name: '体系文件',
    path: '/system/sysDocList',
    color: '#f56c6c',
  },
  {
    id: '9',
    name: '周维护',
    path: '/resume/weekList',
    color: '#002756',
  },
  {
    id: '10',
    name: '到期提醒',
    path: '/baseInfo/remind',
    color: '#6f759a',
  },
]

const changePage = (path: string) => {
  $router.push(path)
}
</script>

<template>
  <div style="display: flex;gap: 10px;flex-wrap: wrap;justify-content: space-around;">
    <div v-for="item in buttons" :key="item.id" class="buttonSet-button" :style="`background: ${item.color}`" @click="changePage(item.path)">
      {{ item.name }}
    </div>
  </div>
</template>

<style lang="scss" scoped>
.buttonSet-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  border-radius: 8px;
  height: 40px;
  color: #fff;
  font-size: 14px;
  padding: 0 6px;
  box-sizing: border-box;

  &:hover {
    cursor: pointer;
  }
}
</style>