/**
 * 移动端混入
 */
import { mapGetters } from 'vuex'
import { isMobile, isIOS, isAndroid, getDeviceType } from '@/utils/mobile'

export default {
  computed: {
    ...mapGetters(['device']),
    $isMobile() {
      return this.device === 'mobile' || isMobile()
    },
    $isIOS() {
      return isIOS()
    },
    $isAndroid() {
      return isAndroid()
    },
    $deviceType() {
      return getDeviceType()
    },
    $isTablet() {
      return window.innerWidth >= 768 && window.innerWidth < 1024
    },
    $isPhone() {
      return window.innerWidth < 768
    }
  },
  methods: {
    /**
     * 移动端提示
     */
    $mobileToast(message, type = 'info') {
      if (this.$isMobile) {
        this.$message({
          message,
          type,
          duration: 2000,
          showClose: false
        })
      } else {
        this.$message({
          message,
          type
        })
      }
    },
    /**
     * 移动端确认对话框
     */
    $mobileConfirm(message, title = '提示', options = {}) {
      return this.$confirm(message, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        ...options
      })
    },
    /**
     * 移动端表格列过滤
     */
    $filterMobileColumns(columns) {
      if (this.$isMobile) {
        // 移动端只显示重要列
        return columns.filter(col => {
          if (col.mobile === false) return false
          if (col.mobile === true) return true
          // 默认显示前5列
          return columns.indexOf(col) < 5
        })
      }
      return columns
    },
    /**
     * 格式化移动端显示值
     */
    $formatMobileValue(value, column) {
      if (value === null || value === undefined || value === '') {
        return '-'
      }
      if (column && column.formatter) {
        return column.formatter(null, column, value)
      }
      if (typeof value === 'object') {
        return JSON.stringify(value)
      }
      return String(value)
    }
  }
}