<template>
  <div id="xuexi">
    <el-row>
      <el-col :span="24" class="top">
        <el-col :span="10">
          <el-image style="width:100%;height:40px;" :src="left"></el-image>
        </el-col>
        <el-col :span="4" class="topTitle">
          {{ title }}
        </el-col>
        <el-col :span="10">
          <el-image style="width:100%;height:40px;" :src="right"></el-image>
        </el-col>
      </el-col>
      <el-col :span="24" class="info">
        <el-col :span="8" class="infoLeft" v-loading="loading">
          <el-col :span="24" class="infoLeftTop">
            <el-col :span="18" class="leftTopTitle">
              <span>{{ dangguiList.title }}</span>
            </el-col>
            <el-col :span="6" class="leftTopMore">
              <el-link :underline="false" @click="$router.push({ path: dangguiList.path, query: { title: dangguiList.title } })"
                >更多<i class="el-icon-plus"></i
              ></el-link>
            </el-col>
          </el-col>
          <el-col :span="24" class="infoLeftList">
            <el-col
              :span="24"
              class="rencaiList"
              v-for="(item, index) in infoList"
              :key="index"
              @click.native="$router.push({ path: `/memberDetail?id=${item.id}` })"
            >
              <el-col :span="24" class="title">
                <p class="textOver"><i class="el-icon-s-flag icon"></i>{{ item.title }}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="8" class="infoLeft" v-loading="loading">
          <el-col :span="24" class="infoLeftTop">
            <el-col :span="18" class="leftTopTitle">
              <span>{{ zhishiList.title }}</span>
            </el-col>
            <el-col :span="6" class="leftTopMore">
              <el-link :underline="false" @click="$router.push({ path: zhishiList.path, query: { title: zhishiList.title } })"
                >更多<i class="el-icon-plus"></i
              ></el-link>
            </el-col>
          </el-col>
          <el-col :span="24" class="infoLeftList">
            <el-col
              :span="24"
              class="zhishiList"
              v-for="(item, index) in infosList"
              :key="index"
              @click.native="$router.push({ path: `/memberDetail?id=${item.id}` })"
            >
              <el-col :span="16" class="title">
                <p class="textOver"><i class="el-icon-s-flag icon"></i>{{ item.title }}</p>
              </el-col>
              <el-col :span="8" class="date"> [{{ item.meta | getDate }}] </el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="8" class="infoLeft" v-loading="loading">
          <el-col :span="24" class="infoLeftTop">
            <el-col :span="18" class="leftTopTitle">
              <span>{{ zhunti.title }}</span>
            </el-col>
            <el-col :span="6" class="leftTopMore">
              <el-link :underline="false" @click="$router.push({ path: zhunti.path, query: { title: zhunti.title } })"
                >更多<i class="el-icon-plus"></i
              ></el-link>
            </el-col>
          </el-col>
          <el-col :span="24" class="infoRightList">
            <el-col :span="24" v-for="(item, index) in infossList" :key="index" @click.native="$router.push({ path: `/memberDetail?id=${item.id}` })">
              <el-col :span="24">
                <el-image style="width:400px;height:280px;" :src="item.pic" v-if="item.pic"></el-image>
                <el-image style="width:400px;height:280px;" :src="Nopic" v-else></el-image>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'xuexi',
  props: {
    dangguiList: null,
    zhishiList: null,
    zhunti: null,
  },
  components: {},
  data: () => ({
    title: '学习园地',
    left: require('@/assets/messageLeft.jpg'),
    right: require('@/assets/messageRight.jpg'),
    infoList: [],
    infosList: [],
    infossList: [],
    loading: true,
    Nopic: require('@/assets/noPic2.png'),
  }),
  watch: {
    dangguiList: {
      handler(val) {
        if (val) this.assignData(val);
      },
    },
    zhishiList: {
      handler(val) {
        if (val) this.assignDatas(val);
      },
    },
    zhunti: {
      handler(val) {
        if (val) this.assignDatass(val);
      },
    },
  },
  created() {},
  computed: {},
  methods: {
    assignData(data) {
      let infoList = _.get(data, 'children');
      this.$set(this, `infoList`, infoList);
      this.loading = false;
    },
    assignDatas(data) {
      let infosList = _.get(data, 'children');
      this.$set(this, `infosList`, infosList);
      this.loading = false;
    },
    assignDatass(data) {
      let infossList = _.get(data, 'children');
      this.$set(this, `infossList`, infossList);
      this.loading = false;
    },
  },
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon {
  color: #bd010b;
  margin: 0 15px 0 0;
}
.top {
  height: 40px;
  line-height: 40px;
  margin: 0 0 40px 0;
}
.top .topTitle {
  font-size: 38px;
  color: #bd010b;
  text-align: center;
  font-weight: bold;
  font-family: '微软雅黑';
}
.info {
  height: 400px;
  overflow: hidden;
}
.infoLeft {
  width: 400px;
  height: 337px;
  overflow: hidden;
  margin: 0 30px 0 0;
}
.infoLeft:last-child {
  margin: 0;
}
.infoLeftTop {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #ccc;
}
.infoLeftTop .leftTopTitle span {
  display: inline-block;
  height: 39px;
  text-align: center;
  border-bottom: 1px solid #bd010b;
  font-size: 18px;
  color: #bd000b;
}
.infoLeftTop .leftTopMore {
  height: 39px;
  line-height: 30px;
  text-align: right;
  padding: 0 10px;
}
.rencaiList {
  padding: 8px;
}
.rencaiList .title p {
  font-size: 16px;
  color: #333;
}
.rencaiList .date {
  font-size: 16px;
  color: #333;
  text-align: right;
}
.rencaiList:hover {
  cursor: pointer;
}
.rencaiList:hover .title p {
  color: #bd000b;
}
.rencaiList:hover .date {
  color: #bd000b;
}
.zhishiList {
  padding: 8px;
}
.zhishiList .title {
  padding: 4px 0;
}
.zhishiList .title p {
  font-size: 16px;
  color: #333;
}
.zhishiList .title .color {
  color: #bd000b;
}
.zhishiList .date {
  font-size: 16px;
  color: #333;
  text-align: right;
}
.zhishiList:hover {
  cursor: pointer;
}
.zhishiList:hover .title p {
  color: #bd000b;
}
.zhishiList:hover .date {
  color: #bd000b;
}
.infoRightList {
  padding: 15px 0;
}
.infoRightList:hover {
  cursor: pointer;
}
</style>
