<template>
  <div class="home main-bg-img flex flexc aic">
    <!-- 头部 -->
    <div class="header flex jcb aic">
      <div class="left flex aic">
        <!-- <img
          width="70"
          height="70"
          src="../../assets/img/png_huizhang.png"
          alt="LOGO"
        /> -->
        <h1 class="title ml10">{{ homeInfo.title }}</h1>
      </div>
      <div class="right flex">
        <p class="flex aic mr25">
          <span class="tips-name"> 今日节约能量： </span>
          <span class="count count1">{{
            homeInfo.dayThrift ?? 0 | filterCount
          }}</span>
        </p>
        <p class="flex aic">
          <span class="tips-name"> 累计节约能量： </span>
          <span class="count count2">{{
            homeInfo.totalThrift ?? 0 | filterCount
          }}</span>
        </p>
      </div>
    </div>
    <!-- 搜索 -->
    <div class="flex flexc aic">
      <img class="mb32" width="700" src="../../assets/img/png_title@2x.png" />
      <div class="search-box">
        <el-input v-model="search" placeholder="输入关键词查询">
          <i
            v-show="search"
            slot="suffix"
            class="el-icon-circle-close"
            @click="handleClose"
          ></i>
        </el-input>
        <el-button class="search-btn" @click="handleSearch">
          <span class="flex aic jcc">
            <img class="mr10" src="../../assets/img/sousuo.png" /> 搜索
          </span>
        </el-button>
      </div>
      <div class="hot-search-box flex aic mt28">
        <div class="hot-title flex aic jca">
          <img src="../../assets/img/icon_hot.png" />
          <span>热门词汇：</span>
        </div>
        <div @click="handleClick($event)">
          <vue-seamless-scroll
            :data="homeInfo.hotWords"
            :class-option="optionLeft"
            class="seamless-warp2"
          >
            <div class="hot-list flex aic">
              <div
                class="hot-list-item flex aic"
                v-for="v in homeInfo.hotWords"
                :key="v"
              >
                <span
                  :data-value="v"
                  v-if="v?.length <= 6"
                  class="hot-search-item"
                  >{{ v }}</span
                >
                <span :data-value="v" v-else class="hot-search-item">{{
                  v?.slice(0, 6) + "..."
                }}</span>
                <span class="line"></span>
              </div>
            </div>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
    <!-- 主体 -->
    <div class="main flex aic">
      <div class="ranking mr25 flex flexc">
        <div>
          <img
            class="ranking-title"
            src="../../assets/img/pic__hot_biaoqian.png"
          />
        </div>
        <!-- 热门表单列表 -->
        <div class="ranking-list flex1 flex flexc mt20">
          <div v-if="datumList && datumList.length">
            <div
              class="ranking-item flex aic"
              v-for="(v, i) in datumList"
              :key="v.id"
            >
              <div class="flex aic jcc item-index">
                <img v-if="i < 3" :src="checkTopImg(i)" />
                <span v-else>{{ i + 1 }}.</span>
              </div>
              <p class="flex1" v-ellipsis @click="checkMaterial(i, v)">
                {{ v.materialName ? v.materialName : v.materiaFullName }}
              </p>
            </div>
          </div>
          <div v-else class="tac empty-text">暂无数据</div>
        </div>
      </div>
      <div class="right flex flexc aic jcb">
        <div class="right-top flex aic jcb">
          <router-link to="/matterList">
            <div class="fill-btn flex aic jcc pointer main-kstd-img">
              <span class="fill-btn-text1">快</span>
              <span class="fill-btn-text2">速</span>
              <span class="fill-btn-text3">查</span>
              <span class="fill-btn-text4">看</span>
            </div>
          </router-link>
        </div>
        <!-- 热门事项 -->
        <div class="right-bottom flex flexc">
          <div>
            <img
              height="45"
              class="hot-matter-title"
              src="../../assets/img/pic__hot_shixiang.png"
            />
          </div>
          <div
            class="hot-matter-list flex1 mt10"
            v-if="matterList && matterList.length"
          >
            <vue-seamless-scroll
              :class-option="optionTop"
              class="seamless-warp"
            >
              <div>
                <div
                  class="hot-matter-item flex aic"
                  v-for="(v, i) in matterList"
                  :key="v.id"
                >
                  <div class="flex aic jcc item-index">
                    <img v-if="i < 3" :src="checkTopImg(i)" />
                    <span v-else>{{ i + 1 }}.</span>
                  </div>
                  <p class="flex1" v-ellipsis @click="checkMatter(v)">
                    {{ v.matterName ? v.matterName : v.matterFullName }}
                  </p>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
          <div v-else class="tac empty-text">暂无数据</div>
        </div>
      </div>
    </div>
    <!-- 底部数据展示 -->
    <div class="footer flex jcb aic">
      <div class="data-item flex1 flex jcc aic">
        <span class="data-name">入驻表单量：</span>
        <div class="count-box">
          <span class="data-count" v-format="'#,##0'">{{
            homeInfo.datumCont ?? 0
          }}</span>
          <span>份</span>
        </div>
      </div>
      <div class="line"></div>
      <div class="data-item flex1 flex jcc aic">
        <span class="data-name">入驻事项量：</span>
        <div class="count-box">
          <span class="data-count" v-format="'#,##0'">{{
            homeInfo.matterCont ?? 0
          }}</span>
          <span>件</span>
        </div>
      </div>
    </div>
    <!-- 材料列表查看 -->
    <MateralsList
      :matterInfo="matterInfo"
      :visible.sync="visible"
    ></MateralsList>
  </div>
