/* 标题栏 */
<template>
  <div class="title-bar" onselectstart="return false">
    <el-row>
      <el-col :span="3">
        <img
          class="logo"
          src="../assets/img/main_window/logo.png"
          sytle="align-items"
        />
      </el-col>
      <el-col :span="0.1">
        <div>
          <el-dialog
            title="用户登录"
            v-model="dialogVisible"
            width="21%"
            :before-close="handleClose"
            :show-close="false"
          >
            <el-form :model="form">
              <el-form-item :label="loginMessage"> </el-form-item>
              <el-form-item label="用户名：" :label-width="formLabelWidth">
                <el-input
                  v-model="form.name"
                  autocomplete="off"
                  type="text"
                  placeholder="用户名"
                  style="width: 80%"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="密&emsp;码：" :label-width="formLabelWidth">
                <el-input
                  v-model="form.psd"
                  autocomplete="off"
                  type="text"
                  placeholder="密&emsp;码"
                  style="width: 80%"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item
                label="验证码："
                :label-width="formLabelWidth"
                style="display: none"
              >
                <el-input
                  v-model="form.name"
                  autocomplete="off"
                  type="text"
                  placeholder="验证码"
                  style="width: 80%"
                >
                  <template #append
                    ><img src="" style="width: 50px; height: 20px"
                  /></template>
                </el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button
                  @click="dialogVisible = false"
                  style="
                    background-color: rgb(100, 100, 100);
                    color: rgb(220, 220, 220);
                  "
                  >取 消</el-button
                >
                <el-button type="primary" @click="login">登 录</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </el-col>
      <el-col :span="19" style="margin-left: 23px">
        <div class="titleinfoall">
          <div
            class="titleinfo"
            @dblclick="dbClicks(titleInfo.dailyPowerGeneration, '日发电量')"
          >
            <ul>
              <li>
                <span class="showTitle">日发电量</span>
                <span class="showvalue">{{
                  titleInfo.dailyPowerGeneration?.value?.toFixed(2)
                }}</span>
                <span class="showTitle">万kWh</span>
              </li>
            </ul>
          </div>
          <div
            class="titleinfo"
            @dblclick="dbClicks(titleInfo.powerLossFault, '故障损失')"
          >
            <ul>
              <li>
                <span class="showTitle">故障损失</span>
                <span
                  :class="
                    titleInfo.powerLossFault
                      ? titleInfo.powerLossFault.trend === 'Counterpoise'
                        ? 'showvalue'
                        : titleInfo.powerLossFault.trend === 'Rise'
                        ? 'showvalue-up'
                        : 'showvalue-down'
                      : ''
                  "
                  >{{ titleInfo.powerLossFault?.value.toFixed(2) }}</span
                >
                <span class="showTitle">万kWh</span>
              </li>
            </ul>
          </div>
          <div
            class="titleinfo"
            @dblclick="dbClicks(titleInfo.powerLossRestrictions, '限电损失')"
          >
            <ul>
              <li>
                <span class="showTitle">限电损失</span>
                <span
                  :class="
                    titleInfo.powerLossRestrictions
                      ? titleInfo.powerLossRestrictions.trend === 'Counterpoise'
                        ? 'showvalue'
                        : titleInfo.powerLossRestrictions.trend === 'Rise'
                        ? 'showvalue-up'
                        : 'showvalue-down'
                      : ''
                  "
                  >{{ titleInfo.powerLossRestrictions?.value.toFixed(2) }}</span
                >
                <span class="showTitle">万kWh</span>
              </li>
            </ul>
          </div>
          <div
            class="titleinfo"
            @dblclick="dbClicks(titleInfo.powerLossInspection, '检修损失')"
          >
            <ul>
              <li>
                <span class="showTitle">检修损失</span>
                <span
                  :class="
                    titleInfo.powerLossInspection
                      ? titleInfo.powerLossInspection.trend === 'Counterpoise'
                        ? 'showvalue'
                        : titleInfo.powerLossInspection.trend === 'Rise'
                        ? 'showvalue-up'
                        : 'showvalue-down'
                      : ''
                  "
                  >{{ titleInfo.powerLossInspection?.value.toFixed(2) }}</span
                >
                <span class="showTitle">万kWh</span>
              </li>
            </ul>
          </div>
          <div
            class="titleinfo"
            @dblclick="dbClicks(titleInfo.powerLossBurden, '受累损失')"
          >
            <ul>
              <li>
                <span class="showTitle">受累损失</span>
                <span
                  :class="
                    titleInfo.powerLossBurden
                      ? titleInfo.powerLossBurden.trend === 'Counterpoise'
                        ? 'showvalue'
                        : titleInfo.powerLossBurden.trend === 'Rise'
                        ? 'showvalue-up'
                        : 'showvalue-down'
                      : ''
                  "
                  >{{ titleInfo.powerLossBurden?.value.toFixed(2) }}</span
                >
                <span class="showTitle">万kWh</span>
              </li>
            </ul>
          </div>
          <div
            class="titleinfo"
            @dblclick="dbClicks(titleInfo.powerLossPerformance, '性能损失')"
          >
            <ul>
              <li>
                <span class="showTitle">性能损失</span>
                <span
                  :class="
                    titleInfo.powerLossPerformance
                      ? titleInfo.powerLossPerformance.trend === 'Counterpoise'
                        ? 'showvalue'
                        : titleInfo.powerLossPerformance.trend === 'Rise'
                        ? 'showvalue-up'
                        : 'showvalue-down'
                      : ''
                  "
                  >{{ titleInfo.powerLossPerformance?.value.toFixed(2) }}</span
                >
                <span class="showTitle">万kWh</span>
              </li>
            </ul>
          </div>
          <div
            class="titleinfo"
            @dblclick="dbClicks(titleInfo.fieldElectricity, '场用电量')"
          >
            <ul>
              <li>
                <span class="showTitle">场用电量</span>
                <span class="showvalue">{{
                  titleInfo.fieldElectricity?.value.toFixed(2)
                }}</span>
                <span class="showTitle">万kWh</span>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
      <el-col :span="1">
        <el-popover
          placement="bottom"
          :width="150"
          trigger="hover"
          :show-arrow="false"
        >
          <template #reference>
            <el-button
              @click="userClick"
              style="
                top: 10px;
                right: 70px;
                color: #ffffff;
                position: absolute;
                background-color: black;
                border: none;
                font-size: 16px;
              "
            >
              {{ usreName }}</el-button
            >
          </template>
          <div style="background-color: #363636">
            <!-- <el-button class="loginoption">编&emsp;辑</el-button> -->
            <el-button v-if="!isLogin" class="loginoption" @click="userClick"
              >登&emsp;录</el-button
            >
            <br v-if="!isLogin" />
            <el-button v-if="isLogin" class="loginoption" @click="logout"
              >注&emsp;销</el-button
            >
          </div>
        </el-popover>
        <div style="margin-top: 7px; position: absolute; right: 10px">
          <button class="closeButton" v-on:click="mainClose">×</button>
        </div>
      </el-col>
    </el-row>
    <DataDetails
      @closed="closeds()"
      v-model="display"
      :datas="titleDetails"
      :partsName="partsName"
      echartsId="titleEcharts"
      @search-data="search"
      @original-data="originalData"
    ></DataDetails>
  </div>
