<template>
  <div>
    <!-- 头部 -->
    <div style="position: relative">
      <div class="indexBox">
        <div class="box">
          <div class="title">数据交换平台</div>
          <div class="titleBox">
            <div class="titleTxt">专业</div>
            <div class="titleWier"></div>
            <div class="titleTxt">可靠</div>
            <div class="titleWier"></div>
            <div class="titleTxt">安全</div>
            <div class="titleWier"></div>
            <div class="titleTxt">全域</div>
          </div>
        </div>
      </div>
      <!-- 数据表 -->
      <div class="plate" v-if="!isCompany">
        <div class="plateOn">
          <div class="plateNumb">{{ statis.tableCount || "0" }}</div>
          <div class="plateText">已接入数据表</div>
        </div>
        <div class="plateOn on">
          <div class="plateNumb">{{ statis.tableItemCount || "0" }}</div>
          <div class="plateText">已接入数据项</div>
        </div>
        <div class="plateOn">
          <div class="plateNumb">{{ statis.appCount || "0" }}</div>
          <div class="plateText">已接入应用</div>
        </div>
      </div>
    </div>
    <!-- 搜索框 -->
    <div class="ipt">
      <div>
        <el-input
          v-model="keyword"
          class="input-with-select"
          clearable
          placeholder="请输入关键字"
        >
          <el-button
            :style="
              'background: ' +
              $config.primarycolor +
              '; border-radius: 0; color: #fff'
            "
            slot="append"
            icon="el-icon-search"
            @click="search"
            >搜索</el-button
          >
        </el-input>
        <div class="hint">资源目录 资源 文献 专题</div>
      </div>
    </div>
    <!-- 目录资源分类 -->
    <div class="classify">
      <div class="claTitle">
        <div class="claTxt">CATEGORY</div>
        <div class="claText">资源目录分类</div>
      </div>
      <div class="claPlate">
        <template v-if="hotcatalogueList && hotcatalogueList.length <= 5">
          <div class="row">
            <div
              class="claCont"
              v-for="(cate, i) in hotcatalogueList"
              :key="i"
              @click="goToCatalogue(cate.id)"
            >
              <img class="claCont-img" :src="cate.coverImg" />
              <div class="claCont-text">{{ cate.catalogueName }}</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="row">
            <div
              class="claCont"
              v-for="(cate, i) in hotcatalogueList.filter((p, i) => i < 5)"
              :key="i"
              @click="goToCatalogue(cate.id)"
            >
              <img class="claCont-img" :src="cate.coverImg" />
              <div class="claCont-text">{{ cate.catalogueName }}</div>
            </div>
          </div>
          <div class="row">
            <div
              class="claCont"
              v-for="(cate, i) in hotcatalogueList.filter((p, i) => i >= 5)"
              :key="i"
              @click="goToCatalogue(cate.id)"
            >
              <img class="claCont-img" :src="cate.coverImg" />
              <div class="claCont-text">{{ cate.catalogueName }}</div>
            </div>
          </div>
        </template>
        <!-- <div class="row">
          <div
            class="claCont"
            v-for="(cate, i) in hotcatalogueList"
            :key="i"
            @click="goToCatalogue(cate.id)"
          >
            <img class="claCont-img" :src="cate.coverImg" />
            <div class="claCont-text">{{ cate.catalogueName }}</div>
          </div>
        </div> -->
      </div>
    </div>
    <!-- 热门资源 -->
    <div class="catalogue">
      <div class="catLeft">
        <div class="claTitle">
          <div class="claTxt">HOTRES</div>
          <div class="claText">热门资源</div>
        </div>
        <div class="">
          <div
            class="catTab"
            :class="active === 'data' ? 'on' : ''"
            @mouseover="
              () => {
                changeActive('data');
              }
            "
          >
            热点数据
          </div>
          <div
            class="catTab"
            :class="active === 'service' ? 'on' : ''"
            @mouseover="
              () => {
                changeActive('service');
              }
            "
          >
            热点服务
          </div>
          <div
            class="catTab"
            :class="active === 'literature' ? 'on' : ''"
            @mouseover="
              () => {
                changeActive('literature');
              }
            "
          >
            热点文献
          </div>
        </div>
        <div class="und" @click="goToCatalogue(null)">
          了解更多<i class="el-icon-right"></i>
        </div>
      </div>
      <div class="catRight">
        <!-- 热点数据 -->
        <div class="catBox" v-if="active === 'data'">
          <div
            class="catCont"
            v-for="(data, i) in hotdataList"
            :key="i"
            @click="goToDetail(data, 'data')"
          >
            <div class="catFlex">
              <div class="catTime">
                {{ parseTime(data.createTime, "{m}.{d}") }}
              </div>
              <div class="catText">{{ data.dataName }}</div>
            </div>
            <div class="catFlex">
              <div class="catNumb year">
                {{ parseTime(data.createTime, "{y}") }}
              </div>
              <div class="catTxt">
                {{ data.remark }}【{{ getPublishTypeName(data.publishType) }}】
              </div>
            </div>
            <div class="catFlex">
              <div class="catNumb">____________</div>
              <div style="display: flex; align-items: center">
                <img class="catImg" src="../assets/images/yj-gray.png" />
                <div class="catNumb">{{ data.viewCount || 0 }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 热点服务 -->
        <div class="catBox" v-if="active === 'service'">
          <div
            class="catCont"
            v-for="(data, i) in hotserviceList"
            :key="i"
            @click="goToDetail(data, 'service')"
          >
            <div class="catFlex">
              <div class="catTime">
                {{ parseTime(data.createTime, "{m}.{d}") }}
              </div>
              <div class="catText">{{ data.serviceName }}</div>
            </div>
            <div class="catFlex">
              <div class="catNumb year">
                {{ parseTime(data.createTime, "{y}") }}
              </div>
              <div class="catTxt">
                {{ data.remark }}【{{ getPublishTypeName(data.publishType) }}】
              </div>
            </div>
            <div class="catFlex">
              <div class="catNumb">____________</div>
              <div style="display: flex; align-items: center">
                <img class="catImg" src="../assets/images/yj-gray.png" />
                <div class="catNumb">{{ data.viewCount || 0 }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 热点文献 -->
        <div class="catBox" v-if="active === 'literature'">
          <div class="catCont" v-for="(data, i) in hotliteraturList" :key="i">
            <div class="catFlex">
              <div class="catTime">
                {{ parseTime(data.createTime, "{m}.{d}") }}
              </div>
              <div class="catText">{{ data.literatureName }}</div>
            </div>
            <div class="catFlex">
              <div class="catNumb year">
                {{ parseTime(data.createTime, "{y}") }}
              </div>
              <div class="catTxt">
                {{ data.remark }}
              </div>
            </div>
            <div class="catFlex">
              <div class="catNumb">____________</div>
              <div style="display: flex; align-items: center">
                <img class="catImg" src="../assets/images/yj-gray.png" />
                <div class="catNumb">{{ data.viewCount || 0 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 专题链接 -->
    <div class="special" v-if="!isCompany">
      <div class="claTitle">
        <div class="claTxt">TOPIC</div>
        <div class="claText">专题链接</div>
      </div>
      <div class="speCard">
        <a
          class="speCardCont"
          v-for="(item, index) in topicList"
          :key="index"
          target="_blank"
          :href="item.linkUrl"
        >
          <img class="speImg" :src="getImg(item.coverImg)" />
          <div class="speText">{{ item.topicName }}</div>
          <div class="speTxt">{{ item.remark }}</div>
        </a>
      </div>
    </div>
    <div class="btn">
      <!-- <el-button type="primary" @click="btnTab()"
        >了解更多<i class="el-icon-arrow-right el-icon--right"></i>
      </el-button> -->
    </div>
    <div class="el-login-footer">
      <span class="span">{{ $config.company }}</span>
    </div>
  </div>
</template>

<script>
import {
  indexStatistics,
  hotcatalogue,
  hotdatalist,
  hotservicelist,
  hotliteratur,
  topiclist,
} from "@/api/customer/index";
import { getInfo } from "@/api/login";
import { mapGetters } from "vuex";
export default {
  name: "Index",
  data() {
    return {
      input3: "",
      active: "data", // 激活的资源tab
      statis: {}, // 首页顶部统计
      hotcatalogueList: [], // 热门目录
      hotdataList: [], // 热点数据
      hotserviceList: [], // 热点服务
      hotliteraturList: [], // 热点文献
      topicList: [], // 专题
      keyword: "",
      isCompany: true,
    };
  },
  computed: {
    ...mapGetters(["user"]),
  },
  created() {
    console.log(this.user);
    this.getLoginInfo();
    this.getStatic();
    this.gethotcatalogue();
    this.getHotList();
    this.getTopicList();
  },
  methods: {
    getLoginInfo() {
      getInfo().then((res) => {
        this.isCompany = res.company ? true : false;
      });
    },
    goToDetail(res, resType) {
      this.$router.push({
        path: `/customer/detail?type=${resType}&id=${res.id}&from=catalogue`,
      });
      console.log(res);
    },
    getPublishTypeName(value) {
      if (value === "open") {
        return "开放";
      } else if (value === "close") {
        return "不开放";
      } else if (value === "condition") {
        return "条件开放";
      }
      return null;
    },
    goToCatalogue(id) {
      let url = "/customer/catalogue";
      if (id) {
        url = url + "?id=" + id;
      }
      this.$router.push({ path: url });
    },
    changeActive(e) {
      console.log(e);
      this.active = e;
    },
    btnTab() {
      this.$message({
        message: "暂时没有更多",
        type: "success",
      });
    },
    getStatic() {
      indexStatistics().then((res) => {
        this.statis = res.data;
      });
    },
    gethotcatalogue() {
      hotcatalogue({ pageNum: 1, pageSize: 8, isTop: 1 }).then((res) => {
        res.rows.forEach((p) => {
          p.coverImg = this.getImg(p.coverImg);
        });

        if (res.rows.length > 10) {
          this.hotcatalogueList = res.rows.filter((k, i) => i < 10);
        } else {
          this.hotcatalogueList = res.rows;
        }
      });
    },
    getHotList() {
      hotdatalist({ pageNum: 1, pageSize: 8 }).then((res) => {
        this.hotdataList = res.rows;
      });

      hotservicelist({ pageNum: 1, pageSize: 8 }).then((res) => {
        this.hotserviceList = res.rows;
      });

      hotliteratur({ pageNum: 1, pageSize: 8 }).then((res) => {
        this.hotliteraturList = res.rows;
      });
    },
    getTopicList() {
      topiclist().then((res) => {
        this.topicList = res.rows;
      });
    },
    search() {
      console.log(this.keyword);
      this.$router.push({
        path: "/customer/search?keyword=" + encodeURIComponent(this.keyword),
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background: linear-gradient(130deg, #1163e3 0%, #2320bf 100%);
}

.el-carousel__item:nth-child(2n + 1) {
  background: linear-gradient(130deg, #1163e3 0%, #2320bf 100%);
}

.indexBox {
  width: 100%;
  height: 650px;
  background: url(../assets/images/index.png) center no-repeat;
  background-size: cover;

  .box {
    padding-left: 360px;
    padding-top: 205px;

    .title {
      text-align: left;
      font-size: 80px;
      font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
      font-weight: bold;
      color: #ffffff;
      line-height: 110px;
      letter-spacing: 14px;
      user-select: none;
    }

    .titleBox {
      display: flex;
      align-items: center;
      margin-top: 25px;

      .titleTxt {
        font-size: 36px;
        font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
        font-weight: 400;
        color: #ffffff;
        line-height: 50px;
        letter-spacing: 8px;
        opacity: 0.5;
        user-select: none;
      }

      .titleWier {
        width: 8px;
        height: 8px;
        background: #ffffff;
        border-radius: 100%;
        opacity: 0.5;
        margin: 0 30px;
      }
    }
  }
}

.plate {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.1);
  // opacity: 0.1;
  position: absolute;
  bottom: 0;
  z-index: 2;
  padding: 0 400px;
  box-sizing: border-box;

  .plateOn {
    width: 400px;
    text-align: center;
    // cursor: pointer;
    user-select: none;

    .plateNumb {
      font-size: 40px;
      font-family: AlibabaPuHuiTi-Heavy, AlibabaPuHuiTi;
      font-weight: 800;
      color: #ffffff;
    }

    .plateText {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 6px;
    }
  }

  .plateOn.on {
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    box-sizing: border-box;
  }
}

.ipt {
  margin-top: 60px;
  display: flex;
  justify-content: center;

  .input-with-select {
    width: 590px;
    background: #ffffff;
    border-radius: 2px 0px 0px 2px;
  }

  .hint {
    margin-top: 10px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    // cursor: pointer;
  }
}

.classify {
  margin-top: 60px;
  padding: 0 80px;
  padding-top: 90px;
  padding-bottom: 120px;
  box-sizing: border-box;
  background: #f5f8fd;

  .claTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 70px;
    user-select: none;

    .claTxt {
      font-size: 60px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: rgba(24, 78, 233, 0.1);
      user-select: none;
    }

    .claText {
      margin-top: -40px;
      font-size: 40px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
  }

  .claPlate {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .row {
      width: 100%;
      height: 160px;
      display: flex;
      justify-content: center;
      .claCont {
        width: 288px;
        height: 140px;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #ebf0f6;
        margin: 10px 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        .claCont-img {
          width: 68px;
          height: 68px;
        }

        .claCont-text {
          max-width: 120px;
          max-height: 50px;
          overflow: hidden;
          font-size: 18px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-left: 20px;
        }
      }

      .claCont:hover {
        box-shadow: 0px 0px 30px 5px rgba(88, 134, 253, 0.2);
        margin: 0px 10px;
        cursor: pointer;
      }
    }
  }
}

.catalogue {
  display: flex;
  align-items: center;
  background: linear-gradient(117deg, #1d60e9 0%, #303ae8 100%);
  padding: 120px 360px;
  box-sizing: border-box;

  .catLeft {
    margin-right: 108px;

    .claTitle {
      margin-bottom: 137px;
      user-select: none;

      .claTxt {
        font-size: 60px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.1);
      }

      .claText {
        margin-top: -40px;
        font-size: 40px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        text-align: center;
      }
    }

    .catTab {
      height: 48px;
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 40px;
      opacity: 0.3;
      cursor: pointer;
    }

    .catTab.on {
      opacity: 1;
      background-image: url(https://img1.baidu.com/it/u=1551984564,146290302&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400);
      background-size: 96px 4px;
      background-repeat: no-repeat;
      background-position: left 40px;
    }

    .und {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      padding-top: 100px;
      cursor: pointer;
    }
  }

  .catRight {
    // border: 1px solid #000;

    .catBox {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 800px;

      .catCont {
        padding: 30px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        width: 392px;
        margin-bottom: 15px;

        .catFlex {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .catTime {
            width: 100px;
            font-size: 28px;
            font-family: DINPro-Bold, DINPro;
            font-weight: bold;
            color: #ffffff;
          }

          .catText {
            width: 60%;
            flex-grow: 1;
            height: 26px;
            font-size: 19px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            overflow: hidden;
          }

          .catNumb {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            width: 100px;
            opacity: 0.5;
            &.year {
              height: 40px;
            }
          }

          .catTxt {
            width: 60%;
            flex-grow: 1;
            height: 40px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            opacity: 0.5;
            overflow: hidden;
          }

          .catImg {
            width: 15px;
            height: 12px;
            margin-right: 10px;
            // opacity: 0.5;
          }
        }

        .catFlex.on {
          margin-bottom: 20px;
        }
      }

      .catCont:hover {
        background: rgba(255, 255, 255, 1);
        cursor: pointer;

        .catFlex {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .catTime {
            width: 100px;
            font-size: 28px;
            font-family: DINPro-Bold, DINPro;
            font-weight: bold;
            color: #333333;
          }

          .catText {
            font-size: 19px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
          }

          .catNumb {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            width: 100px;
          }

          .catTxt {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
          }

          .catImg {
            width: 15px;
            height: 12px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}

.special {
  margin-top: 100px;

  .claTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 70px;
    user-select: none;

    .claTxt {
      font-size: 60px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: rgba(24, 78, 233, 0.1);
    }

    .claText {
      margin-top: -40px;
      font-size: 40px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
  }

  .speCard {
    display: flex;
    padding: 0 310px 0 220px;
    box-sizing: border-box;
    align-items: center;
    // justify-content: center;
    flex-wrap: wrap;

    .speCardCont {
      padding: 10px;
      background: #ffffff;
      box-shadow: 0px 0px 30px 5px rgba(88, 134, 253, 0.2);
      border: 1px solid #ebf0f6;
      box-sizing: border-box;
      cursor: pointer;
      margin-left: 90px;
      margin-bottom: 40px;

      .speImg {
        width: 320px;
        height: 180px;
      }

      .speText {
        width: 320px;
        height: 25px;
        overflow: hidden;
        font-size: 18px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #323232;
        margin-top: 20px;
      }

      .speTxt {
        width: 320px;
        height: 20px;
        overflow: hidden;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #686868;
        margin-top: 10px;
      }
    }
  }
}

.btn {
  display: flex;
  justify-content: center;
  margin-top: 100px;
  padding-bottom: 120px;
}

.el-login-footer {
  height: 60px;
  line-height: 60px;
  background: #1c1c28;
  position: relative;
  bottom: 0;
  width: 100%;
  text-align: center;

  .span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    margin-left: 34px;
  }
}
</style>
