<template>
  <div class="container">
    <div class="echart-wrap">
      <div class="echart-item" style="width: 100%">
        <div class="echart-head">
          <h1 class="echart-title">{{ $t('index.allTxt') }}</h1>
          <el-switch
            v-model="isAllProject"
            :active-value="true"
            :inactive-value="false"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeSwitch"
          ></el-switch>
        </div>
      </div>
    </div>
    <div class="echart-wrap">
      <div class="echart-item" style="width: calc(55% - 20px)">
        <div class="echart-head">
          <h1 class="echart-title">{{ $t('index.jjxx') }}</h1>
        </div>
        <div class="wrap-content">
          <div class="wrap-content-item">
            <perfect
              perfectId="all"
              :name="$t('index.zzd')"
              color="#58D9F8"
              :rate="basicData.total"
              :all="basicData.total"
            ></perfect>
          </div>
          <div class="wrap-content-item">
            <perfect
              perfectId="yxzd"
              :name="$t('index.yxzd')"
              color="#46B330"
              :rate="basicData.online"
              :all="basicData.total"
            ></perfect>
          </div>
          <div class="wrap-content-item">
            <perfect
              perfectId="lxzd"
              :name="$t('index.lxzd')"
              color="#F56F47"
              :rate="basicData.offline"
              :all="basicData.total"
            ></perfect>
          </div>
        </div>
      </div>
      <div class="echart-item" style="width: 45%">
        <div class="echart-head">
          <h1 class="echart-title">{{ $t('index.syxmyxl') }}</h1>
          <el-date-picker
            v-model="basicTime"
            type="month"
            :placeholder="$t('defalult.xzrq')"
            @change="searchBasic"
          ></el-date-picker>
        </div>
        <operating :runRate="basicData.runRate"></operating>
      </div>
    </div>

    <div class="echart-wrap">
      <div class="echart-item" style="width: 100%">
        <div class="echart-head">
          <h1 class="echart-title">{{ $t('index.nhzb') }}</h1>
          <el-date-picker
            v-model="consumptionTime"
            type="daterange"
            :range-separator="$t('defalult.z')"
            :start-placeholder="$t('defalult.ksrq')"
            :end-placeholder="$t('defalult.jsrq')"
            @change="searchConsumption"
          ></el-date-picker>
        </div>
        <div class="wrap-content-second">
          <div class="wrap-content-L">
            <div class="wrap-content-top">
              <div class="wrap-content-item">
                <div class="wrap-content-img">
                  <img src="@/assets/home/ljydl.png" width="82" />
                </div>
                <div class="wrap-content-font">
                  <h2 class="wrap-content-size" style="margin-bottom: 5px">
                    {{ $t('index.ljydl') }}
                  </h2>
                  <h1
                    class="wrap-content-size"
                    style="color: rgb(66, 147, 245); font-weight: 600"
                  >
                    {{ consumptionData.elec }}w/Kwh
                  </h1>
                </div>
              </div>
              <div class="wrap-content-item">
                <div class="wrap-content-img">
                  <img src="@/assets/home/ljysl.png" width="82" />
                </div>
                <div class="wrap-content-font">
                  <h2 class="wrap-content-size" style="margin-bottom: 5px">
                    {{ $t('index.ljysl') }}
                  </h2>
                  <h1
                    class="wrap-content-size"
                    style="color: rgb(245, 124, 66); font-weight: 600"
                  >
                    {{ consumptionData.water }}m³/d
                  </h1>
                </div>
              </div>
            </div>
            <div class="wrap-content-bottom">
              <div class="wrap-content-item">
                <div class="wrap-content-img">
                  <img src="@/assets/home/js.png" width="82" />
                </div>
                <div class="wrap-content-font">
                  <h2 class="wrap-content-size" style="margin-bottom: 5px">
                    <span v-if="isQDF">
                      {{ $t('index.jd') }}
                    </span>
                    <span v-else>
                      {{ $t('index.yd') }}
                    </span>
                  </h2>
                  <h1
                    class="wrap-content-size"
                    style="color: rgb(66, 245, 125); font-weight: 600"
                  >
                    <span v-if="isQDF">
                      {{ consumptionData.conserveElec }}Kwh
                    </span>
                    <span v-else>{{ consumptionData.elecUse }}Kwh</span>
                  </h1>
                </div>
              </div>
              <div class="wrap-content-item">
                <div class="wrap-content-img">
                  <img src="@/assets/home/jd.png" width="82" />
                </div>
                <div class="wrap-content-font">
                  <h2 class="wrap-content-size" style="margin-bottom: 5px">
                    <span v-if="isQDF">
                      {{ $t('index.js') }}
                    </span>
                    <span v-else>
                      {{ $t('index.ys') }}
                    </span>
                  </h2>
                  <h1
                    class="wrap-content-size"
                    style="color: rgb(245, 195, 66); font-weight: 600"
                  >
                    <span v-if="isQDF">
                      {{ consumptionData.conserveWater }}m³/d
                    </span>
                    <span v-else>{{ consumptionData.waterUse }}m³/d</span>
                  </h1>
                </div>
              </div>
              <div class="wrap-content-item" v-if="isQDF">
                <div class="wrap-content-img">
                  <img src="@/assets/home/jt.png" width="82" />
                </div>
                <div class="wrap-content-font">
                  <h2 class="wrap-content-size" style="margin-bottom: 5px">
                    {{ $t('index.jt') }}
                  </h2>
                  <h1
                    class="wrap-content-size"
                    style="color: rgb(66, 188, 245); font-weight: 600"
                  >
                    {{ consumptionData.conserveCarbon }}m³/d
                  </h1>
                </div>
              </div>
            </div>
          </div>

          <div class="wrap-content-R">
            <consumption :rates="consumptionData.rate"></consumption>
          </div>
        </div>
      </div>
    </div>

    <div class="echart-wrap">
      <div class="echart-item" style="width: 100%">
        <div class="echart-head">
          <h1 class="echart-title">{{ $t('index.xjtb') }}</h1>
          <el-date-picker
            v-model="maintenanceTime"
            type="daterange"
            :range-separator="$t('defalult.z')"
            :start-placeholder="$t('defalult.ksrq')"
            :end-placeholder="$t('defalult.jsrq')"
          ></el-date-picker>
        </div>
        <div class="echart-list">
          <div class="personnel-content-item">
            <maintenance-personnel
              :time="maintenanceTime"
              :all="isAllProject"
            ></maintenance-personnel>
          </div>
          <div class="echart-line"></div>
          <div class="personnel-content-item">
            <maintenance-site
              :time="maintenanceTime"
              :all="isAllProject"
            ></maintenance-site>
          </div>
          <div class="echart-line"></div>
          <div class="personnel-content-item">
            <alarm :time="maintenanceTime" :all="isAllProject"></alarm>
          </div>
          <div class="echart-line"></div>
          <div class="personnel-content-item">
            <work :time="maintenanceTime" :all="isAllProject"></work>
          </div>
        </div>
      </div>
    </div>

    <div class="echart-wrap">
      <div class="echart-item" style="width: calc(50% - 10px)">
        <div class="echart-head">
          <h1 class="echart-title">{{ $t('index.kqdk') }}</h1>
          <el-date-picker
            v-model="attendanceTime"
            type="daterange"
            :range-separator="$t('defalult.z')"
            :start-placeholder="$t('defalult.ksrq')"
            :end-placeholder="$t('defalult.jsrq')"
            @change="searchAttendance"
          ></el-date-picker>
        </div>
        <div class="personnel-content-item" style="width: 100%">
          <div
            style="display: flex; justify-content: center; align-items: center"
          >
            <h2
              class="wrap-content-item-h2"
              style="font-size: 14px; font-weight: 500"
            >
              {{ $t('index.ydk') }}: {{ attendanceData.sign }}
            </h2>
            <h2
              class="wrap-content-item-h2"
              style="font-size: 14px; font-weight: 500; margin-left: 20px"
            >
              {{ $t('index.wdk') }}: {{ attendanceData.unSign }}
            </h2>
          </div>
          <clock-in :rate="attendanceData.attendanceRate"></clock-in>
        </div>
      </div>
      <div class="echart-item" style="width: calc(50% - 10px)">
        <div class="echart-head">
          <h1 class="echart-title">{{ $t('index.kqdkcstj') }}</h1>
        </div>
        <div class="personnel-content-item" style="padding: 25px 15px 15px">
          <clock-fold :details="attendanceData.details"></clock-fold>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import operating from '@/views/index/chart/operating';
