<template>
  <m-card title="酒店调研报告" class="white">
    <div class="pa-3 box">
      <v-hover
        v-for="(item, index) in items"
        :key="index"
        style="transition: all 0.3s"
        v-slot="{ hover }">
        <v-card
          :class="{ 'elevation-5': hover }"
          height="290"
          class="d-flex flex-column"
          @click="handleDetails(item)"
        >
          <v-card-title>2024 薪酬调研报告</v-card-title>
          <v-card-text class="flex-grow-1">
            <div class="font-weight-light mb-2">
              2024中国酒店业高管薪酬与福利调研报告
            </div>
          </v-card-text>
        </v-card>
      </v-hover>
    </div>
    <m-pagination :total="total"></m-pagination>
    <phone-verify v-model="show" @submit="handleSubmit"></phone-verify>
  </m-card>
</template>

<script>
import MCard from '@/components/MCard'
import PhoneVerify from '@/components/phoneVerify'
import MPagination from '@/components/Pagination'
import { checkVerificationCode, checkQuestionnaireRole } from '@/api/report'
export default {
  name: 'investigation-report',
  components: { MPagination, MCard, PhoneVerify },
  data () {
    return {
      show: false,
      total: 1,
      items: [
        {
          title: '2024中国酒店业高管薪酬与福利调研报告',
          id: '1',
          pay: false
        }
      ],
      url: null
    }
  },
  methods: {
    async handleSubmit (query) {
      try {
        const { data } = await checkVerificationCode(query)
        localStorage.setItem('verifyUUID', data)
        this.$router.push(this.url)
      } catch (error) {
        this.$snackbar.error(error.msg || error)
      }
    },
    async handleDetails (item) {
      this.url = `${this.$route.path}/details/${item.id}`
      // 判断是否有权限再跳转
      try {
        const code = localStorage.getItem('verifyUUID')
        await checkQuestionnaireRole({ code })
        this.$router.push(this.url)
      } catch (error) {
        this.show = true
        // this.$snackbar.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: grid;
  grid-template-columns: repeat(auto-fill, 220px);
  justify-content: space-between;
  gap: 12px;
}
</style>
