<template>
  <div class="dashboard-editor-container">
    <!-- 2024年2月22日最后一版 -->
    <!-- <div class="header">
      <div class="left">
        <vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
          <ul class="item">
            <li v-for="(item,key) in newsList" v-text="item.title" :key="key"></li>
          </ul>
        </vue-seamless-scroll>
      </div>
      <div class="right"></div>
    </div> -->
    <div class="header-button">
      <el-button class="p-linear" @click="jump" type="primary" style="width:25%">
        <i class="icon_search"></i>
        <span class="span-text">档案查询</span>
      </el-button>
      <el-button class="w-linear" type="warning" style="width:25%">
        <i class="icon_d_t"></i>
          <p class="btn-info">
            <span>{{sumNum}}件</span>
            <span>档案总数</span>
          </p>
        </el-button>
      <el-button class="s-linear" type="success" style="width:25%">
        <i class="icon_y_t"></i>
        <p class="btn-info">
            <span>{{numYW}}幅</span>
            <span>原文总数</span>
          </p>
      </el-button>
      <el-button class="d-linear" type="danger" style="width:25%">
        <i class="icon_j_t"></i>
        <p class="btn-info">
            <span>{{borrowNum}}件</span>
            <span>借阅总量</span>
          </p>
      </el-button>
    </div>
    <div class="centerBox">
      <!-- 档案总数 -->
      <el-card :body-style="{ 'background-color':theme}" class="card" shadow="hover">
        <div class="heard_title">
          <div class="title-box">
            <span class="title">档案总数:</span>
            <span class="num">{{sumNum}}件</span>
          </div>
          <!-- <div>
            <el-button :class="numStatus?'heardBtn':'heardBtns'" size="mini" @click="btnNumStatus">已入库</el-button>
            <el-button :class="numStatus?'heardBtns':'heardBtn'" size="mini" @click="btnNumStatus">未入库</el-button>
          </div> -->
        </div>
        <div class="chart_box">
          <!-- <div class="left_chart_box">111
            件
          </div> -->
          <first-a-box ref="first" @sunAll="sunAll" />
        </div>
      </el-card>
      <!-- 原文总数 -->
      <el-card :body-style="{ 'background-color':theme}" class="card" shadow="hover">
        <div class="heard_title">
          <div class="title-box">
            <span class="title">原文总数:</span>
            <span class="num">{{numYW}}幅</span>
          </div>
        </div>
        <div class="chart_box">
          <first-b-box @sunYW="sunYW" />
        </div>
      </el-card>
      <!-- 保管期限 -->
      <el-card :body-style="{ 'background-color':theme}" class="card" shadow="hover">
        <div class="heard_title">
          <div class="title-box">
            <span class="title">保管期限</span>
            <span class="num"></span>
          </div>
        </div>
        <div class="chart_box">
          <two-box />
          <!-- <first-c-box /> -->
        </div>
      </el-card>
      <!-- <el-card :body-style="{ 'background-color':theme}" class="card" shadow="hover">
        <div class="heard_title">
          <div class="title-box">
            <span class="title">各全宗总数</span>
            <span class="num">{{numYW}}条</span>
          </div>
        </div>
        <div class="chart_box">
          <quan-Zong ref="quanzong" />
        </div>
      </el-card> -->
    </div>
    <div class="centerBox_two">
      <!-- 知识产权 -->
      <el-card :body-style="{ 'background-color':theme}" class="card_two" shadow="hover">
        <div class="heard_title">
          <div class="title-box">
            <span class="title">知识产权</span>
          </div>
        </div>
        <div class="chart_box">
          <!-- <two-box /> -->
          <first-c-box />
        </div>
      </el-card>
      <!-- 档案利用 -->
      <el-card :body-style="{ 'background-color':theme}" class="card_two" shadow="hover">
        <div class="heard_title">
          <div class="title-box">
            <span class="title">档案利用</span>
          </div>
        </div>
        <div class="chart_box">
          <twoBBox />
        </div>
      </el-card>
      <!-- 温湿度平均检测 -->
      <el-card :body-style="{ 'background-color':theme}" class="card_two" shadow="hover">
        <div class="heard_title">
          <div class="title-box">
            <span class="title">温湿度平均监测:</span>
          </div>
        </div>
        <div class="t_content">
          <ul class="t_content_ul">
            <li v-for="(item,index) in temperatureArr" :key="`tvalue_${index}`">
              <strong>{{item.storeRoomName}}</strong>
              <span class="t_span">温度：<span :class="!item.isHigh?'span-high':''">{{item.temperature}}℃</span></span> 
              <span class="v_span">湿度：<span :class="!item.isHumidityStatus?'span-high':''">{{item.humidity}}RH</span></span></li>
          </ul>
          <p class="center_time">
              <span class="center_time_title">
                更新时间:
              </span>
              <span>
                {{ newData }}
              </span>
            </p>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import firstABox from "./components/firstA.vue";
