<template>
  <section class="app-container">
    <el-row>
      <el-col :span="8">
        <span>设备名称：{{info.deviceName }}</span>
        <el-divider class="mt10 mb10"></el-divider>
        <span>设备型号：{{info.deviceModel }}</span>
        <el-divider class="mt10 mb10"></el-divider>
        <span>设备编码：{{info.deviceCode }}</span>
        <el-divider class="mt10 mb10"></el-divider>
        <span>设备类型：{{ info.deviceType ? this.deviceTypeList.find(v=> v.value == info.deviceType).label : '' }}</span>
        <el-divider class="mt10 mb10"></el-divider>
        <span>省：{{ info.proName }}</span>
        <el-divider class="mt10 mb10"></el-divider>
        <span>市：{{ info.cityName }}</span>
        <el-divider class="mt10 mb10"></el-divider>
        <span>区：{{ info.disName }}</span>
        <el-divider class="mt10 mb10"></el-divider>
        <span>备注：{{ info.remark || '无' }}</span>
        <el-divider class="mt10 mb10"></el-divider>
        <span>修改时间：{{ info.updateTime | formatDate }}</span>
        <el-divider class="mt10 mb10"></el-divider>
        <span>创建时间：{{ info.createTime | formatDate }}</span>
      </el-col>
      <el-col :offset="3" :span="10" class="p20">
        <el-scrollbar style="height: 550px;" wrap-class="scrollbar-wrapper">
          <div v-for="v in signal" :key="v.id" style="width: 80%">
            <el-row class="pb20">
              <el-col :span="12">
                <div class="pb10">{{v.keyCN}}：{{v.valueCN}}</div>
              </el-col>
              <el-col :span="12" class="tr">{{signalUpdateTime | formatDate }}</el-col>
            </el-row>
          </div>
        </el-scrollbar>

      </el-col>
    </el-row>
  </section>
</template>

<script>
import {
  info,
} from "@/api/hardware/device";
import { getProvinceByCode } from "@/api/hardware/province";
export default {
  name: "DeviceDetail",
  data () {
    return {
      id: '',
      info: {},
      signal: [],
      signalUpdateTime: '',
      deviceTypeList: [
        { 'label': '锐能设备', 'value': 'rn', },
        { 'label': '铁塔设备', 'value': 'tt', },
      ],
    };
  },
  created () {
    let { id } = this.$route.query;
    if (!id) {
      this.msgError('无设备ID');
      this.$router.go(-1);
      return;
    }
    this.id = id;
    this.getDetail()
  },
  methods: {
    getDetail () {
      info(this.id).then(async ({ code, msg, info }) => {
        if (200 == code) {
          info.proName = await this.getProvinceByCode(info.proCode);
          info.cityName = await this.getProvinceByCode(info.cityCode);
          info.disName = await this.getProvinceByCode(info.disCode);
          this.info = info;
          if (info.deviceSignal) {
            let deviceSignal = JSON.parse(info.deviceSignal.signalJsonTurn);
            this.signal = deviceSignal.signal;
            this.signalUpdateTime = info.deviceSignal.updateTime;
          }
        } else {
          this.msgError(msg);
        }
      })
    },
    getProvinceByCode (code) {
      return new Promise((resolve, reject) => {
        getProvinceByCode(code).then(({ code, msg, data }) => {
          if (code == 200) {
            resolve(data.cityName);
          } else {
            this.$message.error(msg);
            reject({ msg, code })
          }
        }).catch(error => {
          reject(error)
        })
      })
    },
  }

}
</script>

<style>
</style>