<template>
  <!-- 图层信息  -->
  <div class="usage-mode" v-if="flag">
    <div class="tltle">
      <DetalsTitle title="图层信息" type="INFORMATION"></DetalsTitle>
    </div>
    <div class="content">
      <div class="content-left">
        <div class="content-left-content">
          <ul>
            <li v-for="(item, index) in dataFromLeft.content" :key="index">
              <img :src="iconImg" />
              <span>{{ item.type }}</span>
              <a-tooltip>
                <template #title>{{ item.values }}</template>
                <p>{{ item.values }}</p>
              </a-tooltip>
            </li>
          </ul>
          <ul>
            <li v-for="(item, index) in dataFromCenter.content" :key="index">
              <img :src="iconImg" />
              <span>{{ item.type }}</span>
              <a-tooltip>
                <template #title>{{ item.values }}</template>
                <p>{{ item.values }}</p>
              </a-tooltip>
            </li>
          </ul>
          <ul>
            <li v-for="(item, index) in dataFromRight.content" :key="index">
              <img :src="iconImg" />
              <span>{{ item.type }}</span>
              <a-tooltip>
                <template #title>{{ item.values }}</template>
                <p>{{ item.values }}</p>
              </a-tooltip>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
import { ref, defineProps, watch } from 'vue'
const iconImg = require('@/assets/detailsAll/layer-service/layer-icon.png')
const dataFromLeft = ref({
  content: [
    {
      type: '服务类型',
      values: '',
    },
    {
      type: '覆盖区域',
      values: '',
    },
    {
      type: '切片策略',
      values: '',
    },
  ],
})
const dataFromCenter = ref({
  content: [
    {
      type: '坐标系',
      values: '',
    },
    {
      type: '切片尺寸',
      values: '',
    },
    {
      type: '最小级别',
      values: '',
    },
  ],
})
const dataFromRight = ref({
  content: [
    {
      type: '图层名称',
      values: '',
    },
    {
      type: '最大级别',
      values: '',
    },
  ],
})
//数据初始化
const props = defineProps({
  dataList: { type: Object, default: null },
})
const flag = ref(true)
if (props.dataList.infoList) {
  let obj = props.dataList.infoList.filter(
    (item) =>
      item.attrType === '服务类型' ||
      item.attrType === '覆盖区域' ||
      item.attrType === '切片策略' ||
      item.attrType === '坐标系' ||
      item.attrType === '切片尺寸' ||
      item.attrType === '最小级别' ||
      item.attrType === '数据范围' ||
      item.attrType === '图层类型' ||
      item.attrType === '最大级别'
  )[0]
  if (!obj) {
    flag.value = false
  } else {
    // dataFrom.value.content[0].link.value = props.dataList.apiUrl
    // dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
    console.log('dataList', props.dataList)
    props.dataList.infoList.map((item) => {
      handleInfoList(item)
    })
  }
}
const handleInfoList = (item) => {
  if (item.attrType === '服务类型') {
    dataFromLeft.value.content[0].values = item.attrValue || '123'
  } else if (item.attrType === '覆盖区域') {
    dataFromLeft.value.content[1].values = item.attrValue || '--'
  } else if (item.attrType === '切片策略') {
    dataFromLeft.value.content[2].values = item.attrValue || '--'
  } else if (item.attrType === '坐标系') {
    dataFromCenter.value.content[0].values = item.attrValue || '--'
  } else if (item.attrType === '切片尺寸') {
    dataFromCenter.value.content[1].values = item.attrValue || '--'
  } else if (item.attrType === '最小级别') {
    dataFromCenter.value.content[2].values = item.attrValue || '--'
  } else if (item.attrType === '数据范围') {
    dataFromRight.value.content[0].values = item.attrValue || '--'
  } else if (item.attrType === '图层类型') {
    dataFromRight.value.content[1].values = item.attrValue || '--'
  } else if (item.attrType === '最大级别') {
    if (dataFromRight.value.content && dataFromRight.value.content[2]) {
      dataFromRight.value.content[2].values = item.attrValue || '--'
    }
  }
}
watch(
  () => props.dataList,
  (val) => {
    if (val) {
      let obj = val.infoList.filter(
        (item) =>
          item.attrType === '服务类型' ||
          item.attrType === '覆盖区域' ||
          item.attrType === '切片策略' ||
          item.attrType === '坐标系' ||
          item.attrType === '切片尺寸' ||
          item.attrType === '最小级别' ||
          item.attrType === '数据范围' ||
          item.attrType === '图层类型' ||
          item.attrType === '最大级别'
      )[0]
      if (!obj) {
        flag.value = false
      } else {
        console.log('dataList', val)
        val.infoList.map((item) => {
          handleInfoList(item)
          // if (item.attrType === '服务类型') {
          //   dataFromLeft.value.content[0].values = item.attrValue || '123'
          // } else if (item.attrType === '覆盖区域') {
          //   dataFromLeft.value.content[1].values = item.attrValue || '--'
          // } else if (item.attrType === '切片策略') {
          //   dataFromLeft.value.content[2].values = item.attrValue || '--'
          // } else if (item.attrType === '坐标系') {
          //   dataFromCenter.value.content[0].values = item.attrValue || '--'
          // } else if (item.attrType === '切片尺寸') {
          //   dataFromCenter.value.content[1].values = item.attrValue || '--'
          // } else if (item.attrType === '最小级别') {
          //   dataFromCenter.value.content[2].values = item.attrValue || '--'
          // } else if (item.attrType === '数据范围') {
          //   dataFromRight.value.content[0].values = item.attrValue || '--'
          // } else if (item.attrType === '图层类型') {
          //   dataFromRight.value.content[1].values = item.attrValue || '--'
          // } else if (item.attrType === '最大级别') {
          //   if (dataFromRight.value.content && dataFromRight.value.content[2]) {
          //     dataFromRight.value.content[2].values = item.attrValue || '--'
          //   }
          // }
        })
      }
    }
  }
)
</script>

<style lang="less" scoped>
.usage-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.8rem 0;

  .content {
    margin-top: 0.3rem;
    display: flex;

    .content-left {
      height: 2.8rem;
      width: 13rem;
      background: url('~@/assets/detailsAll/layer-service/layer-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      border-radius: 0.1rem;
      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
      display: flex;
      align-items: center;
      padding: 0 0.35rem;

      .content-left-content {
        width: 100%;
        font-size: 0.2rem;
        color: rgba(33, 41, 86, 0.8);
        line-height: 0.2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        ul {
          padding: 0;
          margin: 0;
        }

        ul li {
          list-style: none;
          display: flex;
          align-items: center;
          margin-bottom: 0.3rem;
          line-height: 0.25rem;
        }

        img {
          margin: 0 0.2rem 0 0;
          width: 0.15rem;
          height: 0.15rem;
        }

        span {
          font-size: 0.2rem;
          color: #666666;
          display: block;
          margin-right: 0.5rem;
          width: 120px;
        }

        p {
          width: 2rem;
          margin-bottom: 0;
          font-size: 0.2rem;
          color: #333333;
          display: -webkit-box;
          overflow: hidden;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          word-break: break-all;
        }
      }
    }
  }
}
</style>
