<template>
  <div class="app-container">

    <div class="block-title">行业概述</div>
    <div class="sub-title">{{ titleIndustry }}</div>
    <div class="content">
      <div class="html-content" v-html="industryInfo"></div>
    </div>

    <div class="block-title">解决方案</div>
    <div class="sub-title">{{ titleSolution }}</div>
    <div class="content">
      <div class="html-content" v-html="solutionInfo"></div>
    </div>


    <div class="block-title">咨询流程</div>

    <div class="flex flex-justify-center information-process">
      <div class="item">
        <div class="index">1</div>
        <img class="icon" src="@/assets/images/Information-process-1.png" alt="">
        <div class="title">需求咨询</div>
        <div class="desc">描述业务需求，提交需求咨询</div>
        <!--        <el-button>立即资讯-->
        <!--          <el-icon>-->
        <!--            <ArrowRight/>-->
        <!--          </el-icon>-->
        <!--        </el-button>-->
      </div>
      <div class="item">
        <div class="index">2</div>
        <img class="icon" src="@/assets/images/Information-process-2.png" alt="">
        <div class="title">初步沟通</div>
        <div class="desc">需求答疑，对齐核心诉求，确定合作意向</div>
      </div>
      <div class="item">
        <div class="index">3</div>
        <img class="icon" src="@/assets/images/Information-process-3.png" alt="">
        <div class="title">方案交流</div>
        <div class="desc">针对相关方案进行线上或线下的交流探讨</div>
      </div>
      <div class="item">
        <div class="index">4</div>
        <img class="icon" src="@/assets/images/Information-process-4.png" alt="">
        <div class="title">商业流程</div>
        <div class="desc">方案确定后，开始执行商务流程</div>
      </div>
    </div>
  </div>
</template>

<script setup name="Detail">
import {solutionDetail} from '@/api/industry.js'
import {useRoute} from 'vue-router'
import {ref, watch} from 'vue'

const route = useRoute()
const industryInfo = ref('')
const titleIndustry = ref('')

const solutionInfo = ref('')
const titleSolution = ref('')

watch(() => route.query.id, val => {
  if (val) {
    getDetail()
  }
})

function getDetail() {
  solutionDetail({id: route.query.id}).then(res => {
    console.log(res, 'res')
    industryInfo.value = res.data.industryInfo
    titleIndustry.value = res.data.titleIndustry
    solutionInfo.value = res.data.solutionInfo
    titleSolution.value = res.data.titleSolution
  })
}

getDetail()
</script>

<style scoped lang="scss">
.app-container {
  padding-top: 90px;
}

.block-title {
  font-weight: bold;
  color: #303233;
  font-size: 28px;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 20px;
}

.sub-title {
  font-weight: 500;
  font-size: 20px;
  color: #575a5b;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
}

.content {
  width: 1280px;
  margin: 0 auto 30px auto;
  text-align: center;

  :deep(.html-content) {
    img {
      height: auto;
      max-width: 100%;
    }
  }

}

.information-process {
  .item {
    margin: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .index {
      width: 32px;
      height: 32px;
      border-radius: 32px 32px 32px 32px;
      border: 1px solid #2E77E3;
      text-align: center;
      line-height: 31px;
      font-weight: 400;
      font-size: 16px;
      color: #2E77E3;
    }

    img {
      width: 97px;
      height: 97px;
    }

    .title {
      font-weight: bold;
      font-size: 24px;
      color: #303233;
      margin-bottom: 6px;
    }

    .desc {
      font-weight: 400;
      font-size: 16px;
      color: #626566;
      margin-bottom: 22px;
    }

    .el-button {
      border-radius: 2px;
    }
  }
}
</style>
