<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" v-if="homeInfo.dayThrift">{{
            homeInfo.dayThrift | filterCount
          }}</span>
          <span class="count count1" v-else> 0 </span>
        </p>
        <p class="flex aic">
          <span class="tips-name"> 累计节约能量： </span>
          <span class="count count2" v-if="homeInfo.totalThrift">{{
            homeInfo.totalThrift | filterCount
          }}</span>
          <span class="count count2" v-else> 0 </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="输入事项表单关键词或排队编号查询"
          @keyup.native.enter="handleSearch"
          v-onEvent="{
            eventName: '输入',
            eventCode: 'Put',
            businessCode: 'home_search',
            businessName: '首页搜索',
            routers: $route,
          }"
        >
          <i
            v-show="search"
            slot="suffix"
            class="el-icon-circle-close"
            @click="handleClose"
          ></i>
        </el-input>
        <el-button
          class="search-btn"
          v-onEvent="{
            eventName: '点击',
            eventCode: 'Click',
            businessCode: 'home_search',
            businessName: '首页搜索',
            routers: $route,
          }"
          @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)"
          v-onEvent="{
            eventName: '点击',
            eventCode: 'Click',
            businessCode: 'hot_words',
            businessName: '热门词汇',
            routers: $route,
          }"
        >
          <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 && 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="left flex flexc">
        <div class="ranking 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
                  v-onEvent="{
                    eventName: '点击',
                    eventCode: 'Click',
                    businessCode: 'hot_materials',
                    businessName: '热门表单',
                    routers: $route,
                  }"
                  @click="checkMaterial(v)"
                >
                  {{ v.materialName ? v.materialName : v.materiaFullName }}
                </p>
              </div>
            </div>
            <div v-else class="tac empty-text">暂无数据</div>
          </div>
        </div>
        <div class="app-list">
          <div
            class="app-item"
            v-for="v in appList"
            :key="v.id"
            @click="clickApp(v)"
          >
            <img
              :src="
                v.appIconPath.charAt(0) == '/'
                  ? v.appIconPath
                  : '/' + v.appIconPath
              "
            />
            <span class="app-name">{{ v.appName }}</span>
          </div>
        </div>
      </div>
      <div class="right flex flexc aic jcb">
        <div class="right-top flex aic jcb">
          <router-link
            to="/matterList"
            v-onEvent="{
              eventName: '点击',
              eventCode: 'Click',
              businessCode: 'speed_check',
              businessName: '快速查看',
              routers: $route,
            }"
          >
            <div class="fill-btn flex aic jcc pointer main-ksck-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"
          >
            <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
                v-onEvent="{
                  eventName: '点击',
                  eventCode: 'Click',
                  businessCode: 'hot_matter',
                  businessName: '热门事项',
                  routers: $route,
                }"
                @click="checkMatter(v)"
              >
                {{ v.matterName ? v.matterName : v.matterFullName }}
              </p>
            </div>
          </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 ? 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 ? 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, mapMutations } from "vuex";
import { getMaterialsList } from "@/api";
import { deviceSystem } from "@/utils";
import local from "@/utils/local";
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)
      };
    },
    ...mapState(["homeInfo", "datumList", "matterList", "appList"]),
  },
  created() {
    // this.getHomeInfo();
  },
  filters: {
    filterCount(val) {
      if (val < 1000) {
        return val + "g";
      }
      let unit = "kg";
      if (val >= 1000 && val <= 999000) {
        let num = val / 1000;
        return num.toFixed(1) + unit;
      } else {
        return `999+${unit}`;
      }
    },
  },
  methods: {
    ...mapMutations(["SET_operTime"]),
    // 获取首页数据展示
    // 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 = "";
    },
    // 查看材料列表
    async checkMatter(row) {
      let time = this.$moment().format("YYYY-MM-DD HH:mm:ss");
      this.SET_operTime(time);
      let matterDatumList = await this.getMaterialsList(row.matterId);
      row.matterDatumList = matterDatumList;
      this.matterInfo = row;
      this.visible = true;
    },
    // 查看材料
    checkMaterial(row) {
      this.SET_operTime("");
      this.$router.push({
        path: "/showmaterials",
        query: {
          matterId: row.matterId,
          id: row.id,
        },
      });
    },
    async getMaterialsList(matterId) {
      let arr = [];
      let res = await getMaterialsList({
        page: 1,
        size: -1,
        matterId,
      });
      if (res.data.code == 1) {
        let { data } = res.data.data;
        arr = data;
      }
      return arr;
    },
    // 进入应用
    clickApp(info) {
      let system = deviceSystem();
      let form = {
        appId: info.id,
        custUrl: info.custUrl,
        serviceApi: info.serviceApi,
        siteId: local.getLocal("siteId"),
        devicenum: local.getLocal("devicenum"),
        appName: info.appName,
      };
      if (info.appType == 1) {
        this.$router.push({
          path: "/appshow",
          query: form,
        });
      } else {
        if (system == "windows") {
          window.open(info.url);
        } else {
          try {
            androidJsSdk(
              {
                action: "newtab",
                msg: JSON.stringify({ url: info.url, time: 300 }),
              },
              {
                success: function (d) {},
                fail: function (d) {
                  alert(d.msg + "，打开失败");
                },
              }
            );
          } catch (error) {
            console.log(error);
            alert(error);
          }
        }
      }
    },
  },
};
</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) {
  border-radius: 8px;
}
:deep(.el-input__inner) {
  width: 895px;
  height: 72px;
  padding-right: 240px;
  font-size: 24px;
  border-radius: 8px;
  color: #333;
  &:hover {
    border-color: var(--main-theme-color);
  }
  &:focus {
    border-color: var(--main-theme-color);
  }
}
.main {
  width: 1344px;
  height: 500px;
  margin-top: 40px;
  justify-content: space-between;
  .left {
    width: 792px;
    height: 100%;
    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;
  }
  .ranking {
    width: 100%;
    flex: 1;

    position: relative;
    .empty-text {
      font-size: 18px;
      color: #999;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .ranking-list {
      padding: 0px 14px;
      overflow: hidden;
      .ranking-item {
        height: 50px;
        margin-bottom: 10px;
        line-height: 56px;
        border-radius: 8px;
        font-size: 28px;
        color: var(--main-theme-color);
        letter-spacing: 2px;
        cursor: pointer;
        &:nth-child(2n-1) {
          background-color: #fff;
        }
        .item-index {
          width: 50px;
        }
      }
    }
  }
  .app-list {
    width: 100%;
    height: 124px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 46px;
    overflow: hidden;
    .app-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      img {
        width: 66px;
        height: 66px;
      }
      .app-name {
        font-size: 24px;
        color: #333333;
      }
    }
  }
  .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;
        overflow: hidden;
        .seamless-warp {
          height: 100%;
          overflow: hidden;
        }
        .hot-matter-item {
          height: 45px;
          margin-bottom: 4px;
          line-height: 45px;
          border-radius: 8px;
          font-size: 26px;
          color: var(--main-theme-color);
          letter-spacing: 2px;
          cursor: pointer;
          &:nth-child(2n) {
            background-color: #f6f9fe;
          }
          .item-index {
            width: 50px;
          }
        }
      }
    }
  }
}
.footer {
  width: 80%;
  margin-top: 30px;
  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>
