<template>
  <div class="l-flex--col c-info">
    <div class="l-flex--row has-bottom-padding u-bold">
      <span class="c-sibling-item">设备信息</span>
      <span
        v-if="canEdit"
        class="c-sibling-item c-info__edit u-pointer"
        @click="onEdit"
      >
        <i class="el-icon-edit" />
        编辑
      </span>
    </div>
    <div class="l-flex--row c-info__block">
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">设备名称</div>
        <div class="l-flex__fill c-info__value">{{ device.name }}</div>
      </div>
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">产品</div>
        <div class="l-flex__fill c-info__value">{{ device.productName }}</div>
      </div>
    </div>
    <div class="l-flex--row c-info__block">
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">MAC</div>
        <div class="l-flex__fill c-info__value">{{ device.mac }}</div>
      </div>
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">序列号</div>
        <div class="l-flex__fill c-info__value">{{ device.serialNumber }}</div>
      </div>
    </div>
    <div class="l-flex--row c-info__block">
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">分辨率</div>
        <div class="l-flex__fill c-info__value">{{ device.resolutionRatio }}</div>
      </div>
      <div class="l-flex--row l-flex__fill c-info__item">
        <template v-if="__STAGING__">
          <div class="l-flex__none c-info__title">内容保护</div>
          <div class="l-flex__fill c-info__value primary">
            <content-protection :device="device" />
          </div>
        </template>
        <template v-else>
          <div class="l-flex__none c-info__title">创建时间</div>
          <div class="l-flex__fill c-info__value">{{ device.createTime }}</div>
        </template>
      </div>
    </div>
    <div class="l-flex--row c-info__block">
      <div class="l-flex--row l-flex__fill c-info__item">
        <div class="l-flex__none c-info__title">地址</div>
        <div class="l-flex__fill c-info__value primary">{{ device.address }}</div>
      </div>
    </div>
    <device-map
      v-if="__STAGING__"
      class="l-flex__auto o-baidu-map"
      :device="device"
    />
    <confirm-dialog
      ref="editDialog"
      title="编辑"
      @confirm="onSave"
    >
      <div class="c-grid-form u-align-self--center">
        <span class="c-grid-form__label required">名称：</span>
        <el-input
          v-model.trim="info.name"
          placeholder="最多50个字符"
          maxlength="50"
          clearable
        />
        <span class="c-grid-form__label required">地址：</span>
        <el-input
          v-model.trim="info.address"
          placeholder="最多100个字符"
          maxlength="100"
          clearable
        />
        <span class="c-grid-form__label">经度：</span>
        <div class="l-flex--row c-grid-form__option">
          <el-input
            v-model.trim="info.longitude"
            class="l-flex__fill c-sibling-item"
            placeholder="-180 ~ +180"
            maxlength="13"
            clearable
          />
          <span class="c-sibling-item far c-grid-form__label">纬度：</span>
          <el-input
            v-model.trim="info.latitude"
            class="l-flex__fill c-sibling-item"
            placeholder="-90 ~ +90"
            maxlength="12"
            clearable
          />
        </div>
        <span />
        <a
          class="o-link grid"
          href="http://api.map.baidu.com/lbsapi/getpoint/index.html"
          target="_blank"
        />
      </div>
    </confirm-dialog>
  </div>
</template>

<script>
import { updateDevice } from '@/api/device'
import { Access } from '@/constant'
import {
  validLongitude,
  validLatitude
} from '@/utils/validate'
import DeviceMap from './DeviceMap'
import ContentProtection from './external/ContentProtection'

export default {
  name: 'DeviceInfo',
  components: {
    DeviceMap,
    ContentProtection
  },
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      info: {}
    }
  },
  computed: {
    canEdit () {
      return this.accessSet.has(Access.MANAGE_DEVICE)
    }
  },
  methods: {
    onEdit () {
      const { name, longitude, latitude, address } = this.device
      this.info = { name, longitude, latitude, address }
      this.$refs.editDialog.show()
    },
    onSave (done) {
      if (!this.info.name) {
        this.$message({
          type: 'warning',
          message: '名称不能为空'
        })
        return
      }
      if (!this.info.address) {
        this.$message({
          type: 'warning',
          message: '地址不能为空'
        })
        return
      }
      if (this.info.longitude && !validLongitude(this.info.longitude)) {
        this.$message({
          type: 'warning',
          message: '经度格式错误，-180 ~ +180'
        })
        return
      }
      if (this.info.latitude && !validLatitude(this.info.latitude)) {
        this.$message({
          type: 'warning',
          message: '纬度格式错误，-90 ~ +90'
        })
        return
      }
      if (Object.keys(this.info).every(key => this.info[key] === this.device[key])) {
        done()
        return
      }
      updateDevice({
        id: this.device.id,
        ...this.info
      }).then(() => {
        done()
        Object.assign(this.device, this.info)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.o-baidu-map {
  min-height: 300px;
  max-height: 600px;
}
</style>