</template>

<script>
// import { getHomeInfo } from "@/api";
import MateralsList from "@/components/MateralsList.vue";
import { mapState } from "vuex";
export default {
  components: {
    MateralsList,
  },
  data() {
    return {
      search: "",
      rankingActive: 1,
      top1: require("../../assets/img/png_no.1.png"),
      top2: require("../../assets/img/png_no.2.png"),
      top3: require("../../assets/img/png_no.3.png"),
      // homeInfo: {}, // 首页数据
      // datumList: [],
      // matterList: [],
      visible: false,
      matterInfo: {},
    };
  },
  computed: {
    optionLeft() {
      return {
        direction: 2, // 滚动方向
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 5, // 开启无缝滚动的数据量 设置(数值<=页面展示数据条数不滚)(超过页面展示条数滚动)
        openWatch: true, // 开启数据实时监控刷新dom
        waitTime: 2500, // 单行停顿时间(singleHeight,waitTime)
      };
    },
    optionTop() {
      return {
        direction: 1, // 滚动方向
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开启无缝滚动的数据量 设置(数值<=页面展示数据条数不滚)(超过页面展示条数滚动)
        openWatch: true, // 开启数据实时监控刷新dom
        waitTime: 2500, // 单行停顿时间(singleHeight,waitTime)
      };
    },
    ...mapState(["homeInfo", "datumList", "matterList"]),
  },
  created() {
    // this.getHomeInfo();
  },
  filters: {
    filterCount(val) {
      if (val >= 1000 && val < 10000) {
        let num = val / 1000;
        return num.toFixed(2) + "kg";
      } else if (val >= 10000 && val < 999000) {
        let num = val / 10000;
        return num.toFixed(1) + "万kg";
      } else if (val >= 999000) {
        return `999+万kg`;
      } else {
        return val + "g";
      }
    },
  },
  methods: {
    // 获取首页数据展示
    // async getHomeInfo() {
    //   let res = await getHomeInfo({});
    //   let { data, code } = res.data;
    //   if (code === 1) {
    //     data.hotWords = data.hotWords.map((v) => v.hotwords);
    //     this.homeInfo = data;
    //     this.matterList = data.matterList;
    //     this.datumList = data.datumList;
    //   }
    // },
    checkTopImg(index) {
      if (index === 0) {
        return this.top1;
      } else if (index === 1) {
        return this.top2;
      } else if (index === 2) {
        return this.top3;
      }
    },
    changeRanking(val) {
      this.rankingActive = val;
    },
    handleSearch() {
      this.$router.push({
        path: "/searchpage",
        query: {
          val: this.search,
        },
      });
    },
    // 点击热门词汇
    handleClick(e) {
      if (e.target.className === "hot-search-item") {
        this.search = e.target.dataset.value;
        this.$router.push({
          path: "/searchpage",
          query: {
            val: this.search,
          },
        });
      }
    },
    handleClose() {
      this.search = "";
    },
    // 查看材料列表
    checkMatter(row) {
      this.matterInfo = row;
      this.visible = true;
    },
    // 查看材料
    checkMaterial(index, row) {
      this.$router.push({
        path: "/showmaterials",
        query: {
          matterId: row.matterId,
          index,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes energy {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes shadow {
  0% {
    opacity: 1;
    left: -200px;
  }
  10% {
    opacity: 0;
    left: 400px;
  }
  100% {
    opacity: 0;
    left: 400px;
  }
}
@keyframes ring {
  0% {
    transform: translateY(0px);
  }
  10% {
    transform: translateY(-30px);
  }
  60%,
  100% {
    transform: translateY(0px);
  }
}
.home {
  width: 100%;
  height: auto;
  padding-top: 40px;
  background-size: 100% 100%;
}

.header {
  width: 100%;
  padding: 0px 40px;
  margin-bottom: 100px;
}
.left {
  .title {
    font-weight: 400;
    font-size: 61px;
    color: var(--main-h1-color);
  }
}
.right {
  .tips-name {
    font-size: 18px;
    color: var(--main-h1-color);
  }
  .count {
    color: #317054;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../../assets/img/pic_png_nengliang.png") no-repeat;
    background-size: 100% 100%;
  }
  .count1 {
    width: 60px;
    height: 60px;
    animation: energy linear 6000ms infinite;
  }
  .count2 {
    width: 70px;
    height: 70px;
    animation: energy linear 6500ms infinite;
  }
}
.search-box {
  box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.1);
  position: relative;
}
.hot-search-box {
  width: 100%;
  color: #fff;
  .hot-title {
    width: 140px;
    height: 40px;
    border-radius: 4px;
    font-size: 22px;
    background-color: rgba(255, 255, 255, 0.1);
  }
  .seamless-warp2 {
    width: 750px;
    overflow: hidden;
  }

  .hot-search-item {
    width: 150px;
    height: 24px;
    font-size: 22px;
    text-align: center;
    cursor: pointer;
  }
  .line {
    display: inline-block;
    margin: 0px 10px;
    width: 1px;
    height: 24px;
    background-color: #fff;
  }
}
:deep(.el-input__suffix) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 200px;
}
.el-icon-circle-close {
  font-size: 30px;
}
.search-btn {
  width: 167px;
  height: 62px;
  background: linear-gradient(
    90deg,
    var(--main-theme-color),
    var(--main-assist-color)
  );
  border-radius: 8px;
  color: #ffffff;
  font-size: 24px;
  border: none;
  position: absolute;
  right: 5px;
  top: 5px;
}
:deep(.el-input__inner) {
  width: 895px;
  height: 72px;
  padding-right: 240px;
  font-size: 24px;
  border-radius: 8px;
  color: #333;
}
.main {
  margin-top: 40px;
  .ranking {
    width: 700px;
    height: 495px;
    background: linear-gradient(180deg, #fdefed, #fffdf8);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    border: 3px solid #ffffff;
    position: relative;
    .empty-text {
      font-size: 18px;
      color: #999;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .tab-box {
      width: 340px;
      height: 50px;
      padding: 3px;
      margin-top: 10px;
      background: #efe6e6;
      border-radius: 8px;
      .tab-item {
        width: 50%;
        height: 100%;
        border-radius: 8px;
        text-align: center;
        font-size: 22px;
        color: #333;
        cursor: pointer;
      }
      .active {
        background-color: #fff;
      }
    }
    .ranking-list {
      padding: 0px 14px;
      .ranking-item {
        height: 56px;
        margin-bottom: 10px;
        line-height: 56px;
        border-radius: 8px;
        font-size: 22px;
        color: var(--main-theme-color);
        letter-spacing: 2px;
        &:nth-child(2n-1) {
          background-color: #fff;
        }
        .item-index {
          width: 50px;
        }
      }
    }
  }
  .right {
    width: 530px;
    height: 495px;
    .fill-btn {
      width: 530px;
      height: 170px;
      background-size: 100% 100%;
      font-size: 50px;
      font-weight: 500;
      color: #ffffff;
      border: 3px solid #ffffff;
      border-radius: 16px;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
      position: relative;
      overflow: hidden;
      // &::before {
      //   content: "";
      //   position: absolute;
      //   width: 200px;
      //   height: 300%;
      //   left: -200px;
      //   transform: rotateZ(-45deg);
      //   background: linear-gradient(
      //     to right,
      //     transparent 1%,
      //     rgba(255, 255, 255, 0.2) 30%,
      //     rgba(255, 255, 255, 0.5) 60%,
      //     transparent 100%
      //   );
      //   animation: shadow 6s infinite;
      // }

      // .fill-btn-text1 {
      //   animation: ring 6s 20ms infinite;
      // }
      // .fill-btn-text2 {
      //   animation: ring 6s 60ms infinite;
      // }
      // .fill-btn-text3 {
      //   animation: ring 6s 105ms infinite;
      // }
      // .fill-btn-text4 {
      //   animation: ring 6s 145ms infinite;
      // }
    }
    .empty-btn {
      width: 284px;
      height: 212px;
      background: url("../../assets/img/btn_kongbai.png") no-repeat;
      font-size: 36px;
      font-weight: 500;
      color: #ffffff;
    }
    .right-bottom {
      width: 530px;
      height: 304px;
      background: #fff;
      border: 3px solid #ffffff;
      border-radius: 16px;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
      position: relative;
      .empty-text {
        font-size: 18px;
        color: #999;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .hot-matter-list {
        height: 130px;
        padding: 0px 14px;
        .seamless-warp {
          height: 100%;
          overflow: hidden;
        }
        .hot-matter-item {
          height: 45px;
          margin-bottom: 4px;
          line-height: 45px;
          border-radius: 8px;
          font-size: 20px;
          color: var(--main-theme-color);
          letter-spacing: 2px;
          &:nth-child(2n) {
            background-color: #f6f9fe;
          }
          .item-index {
            width: 50px;
          }
        }
      }
    }
  }
}
.footer {
  width: 80%;
  margin-top: 44px;
  height: 66px;
  .data-item {
    height: inherit;
  }
  .data-name {
    font-size: 22px;
    font-family: Source Han Sans CN;
    color: var(--main-sjbt-color);
  }
  .count-box {
    margin: 0px;
    padding: 0px;
    font-size: 24px;
    color: var(--main-theme-color);
    .data-count {
      font-size: 38px;
      font-family: Source Han Sans CN;
      color: var(--main-theme-color);
    }
  }
  .line {
    width: 1px;
    height: inherit;
    background-image: linear-gradient(
      to bottom,
      #ccc,
      var(--main-theme-color) 35%,
      var(--main-theme-color) 75%,
      #ccc 100%
    );
  }
}
</style>