<template>
  <div id="homeIndex">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__zoomInDown">
        <el-col :span="24" class="zero one">
          <el-col :span="16" class="one_1">
            <el-carousel height="500px">
              <el-carousel-item v-for="(item, index) in bannerList" :key="index" @click.native="toView(item, 'banner')">
                <el-image class="image" :src="item.img_url && item.img_url.length > 0 ? item.img_url[0].url : ''"></el-image>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="8" class="one_2">
            <el-col :span="24" class="newsList" v-for="(item, index) in newsList" :key="index" @click.native="toView(item, 'news')">
              <el-col :span="24" class="title textOver">{{ item.title }}</el-col>
              <el-col :span="24" class="date">{{ item.create_time }}</el-col>
              <el-col :span="24" class="brief">{{ item.brief }}</el-col>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="zero two">
          <el-col :span="6" class="twoList" v-for="(item, index) in siteInfo.advantage" :key="index">
            <el-col :span="24" class="title">{{ item.name }}</el-col>
            <el-col :span="24" class="brief">{{ item.brief }}</el-col>
            <el-col :span="24" class="image">
              <el-image :src="item.img_url && item.img_url.length > 0 ? item.img_url[0].uri : ''"></el-image>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="24" class="zero thr">
          <el-image :src="thr_url"></el-image>
        </el-col>
        <el-col :span="24" class="zero four">
          <el-col :span="14" class="four_1">
            <el-col :span="24" class="four_1_1">
              <span
                :class="['typeList', type_active == index ? 'typeActive' : '']"
                v-for="(item, index) in typeList"
                :key="index"
                @mouseenter="typeEnter(item, index)"
                >{{ item.label }}</span
              >
            </el-col>
            <el-col :span="24" class="four_1_2">
              <el-col :span="24" class="four1List" v-for="(item, index) in four1List" :key="index" @click.native="toView(item, 'news')">
                <el-col :span="4" class="date">
                  <el-col :span="24" class="date_1">{{ getDate(item.create_time, 'day') }}</el-col>
                  <el-col :span="24" class="date_2">{{ getDate(item.create_time, 'year') }}</el-col>
                </el-col>
                <el-col :span="20" class="info">
                  <el-col :span="24" class="title">{{ item.title }}</el-col>
                  <el-col :span="24" class="brief">{{ item.brief }}</el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="10" class="four_2">
            <el-col :span="24" class="four2List" v-for="(item, index) in four2List" :key="index">
              <el-image class="image" :src="item.url"></el-image>
              <el-col :span="24" class="title">{{ item.title }}</el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('company');
const { mapActions: banner } = createNamespacedHelpers('banner');
const { mapActions: news } = createNamespacedHelpers('news');
const { mapActions: dictdata } = createNamespacedHelpers('dictdata');

