<template>
  <div id="dangjian">
    <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>{{ rencaiList.title }}</span>
            </el-col>
            <el-col :span="6" class="leftTopMore">
              <el-link :underline="false" @click="$router.push({ path: rencaiList.path, query: { title: rencaiList.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="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>{{ dangjianList.title }}</span>
            </el-col>
            <el-col :span="6" class="leftTopMore">
              <el-link :underline="false" @click="$router.push({ path: dangjianList.path, query: { title: dangjianList.title } })"
                >更多<i class="el-icon-plus"></i
              ></el-link>
            </el-col>
          </el-col>
          <el-col :span="24" class="infoCenterList">
            <el-col
              :span="12"
              class="dangjianList"
              v-for="(item, index) in infosList"
              :key="index"
              @click.native="$router.push({ path: `/memberDetail?id=${item.id}` })"
            >
              <el-col :span="24" class="imageTit">
                <el-image style="width:180px;height:120px;" :src="item.pic" v-if="item.pic"></el-image>
                <el-image style="width:180px;height:120px;" :src="Nopic" v-else></el-image>
              </el-col>
              <el-col :span="24" class="title">
                <p>{{ 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>{{ yaowenList.title }}</span>
            </el-col>
            <el-col :span="6" class="leftTopMore">
              <el-link :underline="false" @click="$router.push({ path: yaowenList.path, query: { title: yaowenList.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 infossList"
              :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>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'dangjian',
  props: {
    rencaiList: null,
    dangjianList: null,
    yaowenList: null,
  },
  components: {},
  data: () => ({
    title: '基层党建',
    leftTopTitle: '人才建设',
    centerTopTitle: '党建综合',
    rightTopTitle: '党建要闻',
    left: require('@/assets/messageLeft.jpg'),
    right: require('@/assets/messageRight.jpg'),
    infoList: [],
    infosList: [],
    infossList: [],
    loading: true,
    Nopic: require('@/assets/noPic.png'),
  }),
  watch: {
    rencaiList: {
      handler(val) {
        if (val) this.assignData(val);
      },
    },
    dangjianList: {
      handler(val) {
        if (val) this.assignDatas(val);
      },
    },
    yaowenList: {
      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: 318px;
  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: 9px;
}
.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;
}
.infoCenterList {
  margin: 18px 0 0 0;
}
.dangjianList {
  position: relative;
  width: 180px;
  height: 120px;
  overflow: hidden;
  margin: 0 15px 10px 15px;
}
.dangjianList:nth-child(2n) {
  margin: 0;
}
.dangjianList .title {
  position: absolute;
  top: 0;
  width: 180px;
  height: 120px;
  background: #0000004f;
  display: none;
}
.dangjianList:hover .title {
  display: block;
  cursor: pointer;
}
.dangjianList .title p {
  color: #fff;
  font-size: 18px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin: 36px 10px;
}
</style>
