<template>
  <div class="info_window">
    <div class="window_content">
      <template v-if="windowInfo.deviceCategory == 'room'">
        <div class="content_header">
          <span>{{ windowInfo.room }}</span>
          <span style="font-size: 12px"
            >({{ windowInfo.areaCode }}/{{ windowInfo.floor }}楼)</span
          >
        </div>
        <div class="content_item">
          <span class="item_label">建筑面积：</span>
          <span class="item_value">{{ windowInfo.area }}100</span>
        </div>
        <div class="content_item">
          <span class="item_label">租赁状态：</span>
          <span class="item_value">{{
            windowInfo.status | status_filter
          }}</span>
        </div>
        <div class="content_item">
          <span class="item_label">租客名称：</span>
          <span class="item_value">{{ windowInfo.name }}</span>
        </div>
        <div class="content_item">
          <span class="item_label">租期：</span>
          <span class="item_value">{{ windowInfo.date }}</span>
        </div>
      </template>

      <template v-if="windowInfo.deviceCategory == 'AirConditioner'">
        <div class="content_header header_bg">
          <span
            @click="handleTab(0)"
            style="pointer-events: all; cursor: pointer"
            :class="{ activeTab: currIndex == 0 }"
            >设备信息</span
          >
          <span
            @click="handleTab(1)"
            style="pointer-events: all; cursor: pointer"
            :class="{ activeTab: currIndex == 1 }"
            >报警详情</span
          >
        </div>
        <template v-if="currIndex == 0">
          <div class="content_item">
            <span class="item_label">设备编号：</span>
            <span class="item_value">{{ windowInfo.deviceNo }}</span>
          </div>
          <div class="content_item">
            <span class="item_label">设备名称：</span>
            <span class="item_value">{{ windowInfo.deviceName }}</span>
          </div>
          <div class="content_item">
            <span class="item_label">设备类型：</span>
            <span class="item_value">{{
              windowInfo.deviceCategory | deviceCategory_filter
            }}</span>
          </div>
          <div class="content_item">
            <span class="item_label">设备状态：</span>
            <span class="item_value">{{ windowInfo.deviceStatus }}</span>
          </div>
        </template>
        <template v-if="currIndex == 1">
          <div
            class="content_item"
            v-for="(item, index) in windowInfo.list"
            :key="item + '_' + index"
          >
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.content"
              placement="top"
            >
              <span class="item_value"
                >[{{ item.alertTime }}]{{ item.content }}</span
              >
            </el-tooltip>
          </div>
        </template>
      </template>
      <template
        v-if="
          windowInfo.deviceCategory == 'WaterMeter' ||
          windowInfo.deviceCategory == 'Ammeter'
        "
      >
        <div class="content_header header_bg">
          <span
            @click="handleTab(0)"
            style="pointer-events: all; cursor: pointer"
            :class="{ activeTab: currIndex == 0 }"
            >设备信息</span
          >
          <span
            @click="handleTab(1)"
            style="pointer-events: all; cursor: pointer"
            :class="{ activeTab: currIndex == 1 }"
            >抄表记录</span
          >
        </div>
        <template v-if="currIndex == 0">
          <div class="content_item">
            <span class="item_label">设备编号：</span>
            <span class="item_value">{{ windowInfo.deviceNo }}</span>
          </div>
          <div class="content_item">
            <span class="item_label">设备名称：</span>
            <span class="item_value">{{ windowInfo.deviceName }}</span>
          </div>
          <div class="content_item">
            <span class="item_label">设备类型：</span>
            <span class="item_value">{{
              windowInfo.deviceCategory | deviceCategory_filter
            }}</span>
          </div>
          <div class="content_item">
            <span class="item_label">设备状态：</span>
            <span class="item_value">{{ windowInfo.deviceStatus }}</span>
          </div>
        </template>
        <template v-if="currIndex == 1">
          <table>
            <thead>
              <tr>
                <th style="flex: 1">抄表时间</th>
                <th style="width: 100px; flex: unset">抄表度数</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item, index) in windowInfo.tableData"
                :key="item + '_' + index"
              >
                <td style="flex: 1">{{ item.lastMetereadingDate }}</td>
                <template v-if="windowInfo.deviceCategory == 'WaterMeter'">
                  <td style="width: 100px; flex: unset">
                    {{ item.lastMeterreadingData | waterMeter_filter }}
                  </td>
                </template>
                <template v-if="windowInfo.deviceCategory == 'Ammeter'">
                  <td style="width: 100px; flex: unset">
                    {{ item.lastMeterreadingData | amMeter_filter }}
                  </td>
                </template>
              </tr>
            </tbody>
          </table>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import { isEmpty } from "@/utils/index.js";
