import DeviceCard from '../DeviceCard.vue'
import VolumeDialog from '../VolumeDialog.vue'

export default {
  props: {
    status: {
      type: String,
      default: ''
    }
  },
  components: {
    DeviceCard,
    VolumeDialog
  },
  computed: {
    groupItems () {
      return []
    },
    list () {
      return [...this.groupItems].sort(this.sort)
    },
    filterList () {
      if (!this.status) {
        return this.list
      }
      if (this.status === 'offline') {
        return this.list.filter(({ onlineStatus }) => onlineStatus !== 1)
      }
      return this.list.filter(({ onlineStatus }) => onlineStatus === 1)
    },
    hasData () {
      return this.filterList.length > 0
    }
  },
  methods: {
    sort (a, b) {
      if (a.onlineStatus === b.onlineStatus) {
        if (!b.lastOnline) {
          return -1
        }
        if (!a.lastOnline) {
          return 1
        }
        return a.lastOnline < b.lastOnline ? 1 : -1
      }
      return a.onlineStatus === 1 ? -1 : 1
    },
    onVolume ({ value, device }) {
      this.$refs.volumeDialog.show(value, device)
    }
  }
}