<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24">
          <top :infoMes="infoMes"></top>
        </el-col>
        <el-col :span="24">
          <menus></menus>
        </el-col>
        <el-col :span="24" class="info">
          <div class="w_1200">
            <el-col :span="6" class="con">
              <el-col :span="24" class="one">
                <el-col :span="24" v-for="(item, index) in tpxw1" :key="index" style="width:100%; height:100%">
                  <el-image :src="item.picture" style="width:100%; height:100%"></el-image>
                  <p>{{ item.brief }}</p>
                </el-col>
              </el-col>
              <el-col :span="24" class="two">
                <el-col :span="24" class="title">
                  <el-col :span="18">
                    <div class="shu"></div>
                    <p>最新资讯</p>
                  </el-col>
                  <el-col :span="6" class="more">
                    <img src="../../assets/more.png" />
                  </el-col>
                </el-col>
                <el-col :span="24" class="list">
                  <el-col :span="24" class="listInfo" v-for="(item, index) in zxzx" :key="index">
                    <el-col :span="20">
                      <span class="circle"></span>
                      <span class="text">{{ item.title }}</span>
                    </el-col>
                    <el-col :span="4" class="time">
                      {{ getdate(item.create_time) }}
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="18" class="con1">
              <el-col :span="24" class="title">
                <el-col :span="18">
                  <div class="shu"></div>
                  <p>科技动态</p>
                </el-col>
                <el-col :span="6" class="more">
                  <img src="../../assets/more.png" />
                </el-col>
              </el-col>
              <el-col :span="24" class="list">
                <el-col :span="24" class="listInfo" v-for="(item, index) in kjdt" :key="index">
                  <el-col :span="20">
                    <span class="circle"></span>
                    <span class="text">{{ item.title }}</span>
                  </el-col>
                  <el-col :span="4" class="time">
                    {{ item.create_time }}
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24">
          <foot :infoMes="infoMes"></foot>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import top from '../../components/common/top.vue';
import menus from '../../components/common/menus.vue';
import foot from '../../components/common/foot1.vue';
const { mapActions: column } = createNamespacedHelpers('column');
const { mapActions: kjzxInfo } = createNamespacedHelpers('kjzxInfo');
const { mapActions: siteInfo } = createNamespacedHelpers('siteInfo');
var moment = require('moment');
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: {
    top,
    menus,
    foot,
  },

  data: function() {
    return {
      //科技资讯下所有栏目
      kjdtColumn: [],
      //图片新闻信息
      tpxw1: [],
      //科技动态信息
      kjdt: [],
      //最新资讯信息
      zxzx: [],
      //头尾信息
      infoMes: {},
    };
  },
  created() {
    this.searchColumn();
  },
  methods: {
    ...column({ columnquery: 'query', columncreate: 'create', columnfetch: 'fetch', columnupdate: 'update', columndelete: 'delete' }),
    ...kjzxInfo({ kjzxquery: 'query', kjzxcreate: 'create', kjzxfetch: 'fetch', kjzxupdate: 'update', kjzxdelete: 'delete' }),
    ...siteInfo({ sitequery: 'query' }),

    //查询栏目
    async searchColumn() {
      const res = await this.columnquery();
      if (res.errcode === 0) {
        this.$set(this, `kjdtColumn`, res.data);
        this.search();
      }
      const res1 = await this.sitequery();
      if (this.$checkRes(res1)) {
        this.$set(this, `infoMes`, res1.data[0]);
      }
    },
    async search() {
      let col = this.kjdtColumn;
      let tpxw = col.find(i => i.site == 'tpxw');
      const res = await this.kjzxquery({ column_id: tpxw.id });
      if (res.errcode === 0) {
        this.$set(this, `tpxw1`, res.data);
      }
      let kjdt = col.find(i => i.site == 'kjdt');
      const res1 = await this.kjzxquery({ column_id: kjdt.id, limit: 16 });
      if (res1.errcode === 0) {
        this.$set(this, `kjdt`, res1.data);
      }
      let zxzx = col.find(i => i.site == 'zxzx');
      const res2 = await this.kjzxquery({ column_id: zxzx.id, limit: 7 });
      if (res2.errcode === 0) {
        this.$set(this, `zxzx`, res2.data);
      }
    },
    getdate(value) {
      let date = moment(value).format('MM-DD');
      return date;
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.info {
  margin: 10px 0px;
  .con {
    height: 680px;
    width: 514px;
    margin-right: 10px;
    .one {
      height: 340px;
      width: 514px;
      background-color: #fff;
      position: relative;
      margin-bottom: 10px;
      p {
        width: 494px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        left: 0px;
        padding-left: 20px;
        bottom: 0px;
        font-size: 12px;
        color: #fff;
        line-height: 40px;
      }
    }
    .two {
      width: 514px;
      height: 330px;
      background-color: #fff;
      .list {
        height: 235px;
        overflow: hidden;
        .listInfo {
          .text {
            width: 380px;
          }
        }
      }
    }
  }
  .con1 {
    width: 676px;
    height: 680px;
    background-color: #fff;
    overflow: hidden;
    .title {
      width: 636px;
    }
    .list {
      overflow: hidden;
      height: 580px;
      .listInfo {
        .text {
          width: 490px;
        }
      }
      .listInfo:nth-child(8) {
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
      }
      .listInfo:nth-child(9) {
        padding-top: 20px;
      }
    }
  }
}
.title {
  height: 39px;
  border-bottom: 1px solid #ccc;
  line-height: 39px;
  width: 474px;
  margin: 20px;
  .shu {
    width: 4px;
    height: 20px;
    background-color: #005293;
    margin-right: 10px;
    display: inline-block;
    margin-bottom: -3px;
  }
  p {
    font-size: 20px;
    color: #005293;
    display: inline-block;
  }
  .more {
    text-align: right;
  }
}
.list {
  padding: 0px 20px;
  font-size: 16px;
  color: #555555;
  font-family: '微软雅黑';

  .listInfo {
    padding: 5px 0px;
    .circle {
      display: inline-block;
      width: 4px;
      height: 4px;
      margin: 0 10px 8px 0;
      background: #ccc;
    }
    .text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 380px;
      display: inline-block;
    }
    .time {
      text-align: right;
    }
  }
}
</style>
