<template>
  <div class="innovate">
    <div class="box conter1000" v-loading="loading">
      <div class="head">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <span class="one">情报服务</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>
            <span>情报服务详情</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="_head">
        <p class="text_hidden">{{ state.data.title }}</p>
        <div class="_tags">
          <el-tag class="x_fff x_bg_blue" size="small">{{
            state.data.description
          }}</el-tag>
        </div>
        <div class="text-right">
          <el-button class="x_btns">购买服务</el-button>
        </div>
      </div>
      <div class="_info">
        <div class="_l">
          <div class="html" v-html="state.data.content"></div>
        </div>
        <div class="_r">
          <WebContact />
        </div>
      </div>
    </div>
    <webFooter></webFooter>
  </div>
</template>

<script setup>
import webFooter from "@/components/webFooter/index.vue";
// import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
import WebContact from "@/components/webContact/index.vue";
import { getInovateInfo } from "../../../api/website/innovate";
// import request from '@/utils/request'
// to do 创新服务详情
// function detail (id) {
//   return request({
//     url: '/v1/service/innovate/detail',
//     method: 'post',
//     data: { id }
//   })
// }

const loading = ref(true);

const state = reactive({
  data: {},
});
const route = useRoute();
watch(route, () => {
  getData();
});
onMounted(() => {
  getData();
});

function getData() {
  let id = route.params.id;
  if (!id) return;
  getInovateInfo({ id }).then((resp) => {
    //     if (200 == res.code) {
    state.data = resp.data;
    loading.value = false;
    //     }
  });
  //   .catch(() => {
  //     loading.value = false;
  //   });
}
</script>

<style lang="scss" scoped>
.innovate {
  background-color: #f2f6ff;
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .box {
    flex: 1;

    .head {
      padding: 30px 0 20px 0;
      span {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
      }
      .one {
        color: #333333;
      }
    }
    ._head {
      padding: 20px;
      background-color: #fff;
      p {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
        color: #333333;
        line-height: 30px;
      }
      ._tags {
        margin: 9px 0;
      }
    }
    ._info {
      display: flex;
      margin-top: 16px;
      margin-bottom: 35px;
      ._l {
        width: 662px;
        margin-right: 14px;
        padding: 14px 40px 0 20px;
        background-color: #fff;
        ._tit {
          &::before {
            content: "";
            display: inline-block;
            margin-right: 5px;
            width: 5px;
            height: 5px;
            background-color: #0054ff;
            vertical-align: middle;
          }
        }
        ._txt {
          margin-bottom: 45px;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          line-height: 24px;
          div {
            color: #333333;
          }
        }
      }
      ._r {
        flex: 1;
        background-color: #fff;
      }
    }
  }
}
</style>