import consumption from '@/views/index/chart/consumption';
import maintenancePersonnel from '@/views/index/chart/maintenance-personnel';
import maintenanceSite from '@/views/index/chart/maintenance-site';
import alarm from '@/views/index/chart/alarm';
import work from '@/views/index/chart/work';
import clockIn from '@/views/index/chart/clockIn';
import perfect from '@/views/index/chart/perfect';
import clockFold from '@/views/index/chart/clockFold';
import { getBasicData, getConsumptionData, getAttendanceData } from '@/api';
import { getDate1, getPastTime, getDate } from '@/common/times';
export default {
  components: {
    operating,
    consumption,
    maintenancePersonnel,
    maintenanceSite,
    alarm,
    work,
    perfect,
    clockIn,
    clockFold,
  },
  data() {
    return {
      basicData: [],
      consumptionData: [],
      attendanceData: [],
      basicTime: '',
      consumptionTime: '',
      maintenanceTime: '',
      attendanceTime: '',
      isAllProject: false,
      projectId: '',
      labelText: [],
      isQDF: true,
    };
  },
  created() {},
  mounted() {
    this.projectId = sessionStorage.getItem('projectId');
    this.projectName = sessionStorage.getItem('projectName');

    if (this.projectName.indexOf('清道夫') != -1) {
      this.isQDF = true;
    } else if (this.projectName.indexOf('一体化') != -1) {
      this.isQDF = false;
    } else {
      this.isQDF = false;
    }
    this.defaultTime();
    this.getIndexData();
    this.getConsumptionData();
    this.getAttendanceData();
  },
  methods: {
    // 选择项目
    changeSwitch() {
      this.getConsumptionData();
      this.getIndexData();
      this.getAttendanceData();
    },
    defaultTime() {
      this.basicTime = getDate1();
      this.attendanceTime = this.consumptionTime = getPastTime(1);
      setTimeout(() => {
        this.maintenanceTime = getPastTime(1);
      }, 500);
    },
    // 基本信息时间选择
    searchBasic() {
      this.getIndexData();
    },
    // 能耗指标时间选择
    searchConsumption() {
      this.getConsumptionData();
    },
    // 考勤打卡时间选择
    searchAttendance() {
      this.getAttendanceData();
    },
    // 考勤打卡
    async getAttendanceData() {
      var param = {};
      if (this.isAllProject == false) {
        param = {
          start: getDate(this.attendanceTime[0]),
          end: getDate(this.attendanceTime[1]),
          projectId: this.projectId,
        };
      } else {
        param = {
          start: getDate(this.attendanceTime[0]),
          end: getDate(this.attendanceTime[1]),
        };
      }
      const { data } = await getAttendanceData(param);
      this.attendanceData = data;
    },
    // 基本信息
    async getIndexData() {
      var param = {};
      if (this.isAllProject == false) {
        param = {
          month: getDate1(this.basicTime),
          projectId: this.projectId,
        };
      } else {
        param = {
          month: getDate1(this.basicTime),
        };
      }
      const { data } = await getBasicData(param);
      this.basicData = data;
    },
    // 能耗指标
    async getConsumptionData() {
      var param = {};
      if (this.isAllProject == false) {
        param = {
          start: getDate(this.consumptionTime[0]),
          end: getDate(this.consumptionTime[1]),
          projectId: this.projectId,
        };
      } else {
        param = {
          start: getDate(this.consumptionTime[0]),
          end: getDate(this.consumptionTime[1]),
        };
      }
      const { data } = await getConsumptionData(param);
      this.consumptionData = data;
    },
  },
};
</script>
<style lang="scss">
.container {
  background-color: rgba(0, 0, 0, 0.038);
  position: relative;

  .echart-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;

    .echart-item {
      background-color: white;
      border-radius: 6px;

      .echart-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);

        .echart-title {
          font-size: 16px;
          font-weight: 500;
          margin: 0;
          line-height: 40px;
        }
      }
    }

    .wrap-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;

      .wrap-content-item {
        width: 32%;
        text-align: center;
        border-radius: 6px;

        .wrap-content-item-h1 {
          font-size: 30px;
        }

        .wrap-content-item-h2 {
          font-size: 28px;
        }
      }
    }

    .wrap-content-second {
      padding: 0 15px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .wrap-content-L {
        width: 70%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        .wrap-content-top {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          .wrap-content-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 30%;
            margin-top: 20px;
            .wrap-content-img {
            }
            .wrap-content-font {
              .wrap-content-size {
                font-size: 16px;
                font-weight: 500;
                margin: 0;
                margin-left: 10px;
              }
            }
          }
        }
        .wrap-content-bottom {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          .wrap-content-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 30%;
            margin: 20px 0;
            .wrap-content-img {
            }
            .wrap-content-font {
              .wrap-content-size {
                font-size: 16px;
                font-weight: 500;
                margin: 0;
                margin-left: 10px;
              }
            }
          }
        }
      }
      .wrap-content-R {
        width: 30%;
      }
    }

    .echart-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;

      .personnel-content-item {
        width: 22%;

        .echart-title {
          margin: 15px 0 20px;
          text-align: center;
        }
      }

      .echart-line {
        background-color: rgba(0, 0, 0, 0.04);
        width: 1px;
        height: 200px;
      }
    }
  }
}
</style>
