<!-- 融合服务详情 -->
<template>
  <div class="IntegrationServicesDetails" :class="{ fixed2: scrollTop >= 600 }">
    <home-header></home-header>
    <detail-back v-show="!hiddenBackFlag"></detail-back>
    <!-- 头部基本信息 -->
    <application-top-details
      :dataList="detailInfoObj"
      :navList="navList"
    ></application-top-details>

    <!-- 导航 -->
    <div :class="{ fixed: scrollTop >= 600 }">
      <div class="application-navigation">
        <template v-for="nav in navList" :key="nav.key">
          <div
            class="nav"
            :class="{ selectNow: nav.key == selectNow }"
            @click="selectNav(nav.key)"
          >
            {{ nav.name }}
            <span class="line"></span>
          </div>
        </template>
      </div>
    </div>

    <!-- 场景痛点 -->
    <div id="integration-pain-point" class="pain-point scrollBox">
      <div class="title-1">
        <DetalsTitle title="场景痛点" type="PAIN POINT"></DetalsTitle>
      </div>
      <div class="flex-row-center">
        <div class="bg cjtd">
          <img :preview="false" :src="bgImg" />
        </div>

        <div class="content" style="margin-left: 0.5rem">
          <div
            class="content-item"
            v-for="(item, i) in painPoint"
            :key="i"
            style="
              margin-bottom: 0.2rem;
              font-size: 0.18rem;
              line-height: 0.3rem;
            "
          >
            {{ i + 1 + '、' + item.description }}
          </div>
        </div>
      </div>
    </div>

    <!-- 解决方案 -->
    <div
      id="integration-solution"
      class="solution scrollBox"
      style="background: #eee"
    >
      <div class="title-1">
        <DetalsTitle title="解决方案" type="SOLUTION"></DetalsTitle>
      </div>
      <div class="flex-row-center">
        <div class="content" style="background: #fff; margin-top: 0.2rem">
          <div
            class="content-item"
            v-for="(item, i) in solution"
            :key="i"
            style="
              margin-bottom: 0.2rem;
              font-size: 0.18rem;
              line-height: 0.3rem;
            "
          >
            {{ i + 1 + '、' + item.description }}
          </div>
        </div>
      </div>
    </div>

    <!-- 使用能力 -->
    <div id="integration-ability" class="ability scrollBox">
      <div class="title-1">
        <DetalsTitle title="使用能力" type="ABILITY"></DetalsTitle>
      </div>
      <div
        class="flex-row-center combine-content"
        v-for="(item, i) in combineList"
        :key="i"
        style="display: block"
      >
        <div
          class="top"
          style="font-size: 0.24rem; text-align: center; margin-bottom: 0.3rem"
        >
          {{ i == 0 ? '基础设施' : i == 1 ? '组件服务' : '数据资源' }}
        </div>
        <div
          class="data-count"
          style="font-size: 0.14rem; text-align: right; margin-bottom: 0.2rem"
        >
          <span style="color: #909399">
            共
            {{
              i == 0
                ? infrastructureCount
                : i == 1
                ? componentCount
                : dataSourceCount
            }}项，示例如下：
          </span>
        </div>
        <div class="bottom" style="display: flex; align-items: flex-start">
          <div class="title" :class="'title' + i"></div>
          <div class="table-box">
            <el-table
              class="table"
              :data="item.list"
              stripe
              :header-cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column
                prop="name"
                label="资源名称"
                align="center"
                width="200"
                show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                prop="platform"
                label="资源类型"
                align="center"
                width="100"
                show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                prop="dept"
                label="能力来源"
                align="center"
                width="300"
                show-overflow-tooltip="true"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <!-- 构建步骤 -->
    <div id="integration-step" class="step scrollBox" style="background: #eee">
      <div class="title-1">
        <DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
      </div>
      <div class="flex-row-center step-content">
        <el-steps direction="vertical" :space="150" :active="step.length">
          <el-step
            v-for="(item, i) in step"
            :key="i"
            :title="item.question"
            :description="item.answer"
          ></el-step>
        </el-steps>
      </div>
    </div>
    <home-footer></home-footer>
  </div>