export default {
  data() {
    return {
      currIndex: 0,
      windowInfo: {},
    };
  },
  filters: {
    deviceCategory_filter(val) {
      if (!val) {
        return "--";
      }
      if (val == "AirConditioner") {
        return "空调";
      }
      if (val == "Ammeter") {
        return "电表";
      }
      if (val == "WaterMeter") {
        return "水表";
      }
    },
    waterMeter_filter(val) {
      if (isEmpty(val)) {
        return "--";
      } else {
        return val + "kwh";
      }
    },
    amMeter_filter(val) {
      if (isEmpty(val)) {
        return "--";
      } else {
        return val + "m³";
      }
    },
  },
  mounted() {
    this.windowInfo = JSON.parse(this.getUrlParam("windowInfo"));
  },
  methods: {
    getUrlParam(name) {
      var result = "";
      var url = window.location.href;
      if (url.indexOf("?") > -1) {
        var param = url.substring(url.indexOf("?") + 1);
        name += "=";
        if (param.indexOf(name) > -1) {
          var r = param.substr(param.indexOf(name) + name.length);
          if (r.indexOf("&") !== -1) {
            r = r.substring(0, r.indexOf("&"));
          }
          result = r;
        }
      }
      return decodeURIComponent(result);
    },
    handleTab(index) {
      this.currIndex = index;
    },
  },
};
</script>
<style lang="scss" scoped>
.info_window {
  width: 100%;
  height: 100vh;
  background-image: url("../../../../../assets/img/diva/info-window.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
  .window_content {
    height: 100%;
    width: 100%;
    padding: 20px 24px;
    .content_header {
      display: flex;
      align-items: center;
      margin: 0 0 10px 0;

      span {
        height: 22px;
        font-size: 16px;
        font-weight: 400;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #02cfff;
        line-height: 22px;
        pointer-events: all;
        cursor: pointer;
      }
    }
    .header_bg {
      position: relative;
      margin: 0 0 24px 0;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 20px;
        width: 100%;
        height: 5px;
        background-image: url("../../../../../assets/img/diva/info-window-line.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      span {
        height: 18px;
        font-size: 12px;
        font-weight: 400;
        font-family: PingFangSC-Regular, PingFang SC;
        line-height: 18px;
        color: #ffffff;
        flex: 1;
      }
      .activeTab {
        color: #02cfff;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 22px;
          width: 54px;
          letter-spacing: 1px;
          border: 1px solid #02cfff;
        }
      }
    }
    table {
      width: 100%;
      display: block;
      height: calc(100% - 42px);
      overflow: hidden;
      thead {
        width: 100%;
        display: flex;
        tr {
          width: 100%;
          display: flex;
          margin: 0 0 4px 0;
          th {
            height: 18px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #cecece;
            line-height: 18px;
            text-align: left;
          }
        }
      }
      tbody {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: calc(100% - 26px);
        overflow-y: scroll;
        pointer-events: all;
        cursor: pointer;
        tr {
          width: 100%;
          display: flex;
          margin: 0 0 4px 0;
          td {
            height: 18px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 18px;
            text-align: left;
          }
        }
        &::-webkit-scrollbar {
          width: 3px;
          background-color: rgba(255, 255, 255, 0.1);
        }
        &::-webkit-scrollbar-thumb {
          width: 3px;
          border-radius: 2px;
          background-color: rgba(255, 255, 255, 0.3);
        }
      }
    }
    .content_item {
      display: flex;
      align-items: center;
      width: 100%;
      margin: 0 0 6px 0;
      pointer-events: all;
      .item_label {
        width: 60px;
        text-align: justify;
        text-justify: distribute-all-lines; // 这行必加，兼容ie浏览器
        text-align-last: justify;
      }
      .item_value {
        flex: 1;
        overflow: hidden; /*内容超出后隐藏*/
        text-overflow: ellipsis; /* 超出内容显示为省略号 */
        white-space: nowrap; /* 文本不进行换行 */
      }
      span {
        height: 18px;
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        line-height: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
      }
      &:nth-last-child(1) {
        margin: 0;
      }
    }
  }
}
</style>
