<template>
  <div class="more conter1400">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <span class="_one" @click="handleShow()" style="cursor: pointer;">解决方案</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="_one">{{ oneLevelTitle.title }}</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="_two">{{ twoLevelTitle }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <ul class="_list" v-loading="loading">
        <li v-for="item in state.list" :key="item" @click="handlePath(item.id)">
          <el-image style="width: 100%; height: 135px" :src="item.image" fit="cover"></el-image>
          <div class="_head text_hidden">{{ item.title }}</div>
          <div class="_detail text_hidden">{{ item.description }}</div>
        </li>
      </ul>
    </div>
    <div class="conter1400" style="position: relative;">
      <pagination
        :total="state.total"
        :pageSizes="state.pageSizes"
        v-model:page="state.pageNum"
        v-model:limit="state.pageSize"
        :autoScroll="false"
        @pagination="getDataList"
      />
    </div>
  </div>
</template>
<script setup>
import request from '@/utils/request'
const router = useRouter();

function handlePath(id) {
  let routeData = router.resolve({ path: `/solution/detail/${id}/`});
  window.open(routeData.href, '_blank');
}
function solution_case_list () {
  return request({
    url: '/v1/service/solution_case/list',
    method: 'post',
    data: { kind_id: props.oneLevelTitle.id, page_num: state.pageNum, page_size: state.pageSize }
  })
}
const loading = ref(true);

const state = reactive({
  pageNum: 1,
  pageSize: 12,
  pageSizes: [12, 12 << 1, 12 << 2, 12 << 3],
  total: 0,
  list: []
});
const props = defineProps({
  isShowMore: {
    type: Boolean,
    default: true,
  },
  oneLevelTitle: {
    required: true,
    type: Object,
  },
  twoLevelTitle: {
    type: String,
    default: "查看更多",
  },
});
const emit = defineEmits();
function handleShow () {
  emit("update:isShowMore", false);
}

function getDataList () {
  loading.value = true;
  solution_case_list().then(res => {
    if (200 == res.code) {
      state.total = res.data.count;
      state.list = res.data.data;
      loading.value = false;
    }
  }).catch(() => {
    loading.value = false;
  })
}
onMounted(() => {
  getDataList()
});
</script>
<style lang="scss" scoped>
.more {
  padding-top: 30px;
  .el-breadcrumb {
    padding-bottom: 22px;
    ._one {
      font-size: 16px;
      font-weight: 400;
      color: #666666;
    }
    ._two {
      font-size: 16px;
      font-weight: 600 !important;
      color: #333333;
    }
  }
  ._list {
    display: flex;
    flex-wrap: wrap;
    li {
      cursor: pointer;
      width: calc(100% / 6);
      padding: 0 11px 44px;
      box-sizing: border-box;
      &:hover ._head,
      &:hover ._detail {
        opacity: 0.6;
      }
      ._head {
        margin: 5px 0;
        font-size: 17px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        line-height: 19px;
      }
      ._detail {
        font-size: 15px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
        line-height: 19px;
      }
    }
  }
}
</style>