<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.contractName
            }}</el-descriptions-item>
            <el-descriptions-item label="联系人2："
              >林工1586000000</el-descriptions-item
            >
            <el-descriptions-item label="联系人2：">
              {{ infoData["projectDeviceName"] }}
            </el-descriptions-item>
            <el-descriptions-item label="项目地址：">{{
              infoData.projectAddress
            }}</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"
          @input="
            (data) => {
              activeName = data['template'];
              activeType = data['key'];
            }
          "
        />
        <div class="main-block">
          <component
            :is="activeName"
            :projectInfo="infoData"
            :projectTypeOptions="projectTypeOptions"
            :sourceId="stateSourceId"
            :tempType="activeType"
          ></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";
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'

export default {
  name: "projectDetailV2",
  components: {
    ECensusCards,
    ElDescriptions,
    ElDescriptionsItem,
    ENavMenu,
    EProjectManage,
    ESimpleCard,
    ETodayRatio,
    ETypeCensus,
    ETrendCensus,
    EObjectContainer,
    EDeviceManage,
    EAlarmManage,
    ESafetyTemplate,
    ELeakageCurrent,
    EDebuff,
    EDeviceSwitchWarning,
    EElectricity
  },
  props: {
    sourceId: {
      type: [String, Number],
      require: true,
    },
  },
  data() {
    return {
      stateSourceId: null,
      resultInfo: {},
      activeName: "EObjectContainer",
      activeType: 'EObjectContainer',
      activeList: [
        {
          label: "项目信息",
          key: "EObjectContainer",
          template: "EObjectContainer",
        },
        {
          label: "设备管理",
          key: "EDeviceManage",
          template: "EDeviceManage",
        },
        {
          label: "安全监管",
          key: "safety",
          children: [ // 漏电流 温度 漏电报警 温度报警 漏保自检 短路报警 过欠压 过流过载 电弧报警 三相报警 异常状态 分合闸警示
            {
              label: "全部报警",
              key: "EAlarmManage",
              template: "EAlarmManage",
            },
            {
              label: "漏电流",
              key: "ELeakageCurrent",
              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,B003",
              template: "ESafetyTemplate",
            },
            {
              label: "电弧报警",
              key: "A003,B003",
              template: "ESafetyTemplate",
            },
            {
              label: "三相报警",
              key: "A003,B003",
              template: "ESafetyTemplate",
            },
            {
              label: "异常状态",
              key: "A010",
              template: "EDebuff",
            },
            {
              label: "分合闸警示",
              key: "A011",
              template: "EDeviceSwitchWarning",
            },
          ]
        },
        {
          label: "综合管理",
          key: "energy",
          children: [
            {
              label: "电量",
              key: "electricity",
              template: "EElectricity",
            },
          ],
        },
      ],
      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()
    },
  },
  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();
    });
  },
  methods: {
    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(54 / 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%;
      }
    }
  }
  .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;
  }
}


</style>