</template>

<script setup>
  import ApplicationTopDetails from './components/ApplicationTopDetails.vue'
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
  import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
  import HomeFooter from '@/views/newHome/components/Footer'
  import HomeHeader from '@/views/home/components/header'
  import detailBack from '@/views/home/detailBack.vue'
  import { ref, onMounted, onBeforeUnmount } from 'vue'
  import { useRouter } from 'vue-router'
  import { getIntegrationDetail } from '@/api/home'
  import mybus from '@/myplugins/mybus'
  import { message } from 'ant-design-vue'
  const router = useRouter()
  const scrollTop = ref(0)
  const domArr = ref([])
  const painPoint = ref([])
  const solution = ref([])
  const step = ref([])
  const bgImg = ref('')
  const dataSourceCount = ref(0)
  const infrastructureCount = ref(0)
  const componentCount = ref(0)
  const id = router.currentRoute.value.query.id
  const hiddenBackFlag = router.currentRoute.value.query.hiddenBackFlag
  document.documentElement.style.transition = 'all 0.3s ease'
  document.documentElement.scrollTop = 0
  document.body.style.transition = 'all 0.3s ease'
  document.body.scrollTop = 0
  mybus.on('flyToView', (id) => {
    let top =
      document.querySelector('#' + id) &&
      document.querySelector('#' + id).offsetTop - 50
    document.documentElement.scrollTop = top
    document.body.scrollTop = top
  })

  const navList = ref([
    {
      name: '场景痛点',
      key: 'integration-pain-point',
    },
    {
      name: '解决方案',
      key: 'integration-solution',
    },
    {
      name: '使用能力',
      key: 'integration-ability',
    },
    {
      name: '构建步骤',
      key: 'integration-step',
    },
  ])

  const selectNow = ref('integration-pain-point')

  const useWayShowList = ref([
    {
      title: '归属部门',
      info: {
        deptUser: '部门联系人',
        mobile: '联系人电话',
      },
    },
    {
      title: '服务商',
      info: {
        providerUser: '服务商联系人',
        providerMobile: '联系人电话',
      },
    },
  ])

  const combineList = ref([
    {
      title: '基础设施',
      list: [],
    },
    {
      title: '组件服务',
      list: [],
    },
    {
      title: '数据资源',
      list: [],
    },
  ])
  const detailInfoObj = ref({})

  onMounted(() => {
    window.addEventListener('scroll', () => {
      domArr.value = document.querySelectorAll('.scrollBox')
      scrollTop.value =
        document.documentElement.scrollTop || document.body.scrollTop
      for (let i = 0; i < domArr.value.length; i++) {
        if (i === 0) {
          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
            selectNow.value = domArr.value[i].id
          }
        } else if (i == domArr.value.length - 1) {
          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
            selectNow.value = domArr.value[i].id
          }
        } else {
          if (
            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
          ) {
            selectNow.value = domArr.value[i].id
          }
        }
      }
    })
  })

  const selectNav = (key) => {
    selectNow.value = key
    mybus.emit('flyToView', selectNow.value)
  }

  const getAttrValue = (fuseAttrList, text) => {
    let _obj = fuseAttrList.find((v) => v.attrType === text) || {}
    let data = JSON.parse(_obj.attrValue || '[]') || []
    return data
  }

  // 融合服务--详情
  const getIntegrationServicesDeatil = (id) => {
    getIntegrationDetail(id).then(
      (res) => {
        if (res.data.code !== 0) {
          return message.error(res.data.msg)
        }
        detailInfoObj.value = res.data.data || {}
        dataSourceCount.value = res.data.data.dataSourceCount || 0
        infrastructureCount.value = res.data.data.infrastructureCount || 0
        componentCount.value = res.data.data.componentCount || 0
        // 资源属性
        let fuseAttrList = res.data.data.fuseAttrList || []
        // 融合关系
        let fuseResourceList = res.data.data.fuseResourceList || []
        let questionValue =
          fuseAttrList.find((v) => v.attrType === '常见问题') || {}
        let questionObj = {
          attrType: '常见问题',
          attrValue: questionValue.attrValue || '[]',
        }
        painPoint.value = getAttrValue(fuseAttrList, '场景痛点')
        solution.value = getAttrValue(fuseAttrList, '解决方案')
        step.value = getAttrValue(fuseAttrList, '使用步骤')
        bgImg.value =
          fuseAttrList.find((v) => v.attrType === '服务图片').attrValue || ''
        let areaObj = {
          attrType: '应用领域',
          attrValue: '',
        }
        combineList.value.forEach((item) => {
          let arr = []
          let resource = fuseResourceList.filter(
            (v) => v.resource && v.type == item.title
          )
          if (resource.length > 0) {
            if (item.title === '基础设施') {
              arr = resource.map((res) => ({
                id: res.resource.idtCameraChannel,
                name: res.resource.channelName,
                dept: res.resource.nodeName
                  .split('-')
                  .splice(1)
                  .join('-')
                  .slice(1),
                platform: '视频资源',
              }))
            } else if (item.title === '组件服务') {
              arr = resource.map((res) => ({
                id: res.resource.id,
                name: res.resource.name,
                dept: res.resource.deptName,
                platform:
                  res.resource.infoList.find(
                    (item) => item.attrType === '组件类型'
                  )?.attrValue || '组件服务',
              }))
            } else if (item.title === '数据资源') {
              arr = resource.map((res) => ({
                id: res.resource.resourceId,
                name: res.resource.resourceName,
                dept: res.resource.deptName,
                platform: '数据资源',
              }))
            }
          }

          item.list = arr
        })
        detailInfoObj.value.infoList = []
        detailInfoObj.value.infoList.push(questionObj)
        detailInfoObj.value.infoList.push(areaObj)
      },
      (err) => {
        message.error(err)
      }
    )
  }
  getIntegrationServicesDeatil(id)

  function handleOpenUrl(type) {
    let obj =
      (detailInfoObj.value.fuseAttrList || []).find(
        (v) => v.attrType == type
      ) || {}
    let url = obj.attrValue || ''
    if (!obj.attrValue) {
      return message.error('错误的文档链接地址！')
    }
    window.open(
      window.SITE_CONFIG.previewUrl +
        'hisense_office/onlinePreview?url=' +
        btoa(encodeURI(url))
    )
  }

  onBeforeUnmount(() => {
    mybus.off('flyToView')
  })
