<template>
  <div class="container">
    <div class="first_line">
      <img
        :src="item.img_url"
        v-for="item of menuList.slice(0, 2)"
        :key="item.name"
        @click="router.push({ name: item.name, query: { data: item.data } })" />
    </div>
    <div class="first_line">
      <img
        :src="item.img_url"
        v-for="item of menuList.slice(2, 4)"
        :key="item.name"
        @click="router.push({ name: item.name, query: { data: item.data } })" />
    </div>
    <div class="back-btn">
      <CommonButton
        size="default"
        type="info"
        msg="返回"
        @click="router.push('/home')"
        v-if="!start_status && !finish_status" />
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import equipment from '@/assets/image/menu/1.png';
import test1 from '@/assets/image/menu/2.png';
import test3 from '@/assets/image/menu/3.png';
import test4 from '@/assets/image/menu/4.png';
import test5 from '@/assets/image/menu/5.png';
import test6 from '@/assets/image/menu/6.png';
import test7 from '@/assets/image/menu/7.png';
import test8 from '@/assets/image/menu/8.png';
let menuList = [
  {
    name: 'equipment',
    img_url: equipment,
    title: 'O.1正式试验流程',
    data: 1
  },
  {
    name: 'equipment',
    img_url: test1,
    title: '参考标准试验',
    data: 2
  },
  {
    name: 'report',
    img_url: test3,
    title: 'O.1正式试验报表数据',
    data: 1
  },
  {
    name: 'report',
    img_url: test4,
    title: '参考标准试验报表数据',
    data: 2
  }
];

const router = useRouter();
const route = useRoute();
console.log(route.query.data, '123456');
if (route.query.data == 3) {
  menuList = [
    {
      name: 'equipment',
      img_url: test5,
      title: 'O.3正式试验流程',
      data: 3
    },
    {
      name: 'equipment',
      img_url: test6,
      title: '参考标准试验',
      data: 4
    },
    {
      name: 'report',
      img_url: test7,
      title: 'O.3正式试验报表数据',
      data: 3
    },
    {
      name: 'report',
      img_url: test8,
      title: '参考标准试验报表数据',
      data: 4
    }
  ];
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  padding: 8px 13px;
  .first_line {
    height: 111px;
    display: flex;
    justify-content: space-between;
    img {
      width: 295px;
      height: auto;
    }
  }
  .back-btn {
    position: absolute;
    left: 28px;
    bottom: 30px;
  }
}
</style>
