<template>
  <div class="dashboard-editor-container">
    <!-- <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="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">
          <quan-Zong ref="quanzong" />
        </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>

    </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>
            <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_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>
            <span class="num">
              <el-select v-model="wsdFormSelect" size="mini" @change="changewsdForm" style="width:100px" class="">
                <el-option v-for="(item, key) in option" :key="key" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </span>
          </div>
          <div>
            <!-- <el-button size="mini" class="heardBtn">库房选择 ></el-button> -->
          </div>
        </div>
        <div class="chart_box">
          <div class="center_two">
            <div class="center_two_box">
              <div class="img_ws">
                <svg-icon icon-class="wd" class="wd" />
              </div>
              <div>
                <div style="margin-bottom:5px">{{ wsdForm.temperature }} ℃</div>
                <div>温度</div>
              </div>
            </div>
            <div class="center_two_box">
              <div class="img_ws">
                <svg-icon icon-class="sd" class="sd" />
              </div>
              <div>
                <div style="margin-bottom:5px">{{ wsdForm.humidity }} RH</div>
                <div>湿度</div>
              </div>
            </div>
          </div>
          <div>
            <p class="center_time">
              <span class="center_time_title">
                更新时间:
              </span>
              <span>
                {{ newData }}
              </span>
            </p>
          </div>
        </div>
      </el-card>
    </div>
    <!-- <div class="centerBox_three">
      <el-card class="card" shadow="hover" :body-style="{ padding: '20px 10px' }">
        <div class="heard_title">
          <div class="title-box">
            <span class="title">今日数据监测</span>
          </div>
        </div>
      </el-card>
      <el-card class="card_two" shadow="hover"></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 { getCurrentTime } from "@/utils/common";
export default {
  name: "DashboardEditor",
  components: {
    firstABox,
    firstBBox,
    firstCBox,
    twoBox,
    quanZong,
  },
  data() {
    return {
      sumNum: null,
      numYW: null,
      title: "",
      newsList: [],
      numStatus: true,
      storage: "",
      radio1: "1",
      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;
      }
    },
  },
  mounted() {
    this.changewsdForm(1);
  },
  created() {
    this.getTitle();
    this.storage = this.option[0].value;
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-card__body {
    padding: 15px;
    height: 100%;
  }
}

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

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

    .left {
      padding: 5px;

      .title {
        font-size: 19px;
        font-weight: 600;
        padding: 2px;
      }
    }
  }

  .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(53% - 30px);
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;

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

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

  .centerBox_two {
    height: 47%;
    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: #fff !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>