import firstBBox from "./components/firstB.vue";
import firstCBox from "./components/firstC.vue";
import quanZong from "./components/quanzong.vue";
import twoBox from "./components/two.vue";
import twoBBox from './components/twoB.vue';
import { getCurrentTime,message} from "@/utils/common";
import {  getData} from "@/api/archiveUtilize/archivesRetrieval/authorizedElectronicRecords";
import {getHumidity} from "@/api/dashboard.js";
export default {
  name: "DashboardEditor",
  components: {
    firstABox,
    firstBBox,
    firstCBox,
    twoBox,
    quanZong,
    twoBBox
  },
  data() {
    return {
      borrowNum:null, // 借阅总数
      sumNum: null,
      numYW: null,
      title: "",
      newsList: [],
      numStatus: true,
      storage: "",
      radio1: "1",
      temperatureArr:[], // 温湿度数据
      option: [
        {
          name: "库房1",
          value: "1",
        },
        {
          name: "库房2",
          value: "2",
        },
      ],
      wsdFormSelect: "库房1",
      wsdForm: {
        humidity: "",
        temperature: "",
      },
      newData: "",
    };
  },
  computed: {
    optionLeft() {
      return {
        direction: 2,
        limitMoveNum: 1,
        step: 0.6,
        hoverStop: true,
      };
    },
    theme() {
      return this.$store.state.settings.theme;
    },
  },
  methods: {
    sunAll(val) {
      this.sumNum = val;
    },
    sunYW(val) {
      this.numYW = val;
    },
    getTitle() {
      this.newData = getCurrentTime();
      this.newsList = [];
      let date = new Date();
      let year = date.getFullYear();
      let mouth = date.getMonth() + 1;
      let day = date.getDate();
      if (mouth < 10) {
        mouth = "0" + mouth;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let str = "星期" + "日一二三四五六".charAt(new Date().getDay());
      this.title = "今日," + year + "年" + mouth + "月" + day + "日" + str;
      let obj = {
        title: this.title + " " + "   欢迎您使用典策综合档案管理系统。",
      };
      this.newsList.push(obj);
    },
    btnNumStatus() {
      this.numStatus = !this.numStatus;
    },
    changewsdForm(val) {
      if (val == 1) {
        this.wsdForm.humidity = 13;
        this.wsdForm.temperature = 23;
      } else {
        this.wsdForm.humidity = 15;
        this.wsdForm.temperature = 21;
      }
    },
    // 档案查询跳转
    jump(){
      this.$router.push({name:'fullTextSearch'})
    },
    // 获取借阅总数
    getBorrowerTotal(){
      let params = {
        userId: sessionStorage.getItem("userid"),
      };
      if(params.userId==null){
        return;
      }
      getData(params)
        .then((res) => {
          this.borrowNum = res.body.total;
        })
    },
    // 获取温湿度数据
    getHumidity(){
      getHumidity().then((res)=>{
        let result = res.body.data || [];
        result.forEach((item)=>{
          if(item.temperature>=14 && item.temperature<=24){
            item.isHigh = true;
          }else{
            item.isHigh = false;
          }
          if(item.humidity>=45 && item.humidity<=60){
            item.isHumidityStatus = true;
          }else{
            item.isHumidityStatus = false;
          }
        })
        this.temperatureArr = result;
        
      }).catch((error)=>{
        message('warning', error, 3000)
      })
    },
      
  },
  mounted() {
    this.changewsdForm(1);
    this.getHumidity();
  },
  created() {
    this.getTitle();
    this.getBorrowerTotal();
    this.storage = this.option[0].value;
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-card__body {
    padding: 15px;
    height: 100%;
  }
  .t_content{
    width:100%;
    height:auto;
    .t_content_ul{
      list-style: none;
      width:100%;
      li{
        height:30px;
        line-height:30px;
        font-size:16px;
        .t_span{
          padding-left:10px;
          .span-high{
            color:#f60;
            font-weight:600;
          }
        }
        .v_span{
          padding-left:10px;
          .span-high{
            color:#f60;
            font-weight:600;
          }
        }
      }
    }
    .center_time {
      font-size: 14px;
      letter-spacing: 1px;
      text-align: center;
      color: #a8d4f9;
    }

  }
}

.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}

.dashboard-editor-container {
  //background-color: #2f406c;
  background-color: #f1f1f1;
  padding: 20px 10px;
  height: calc(100vh - 60px);
  .header {
    display: flex;
    justify-content: space-between;
    // background: red;
    height: 65px;

    .left {
      padding: 5px;

      .title {
        font-size: 19px;
        font-weight: 600;
        padding: 2px;
      }
    }
  }
  .header-button{
    width:100%;
    height:80px;
    display:flex;
    justify-content: center;
    margin-bottom:15px;
    ::v-deep {
      .el-button{
        border-width:0;
        span{
          display: flex;
          justify-content: center;
          align-items: center;
          font-size:20px;
          .icon_search{
            display:inline-block;
            width:32px;
            height:32px;
            background:url("../../../assets/img/t_01.png") no-repeat;
            background-position: center;
            background-size: cover;
          }
          .icon_d_t{
            display:inline-block;
            width:32px;
            height:32px;
            background:url("../../../assets/img/t_03.png") no-repeat;
            background-position: center;
            background-size: cover;
          }
          .icon_y_t{
            display:inline-block;
            width:32px;
            height:32px;
            background:url("../../../assets/img/t_04.png") no-repeat;
            background-position: center;
            background-size: cover;
          }
          .icon_j_t{
            display:inline-block;
            width:32px;
            height:32px;
            background:url("../../../assets/img/t_02.png") no-repeat;
            background-position: center;
            background-size: cover;
          }
          .span-text{
            display: inline-block;
            margin-left: 10px;
          }
        }
        .btn-info{
          display:flex;
          flex-direction: column;
          margin:0 0 0 10px;
          padding:0;
        }
      }
    }
    .p-linear{
      background: repeating-linear-gradient(to right, #4a92f7, #60b8f8);
    }
    .w-linear{
      background: repeating-linear-gradient(to right, #e79582, #faac6a);

    }
    .s-linear{
      background: repeating-linear-gradient(to right, #4ec7d4, #73cda3);

    }
    .d-linear{
      background: repeating-linear-gradient(to right, #8a91e7, #c3b3fd);

    }
  }

  .chart_box {
    padding: 30px 0 0;
    height: calc(100% - 23px);
  }

  .heard_title {
    display: flex;
    justify-content: space-between;

    .title-box {
      .title {
        height: 35px;
        font-size: 20px;
        padding: 2px 10px;
        letter-spacing: 3px;
      }
    }

    .heardBtns {
      border-radius: 15px;
      padding: 5px 10px;
    }

    .heardBtn {
      border-radius: 15px;
      background: #2ec7c9;
      color: #fff;
      padding: 5px 10px;
      border: none;
    }
    
  }

  .centerBox {
    height: calc(47% - 30px);
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;

    .card {
      background: rgb(252, 255, 255);
      width: 33%;
    }

    .card_two {
      background: rgb(252, 255, 255);
      width: 65.5%;
    }
  }

  .centerBox_two {
    height: 43%;
    display: flex;
    justify-content: space-around;

    .card {
      background: rgb(252, 255, 255);
      width: 49%;
    }

    .card_two {
      background: rgb(252, 255, 255);
      width: 33%;
    }

    .center_two {
      // padding: 45px 20px 30px 20px;
      display: flex;
      justify-content: space-around;
      // height: calc((100vh - 300px)/2);
      height: 70%;

      /* .center_two_box:hover {
          box-shadow: gray;
          background: rgba(237, 255, 254, 0.6);
          // width: 40%;
        } */

      .center_two_box {
        padding: 10px 6px;
        //  background: rgb(253, 253, 253);
        border-radius: 5px;
        width: 49%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #a8d4f9;

        .img_ws {
          width: 40%;
        }

        .wd {
          font-size: 55px;
        }

        .sd {
          font-size: 55px;
        }
      }
    }

    .center_time {
      //font-weight: 600;
      font-size: 14px;
      letter-spacing: 1px;
      text-align: center;
      color: #a8d4f9;

      // .center_time_title {
      //font-size: 14px;
      //letter-spacing: 4px;
      // }
    }
  }

  .centerBox_three {
    height: 250px;
    display: flex;
    justify-content: space-around;

    .card {
      width: 32%;

      .heard_title {
        display: flex;
        justify-content: space-between;

        .title-box {
          .title {
            height: 35px;
            font-size: 20px;
            padding: 2px 10px;
            letter-spacing: 3px;
          }
        }
        
      }
      
    }

    .card_two {
      width: 65.5%;
    }
  }

  .el-card {
    background-color: #1e253f !important;
    border: none !important;
    color: #333 !important;
  }
}

.seamless-warp2 {
  overflow: hidden;
  height: 32px;
  width: 680px;

  ul.item {
    width: 650px;
    list-style: none;
    display: flex;

    li {
      color: #ff0d0d;
      float: left;
      margin-right: 30px;
      // line-height: 32px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 3px;
    }
  }
}
</style>
