<template>
  <div class="home">
    <div class="home-swiper">
      <el-carousel height="484px" :interval="4000" v-if="swiperList">
        <el-carousel-item v-for="(item, index) in swiperList" :key="index">
          <el-image
            :src="item.pc_image"
            alt=""
            class="swiper-img"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="news-wrapper">
      <div class="new-pic">
        <el-carousel :interval="4000" height="344px" indicator-position="none">
          <el-carousel-item
            v-for="(item, index) in redNews.slice(0, 3)"
            :key="index"
          >
            <img
              :src="item.image"
              @click="navTo('/news/detail?id=' + item.id)"
              class="hand"
            />
            <div class="title clamp hand">{{ item.title }}</div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="news">
        <item-title title="红会新闻" :topath="'/news'"></item-title>
        <div class="item-wrapper">
          <div
            class="new-item hand"
            v-for="item in redNews"
            :key="item.id"
            @click="navTo('/news/detail?id=' + item.id)"
          >
            <div class="title clamp">
              <span></span>
              {{ item.title }}
            </div>
            <div class="time">{{ item.releasetime.split(" ")[0] }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-body">
      <div class="body-left moren">
        <div class="red-new">
          <item-title title="信息公示" :topath="'/publicity'"></item-title>
          <div class="item-wrapper">
            <div
              class="new-item hand"
              v-for="item in openNews"
              :key="item.id"
              @click="navTo('/publicity/detail?id=' + item.id)"
            >
              <div class="title clamp">
                <span></span>
                {{ item.title }}
              </div>
              <div class="time">{{ item.releasetime.split(" ")[0] }}</div>
            </div>
          </div>
        </div>
        <div class="join">
          <item-title title="公众参与" :topath="'/donation'"></item-title>
          <div class="join-main">
            <div
              class="join-item"
              v-for="item in miniNavList"
              @click="navTo(item.path)"
              :key="item.title"
            >
              <div class="logo hand"><img :src="item.image" /></div>
              <div class="title hand">{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="body-right">
        <div class="new-open">
          <item-title
            title="县市区红会动态"
            :topath="'/newContent'"
          ></item-title>
          <div class="item-wrapper">
            <div v-if="xsqList.length == 0" class="new-item hand">
              数据加载中...
            </div>
            <div
              class="new-item hand"
              v-for="item in xsqList"
              :key="item.id"
              @click="newsClick(item)"
            >
              <div class="title clamp">
                <span></span>
                {{ item.title }}
              </div>
              <div class="time">{{ item.releasetime.split(" ")[0] }}</div>
            </div>
          </div>
        </div>
        <div class="loadmore" @click="lookm()">
          <img src="../assets/img/lookm.png" />
        </div>
        <div class="list">
          <item-title title="爱心榜" :topath="'/loveList'"></item-title>
          <div class="list-title flex">
            <div>捐献时间</div>
            <div>捐献者</div>
            <div>捐献金额</div>
            <!-- <div>捐献意向</div> -->
          </div>

          <div class="table-empty" v-if="jxList.length == 0">
            暂无更多捐赠数据
          </div>
          <template v-else>
            <div
              class="list-item flex"
              v-for="(item, index) in jxList"
              :key="index"
            >
              <div class="clamp">{{ item.paytime | getTime }}</div>
              <div class="clamp">{{ item.name || item.contact}}</div>
              <div class="clamp">{{ item.amount + "元" }}</div>
              <!-- <div class="clamp">{{ item.intention }}</div> -->
            </div>
          </template>
        </div>
      </div>
    </div>
    <img src="../assets/img/m2.png" class="show-live" />
    <div class="show-pic">
      <item-title title="红会风采" isShow="2"></item-title>
      <div class="imgs-wrapper">
        <div class="imgs">
          <img
            v-for="item in imgList"
            :key="item.id"
            :src="item.image"
          />
        </div>
      </div>
    </div>
    <div class="friends">
      <item-title title="友情链接" isShow="2"></item-title>
      <div class="friend-list-wrapper">
        <div class="friend-item" v-for="item in friendList" :key="item.id">
          <a :href="item.link" class="item-a" target="_blank">{{
            item.name
          }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ItemTitle from "./homeChild/ItemTitle.vue";

import {
  getArtList,
  loadIndexs,
  splist,
  loveList,
  friendList,
  newsList,
  openList,
  banner,
  regulationList,
  getList,
} from "../request/api.js";
export default {
  components: {
    ItemTitle,
  },
  data() {
    return {
      miniNavList: [
        {
          path: "/donation/contribution",
          title: "爱心捐款",
          image: require("@/assets/img/i1.png"),
        },
        {
          path: "/donation/organDonation",
          title: "遗体及器官捐献",
          image: require("@/assets/img/i2.png"),
        },
        {
          path: "/donation/Hpc",
          title: "造血干细胞捐献",
          image: require("@/assets/img/i3.png"),
        },
        {
          path: "/join/rescue",
          title: "加入救在身边",
          image: require("@/assets/img/i4.png"),
        },
        {
          path: "/join/member",
          title: "会员入会登记",
          image: require("@/assets/img/i5.png"),
        },
        {
          path: "/join/volunteer",
          title: "志愿者报名",
          image: require("@/assets/img/i6.png"),
        },
        {
          path: "/join/train",
          title: "普及培训报名",
          image: require("@/assets/img/i7.png"),
        },
        {
          path: "/popularScience/list",
          title: "红会科普",
          image: require("@/assets/img/i8.png"),
        },
      ],
      swiperList: [],
      // jxList: [],
      spList: [],
      imgList: [],
      friendList: [
        {
          link: "https://www.redcross.org.cn/",
          id: "111",
          name: "中国红十字会",
        },
        {
          link: "https://www.crcf.org.cn/",
          id: "112",
          name: "中国红十字基金会",
        },
        {
          link: "https://www.codac.org.cn/",
          id: "113",
          name: "中国人体器官捐献管理中心",
        },
        {
          link: "http://www.hbsredcross.org.cn/",
          id: "114",
          name: "湖北省红十字会",
        },
		 {
          link: "http://www.wuhanrc.org.cn/",
          id: "115",
          name: "武汉市红十字会",
        }
      ],
      redNews: [],
      openNews: [],
      regulationList: [],
      moreJxList: [],
      timer: null,
      xsqList: [],
    };
  },
  filters: {
    getTime(val) {
      let date = new Date(val * 1000);
      let Y = date.getFullYear();
      let M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let D = date.getDate() < 10 ? "0" + date.getDay() : date.getDate();
      return Y + "." + M + "." + D;
    },
    time(val) {
      if (val) {
        let arr = val.split(" ");
        let str = arr[0];
        str = str.replace(/-/g, ".");
        return str;
      }
      return;
    },
  },
  computed: {
    jxList() {
      return this.moreJxList.slice(0, 3);
    },
  },
  created() {
    // this.getSwiperList();
    // 加载轮播退
    this.getIndex();
    // this.getFirstAidList();
    // 获取爱心捐款
    this.getJxList();
    // 获取红会新闻
    this.getNewsList();
    // 获取信息公示
    this.getOpenList();
    // this.getRegulationList();
    // 获取县市区红会动态
    this.getXsqList();
    // 获取红会风采
    this.getRedFc();
  },
  methods: {
    newsClick(item) {
      console.log(item, "article_category_id+++++");
      let path = "";
      switch (item.article_category_id) {
        case "46":
          path = "hhs";
          break;
        case "44":
          path = "jlx";
          break;
        case "45":
          path = "sss";
          break;
        case "47":
          path = "jzq";
          break;
        case "48":
          path = "ssq";
          break;
        case "49":
          path = "szs";
          break;
        case "50":
          path = "jls";
          break;
        default:
          break;
      }
      // let url = '/newContent/' + path + '/detail?id=' + item.id
      console.log(path);

      this.navTo("/newContent/" + path + "/detail?id=" + item.id);
    },
    getXsqList() {
      let list = [];
      let obj = this;
      getArtList({
        ifyid: 43,
        page: 1,
        limit: 6,
      }).then((res) => {
        // obj.redNews = res.data.list.sort(this.compare('id'));
        console.log(res);
        obj.xsqList = res.data.list.sort(obj.compare("releasetime"));
      });
      // let d = 0
      // for (let i = 53; i < 60; i++) {
      // 	getList({
      // 		page: 1,
      // 		limit: 6
      // 	}, i).then(({
      // 		data
      // 	}) => {
      // 		d++
      // 		console.log(i)
      // 		console.log(data.list)
      // 		data.list.forEach(item => {
      // 			item.path = i
      // 			return item
      // 		})
      // 		list = list.concat(data.list)
      // 		if (i == 59) {
      // 			console.log(list)
      // 			this.xsqList = list.sort(this.comparet('release_time')).slice(0, 6)
      // 		}
      // 	})

      // }
    },
    lookm() {
      // console.log('newCenter')
      this.navTo("/directories");
    },
    navTo(url) {
      this.$router.push(url);
    },
    getIndex() {
      loadIndexs()
        .then(({ data }) => {
          // alert('hhhhhhh')
        //   this.friendList = data.friend_link;
          // this.imgList = data.picture_list;
          this.swiperList = data.banner.filter((item) => {
            if (item.pc_image != "") {
              return item;
            }
          });
        })
        .catch((err) => {
          console.log(err);
          // alert('dddddddddddddd')
        });
    },
    getFirstAidList() {
      splist({
        page: 1,
        limit: 5,
      }).then(({ data }) => {
        this.spList = data.list;
      });
    },
    // 获取爱心捐款
    getJxList() {
      let obj = this;
      let data = {
        page: 1,
        limit: 20,
      };
      loveList(data).then((res) => {
        console.log(res);
        obj.moreJxList = res.data.data;
        console.log(obj.moreJxList, "obj.moreJxList++++++++++++++++++++");
        obj.gundong();
      });
    },
    gundong() {
      let obj = this;
      obj.timer = setTimeout(() => {
        obj.moreJxList.push(obj.moreJxList.shift());
        // console.log(obj.moreJxList)
        obj.gundong();
      }, 2000);
    },
    // 获取红会新闻
    getNewsList() {
      let obj = this;
      getArtList({
        ifyid: 5,
        page: 1,
        limit: 9,
      }).then((res) => {
        // obj.redNews = res.data.list.sort(this.compare('id'));
        console.log(res);
        obj.redNews = res.data.list.sort(this.compare("releasetime"));
      });
    },
    getOpenList() {
      let obj = this;
      getArtList({
        ifyid: 6,
        page: 1,
        limit: 9,
      }).then((res) => {
        obj.openNews = res.data.list.sort(this.compare("releasetime"));
        // console.log(obj.openNews)
      });
    },
    getSwiperList() {
      let obj = this;
      // banner().then(res => {
      // 	let list = res.data.list.map(item => {
      // 		return item.image_input[0];
      // 	});
      // 	obj.swiperList = list;
      // });
    },
    getRegulationList() {
      let obj = this;
      regulationList({
        page: 1,
        limit: 6,
      }).then((res) => {
        obj.regulationList = res.data.list.sort(this.compare("id"));
      });
    },
    compare(attribute) {
      return function (obj1, obj2) {
        var val1 = obj1[attribute];
        var val2 = obj2[attribute];
        if (val1 < val2) {
          return 1;
        } else if (val1 > val2) {
          return -1;
        } else {
          return 0;
        }
      };
    },
    comparet(attribute) {
      return function (obj1, obj2) {
        let val1 = obj1[attribute].split(".").join("") * 1;
        var val2 = obj2[attribute].split(".").join("") * 1;
        if (val1 < val2) {
          return 1;
        } else if (val1 > val2) {
          return -1;
        } else {
          return 0;
        }
      };
    },
    getRedFc() {
      let obj = this;
      getArtList({
        ifyid: 60,
        page: 1,
        limit: 10,
      }).then((res) => {
        obj.imgList = res.data.list.sort(this.compare("releasetime"));
        // console.log(obj.openNews)
      });
    },
  },
};
</script>

<style lang="scss" spcode>
.home-swiper {
  width: 1200px;
  height: 484px;
  // background: pink;
  margin: -20px auto 24px;

  el-carousel {
    width: 1200px;

    el-carousel-item {
      width: 1200px;
      height: 484px;
    }
  }

  .swiper-img {
    width: 100%;
    height: 100%;
  }
}

.news-wrapper {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: 24px auto;

  .new-pic {
    width: 521px;
    height: 344px;
    // background-color: #ffff00;
    position: relative;

    img {
      width: 521px;
      height: 344px;
    }

    .title {
      width: 481px;
      height: 55px;
      padding-left: 20px;
      padding-right: 20px;
      background: #262626;
      opacity: 0.8;
      line-height: 55px;
      font-size: 24px;
      font-family: inpinheiti;
      font-weight: 400;
      color: #ffffff;
      position: absolute;
      bottom: 0;
    }
  }

  .news {
    width: 659px;
    height: 344px;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  }
}

.home-body {
  width: 1200px;
  margin: 24px auto;

  // display: flex;
  // justify-content: space-between;
  .body-left {
    width: 1200px;
    display: flex;
    justify-content: space-between;

    .join {
      width: 588px;
      height: 344px;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
      margin-bottom: 24px;

      .join-main {
        padding-left: 46px;
        padding-top: 15px;
        display: flex;
        flex-wrap: wrap;

        .join-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-right: 28px;
          margin-bottom: 14px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #323131;
          line-height: 1;

          .logo {
            width: 103px;
            height: 103px;
            border: 1px solid #dadada;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              width: 50px;
              height: 50px;
            }
          }

          .title {
            padding-top: 10px;
          }
        }
      }
    }

    .red-new {
      width: 588px;
      height: 344px;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
      margin-bottom: 24px;
      // padding: 20px 15px 0 13px;
    }

    .new-open {
      // padding: 20px 15px 0 13px;
      width: 500px;
      height: 262px;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    }

    .item-wrapper {
      padding: 20px 15px 0 13px;

      .new-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 17px;

        &:hover {
          span {
            background: red;
          }

          .title {
            color: red;
          }

          .time {
            color: red;
          }
        }

        span {
          display: inline-block;
          width: 8px;
          height: 8px;
          background: #d8d8d8;
          // border-radius: 50%;
          transform: rotate(45deg);
          margin-right: 8px;
        }

        .title {
          width: 400px;
          height: 14px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #101010;

          &:hover {
            color: red;
          }
        }

        .time {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
        }
      }
    }
  }

  .body-right {
    display: flex;
    justify-content: space-between;

    .loadmore {
      width: 350px;

      // background-color: red;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .new-open {
      // padding: 20px 15px 0 13px;
      width: 450px;
      height: 262px;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    }

    .join {
      width: 588px;
      height: 344px;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
      margin-bottom: 24px;

      .join-main {
        padding-left: 46px;
        padding-top: 15px;
        display: flex;
        flex-wrap: wrap;

        .join-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-right: 28px;
          margin-bottom: 14px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #323131;
          line-height: 1;

          .logo {
            width: 103px;
            height: 103px;
            border: 1px solid #dadada;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              width: 50px;
              height: 50px;
            }
          }

          .title {
            padding-top: 10px;
          }
        }
      }
    }

    .list {
      width: 350px;
      height: 262px;
      background: #ffffff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

      .list-item {
        display: flex;
        border-bottom: 1px solid #f2f2f2;

        &:last-of-type {
          border-bottom: none;
        }

        div {
          width: 33.3%;
          height: 55px;
          line-height: 55px;
          text-align: center;
          font-size: 17px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666666;
        }
      }

      .list-title {
        display: flex;
        padding-top: 6px;

        div {
          width: 33.3%;
          font-size: 17px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #bf3333;
          text-align: center;
          line-height: 57px;
          height: 57px;
          border-bottom: 1px solid #f2f2f2;
        }
      }

      .is-leaf {
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #d82020 !important;
        text-align: center;
        // line-height: 54px;
        height: 54px;
      }

      .el-table__row > td {
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #101010;
        text-align: center;
        height: 55px;

        .cell {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: block;
        }
      }
    }
  }
}

