<template>
  <div class="box">
    <div class="wrap">
      <div v-if="data.image" class="img">
        <el-image :src="data.image" alt="" style="height: 150px" />
      </div>
      <div v-else-if="data.type == 1" class="type">
        <!--产品-->
        {{ t("admin.form.product") }}
      </div>
      <div v-else-if="data.type == 2" class="type">
        {{ t("admin.common.achievement") }}
      </div>
      <div class="content">
        <div class="tit" @click="handleDetail(data.dataId)">
          <!--          {{-->
          <!--            data.type == 2 ?   `成果名称 ：`: data.type == 1 ? "产品名称：" : ""-->
          <!--          }}-->
          {{
            t("admin.form.name", {
              type:
                data.type == 2
                  ? t("admin.common.achievement")
                  : t("admin.form.product"),
            })
          }}：
          {{ data.title }}
        </div>
        <slot name="des" />
        <div v-if="data.industryStr" class="line">
          {{ t("webSearch.industry") }}：
          <!-- <span>{{ data.industrys[data.industrys.length - 1] }}</span> -->
          <span>{{ data.industryStr }}</span>
        </div>
        <!-- <div class="line">
          所属专家：
          <span>{{ data.expertName }}</span>
        </div>
        <div class="line">
          成果成熟度：
          <span>{{
            maturityOptions.find((el) => el.key == data.maturity)?.value ??
            "未知"
          }}</span>
        </div> -->
        <div class="line">
          <!--          联系人-->
          {{ t("webSearch.contact") }}
          <span>{{ t("webSearch.zhongkeyunPlatform") }}</span>
        </div>
        <div class="line">
          {{ t("webSearch.contactInformation") }}({{ t("webSearch.wechat") }})：
          <span>18156053255</span>
        </div>
      </div>
      <div>
        <div class="keywords">
          <wordcloud
            v-if="data.keywords"
            :data="createdData(data.keywords ?? [])"
          ></wordcloud>
        </div>
        <!-- <collectAndVisit
            :is_collect="data.is_collect"
            :collect_count="data.collect_count"
            :visit_count="data.visit_count"
            :object_id="data.id"
            :kind="1005"
          /> -->
      </div>
    </div>
  </div>
</template>

<script setup>
// import { maturityOptions } from "@/utils/parameter";
import wordcloud from "./wordcloud.vue";
// import collectAndVisit from "./collectAndVisit.vue";
import { useRoute, useRouter } from "vue-router";
import { toRefs } from "vue";
import { addViewHistory } from "@/utils/view_history";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const route = useRoute();

const router = useRouter();
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
const { data } = toRefs(props);

function handleDetail(id) {
  addViewHistory(2, id, data.value.title);
  console.log(data.value);
  let path;
  if (data.value.type == 1) {
    path = `/searchList/product/detail/${id}`;
  } else if (data.value.type == 2) {
    path = `/searchList/achievement/detail/${id}`;
  } else {
    return;
  }
  let routeData = router.resolve({
    path,
    query: {
      keyword: route.query.keyword,
      queryType: route.query.queryType,
    },
  });
  router.push(routeData);
  // window.open(routeData.href, "_blank");
}

function createdData(arr) {
  let l = [];
  let snap = JSON.parse(JSON.stringify(arr));
  snap.map((e) => {
    l.push({ name: e, value: 30 });
    return { name: e, value: 30 };
  });
  return l;
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  // height: 190px;
  background: #ffffff;
  padding: 20px;
  box-sizing: border-box;

  .wrap {
    display: flex;
    flex-direction: row;

    .type {
      width: 200px;
      height: 150px;
      margin-right: 10px;
      background-color: #417bff;
      color: white;
      font-size: 36px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      // img {
      //   display: block;
      //   margin: 0;
      //   width: 100%;
      //   height: 100%;
      // }
    }

    .img {
      width: 200px;
      height: 150px;
      margin-right: 10px;

      img {
        display: block;
        margin: 0;
        width: 100%;
        height: 100%;
      }
    }

    .keywords {
      width: 129px;
      height: 129px;
    }

    .content {
      flex: 1;
      overflow: hidden;

      .labelList {
        overflow: hidden;

        div {
          padding: 2px 4px;
          float: left;
          background: #0054ff;
          border-radius: 4px;
          margin-right: 5px;
          margin-bottom: 5px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }
      }

      .line {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
        margin: 10px 0;

        span {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333;
        }
      }

      .tit {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
        overflow: hidden;
        cursor: pointer;
      }
    }
  }
}
</style>
