<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">
          <span>{{ infoData.projectName }}</span>
          <i class="el-icon-arrow-left icon-c"></i>
          <i class="el-icon-arrow-right icon-c"></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="censusResult" />
          </div>
        </div>
      </div>
      <div class="container-main">
        <e-nav-menu
          v-model="activeName"
          :activeList="activeList"
          @input="
            (data) => {
              activeName = data;
            }
          "
        />
        <div class="main-block">
          <component :is="activeName" :projectInfo="infoData" :projectTypeOptions="projectTypeOptions"></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 :result="resultInfo['warningAnalysisStatisticsVo']"/>
        </template>
      </e-simple-card>

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

      <e-simple-card
        title="报警预警趋势"
        class="trend-census-card"
      >
        <template slot="cardBody">
          <e-trend-census :result="resultInfo['alarmChartDataVo'] || []"/>
        </template>
      </e-simple-card>
    </div>
  </div>
</template>
<script>
import { getProject } from "@/api/iot/project";
import { getWarningAnalysis, appProjectList } from "@/api/app";
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'

export default {
  name: "projectDetailV2",
  components: {
    ECensusCards,
    ElDescriptions,
    ElDescriptionsItem,
    ENavMenu,
    EProjectManage,
    ESimpleCard,
    ETodayRatio,
    ETypeCensus,
    ETrendCensus,
    EObjectContainer,
    EDeviceManage
  },
  props: {
    sourceId: {
      type: [String, Number],
      require: true,
    },
  },
  data() {
    return {
      stateSourceId: null,
      resultInfo: {},
      activeName: "EObjectContainer",
      activeList: [
        {
          label: "项目信息",
          key: "EObjectContainer",
        },
        {
          label: "设备管理",
          key: "EDeviceManage",
        },
      ],
      projectTypeOptions: [],
      infoData: {},
      censusResult: {
        device: 3555,
      },
      censusCardList: [
        {
          label: "设备总数",
          key: "device",
        },
        {
          label: "在线设备数",
          key: "device",
        },
        {
          label: "离线设备数",
          key: "device",
        },
        {
          label: "今日报警数",
          key: "device",
        },
        {
          label: "本月报警数",
          key: "device",
        },
      ],
      isFoldRight: false,
      scalseNumX: 1,
      scalseNumY: 1,
    };
  },
  created() {
    this.stateSourceId = this.sourceId;
    this.getInfoByProjectId();
    this.activeName = "EObjectContainer";
    this.getDicts("project_industry").then((response) => {
      this.projectTypeOptions = response.data;
    });
    this.warningAnalysisList();
  },
  switch: {
    sourceId(val) {
      console.log(val);
      this.stateSourceId = this.sourceId;
      this.getInfoByProjectId();
      this.warningAnalysisList();
    },
  },
  mounted() {
    // 计算缩放比例
    // this.resize_window();
    // this.thisScrollTopY = document.getElementById("con_lf_top_div").scrollTop;
    // document.getElementById("con_lf_top_div").style.background = "#010e45";
    // document.getElementById("con_lf_top_div").style.height =
    //   "calc(100vh - 0px)";
    // document.getElementById("con_lf_top_div").style.minHeight =
    //   "calc(100vh - 0px)";
    // document.getElementById("con_lf_top_div").style.overflow = "hidden";
    // document.getElementById("con_lf_top_div").scrollTop = 0;
    // window.addEventListener("resize", () => {
    //   this.resize_window();
    // });
  },
  methods: {
    resize_window() {
      // if (this.fullscreen) {
      //   this.scalseNumX = Number(document.documentElement.clientWidth / 1682);
      //   this.scalseNumY = Number(document.documentElement.clientHeight / 812);
      // } else {
      //   if (document.documentElement.clientWidth < 993) {
      //     this.scalseNumX =
      //       Number(document.documentElement.clientWidth / 1682) -
      //       (Cookies.get("sidebarStatus") !== "0" ? Number(200 / 1920) : 0);
      //   } else {
      //     this.scalseNumX =
      //       Number(document.documentElement.clientWidth / 1920) -
      //       (Cookies.get("sidebarStatus") !== "0"
      //         ? Number(200 / 1920)
      //         : Number(54 / 1920));
      //   }
      //   this.scalseNumY = Number(document.documentElement.clientHeight / 1080);
      // }
    },
    // 返回列表
    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;
  .block-lift {
    width: calc(100% - 300px - 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;
      .main-block {
        padding: 15px;
        width: calc(100% - 150px);
        height: 100%;
      }
    }
  }
  .block-right-fold {
    width: 100%;
  }
  .block-right {
    width: 300px;
    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;
  }
}
</style>
