<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="10" class="left">
              <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="con" v-for="(item, index) in sphy" :key="index">
                <el-col :span="5" class="time"> {{ getdate(item.create_time) }}</el-col>
                <el-col :span="19" class="list">
                  <el-col :span="24" class="title1">{{ item.title }}</el-col>
                  <el-col :span="24" class="con1" v-html="item.content"></el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="14" class="right">
              <el-tabs v-model="activeName">
                <el-tab-pane label="专题研讨" name="first">
                  <el-col :span="24" class="ztyt">
                    <el-col :span="24" class="list1" v-for="(item, index) in ztyt" :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-tab-pane>
                <el-tab-pane label="技术问答" name="second"
                  ><el-col :span="24" class="ztyt">
                    <el-col :span="24" class="list1" v-for="(item, index) in jswd" :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-tab-pane
                >
                <el-tab-pane label="行业研究" name="third"
                  ><el-col :span="24" class="ztyt">
                    <el-col :span="24" class="list1" v-for="(item, index) in hyyj" :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-tab-pane
                >
                <el-tab-pane label="教育培训" name="fourth"
                  ><el-col :span="24" class="ztyt">
                    <el-col :span="24" class="list1" v-for="(item, index) in jypx" :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-tab-pane
                >
              </el-tabs>
            </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: kjpxColumn } = createNamespacedHelpers('kjpxColumn');
const { mapActions: kjpxInfo } = createNamespacedHelpers('kjpxInfo');
const { mapActions: video } = createNamespacedHelpers('video');
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 {
      kjpx: [
        {
          time: '19-25',
          title: '【重点任务看进展】经济体制改革深入推进',
          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
        },
        {
          time: '19-25',
          title: '【重点任务看进展】经济体制改革深入推进',
          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
        },
        {
          time: '19-25',
          title: '【重点任务看进展】经济体制改革深入推进',
          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
        },
        {
          time: '19-25',
          title: '【重点任务看进展】经济体制改革深入推进',
          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
        },
        {
          time: '19-25',
          title: '【重点任务看进展】经济体制改革深入推进',
          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
        },
        {
          time: '19-25',
          title: '【重点任务看进展】经济体制改革深入推进',
          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
        },
        {
          time: '19-25',
          title: '【重点任务看进展】经济体制改革深入推进',
          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
        },

        {
          time: '19-25',
          title: '【重点任务看进展】经济体制改革深入推进',
          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
        },
        {
          time: '19-25',
          title: '【重点任务看进展】经济体制改革深入推进',
          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
        },
        {
          time: '19-25',
          title: '【重点任务看进展】经济体制改革深入推进',
          text: '临近年底，一系列重要改革继续保持年初以来的节奏密集展开。11月22日，《市场准入负面清单（2019年版）》发布',
        },
      ],
      activeName: 'first',
      //科技培训
      kjpxColumn: [],
      //专题研讨
      ztyt: [],
      //技术问答
      jswd: [],
      //行业研究
      hyyj: [],
      //教育培训
      jypx: [],
      //视频会议中心
      sphy: [],
      //头尾信息
      infoMes: {},
    };
  },
  created() {
    this.searchColumn();
  },
  methods: {
    ...kjpxColumn({ columnquery: 'query', columncreate: 'create', columnfetch: 'fetch', columnupdate: 'update', columndelete: 'delete' }),
    ...kjpxInfo({ kjpxquery: 'query', kjpxcreate: 'create', kjpxfetch: 'fetch', kjpxupdate: 'update', kjpxdelete: 'delete' }),
    ...video({ videoquery: 'query', videocreate: 'create', videofetch: 'fetch', videoupdate: 'update', videodelete: 'delete' }),
    ...siteInfo({ sitequery: 'query' }),
    //查询栏目
    async searchColumn() {
      const res = await this.columnquery();
      if (res.errcode === 0) {
        this.$set(this, `kjpxColumn`, 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.kjpxColumn;
      let ztyt = col.find(i => i.site == 'ztyt');
      const res = await this.kjpxquery({ column_id: ztyt.id, limit: 16 });
      if (res.errcode === 0) {
        this.$set(this, `ztyt`, res.data);
      }
      let jswd = col.find(i => i.site == 'jswd');
      const res1 = await this.kjpxquery({ column_id: jswd.id, limit: 16 });
      if (res1.errcode === 0) {
        this.$set(this, `jswd`, res1.data);
      }
      let hyyj = col.find(i => i.site == 'hyyj');
      const res2 = await this.kjpxquery({ column_id: hyyj.id, limit: 16 });
      if (res2.errcode === 0) {
        this.$set(this, `hyyj`, res2.data);
      }
      let jypx = col.find(i => i.site == 'jypx');
      const res3 = await this.kjpxquery({ column_id: jypx.id, limit: 16 });
      if (res3.errcode === 0) {
        this.$set(this, `jypx`, res3.data);
      }
      const res4 = await this.videoquery({ limit: 6 });
      if (res4.errcode === 0) {
        this.$set(this, `sphy`, res4.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-bottom: 10px;
  margin-top: 10px;
  .left {
    width: 514px;
    height: 612px;
    margin-right: 10px;
    background: #fff;
    overflow: hidden;
    .con {
      padding: 0px 10px;
      margin-bottom: 27px;
      .time {
        height: 20px;
        background-color: #005293;
        width: 60px;
        line-height: 20px;
        text-align: center;
        color: #fff;
      }
      .list {
        padding-left: 10px;
        .title1 {
          font-size: 17px;
          color: #005293;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .con1 {
          font-size: 15px;
          color: #666;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
  .right {
    width: 676px;
    height: 612px;
    background-color: #fff;
    padding: 10px 10px 0px 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;
    }
  }
  .ztyt {
    overflow: hidden;
    height: 538px;
    .list1 {
      padding: 0px 20px;
      font-size: 16px;
      color: #555555;
      font-family: '微软雅黑';
      padding: 4.5px 20px;
      .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;
      }
    }
    .list1:last-child {
      padding-bottom: 0;
    }
  }
}
/deep/.el-tabs__item {
  font-size: 20px;
}
/deep/.el-tabs__active-bar {
  width: 80px;
  background-color: #005293;
}
/deep/.el-tabs__item.is-active {
  color: #005293;
}
/deep/.el-tabs__item:hover {
  color: #005293;
}
</style>
