<template>
  <el-dialog 
    :title="title" 
    :visible.sync="dialogVisible" 
    width="800px" 
    append-to-body 
    @open="handleOpen"
  >
    <el-descriptions :column="2" border>
      <el-descriptions-item label="MAC">
        {{form.mac | dv}}
      </el-descriptions-item>
      <el-descriptions-item label="SN">
        {{form.sn | dv}}
      </el-descriptions-item>
      <el-descriptions-item label="定位">
        <el-link type="primary" size="mini" @click="handleLocation(form)">
          {{form.longitude | dv}},{{form.latitude | dv}}
        </el-link>
      </el-descriptions-item>
      <el-descriptions-item label="消息时间">
        {{form.at | dv}}
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <dict-tag :options="dict.type.device_status" :value="form.status" size="mini"/>
      </el-descriptions-item>
      <el-descriptions-item label="电动车">
        <dict-tag :options="dict.type.device_iot_status" :value="form.iotStatus" size="mini"/>
      </el-descriptions-item>
      <el-descriptions-item label="锁">
        <dict-tag :options="dict.type.device_lock_status" :value="form.lockStatus" size="mini"/>
      </el-descriptions-item>
      <el-descriptions-item label="电门">
        <dict-tag :options="dict.type.device_quality" :value="form.quality" size="mini"/>
      </el-descriptions-item>
      <el-descriptions-item label="电压">
        {{form.voltage | fix2 | dv}} V
      </el-descriptions-item>
      <el-descriptions-item label="信号强度">
        {{form.signal | dv}}
      </el-descriptions-item>
      <el-descriptions-item label="卫星数量" :span="2">
        {{form.satellites | dv}}
      </el-descriptions-item>
      <el-descriptions-item label="消息详情" :span="2">
        {{form.onenetMsg | dv}}
      </el-descriptions-item>
    </el-descriptions>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getLocationLog } from "@/api/bst/locationLog";
import FormCol from "@/components/FormCol/index.vue";

export default {
  name: 'LocationLogViewDialog',
  components: { FormCol },
  dicts: ['device_status', 'device_lock_status', 'device_iot_status', 'device_quality'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      span: 12,
      title: '',
      form: {},
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      }
    }
  },
  methods: {
    handleLocation(row) {
      window.open(`https://ditu.amap.com/regeo?lng=${row.longitude}&lat=${row.latitude}`, '_blank');
    },
    handleOpen() {
      if (this.id == null) {
        this.$message.error("请选择一条数据");
      } else {
        this.getDetail();
        this.title = "日志详情";
      }
    },
    getDetail() {
      getLocationLog(this.id).then(response => {
        this.form = response.data;
      });
    },
    cancel() {
      this.dialogVisible = false;
    }
  }
}
</script>

<style lang="scss" scoped>

</style> 