import { mapGetters } from 'vuex'
import { chunk } from 'lodash'

export default {
  filters: {
    snCodeRender(code) {
      return code.replace(/^(\w{2})\w+(\w{4})$/, '$1******$2')
    },
  },
  data() {
    return {
      showAuthCard: false,
      bannerList: [],
      productInfo: null,
    }
  },
  watch: {
    isPc() {
      this.$nextTick(() => {
        window.location.reload()
      })
    },
  },
  computed: {
    ...mapGetters(['isPc']),
    // 参数列表
    paramListRender() {
      if (!this.productInfo) return []
      // return this.isPc
      //   ? chunk(this.productInfo.paramList, 2)
      //   : chunk(this.productInfo.paramList, 1)
      return chunk(this.productInfo.paramList, 1)
    },
    // 机构logo
    brandLogoImage() {
      if (!this.productInfo) return ''
      return this.productInfo.brandLogo
    },
    // 授权牌
    authCardImage() {
      if (!this.productInfo) return ''
      return this.productInfo.appletsCertificateImage
    },
    // 机构logo列表
    clubLogo() {
      if (!this.productInfo) return []
      return this.productInfo.clubList.map((item) => item.logo)
    },
  },
  created() {
    this.fetchProductDetails()
  },
  methods: {
    // 显示授权牌
    onShowAuthCard() {
      this.showAuthCard = true
    },

    // 隐藏授权牌
    onHideAuthCard() {
      this.showAuthCard = false
    },

    // 获取设备详情
    async fetchProductDetails() {
      const productId = this.$route.query.id
      try {
        const { data } = await this.$http.api.fetchProductDetails({
          productId: productId,
        })
        this.productInfo = data
      } catch (error) {
        console.log(error)
      }
    },
  },
}