.show-live {
  display: block;
  width: 1200px;
  height: 160px;
  margin: 24px auto;
  // background-color: #cbb385;
}

.show-pic {
  width: 1200px;
  // height: 192px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  margin: 24px auto;

  .imgs-wrapper {
    padding: 14px 12px;

    .imgs {
      width: 1176px;
      // height: 124px;
      display: flex;
      flex-wrap: nowrap;
      overflow: auto hidden;

      img {
        width: 186px;
        height: 124px;
        margin-right: 12px;
      }
    }
  }
}

.friends {
  width: 1200px;
  // height: 96px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  margin: 24px auto;

  .friend-list-wrapper {
    padding: 20px 28px 10px 28px;
    display: flex;
    flex-wrap: wrap;

    .friend-item {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #323131;
      margin-left: 51px;
      margin-bottom: 15px;

      .item-a {
        color: #323131;
      }
    }
  }
}

.el-carousel__button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.is-active {
  .el-carousel__button {
    background-color: #d82020 !important;
  }
}

.item-wrapper {
  padding: 20px 15px 0 13px;

  .new-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 17px;

    &:hover {
      span {
        background: red;
      }

      .title {
        color: red;
      }

      .time {
        color: red;
      }
    }

    span {
      display: inline-block;
      width: 8px;
      height: 8px;
      background: #d8d8d8;
      // border-radius: 50%;
      transform: rotate(45deg);
      margin-right: 8px;
    }

    .title {
      width: 400px;
      height: 14px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #101010;
      // &:hover {
      // 	color: red;
      // }
    }

    .time {
      flex-shrink: 0;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
    }
  }
}

.table-empty {
  // width: 100%;
  text-align: center;
  // border: 2px solid #f2f2f2;
  font-size: 16px;
  line-height: 36px;
  font-family: PingFang SC;
  // font-weight: bold;
  border-top: none;
  color: #999;
}
</style>
