<template>
  <div v-if="!isShortCode" class="lofty-market-report-header lofty-page-padding">
    <Dropdown class="lofty-report-list-dropdown" :left="0" :clickMenuClose="false" ref="dropdown">
      <span class="lofty-ellipsis">{{ config.title }}</span>
      <template #menu>
        <ul class="market-report-list">
          <im-input v-model:value="searchWord" searchable></im-input>
          <li v-for="item of showReportList" class="lofty-report-item lofty-ellipsis" @click="changeReport(item)">
            {{ item.title }}
            <i v-show="reportId === item.encryptId" class="lofty_iconfont lofty-icon-checked"></i>
          </li>
        </ul>
      </template>
    </Dropdown>
    <SubscribeButton v-if="!isMobile && reportId"
                     :reportId="reportId"
                     :key="reportId"
                     :submitJs="submitJs"
                     :name="config.title"
                     :leadSubscribeStatus="leadSubscribeStatus"/>
  </div>
  <div class="lofty-market-report-title lofty-page-padding">
    <p class="page-title">{{ config.title }}</p>
    <span class="last-time">Last 30 Days</span>
  </div>
  <div class="lofty-page-padding">
    <three-data v-if="renderCard" :id="id" :key="reportId"></three-data>
  </div>

  <div v-if="config.show_new">
    <new-listing :id="id" :key="reportId"></new-listing>
  </div>

  <div v-if="config.show_pending" class="lofty-page-padding">
    <pending-listing :id="id" :key="reportId"></pending-listing>
  </div>

  <div v-if="config.show_sold" class="lofty-page-padding">
    <sold-listing :id="id" :key="reportId"></sold-listing>
  </div>

  <div v-if="isMobile && reportId" class="lofty-mobile-fix-bottom lofty-mobile-subscribe">
    <SubscribeButton :reportId="reportId" :key="reportId" :submitJs="submitJs" :name="config.title" :leadSubscribeStatus="leadSubscribeStatus"/>
  </div>
</template>

<script setup>
import Dropdown from '@/components/dropdown/index.vue';
import SubscribeButton from './components/subscribeButton.vue';
import ThreeData from './threeData.vue';
import NewListing from "./newListing.vue";
import PendingListing from "./pendingListing.vue";
import SoldListing from "./soldListing.vue";
import ImInput from "@/components/input/index.vue";
import store from "./store.js";
import http from "@/api/index.js";
import { getQueryParams, isMobile } from "@/util/index.js";
const { id } = defineProps({ id: String });
const { isShortCode, config, getReportByTitle, submitJs } = store[id]

const reportId = computed(() => config.value.encryptId)
const leadSubscribeStatus = computed(() => config.value.leadSubscribeStatus)
const renderCard = computed(() => isShortCode || reportId.value)
const searchWord = ref('');
const reportList = ref([]);
const showReportList = computed(()=>{
  return reportList.value.filter(item => {
    if(searchWord.value) {
      return item.title.toLowerCase().includes(searchWord.value.toLowerCase())
    }
    return reportList.value
  })
})
if(!isShortCode){
  getReportList()
}
async function getReportList() {
  const data = {
    pageNum: 1,
    pageSize: 300,
    onlyShowDisplay: true
  }
  const res = await http.post('/admin/report/list', {data})
  reportList.value = res.data.pluginReports || []
  const item = reportList.value[0]
  const obj = getQueryParams();
  if (item && !obj.report) {
    getReportByTitle(item.title)
  }
}

const dropdown = useTemplateRef('dropdown')
function changeReport(item) {
  if(item.encryptId !== config.value.encryptId) {
    config.value.title = item.title;
    getReportByTitle(item.title);
  }
  dropdown.value.open(false)
}
</script>
<style lang="scss">
.lofty-market-report-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.lofty-market-report-title {
  margin-top: 80px;
  @include media-600 {
    margin-top: 40px;
  }
}
.lofty-report-list-dropdown {
  border: 1px solid #dddddd;
  padding: 8px 15px;
  height: 40px;
  width: 380px;
  @include media-600 {
    width: 100%;
  }
  ul.market-report-list {
    overflow: auto;
    max-height: 240px;
    min-width: 200px;
    max-width: 300%;
    padding-left: 0;
    .input_container {
      margin-bottom: 10px;
    }
    .lofty-report-item {
      font-size: 14px;
      font-weight: 400;
      line-height: 44px;
      text-align: left;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      &:hover {
        background: rgba(17, 17, 17, 0.051);
      }
    }
  }
}

.lofty-mobile-subscribe {
  display: flex;
  align-items: center;
  padding: 10px;
  > div {
    width: 100%;
  }
}
</style>