<!-- 按钮集合 -->
<script lang="ts" setup name="ButtonSet">
import { ElMessage } from 'element-plus'
import useUserStore from '@/store/modules/user'

const user = useUserStore() // 用户信息
const showEmpty = ref(false)
const emptyDisc = ref('') // 描述文字
const isAdministrator = ref('0') // 是不是超级管理员
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)
}

onMounted(() => {
  isAdministrator.value = user.roleTips.includes('administrator') ? '1' : '0' // 是否是超级管理员
  console.log('是否是超级管理员', user.roleTips, isAdministrator.value)
  if (isAdministrator.value === '0' && !user.bizLabCode) { // 不是超级管理员、没有实验室
    emptyDisc.value = '此用户非超级管理员且无实验室，无权限查看'
    showEmpty.value = true
  }
  if (isAdministrator.value === '0' && user.bizLabCode && !user.groupNo) { // 有实验室但没有组
    emptyDisc.value = '此用户非超级管理员且无部门，无权限查看'
    showEmpty.value = true
  }
})
</script>

<template>
  <el-empty v-show="showEmpty" style="height: 100%;" :image-size="50" :description="emptyDisc" />
  <div v-show="!showEmpty" style="display: flex;gap: 10px;flex-wrap: wrap;justify-content: space-around;">
    <div v-for="item in buttons" :key="item.id" style="flex: 0 0 25%;" 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: 30px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 0 6px;
  box-sizing: border-box;

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