<template>
  <div class="bg">
    <div class="conter1400" 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="content">
        <div class="title">
          <div>{{ state.data.title }}</div>

          <div class="description">
            <span class="visits">浏览量：{{ state.data.visits }}</span>
            <span>{{ parseTime(state.data.created_at) }}</span>
          </div>
        </div>

        <div class="html" v-html="state.data.content"></div>
      </div>
    </div>
    <webFooter></webFooter>
  </div>
</template>

<script setup>
import { nextTick, onMounted } from "vue";
import seeMore from "./components/seeMore.vue";
import { getInfo } from "@/api/website/solution/index";
import webFooter from "@/components/webFooter/index.vue";
import request from "@/utils/request";

function detail(id) {
  return request({
    url: "/v1/service/solution_case/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;
  getInfo({ id })
    .then((resp) => {
      state.data = resp.data;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
</script>

<style lang="scss" scoped>
.bg {
  background: rgba(242, 246, 255, 1);
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .conter1400 {
    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;
    }
  }
  .content {
    background: #fff;
    margin-bottom: 40px;

    .title,
    .html {
      padding: 30px 40px;
    }
    .title {
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 600;
      color: #333333;
      border-bottom: 1px solid #dcdcdc;
      .description {
        padding-top: 20px;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
        .visits {
          display: inline-block;
          width: 120px;
        }
      }
    }
  }
}
</style>

<style></style>
