<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="24" class="one">
              <el-image :src="url" style="width:100%; height:100%"></el-image>
              <p>提示信息</p>
            </el-col>
            <el-col :span="18" 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" @click.native="to()">
                  <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">
                    {{ item.create_time }}
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="three">
              <el-col :span="8" class="tzgg commom">
                <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 tzgg" :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 :span="8" class="zcfg commom">
                <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 zcfg" :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 :span="8" class="kjfw commom">
                <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">
                  <span class="img" v-for="(item, index) in imgs" :key="index">
                    <el-link :href="item.href1" :underline="false">
                      <el-image :src="item.url" style="width: 170px;height: 53px;"></el-image>
                    </el-link>
                  </span>
                </el-col>
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24">
          <link1 :links="links"></link1>
        </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';
import link1 from '../components/common/link1.vue';
const { mapActions: link } = createNamespacedHelpers('links');
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,
    link1,
  },
  data: function() {
    return {
      url: require('@/assets/map.jpg'),
      links: [],
      imgs: [
        {
          url: require('../assets/service1.jpg'),
          href1: '',
        },
        {
          url: require('../assets/service2.jpg'),
          href1: '',
        },
        {
          url: require('../assets/service3.jpg'),
          href1: '',
        },
        {
          url: require('../assets/service4.jpg'),
          href1: '',
        },
        {
          url: require('../assets/service5.jpg'),
          href1: '',
        },
        {
          url: require('../assets/service6.jpg'),
          href1: '',
        },
        {
          url: require('../assets/service7.jpg'),
          href1: '',
        },
        {
          url: require('../assets/service8.jpg'),
          href1: '',
        },
      ],
      //科技资讯下栏目
      kjdtColumn: [],
      //图片新闻信息
      tpxw1: [],
      //最新资讯信息
      zxzx: [],
      //通知公告
      tzgg: [],
      //政策法规
      zcfg: [],
      //信息
      infoMes: {},
    };
  },
  created() {
    this.search();
    this.searchColumn();
  },
  methods: {
    ...link({ linkquery: 'query', linkcreate: 'create', linkfetch: 'fetch', linkupdate: 'update', linkdelete: 'delete' }),
    ...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 search() {
      const res = await this.linkquery();
      if (this.$checkRes(res)) {
        this.$set(this, `links`, res.data);
      }
      const res1 = await this.sitequery();
      if (this.$checkRes(res1)) {
        this.$set(this, `infoMes`, res1.data[0]);
      }
    },
    //查询栏目
    async searchColumn() {
      const res = await this.columnquery();
      if (res.errcode === 0) {
        this.$set(this, `kjdtColumn`, res.data);
        this.search1();
      }
    },
    async search1() {
      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 zxzx = col.find(i => i.site == 'zxzx');
      const res2 = await this.kjzxquery({ column_id: zxzx.id, limit: 8 });
      if (res2.errcode === 0) {
        this.$set(this, `zxzx`, res2.data);
      }
      let tzgg = col.find(i => i.site == 'tztg');
      const res3 = await this.kjzxquery({ column_id: tzgg.id, limit: 8 });
      if (res3.errcode === 0) {
        this.$set(this, `tzgg`, res3.data);
      }
      let zcfg = col.find(i => i.site == 'zcfg');
      const res4 = await this.kjzxquery({ column_id: zcfg.id, limit: 8 });
      if (res4.errcode === 0) {
        this.$set(this, `zcfg`, res4.data);
      }
    },
    to() {
      this.$router.push({ path: '/list' });
    },
    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;
  .one {
    height: 354px;
    width: 514px;
    margin-right: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 12px;
    position: relative;
    p {
      position: absolute;
      left: 35px;
      bottom: 18px;
      font-size: 12px;
      color: #fff;
      line-height: 13px;
    }
  }
  .two {
    height: 354px;
    width: 676px;
    background-color: #fff;
    .list {
      height: 245px;
      overflow: hidden;
    }
  }
  .three {
    margin-top: 10px;
    .commom {
      width: 393px;
      margin-right: 10px;
      background: #fff;
      height: 360px;
      .title {
        width: 354px;
      }
      .list {
        height: 245px;
        overflow: hidden;
        .listInfo {
          .text {
            width: 280px;
          }
          .time {
            font-size: 13px;
          }
        }
        .img {
          display: inline-block;
          width: 170px;
          height: 53px;
          margin: 0px 10px 10px 0px;
          box-sizing: border-box;
        }
        .img:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
    .commom:last-child {
      margin-right: 0px;
    }
  }
}
.title {
  height: 39px;
  border-bottom: 1px solid #ccc;
  line-height: 39px;
  width: 636px;
  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: 3px 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: 510px;
      display: inline-block;
    }
    .time {
      text-align: right;
    }
  }
}
</style>