</template>

<script>
import BackgroundData from "utils/BackgroundData";
import MessageBridge from "utils/MessageBridge";
import DataDetails from "components/basicDataDetails.vue";
import api from "api/index";
import dayjs from "dayjs";
export default {
  name: "TitleBar",
  components: {
    DataDetails,
  },
  data() {
    return {
      dialogVisible: false,
      dialogFormVisible: false,
      isLogin: false,
      form: {
        name: "",
        psd: "",
      },
      partsName: "",
      titleDetails: [],
      titleInfo: {},
      modelData: {},
      usreName: "未登录...",
      loginMessage: "", // 登录提示
      formLabelWidth: "120px",
      totalPower: 0, // 实时功率
      dailyPowerGeneration: 0, // 日发电量
      gridPower: 0, // 上网电量
      monthlyPowerGeneration: 0, // 月发电量
      annualPowerGeneration: 0, // 年发电量
      installedCapacity: 734, // 装机容量
      display: false,
      interval: 60,
      intervals: null,
    };
  },
  computed: {
    monthlyUtilizationHours: function () {
      // 月利用小时数
      return (
        (this.monthlyPowerGeneration * 10) /
        this.installedCapacity
      ).toFixed(2);
    },
    annualUtilizationHours: function () {
      // 年利用小时数
      return (
        (this.annualPowerGeneration * 10) /
        this.installedCapacity
      ).toFixed(2);
    },
  },
  created() {
    // this.refreshTimer = setInterval(this.refreshData, 2000);
    if (
      sessionStorage.getItem("ms_username") &&
      sessionStorage.getItem("ms_password")
    ) {
      this.form.name = sessionStorage.getItem("ms_username");
      this.form.psd = sessionStorage.getItem("ms_password");
      this.login();
    }
    this.titleInfos();
    this.intervals = setInterval(this.titleInfos, 10000);
  },
  methods: {
    titleInfos() {
      api.stationOverview().then((res) => {
        this.titleInfo = res.data;
        this.$store.commit("titleInfo", this.titleInfo);
      });
    },
    handleClose(done) {
      done();
    },
    mainClose() {
      const { remote } = require("electron");
      remote.getCurrentWindow().destroy();
    },
    // refreshData() {
    //   // todo 计算发电量的时候没有考虑光伏的，后续完善
    //   let bd = BackgroundData.getInstance();
    //   let val = bd.TopPoint;
    //   for (let v in val) {
    //     let pt = val[v];
    //     if (pt.pointName == "TotalPower") {
    //       this.totalPower = pt.value.toFixed(2);
    //     } else if (pt.pointName == "DailyPowerGeneration") {
    //       this.dailyPowerGeneration = pt.value.toFixed(2);
    //     } else if (pt.pointName == "GridPower") {
    //       this.gridPower = pt.value.toFixed(2);
    //     } else if (pt.pointName == "MonthlyPowerGeneration") {
    //       this.monthlyPowerGeneration = pt.value.toFixed(2);
    //     } else if (pt.pointName == "AnnualPowerGeneration") {
    //       this.annualPowerGeneration = pt.value.toFixed(2);
    //     }
    //   }
    // },

    /* 登录 */
    login() {
      // let bd = BackgroundData.getInstance();
      //   this.loginMessage='正在登录...';
      // bd.login(this.form.name,this.form.psd,this.onLoged);
      api
        .login({
          username: this.form.name,
          password: this.form.psd,
        })
        .then((res) => {
          if (res) {
            this.onLoged(res);
          }
        });
      // api.login(this.form.name,this.form.psd,'11').then(res => {
      //   if (res) {
      //     this.onLoged(res)
      //   }
      // })
    },

    onLoged(msg) {
      if (msg.status === 401) {
        this.loginMessage = msg.message;
        return;
      }
      sessionStorage.setItem("ms_username", this.form.name);
      sessionStorage.setItem("ms_password", this.form.psd);
      let user = msg.data;
      this.$store.commit("token", user.token);

      BackgroundData.getInstance().LoginUser = user;
      this.usreName = user.name;
      this.dialogVisible = false;
      this.loginMessage = "";
      this.form.name = this.form.psd = "";
      this.isLogin = true;
    },

    /* 用户点击 */
    userClick() {
      this.isLogin ? "" : (this.dialogVisible = true);
    },

    /* 用户注销 */
    logout() {
      BackgroundData.getInstance().LoginUser = null;
      this.usreName = "未登录...";
      this.isLogin = false;
    },
    dbClicks(data, partsName, timeValues) {
      this.modelData = data;
      let date = new Date();
      let endTs = timeValues
        ? timeValues[1] > date.getTime()
          ? date.getTime()
          : timeValues[1]
        : date.getTime();
      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
      api
        .getPower({
          tagName: data.tag,
          startTs: startTs,
          endTs: endTs,
          interval: this.interval,
        })
        .then((res) => {
          if (res.data.length > 0) {
            this.partsName = partsName;
            this.display = true;
            this.titleDetails = res.data;
          } else {
            this.titleDetails = [];
          }
        });
    },
    original(data, partsName, timeValues) {
      this.modelData = data;
      let date = new Date();
      let endTs = timeValues
        ? timeValues[1] > date.getTime()
          ? date.getTime()
          : timeValues[1]
        : date.getTime();
      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
      api
        .getOriginalPower({
          tagName: data.tag,
          startTs: startTs,
          endTs: endTs,
        })
        .then((res) => {
          if (res.data.length > 0) {
            this.partsName = partsName;
            this.display = true;
            this.titleDetails = res.data;
          } else {
            this.titleDetails = [];
          }
        });
    },
    search(values, interval) {
      this.interval = interval;
      this.dbClicks(this.modelData, this.partsName, values);
    },
    originalData(values) {
      this.original(this.modelData, this.partsName, values);
    },
    closeds() {
      this.display = false;
      this.interval = 60;
    },
  },
  unmounted() {
    clearInterval(this.intervals);
    this.intervals = null;
  },
};
</script>


<style scoped>
.loginoption {
  font-size: 16px;
  width: 150px;
  background-color: #292929;
  border: none;
  color: rgb(220, 220, 220);
}

.title-bar {
  /* height: 5vh; */
  background-color: #141414;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
}

.logo {
  position: relative;
  top: 32%;
  margin-left: 30px;
}

.titleinfo {
  background-color: rgb(20, 20, 20);
  height: auto;
  width: auto;
  padding: 13px 8px;
  border-radius: 6px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: -9px;
}

.closeButton {
  font-size: 30px;
  color: white;
  background: rgb(41, 41, 41);
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: none;
}

.titleinfoall {
  display: flex;
}

.showTitle {
  color: #ffffff;
  margin-right: 10px;
}

.showvalue {
  color: #ffffff;
  margin-right: 10px;
}

.showvalue-down {
  color: #50ae56;
  margin-right: 10px;
}

.showvalue-up {
  color: red;
  margin-right: 10px;
}
</style>