<template>
  <wrapper
    v-loading="loading"
    class="c-device-config"
    fill
  >
    <div class="l-flex__none c-device-config__header">
      <template v-if="device">
        <div class="l-flex--row has-padding">
          <i
            class="l-flex__none o-icon medium o-icon--back el-icon-arrow-left u-bold u-pointer"
            @click="onBack"
          />
          <auto-text
            class="c-device-config__name u-bold"
            :text="deviceName"
          />
        </div>
        <el-tabs
          v-model="active"
          class="c-tabs padding"
        >
          <el-tab-pane
            v-for="tab in tabs"
            :key="tab.key"
            :label="tab.label"
            :name="tab.key"
          />
        </el-tabs>
      </template>
      <warning
        v-if="!loading && !device"
        @click="getDevice"
      />
    </div>
    <div
      v-if="device"
      class="l-flex--col l-flex__fill has-padding"
    >
      <component
        :is="active"
        :key="active"
        class="l-flex__fill c-device-config__wrapper has-padding u-overflow-y--auto"
        :device="device"
        editable
      />
    </div>
  </wrapper>
</template>

<script>
import { getDevice } from '@/api/device'
import DeviceNormalConfig from './components/DeviceNormalConfig'
import SendingCard from './components/external/SendingCard'
import ReceivingCard from './components/external/ReceivingCard'
import Camera from './components/external/Camera'
import Gateway from './components/external/Gateway'
import DeviceShadow from './components/DeviceShadow'

export default {
  name: 'DeviceSettings',
  components: {
    DeviceNormalConfig,
    SendingCard,
    ReceivingCard,
    Camera,
    Gateway,
    DeviceShadow
  },
  data () {
    return {
      loading: true,
      device: null,
      active: 'DeviceNormalConfig',
      tabs: [
        { key: 'DeviceNormalConfig', label: '基础配置' },
        { key: 'SendingCard', label: '发送控制设备' },
        { key: 'ReceivingCard', label: '接收卡' },
        { key: 'Camera', label: '摄像头' },
        { key: 'Gateway', label: '网关' },
        { key: 'DeviceShadow', label: '影子配置' }
      ]
    }
  },
  computed: {
    deviceId () {
      return this.$route.params.id
    },
    deviceName () {
      return this.device?.name
    }
  },
  watch: {
    deviceId () {
      this.active = 'DeviceNormalConfig'
      this.device = null
      this.getDevice()
    }
  },
  created () {
    this.getDevice()
  },
  methods: {
    getDevice () {
      this.loading = true
      const id = this.deviceId
      getDevice(id).then(({ data }) => {
        if (this.deviceId === id) {
          if (data) {
            this.device = data
          } else {
            this.$message({
              type: 'warning',
              message: '设备不存在'
            })
            this.onBack()
          }
        }
      }).finally(() => {
        if (this.deviceId === id) {
          this.loading = false
        }
      })
    },
    onBack () {
      this.$router.replace({
        name: 'device-management'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-device-config {
  &__header {
    background-color: #fff;
  }

  &__name {
    color: $black;
    font-size: 20px;
    line-height: 1;
  }

  &__wrapper {
    border-radius: $radius;
    background-color: #fff;
  }
}
</style>
