<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-col :span="12" class="one_1">
              <el-col :span="24" class="top">
                <component :is="cTop" zTxt="科研动态" eTxt="Dynamic" @toMore="toMore('0')"></component>
              </el-col>
              <el-col :span="24" class="down">
                <component :is="cInterflow" :list="kydtList" @toView="toView"></component>
              </el-col>
            </el-col>
            <el-col :span="12" class="one_1">
              <el-col :span="24" class="top">
                <component :is="cTop" zTxt="学术交流" eTxt="Learning" @toMore="toMore('1')"></component>
              </el-col>
              <el-col :span="24" class="down">
                <component :is="cInterflow" :list="xsjlList" @toView="toView"></component>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="two">
            <el-image :src="centerImg"></el-image>
          </el-col>
          <el-col :span="24" class="one">
            <el-col :span="12" class="one_1">
              <el-col :span="24" class="top">
                <component :is="cTop" zTxt="院地合作" eTxt="Cooperation" @toMore="toMore('2')"></component>
              </el-col>
              <el-col :span="24" class="down">
                <component :is="cInterflow" :list="ydhzList" @toView="toView"></component>
              </el-col>
            </el-col>
            <el-col :span="12" class="one_1">
              <el-col :span="24" class="top">
                <component :is="cTop" zTxt="行业研究" eTxt="Industry" @toMore="toMore('3')"></component>
              </el-col>
              <el-col :span="24" class="down">
                <component :is="cInterflow" :list="hyyjList" @toView="toView"></component>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import cTop from '@/components/common/top.vue';
import cInterflow from '@/components/common/interflow-1.vue';
// 基础
import type { Ref } from 'vue';
// reactive,
import { onMounted, ref } from 'vue';
// 接口
import { NewsColumnStore } from '@common/src/stores/allAdmin/newsColumn';
import { NewsMessStore } from '@common/src/stores/allAdmin/newsMess';
import type { IQueryResult } from '@/util/types.util';
const newsColumn = NewsColumnStore();
const newsMess = NewsMessStore();
// 加载中
const loading: Ref<any> = ref(false);
const centerImg: Ref<any> = ref('/src/assets/interflow-1.png');
const kydtList: Ref<any> = ref([]);
const xsjlList: Ref<any> = ref([]);
const ydhzList: Ref<any> = ref([]);
const hyyjList: Ref<any> = ref([]);
const columnList: Ref<any> = ref([{ site: 'kydt' }, { site: 'xsjl' }, { site: 'ydhz' }, { site: 'hyyj' }]);
// 请求
onMounted(async () => {
  loading.value = true;
  await search();
  loading.value = false;
});
const search = async () => {
  for (const val of columnList.value) {
    const res: IQueryResult = await newsColumn.query({ place: val.site });
    if (res.errcode == 0) {
      let columns: any = res.data[0];
      if (columns) {
        const arr: IQueryResult = await newsMess.query({ skip: 0, limit: 10, column_id: columns._id });
        if (arr.errcode == 0) {
          if (val.site == 'kydt') kydtList.value = arr.data;
          if (val.site == 'xsjl') xsjlList.value = arr.data;
          if (val.site == 'ydhz') ydhzList.value = arr.data;
          if (val.site == 'hyyj') hyyjList.value = arr.data;
        }
      }
    }
  }
};
const toMore = (e) => {};
const toView = (e) => {};
</script>
<style scoped lang="scss">
.w_1200 {
  max-width: 1200px;
  margin: 0 auto;
}
.main {
  margin: 10px 0 0 0;
  background-image: linear-gradient(rgb(255, 255, 255), rgb(163, 213, 246), rgb(255, 255, 255));
  .one {
    margin: 0 0 10px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .one_1 {
      max-width: 49.3%;
      min-height: 530px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 0 5px #409eff;
      border-radius: 20px;
      padding: 15px;
      margin: 0 20px 0 0;
    }
    .one_1:last-child {
      max-width: 49%;
      margin: 0;
    }
  }
  .two {
    .el-image {
      width: 100%;
      height: 126px;
      overflow: hidden;
    }
  }
}
// 头部公共样式
.top {
  height: 50px;
  overflow: hidden;
}
.down {
  height: 450px;
  overflow: hidden;
}
</style>