const moment = require('moment');
export default {
  name: 'homeIndex',
  props: {},
  components: {},
  data: function () {
    return {
      // 基本信息
      siteInfo: {},
      // 轮播图
      bannerList: [],
      // 新闻
      newsList: [],
      // 第三部分
      thr_url: require('@a/thr_1.jpg'),
      // 第四部分
      typeList: [],
      type_active: '0',
      four1List: [],
      four2List: [
        {
          url: require('@a/four_1.jpg'),
          title: '移动端APP开发定制',
        },
        {
          url: require('@a/four_2.jpg'),
          title: '网站系统开发定制',
        },
      ],
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...mapMutations(['deleteUser']),
    ...mapActions(['query']),
    ...banner({ bQuery: 'query' }),
    ...news({ nQuery: 'query' }),
    ...dictdata({ dQuery: 'query' }),
    async search() {
      // 公司信息
      let res;
      res = await this.query();
      if (this.$checkRes(res)) {
        this.$set(this, `siteInfo`, res.data);
        sessionStorage.setItem('companyInfo', JSON.stringify(res.data));
      }
      // 轮播图
      res = await this.bQuery({ skip: 0, limit: 6, is_use: '0', place: this.$route.meta.place });
      if (this.$checkRes(res)) {
        this.$set(this, `bannerList`, res.data);
      }
      // 新闻
      res = await this.nQuery({ skip: 0, limit: 6, is_use: '0', place: this.$route.meta.place });
      if (this.$checkRes(res)) {
        this.$set(this, `newsList`, res.data);
      }
    },
    // 新闻类型选择
    async typeEnter(e, index) {
      this.$set(this, `type_active`, index);
      let res = await this.nQuery({ skip: 0, limit: 4, is_use: '0', type: e.value });
      if (this.$checkRes(res)) {
        this.$set(this, `four1List`, res.data);
      }
    },
    // 整理时间
    getDate(e, type) {
      if (type == 'day') {
        let day = moment(e).format('MM/DD');
        if (day) return day;
        else '暂无';
      } else if (type == 'year') {
        let year = moment(e).format('YYYY');
        if (year) return year;
        else '暂无';
      }
    },
    // 详细信息
    toView(e, type) {
      this.$router.push({ path: '/detail/index', query: { id: e._id, type: type } });
    },
    // 查询其他信息
    async searchOther() {
      let res;
      // 新闻类型
      res = await this.dQuery({ type: 'news_type' });
      if (this.$checkRes(res)) {
        this.$set(this, `typeList`, res.data);
        if (res.total > 0) this.typeEnter(res.data[0], this.type_active);
      }
    },
  },
  computed: {
    ...mapState(['user', 'test']),
    ...mapGetters(['lab_id']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .zero {
    margin: 0 0 2vw 0;
  }
  .one {
    .one_1 {
      .image {
        width: 100%;
        height: 100%;
      }
    }
    .one_2 {
      padding: 0 10px;
      .newsList {
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
        border-bottom: 1px dashed #353535;
        .title {
          font-size: 20px;
          margin: 0 0 5px 0;
          font-weight: bold;
          font-family: cursive;
        }
        .date {
          font-size: 14px;
          margin: 0 0 5px 0;
        }
        .brief {
          font-size: 14px;
          color: #7e7e7e;
          line-height: 1.5;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          word-break: break-all;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
      .newsList:last-child {
        border-bottom: none;
        margin: 0;
        padding: 0;
      }
      .newsList:hover {
        cursor: pointer;
        .title {
          color: #ffc001;
        }
        .date {
          color: #ffc001;
        }
      }
    }
  }
  .two {
    .twoList {
      margin: 0 15px 0 0;
      border: 1px solid #f1f1f1;
      width: 24%;
      height: 340px;
      padding: 10px;
      text-align: center;
      .title {
        font-size: 20px;
        font-weight: bold;
        margin: 1vw 0 1.5vw 0;
      }
      .brief {
        font-size: 14px;
        color: #7e7e7e;
        margin: 0 0 2vw 0;
        padding: 0 16px;
        line-height: 2;
      }
    }
    .twoList:last-child {
      margin: 0;
    }
    .twoList:nth-child(1) {
      border-top: 1px solid #ffc001;
    }
    .twoList:nth-child(2) {
      border-top: 1px solid #ffb6c1;
    }
    .twoList:nth-child(3) {
      border-top: 1px solid #0000ff;
    }
    .twoList:nth-child(4) {
      border-top: 1px solid #ff0000;
    }
  }
  .four {
    .four_1 {
      .four_1_1 {
        margin: 0 0 1vw 0;
        .typeList {
          display: inline-block;
          margin: 0 10px 0 0;
          width: 130px;
          text-align: center;
          padding: 10px 0;
          color: #7e7e7e;
          font-size: 14px;
        }
        .typeList:hover {
          background-color: #ffc001;
          color: #ffffff;
        }
        .typeActive {
          background-color: #ffc001;
          color: #ffffff;
        }
      }
      .four_1_2 {
        padding: 0 10px 0 0;
        .four1List {
          border-bottom: 1px dashed #f1f1f1;
          padding: 10px 0 15px 0;
          margin: 0 0 13px 0;
          .date {
            .date_1 {
              font-size: 30px;
              color: #666666;
              font-family: math;
            }
            .date_2 {
              font-size: 14px;
              color: #7e7e7e;
            }
          }
          .info {
            .title {
              font-size: 18px;
              margin: 0 0 5px 0;
            }
            .brief {
              line-height: 1.5;
              font-size: 14px;
              color: #747474;
            }
          }
        }
        .four1List:last-child {
          border-bottom: none;
          margin: 0;
        }
        .four1List:hover {
          .info {
            .title {
              color: #ffc001;
            }
          }
        }
      }
    }
    .four_2 {
      .four2List {
        position: relative;
        margin: 0 0 10px 0;
        height: 280px;
        overflow: hidden;
        .image {
          height: 100%;
        }
        .title {
          position: absolute;
          bottom: 0;
          background-color: #0000005f;
          color: #ffffff;
          text-align: center;
          padding: 6px 0;
          font-size: 14px;
        }
      }
      .four2List:last-child {
        margin: 0;
      }
    }
  }
}
</style>
