<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" 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="Achieve" @toMore="toMore('0')"></component>
              </el-col>
              <el-col :span="24" class="down">
                <el-col :span="8" class="list" :key="index" v-for="(item, index) in jscgList" @click="toLook(item, '0')">
                  <el-col :span="24" class="text">
                    <p class="name textOver" :title="item.name">{{ item.name }}</p>
                    <p class="brief" :title="item.achievebrief">{{ item.achievebrief }}</p>
                    <p class="other">
                      <span class="textOver">领域：{{ getField(item.field) }}</span>
                      <span class="textOver">联系人：{{ item.contact }}</span>
                    </p>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="12" class="one_1">
              <el-col :span="24" class="top">
                <component :is="cTop" zTxt="e专利" eTxt="Patent" @toMore="toMore('1')"></component>
              </el-col>
              <el-col :span="24" class="down"> 列表 </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="Roadshow" @toMore="toMore('2')"></component>
              </el-col>
              <el-col :span="24" class="down"> 列表 </el-col>
            </el-col>
            <el-col :span="12" class="one_1">
              <el-col :span="24" class="top">
                <component :is="cTop" zTxt="专家智库" eTxt="Expert" @toMore="toMore('3')"></component>
              </el-col>
              <el-col :span="24" class="down">
                <el-col :span="12" class="expertlist" :key="index" v-for="(item, index) in zjzkList" @click="toLook(item, '3')">
                  <el-col :span="8" class="head">
                    <el-image :src="item.icon && item.icon.length > 0 ? item.icon[0].url : experturl"></el-image>
                  </el-col>
                  <el-col :span="16" class="rightInfo">
                    <el-col :span="24" class="name names textOver" :title="item.name">{{ item.name || '暂无' }}</el-col>
                    <el-col :span="24" class="school textOver" :title="item.zwzc">{{ item.zwzc }}</el-col>
                    <el-col :span="24" class="company textOver" :title="item.school">{{ item.school }}</el-col>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 基础
import cTop from '@/components/common/top.vue';
import type { Ref } from 'vue';
import { onMounted, ref } from 'vue';
// 接口
import { DictDataStore } from '@common/src/stores/system/dictData'; // 字典表
import { ProductStore } from '@common/src/stores/allAdmin/product';
import { ExpertStore } from '@common/src/stores/admins/expert';
import type { IQueryResult } from '@/util/types.util';
const product = ProductStore();
const dictData = DictDataStore();
const expert = ExpertStore();
// 加载中
const loading: Ref<any> = ref(false);
// 中间图片
const centerImg: Ref<any> = ref('/src/assets/market-4.png');
const experturl: Ref<any> = ref('/src/assets/market-5.png');
const jscgList: Ref<any> = ref([]); // 技术成果
const zjzkList: Ref<any> = ref([]); // 专家智库
const product_fieldList: Ref<any> = ref([]); // 所属领域
// 请求
onMounted(async () => {
  loading.value = true;
  await searchOther();
  await search();
  loading.value = false;
});
const search = async () => {
  let res: IQueryResult;
  res = await product.query({ status: '2', type: '1', limit: 6 });
  if (res.errcode == 0) jscgList.value = res.data;
  res = await expert.query({ status: '1', limit: 8 });
  if (res.errcode == 0) zjzkList.value = res.data;
};
const getField = (type) => {
  let data: any = product_fieldList.value.find((i: any) => i.value == type);
  if (data) return data.label;
  else return '暂无';
};
const toLook = (e, type) => {
  console.log(e);
  console.log(type);
};
// 查看更多
const toMore = (e) => {
  console.log(e);
};
const searchOther = async () => {
  let res: IQueryResult;
  // 所属领域
  res = await dictData.query({ type: 'product_field' });
  if (res.errcode == 0) product_fieldList.value = res.data;
};
</script>
<style scoped lang="scss">
.main {
  .one {
    display: flex;
    background-image: linear-gradient(rgb(255, 255, 255), rgb(163, 213, 246), rgb(255, 255, 255));
    padding: 10px 0;
    .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;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .list {
    position: relative;
    overflow: hidden;
    height: 220px;
    margin: 0 8px 10px 0;
    max-width: 31.9%;
    cursor: pointer;
    .text {
      width: 100%;
      height: 220px;
      background: url('@/assets/market-2.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 25px 19px;
      .name {
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 5px 0;
      }
      .brief {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 7;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        padding: 0 5px;
      }
      .other {
        padding: 5px 0 0 0;
        position: absolute;
        bottom: 10px;
        width: 83%;
        span {
          padding: 3px 0 0 0;
          float: left;
          width: 100%;
          font-size: 12px;
        }
      }
    }
  }
  .list:hover .text .name {
    color: rgb(0, 149, 255);
  }
  .listzhuan {
    width: 32%;
    height: 220px;
    margin: 1px 4px 5px 3px;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    .image {
      width: 100%;
      height: 175px;
    }
    .name {
      font-size: 16px;
      font-weight: 700;
      text-align: center;
    }
  }
  .listzhuan:hover .name {
    color: rgb(0, 149, 255);
  }
  .projectlist {
    border-bottom: 1px dashed #000;
    padding: 12px 0;
    cursor: pointer;
    .date {
      text-align: center;
      span {
        background: #044b79;
        padding: 2px 5px 4px 5px;
        font-size: 14px;
        border-radius: 5px;
        font-weight: 700;
        color: #fff;
      }
    }
    .subject {
      font-size: 16px;
      font-weight: 700;
      padding: 0 0 0 5px;
      color: #000;
    }
  }
  .projectlist:hover .subject {
    color: rgb(0, 149, 255);
    .remarks {
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      padding: 5px 0 0 0;
      height: 43px;
    }
  }
  .projectlist:last-child {
    border-bottom: none;
  }
  .expertlist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    cursor: pointer;
    padding: 10px 0;
    border-bottom: 1px dashed #044b79;
    .head {
      width: 90px;
      height: 90px;
      border-radius: 90px;
      :deep(.el-image) {
        border-radius: 90px;
        width: 90px;
        height: 90px;
      }
    }
    .rightInfo {
      padding: 0 10px;
      .name {
        font-size: 18px;
        padding: 7px 0 0 0;
        font-weight: 700;
        .names {
          font-size: 18px;
          font-weight: 700;
          color: #000;
        }
      }
      .names {
        color: rgb(0, 149, 255);
      }
      .company {
        font-size: 16px;
        padding: 7px 0 0 0;
      }
      .school {
        font-size: 16px;
        padding: 7px 0 0 0;
      }
    }
  }
  .expertlist:nth-child(8) {
    border-bottom: none;
  }
  .expertlist:nth-child(7) {
    border-bottom: none;
  }
}
</style>
