<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { searchMarketPreview } from '@/api/templateMarket'
import { template } from 'lodash';
const router = useRouter()
const route = useRoute();
const keywords: any = ref("") // 输入关键字
const classList: any = ref([])
const loading: any = ref(false)
const activeNames: any = ref('')
const activeIndex: any = ref(null)
const activeIndex1: any = ref(null)
const basePath = import.meta.env.VITE_API_BASEPATH
const currentthumbnail = ref(null)
onMounted(() => {
  init()
})
function init() {
  searchMarketPreview().then(res => {
    classList.value = res.data.contents
    if (route.query.title) {
      for(var i = 0;i<res.data.contents.length;i++){
        if (route.query.title == res.data.contents[i].category.label) {
          activeNames.value = route.query.title
          templateclick(i, Number(route.query.index))
          break
        }
      }
    }
  })
}
function handleChange() {

}
function templateclick(index, index1) { 
  activeIndex.value = index
  activeIndex1.value = index1
  currentthumbnail.value = classList.value[activeIndex.value].contents[index1].thumbnail
}
</script>
<template>
  <div>
    <div class="template-header">
      <div class="template-header-left">
        <div class="return-box" @click="$router.go(-1)">
          <img src="@/assets/newimg/u594.png" alt="">
        </div>
        <div class="header-title">模板资源</div>
      </div>
      <div class="template-header-right">
        <div class="sj-btn">设计</div>
      </div>
    </div>
    <div class="template-content">
      <div class="template-content-left">
        <div class="template-content-left-title">模板列表</div>
        <el-input placeholder="请输入" class="keywordsClass" v-model="keywords">
          <template #prepend>
            <img src="@/assets/newimg/u62.png" alt="">
          </template>
        </el-input>
        <div style="margin-top: 10px;width:100%;height: calc(100vh - 180px);overflow: auto;">
          <el-collapse v-model="activeNames" @change="handleChange" accordion>
            <el-collapse-item v-for="(item, index) in classList" :key="index" :title="item.category.label"
              :name="item.category.label">
              <div v-for="(item1, index1) in item.contents" :key="index1" @click="templateclick(index,index1)" 
              :class="activeIndex === index && activeIndex1 === index1? 'application_list_active' : 'application_list'">
                <img v-if="item1.thumbnail != null && item1.thumbnail != ''" :src="basePath+item1.thumbnail" alt=""
                  style="width: 208px;height: 120px;">
                <img v-else src="@/assets/newimg/u110.png" alt="" style="width: 224px;height: 126px;">
                <div style="display: flex;justify-content: space-between;">
                  <div class="application_list_text">{{ item1.title }}</div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="template-content-right">
        <img v-if="currentthumbnail !== null && currentthumbnail !== ''"
         :src="basePath + currentthumbnail" style="width: 100%;height:100%;object-fit: contain;" alt="">
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.template-header {
  width: 100%;
  height: 60px;
  background-color: rgba(37, 38, 38, 1);
  box-sizing: border-box;
  border-bottom: 1px solid rgba(79, 80, 82, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 10px;

  .template-header-left {
    display: flex;
    align-items: center;
    .return-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 36px;
      height: 36px;
      cursor: pointer;
    }

    .return-box:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .header-title {
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #F2F4F5;
      padding-left: 14px;
    }
  }
}

.template-content {
  background-color: #151515;
  height: calc(100vh - 60px);
  display: flex;
  .template-content-left {
    width: 260px;
    height: calc(100vh - 60px);
    background: inherit;
    background-color: rgba(37, 38, 38, 1);
    box-sizing: border-box;
    border-right: 1px solid rgba(79, 80, 82, 1);
    padding: 0px 10px;
    padding: 20px 10px 0px;

    .template-content-left-title {
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #F2F4F5;
      margin-bottom: 15px;
    }

    .application_list {
      width: 239px;
      height: 170px;
      background: inherit;
      background-color: rgba(37, 38, 38, 1);
      box-sizing: border-box;
      padding: 5px;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(51, 51, 51, 1);
      border-radius: 10px;
      text-align: center;
      margin-bottom: 10px;
      cursor: pointer;
    }
    .application_list_active {
      width: 239px;
      height: 170px;
      background: inherit;
      background-color: rgba(37, 38, 38, 1);
      box-sizing: border-box;
      padding: 5px;
      border-width: 1px;
      border-style: solid;
      border-color: #0089ff;
      border-radius: 10px;
      text-align: center;
      margin-bottom: 10px;
      cursor: pointer;
    }
    .application_list:hover{
      border: 1px solid #0089ff;
    }
    :deep(.ed-collapse-item--light .ed-collapse-item__header) {
      background-color: transparent;
      border-color: none;
      color: #F2F4F5;
    }

    :deep(.ed-collapse-item__header) {
      height: 40px;
      padding: 0px;
    }

    :deep(.ed-collapse) {
      border: none;
    }

    :deep(.ed-collapse-item__content) {
      background-color: rgba(37, 38, 38, 1);
      color: #fff;
      padding: 0px;
    }

    :deep(.ed-collapse-item--light .ed-collapse-item__wrap) {
      border: none;
      background-color: rgba(37, 38, 38, 1);
    }
    ::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
}
  }
  .template-content-right{
    width: calc(100% - 260px);
    padding: 20px;
  }
}

.sj-btn {
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: rgba(0, 137, 255, 1);
  border-radius: 4px;
  font-size: 14px;
  color: #F2F4F5;
}

.keywordsClass {
  width: 100%;
  height: 40px;
  background: inherit;
  background-color: rgba(37, 38, 38, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: #434343;
  border-radius: 4px;

  :deep(.ed-input__wrapper) {
    background-color: rgba(37, 38, 38, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(51, 51, 51, 0);
    border-radius: 4px;
    box-shadow: 0 0 0 1px transparent;
  }

  :deep(.ed-input__inner) {
    background-color: rgba(37, 38, 38, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(51, 51, 51, 0);
    border-radius: 4px;
    color: #fff;
  }

  :deep(.ed-input-group__prepend) {
    background-color: rgba(37, 38, 38, 1);
    border: 0;
    box-shadow: 0 0 0 1px transparent;
    padding: 0 10px;
    padding-right: 0;
  }
}
</style>