<template>
  <div
    class="project-detail-v2"
    id="project-detail-v2-id"
    ref="project-detail-v2-id"
    :style="{
      transformOrigin: 'center top',
      transform: `scale(${scalseNumX}, ${scalseNumY})`,
      opacity: 1,
      transition: `all 0.5s ease 0s`,
    }"
  >
    <div :class="isFoldRight ? 'block-lift block-right-fold' : 'block-lift'">
      <div class="container-title">
        <div
          class="title-left"
          v-for="(item, idx) in projectList"
          :key="idx"
          v-show="item.projectId === infoData.projectId"
        >
          <span>{{ item.projectName }}</span>
          <i
            class="el-icon-arrow-left icon-c but-icon"
            @click="handlePrev(idx)"
          ></i>
          <i
            class="el-icon-arrow-right icon-c but-icon"
            @click="handleNext(idx)"
          ></i>
        </div>
        <div class="title-but">
          <div class="but-home" @click="handleLinkToTable">
            <i class="el-icon-d-arrow-left icon-c"></i>
            <span class="but-title">返回列表</span>
          </div>
          <div class="but-tz" @click="handleFoldRight">
            <i class="el-icon-back icon-c"></i>
            <i class="el-icon-right icon-c"></i>
          </div>
        </div>
      </div>
      <div class="container-info">
        <div class="info-left">
          <el-descriptions class="margin-top" title="" :column="2">
            <el-descriptions-item label="行业类型：">{{
              statusFormat(infoData)
            }}</el-descriptions-item>
            <el-descriptions-item label="联系人1：">
              {{ infoData["contacts1"] || "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="联系人2：">
              {{ infoData["contacts2"] || "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="联系人3：">
              {{ infoData["contacts3"] || "--" }}
            </el-descriptions-item>
            <el-descriptions-item label="项目地址：">
              <div class="e-descriptions-address">
                <span class="e-address-span" :title="infoData.projectAddress">
                  {{ infoData.projectAddress }}
                </span>
                <i
                  class="el-icon-map-location e-i-custom"
                  @click="mapClick"
                ></i>
                <el-popover
                  placement="bottom"
                  title="项目地址坐标"
                  width="1080"
                  trigger="manual"
                  v-model="visible"
                  style="top: 30px; left: -85%; position: relative"
                >
                  <!-- 地图模块选择和设置 -->
                  <slot>
                    <el-row>
                      <el-col :span="10">
                        <span>经度：{{ mapForm.lng }}</span>
                      </el-col>
                      <el-col :span="10">
                        <span>纬度：{{ mapForm.lat }}</span>
                      </el-col>
                      <!-- <el-col :span="10">
                        <span>地址：{{ mapForm.address }}</span>
                      </el-col> -->
                    </el-row>

                    <shop-location
                      v-if="visible === true"
                      style="height: 450px; margin-top: 10px"
                      :mapCenter="mapCenter"
                      :draggable="false"
                      @mapEvent="mapEvent"
                      :zoom="zoom"
                    />

                    <div
                      style="
                        width: 100%;
                        height: 35px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        margin-top: 5px;
                      "
                    >
                      <el-button
                        type="primary"
                        size="mini"
                        @click="visible = false"
                        >确 定</el-button
                      >
                    </div>
                  </slot>
                </el-popover>
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="info-divider"></div>
        <div class="info-right">
          <div>
            <e-census-cards
              :propList="censusCardList"
              :result="projectStatistics"
            />
          </div>
        </div>
      </div>
      <div class="container-main">
        <e-nav-menu
          v-model="activeType"
          :activeList="activeList"
          @eventShrink="
            (data) => {
              isShrink = data ? true : false;
            }
          "
          @input="
            (data) => {
              activeName = data['template'];
              activeType = data['key'];
            }
          "
        />
        <div
          class="main-block"
          :style="isShrink ? 'width: 100%;' : 'width: calc(100% - 150px);'"
        >
          <component
            :is="activeName"
            :projectInfo="infoData"
            :projectTypeOptions="projectTypeOptions"
            :sourceId="stateSourceId"
            :tempType="activeType"
            :isShrink="isShrink"
            :isFoldRight="isFoldRight"
          ></component>
        </div>
      </div>
    </div>
    <div class="block-right" v-if="!isFoldRight">
      <e-simple-card title="最近2 天警情同比" class="today-ratio-card">
        <template slot="cardBody">
          <e-today-ratio
            v-if="!isFoldRight"
            :result="resultInfo['warningAnalysisStatisticsVo']"
          />
        </template>
      </e-simple-card>

      <e-simple-card title="类型分布统计" class="type-census-card">
        <template slot="cardBody">
          <e-type-census
            v-if="!isFoldRight"
            :result="resultInfo['alarmCategoriesList'] || []"
          />
        </template>
      </e-simple-card>

      <e-simple-card title="报警预警趋势" class="trend-census-card">
        <template slot="cardBody">
          <e-trend-census
            v-if="!isFoldRight"
            :result="resultInfo['alarmChartDataVo'] || []"
          />
        </template>
      </e-simple-card>
    </div>
  </div>
</template>
<script>
import { getProject, listProject } from "@/api/iot/project";
import { statProject } from "@/api/iot/project_new";
import { getWarningAnalysis } from "@/api/app";
import Cookies from "js-cookie";
import ECensusCards from "./ECensusCards";
import ElDescriptions from "@/components/Edescriptions";
import ElDescriptionsItem from "@/components/Edescriptions/src/descriptions-item";
import ESimpleCard from "@/components/Cards/index";
import ENavMenu from "./ENavMenu/index";
import EProjectManage from "./EProjectManage";
import ETodayRatio from "./ETodayRatio";
import ETypeCensus from "./ETypeCensus";
import ETrendCensus from "./ETrendCensus";
import EObjectContainer from "./EObjectContainer";
import EDeviceManage from "./DeviceManage/index";
import EAlarmManage from "./AlarmManage/index";
import ESafetyTemplate from "./SafetyTemplate/index";
import ELeakageCurrent from "./SafetyTemplate/ELeakageCurrent";
import EDebuff from "./SafetyTemplate/EDebuff";
import EDeviceSwitchWarning from "./SafetyTemplate/EDeviceSwitchWarning";
import EElectricity from "./EnergyManage/EElectricity";
import EEnergyLoad from "./EnergyManage/EEnergyLoad";

import { initMap, gjzCode } from "@/utils/latlngFromAddress";
import ShopLocation from "@/components/Amap/components/shopLocation/index";

export default {
  name: "projectDetailV2",
  components: {
    ECensusCards,
    ElDescriptions,
    ElDescriptionsItem,
    ENavMenu,
    EProjectManage,
    ESimpleCard,
    ETodayRatio,
    ETypeCensus,
    ETrendCensus,
    EObjectContainer,
    EDeviceManage,
    EAlarmManage,
    ESafetyTemplate,
    ELeakageCurrent,
    EDebuff,
    EDeviceSwitchWarning,
    EElectricity,
    EEnergyLoad,
    ShopLocation,
  },
  props: {
    sourceId: {
      type: [String, Number],
      require: true,
    },
  },
  data() {
    return {
      // 地图 弹窗
      visible: false,
      BMap: null,
      mapCenter: {
        lng: 119.459889,
        lat: 25.98974,
      },
      zoom: 15,
      mapForm: {},
      // 行政划分树选项
      stateSourceId: null,
      resultInfo: {},
      activeName: "EObjectContainer",
      activeType: "EObjectContainer",
      isShrink: false,
      activeList: [
        {
          label: "项目信息",
          key: "EObjectContainer",
          template: "EObjectContainer",
        },
        {
          label: "设备管理",
          key: "EDeviceManage",
          template: "EDeviceManage",
        },
        {
          label: "安全监管",
          key: "safety",
          children: [
            // 漏电流 温度 漏电报警 温度报警 漏保自检 短路报警 过欠压 过流过载 电弧报警 三相报警 异常状态 分合闸警示
            {
              label: "全部报警",
              key: "EAlarmManage",
              template: "EAlarmManage",
            },
            {
              label: "漏电流",
              key: "leakage",
              template: "ELeakageCurrent",
            },
            {
              label: "温度",
              key: "A006,A007,A008,A009,B004,B005,B006,B007",
              template: "ESafetyTemplate",
            },
            {
              label: "漏电报警",
              key: "A002,B002",
              template: "ESafetyTemplate",
            },
            {
              label: "漏保自检",
              key: "A002,B004",
              template: "ESafetyTemplate",
            },
            {
              label: "短路报警",
              key: "A001,B004",
              template: "ESafetyTemplate",
            },
            {
              label: "过欠压",
              key: "A005,A004,B000,B001",
              template: "ESafetyTemplate",
            },
            {
              label: "过流过载",
              key: "A003,A013,B003,B009",
              template: "ESafetyTemplate",
            },
            {
              label: "电弧报警",
              key: "A014,B010",
              template: "ESafetyTemplate",
            },
            {
              label: "三相报警",
              key: "A015,B011",
              template: "ESafetyTemplate",
            },
            {
              label: "异常状态",
              key: "A010",
              template: "EDebuff",
            },
            {
              label: "分合闸警示",
              key: "A011",
              template: "EDeviceSwitchWarning",
            },
          ],
        },
        {
          label: "能源管理",
          key: "energyManage",
          children: [
            {
              label: "电量",
              key: "electricity",
              template: "EElectricity",
            },
            {
              label: "负载",
              key: "energyLoad",
              template: "EEnergyLoad",
            },
          ],
        },
      ],
      projectTypeOptions: [],
      infoData: {},
      censusCardList: [
        {
          label: "设备总数",
          key: "deviceTotal",
        },
        {
          label: "在线设备数",
          key: "onlineTotal",
        },
        {
          label: "离线设备数",
          key: "offlineTotal",
        },
        {
          label: "今日报警数",
          key: "todayAlarmTotal",
        },
        {
          label: "本月报警数",
          key: "alarmTotal",
        },
      ],
      projectList: [],
      isFoldRight: false,
      scalseNumX: 1,
      scalseNumY: 1,
      fullscreen: false,
      divWidth: 1682,
      divHeight: 812,
      projectStatistics: {},
    };
  },
  created() {
    this.stateSourceId = this.sourceId;
    this.getProjectList();
    // this.init()
    this.activeName = "EObjectContainer";
    this.getDicts("project_industry").then((response) => {
      this.projectTypeOptions = response.data;
    });
  },
  watch: {
    isFoldRight: {
      handler(newValue) {
        if (!newValue) {
          this.warningAnalysisList();
        }
      },
      deep: true, // 深度监听
      immediate: false, // 初始化监听
    },
    sourceId(val) {
      this.stateSourceId = this.sourceId;
    },
    stateSourceId(val) {
      this.init();
      this.visible = false;
    },
    opened: {
      handler() {
        this.resize_window_project();
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    // 计算缩放比例
    this.resize_window_project();
    this.thisScrollTopY = document.getElementById("con_lf_top_div").scrollTop;
    document.getElementById("con_lf_top_div").style.overflow = "hidden";
    document.getElementById("con_lf_top_div").scrollTop = 0;
    window.addEventListener("resize", () => {
      this.resize_window_project();
    });
  },
  computed: {
    opened() {
      return this.$store.getters.sidebar;
    },
  },
  methods: {
    mapEvent(data) {
      this.mapForm.lng = data.lng;
      this.mapForm.lat = data.lat;
      this.mapForm.address = data.address;
      this.$forceUpdate();
    },
    // 使用地图方式定位
    mapClick() {
      if (this.infoData.projectLng && this.infoData.projectLat) {
        this.mapCenter.lng = this.infoData.projectLng;
        this.mapCenter.lat = this.infoData.projectLat;
        this.mapForm.lng = this.infoData.projectLng;
        this.mapForm.lat = this.infoData.projectLat;
        this.mapForm.address = this.infoData.projectAddress;
      } else {
        this.mapCenter = {
          lng: 119.459889,
          lat: 25.98974,
        };
        this.mapForm.lng = 119.459889;
        this.mapForm.lat = 25.98974;
        this.mapForm.address = "";
      }
      this.visible = !this.visible;
    },
    init() {
      this.getInfoByProjectId();
      this.getProjectCount();
      this.warningAnalysisList();
    },
    resize_window_project() {
      var documentDiv = document.getElementById("project-detail-v2-id");
      if (this.fullscreen) {
        this.scalseNumX = Number(documentDiv.clientWidth / this.divWidth);
        this.scalseNumY = Number(documentDiv.clientHeight / this.divHeight);
      } else {
        if (document.documentElement.clientWidth < 993) {
          this.scalseNumX =
            Number(document.documentElement.clientWidth / this.divWidth) -
            (Cookies.get("sidebarStatus") !== "0"
              ? Number(200 / this.divWidth)
              : 0);
        } else {
          this.scalseNumX =
            Number(document.documentElement.clientWidth / this.divWidth) -
            (Cookies.get("sidebarStatus") !== "0"
              ? Number(240 / this.divWidth)
              : Number(80 / this.divWidth));
        }
        this.scalseNumY = Number(
          (document.documentElement.clientHeight - 125) / this.divHeight
        );
      }
    },
    handlePrev(idx) {
      if (idx >= 1) {
        // this.getInfoByProjectId(this.projectList[idx - 1].projectId)
        this.stateSourceId = this.projectList[idx - 1].projectId;
      }
    },
    handleNext(idx) {
      if (idx < this.projectList.length - 1) {
        // this.getInfoByProjectId(this.projectList[idx + 1].projectId)
        this.stateSourceId = this.projectList[idx + 1].projectId;
      }
    },
    // 查询 项目统计
    getProjectCount() {
      statProject({ projectId: this.stateSourceId }).then((res) => {
        this.projectStatistics = res.data;
      });
    },
    // 查询项目列表
    getProjectList() {
      listProject({
        pageNum: 1,
        pageSize: 99999,
        orderByColumn: "createTime",
        isAsc: "desc",
      }).then((response) => {
        this.projectList = response.rows;
      });
    },
    // 返回列表
    handleLinkToTable() {
      this.$emit("linkToTable");
    },
    // 折叠开启右侧数据
    handleFoldRight() {
      this.isFoldRight = !this.isFoldRight;
      this.$forceUpdate();
    },
    // 查询获取告警分析等数据
    warningAnalysisList() {
      getWarningAnalysis({
        projectId: this.stateSourceId,
      }).then((res) => {
        this.resultInfo = res.data;
      });
    },
    // 菜单状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.projectTypeOptions, row.industry);
    },
    getInfoByProjectId() {
      getProject(this.stateSourceId).then((response) => {
        this.infoData = response.data;
      });
    },
  },
};
</script>
<style lang="scss">
.project-detail-v2 {
  width: 100%;
  height: 100%;
  height: calc(100vh - 125px);
  display: flex;
  width: 1682px;
  height: 812px;
  transform-origin: center top 0px;
  position: relative;
  left: 50%;
  margin-left: -840px;
  .block-lift {
    width: calc(100% - 290px - 20px);
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .container-title {
      height: 45px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title-left {
        width: 50%;
        display: flex;
        justify-content: flex-start;
        height: 100%;
        align-items: center;
        > span {
          font-size: 24px;
          font-family: "Source Han Sans CN";
          font-weight: 600;
          color: #172b4d;
        }
        .icon-c {
          font-size: 18px;
          color: #6b778c;
          font-weight: 600;
          margin-top: 2px;
          margin-left: 15px;
        }
      }
      .title-but {
        width: 50%;
        display: flex;
        justify-content: flex-end;
        .but-home {
          width: 90px;
          height: 30px;
          background: #f4f5f7;
          border-radius: 5px;
          color: #6b778c;
          justify-content: center;
          align-items: center;
          display: flex;
          margin-right: 10px;
          .icon-c {
            font-size: 12px;
            font-weight: 600;
            margin-top: 2px;
          }
          .but-title {
            font-size: 12px;
            font-family: "Source Han Sans CN";
            font-weight: 600;
            margin-left: 5px;
            cursor: default;
          }
        }
        .but-home:hover {
          background: #1890ff;
          color: #fff;
        }
        .but-tz {
          width: 30px;
          height: 30px;
          background: #f4f5f7;
          border-radius: 5px;
          justify-content: center;
          align-items: center;
          display: flex;
          margin-right: 0px;
          font-weight: 600;
          color: #6b778c;
          .icon-c {
            font-size: 12px;
            font-weight: 600;
            margin-top: 2px;
          }
        }
        .but-tz:hover {
          background: #1890ff;
          color: #fff;
        }
      }
    }
    .container-info {
      height: 104px;
      width: 100%;
      background: #f4f5f7;
      border-radius: 5px;
      margin-top: 5px;
      display: flex;
      .info-left {
        width: calc(40%);
        padding: 8px 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        .margin-top {
          width: 100%;
        }
      }
      .info-divider {
        width: 1px;
        height: 105px;
        background: #e8e8e8;
      }
      .info-right {
        width: calc(100% - 1px - 40%);
        display: flex;
        height: 104px;
        justify-content: center;
        align-items: center;
      }
    }
    .container-main {
      width: calc(100% - 10px);
      height: calc(100vh - 286px);
      margin-left: 10px;
      margin-top: 15px;
      display: flex;
      border: 1px solid #e8e8e8;
      border-radius: 5px;
      height: calc(100% - 160px);
      .main-block {
        padding: 15px;
        width: calc(100% - 150px);
        height: 100%;
        width: 100%;
      }
    }
  }
  .block-right-fold {
    width: 100%;
  }
  .block-right {
    width: 290px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 5px 0;
    margin-left: 20px;
    .today-ratio-card {
      height: 270px;
      margin-bottom: 20px;
      .e-simple-card__body {
        padding: 10px;
      }
    }
    .type-census-card {
      height: 245px;
      margin-bottom: 20px;
      .e-simple-card__body {
        padding: 10px;
      }
    }
    .trend-census-card {
      height: 260px;
      margin-bottom: 20px;
      .e-simple-card__body {
        padding: 10px;
      }
    }
  }
  .el-descriptions__body {
    background-color: #fff0;
  }
  .margin-top {
    margin-top: 0;
  }
  .el-descriptions .el-descriptions-item__cell {
    padding-bottom: 6px;
  }
  .el-descriptions .is-bordered .el-descriptions-item__cell {
    padding: 5px 5px;
    // border: 0px solid #ebeef5;
  }
  .el-descriptions-item__label.is-bordered-label {
    background: #fafafa00;
  }
  .but-icon:hover {
    color: #1890ff !important;
    font-size: 20px !important;
  }
  .e-descriptions-address {
    display: flex;
    width: 100%;
    .e-address-span {
      display: block;
      max-width: calc(500px - 100px);
      display: block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
  .e-i-custom {
    margin-left: 5px;
    margin-top: 3px;
  }
  .e-i-custom:hover {
    color: #1890ff;
  }
}
</style>
