<template>
  <div class="more conter1400">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <span class="_one" @click="handleShow()" style="cursor: pointer">{{
          t("solution.solution")
        }}</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="_one">{{ oneLevelTitle[titleField] }}</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span class="_two">{{ twoLevelTitle ?? t('common.viewMore') }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div>
      <ul class="_list" v-loading="loading">
        <li v-for="item in props.data" :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";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { computed } from "vue";

const router = useRouter();
const { t, locale } = useI18n();
const titleField = computed(() =>
  locale.value === "zh" ? "title" : `${locale.value}Title`
);

function handlePath(id) {
  let routeData = router.resolve({ path: `/solution/detail/${id}/` });
  window.open(routeData.href, "_blank");
}

// async function solution_case_list() {
//   return {
//     code: 200,
//     message: "ok",
//     data: {
//       data: [
//         {
//           id: "DXN0wBPaQldP",
//           title: "复杂条件下城际轨道交通地下结构施工关键技术研究",
//           image:
//             "https://www.casshare.com/upimages/upload/20220310/9784d1c88922ef03f75ebc2a2db25f14.jpg",
//           description: "复杂条件下城际轨道交通地下结构施工关键技术研究",
//         },
//       ],
//       count: 1,
//     },
//   };
// }
const loading = ref(false);

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: "查看更多",
  },
  data: {
    type: Array,
    required: true,
  },
});
console.log(props.data);
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>
