<template>
  <!-- 常见问题 -->
  <div class="cpmmon-problem" v-if="flag">
    <div class="title">
      <DetalsTitle title="常见问题" type="Q&A"></DetalsTitle>
    </div>
    <div class="content">
      <div v-for="(item, index) in dataFrom" :key="index" class="content-son">
        <div class="content-top">
          <div class="top-img"></div>
          <div>{{ item.title }}</div>
        </div>
        <div class="content-bottom">
          <div class="bottom-img"></div>
          <div>{{ item.answer }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
  import { ref, defineProps, watch } from 'vue'
  const flag = ref(true)
  let dataFrom = ref([])
  const props = defineProps({
    dataList: { type: Object, default: null },
  })
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
      (item) => item.attrType === '常见问题'
    )[0]
    if (!obj) {
      flag.value = false
    } else {
      obj.attrValue = JSON.parse(obj.attrValue)
      obj.attrValue.map((item) => {
        let params = {
          title: item.question,
          answer: item.answer,
        }
        dataFrom.value.push(params)
      })
    }
  }
  watch(
    () => props.dataList,
    (val) => {
      if (val) {
        let obj = val.infoList.filter((item) => item.attrType === '常见问题')[0]
        if (!obj) {
          flag.value = false
        } else {
          obj.attrValue = JSON.parse(obj.attrValue)
          obj.attrValue.map((item) => {
            let params = {
              title: item.question,
              answer: item.answer,
            }
            dataFrom.value.push(params)
          })
        }
      }
    }
  )
</script>

<style lang="less" scoped>
  .cpmmon-problem {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80px;
    background: #f7f8fa;
    .content {
      width: 1300px;
      margin: 20px 0px;
      background: #ffffff;
      padding: 40px;
      .content-son {
        font-size: 20px;
        margin-bottom: 60px;
        .content-top {
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          line-height: 20px;
        }
        .content-bottom {
          display: flex;
          line-height: 34px;
          color: #666666;
        }
        .content-top,
        .content-bottom {
          div:last-child {
            width: calc(100% - 54px);
          }
        }
        .top-img {
          width: 34px;
          height: 30px;
          background: url('~@/assets/detailsAll/sf_top_img.png') no-repeat;
          background-position: center;
          background-size: cover;
          margin-right: 20px;
        }
        .bottom-img {
          width: 34px;
          height: 30px;
          background: url('~@/assets/detailsAll/sf_bottom_img.png') no-repeat;
          ackground-size: cover;
          background-position: center;
          margin-right: 20px;
        }
      }
      .content-son:last-child {
        margin-bottom: 0px;
      }
    }
  }
</style>