</script>

<style lang="less" scoped>
  .flex-row-between {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .flex-row-start {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .flex-row-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .IntegrationServicesDetails {
    .fixed {
      position: fixed !important;
      z-index: 2000;
      top: 0;
      left: 0;
    }

    .fixed2 > div:nth-of-type(3) {
      margin-top: 0.84rem;
    }

    .application-navigation {
      width: 19.12rem;
      height: 0.84rem;
      line-height: 0.8rem;
      display: flex;
      justify-content: space-around;
      font-size: 0.24rem;
      color: #666;
      background: #fff;
      padding: 0 3rem;
      box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
      position: relative;

      .nav {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .line {
          width: 0.4rem;
          height: 0.04rem;
        }
      }

      .selectNow {
        color: #526aff;

        .line {
          background: #526aff;
        }
      }
    }
  }

  .use-way {
    padding: 0.8rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title-1 {
      margin-bottom: 0.3rem;
    }

    .left {
      .btn {
        padding: 10px 20px;
        color: #526aff;
        background: #fff;
        border-radius: 50px;
        margin: 10px;
        font-size: 0.2rem;
        width: 150px;
        text-align: center;
        cursor: pointer;
      }

      .btn-box {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
    }

    .content {
      display: flex;
      width: 13rem;
      justify-content: space-between;

      .word-bg {
        background: linear-gradient(90deg, #7184fc, #94a3fc) !important;
      }

      .content-card {
        height: 1.5rem;
        width: 6.2rem;
        border-radius: 0.2rem;
        background: linear-gradient(
          to right,
          rgba(113, 132, 252, 0.4),
          rgba(148, 163, 252, 0.4)
        );
        padding: 0 0.3rem;
        display: flex;
        justify-content: center;

        .card-title {
          font-size: 0.26rem;
          color: #212956;
          margin-bottom: 0.2rem;
          line-height: 0.26rem;
        }

        .content-card-item {
          width: 50%;

          .card-text {
            margin-right: 0.2rem;
            color: rgba(33, 41, 86, 0.8);
            font-size: 0.2rem;
            max-width: 2.8rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }

          div:first-child {
            display: block;
          }
        }
      }
    }
  }

  .pain-point {
    padding: 0.8rem 0;
    background: rgb(247, 248, 250);

    .bg {
      height: 3rem;
      width: 3rem;
      // background: url('~@/assets/home/rhfw_square.png') no-repeat;
      // background-size: 100%;
      margin-top: 0.3rem;
    }

    .cjtd {
      width: 5.75rem;
      height: 3.4rem;
      background: url('~@/assets/home/fn/cjtd.png') no-repeat;
      background-size: 100%;
    }
    .cjtd img {
      width: 100%;
      height: 100%;
    }

    .content {
      overflow: auto;
      height: 3rem;
      width: 7rem;
      margin-top: 0.3rem;

      .content-item {
        font-size: 16px;
        margin: 0rem 0rem 0.1rem 0.1rem;
      }
    }
  }

  .solution {
    padding: 0.8rem 0;
    background: rgb(247, 248, 250);

    .content {
      width: 11rem;

      .content-item {
        font-size: 16px;
        margin: 0.3rem;
      }
    }
  }

  .step {
    padding: 0.8rem 0;
    background: rgb(247, 248, 250);

    .step-content {
      margin: 0.3rem 4.5rem;
      padding: 0.3rem;
      background: #fff;

      :deep(.el-step__description.is-finish) {
        color: #333;
        line-height: 0.24rem;
        margin-top: 0.05rem;
      }

      /deep/ .el-step__title {
        font-size: 18px;
      }

      /deep/ .el-step__description {
        font-size: 14px;
      }
    }
  }

  .ability {
    padding: 0.8rem 0;
    background: rgb(247, 248, 250);

    .title-1 {
      margin-bottom: 0.3rem;
    }

    .combine-content {
      margin-top: 0.3rem;
      align-items: flex-start;
      border-bottom: 1px solid #ccc;
      margin: 0.2rem 3.5rem 0;
      padding: 0.2rem 0;

      .title {
        height: 3rem;
        width: 3rem;
        margin-right: 0.4rem;
        background: url('~@/assets/home/rhfw_square.png') no-repeat;
        background-size: 100% 100%;
      }

      .title0 {
        width: 5.6rem;
        height: 3.45rem;
        background: url('~@/assets/home/fn/jcss.png') no-repeat;
        background-size: 100% 100%;
      }

      .title1 {
        width: 5.6rem;
        height: 3.45rem;
        background: url('~@/assets/home/fn/zjfw.png') no-repeat;
        background-size: 100% 100%;
      }

      .title2 {
        width: 5.6rem;
        height: 3.45rem;
        background: url('~@/assets/home/fn/sjzy.png') no-repeat;
        background-size: 100% 100%;
      }
      .table-box {
        height: 3.45rem;
        flex: 1;
        overflow-y: auto;
      }

      .table {
        // width: 100%;
        font-size: 16px;
      }
      .data-count {
      }
    }

    .name-box {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      width: 100%;
    }

    .no-data {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      font-size: 0.16rem;
      color: #666;
      text-align: center;
    }

    .name-text {
      font-size: 0.16rem;
      color: #212121;
      line-height: 0.3rem;
      height: 0.3rem;
      text-align: center;
      width: 50%;
      box-sizing: border-box;
    }
  }
</style>