<template>
  <el-row style="width: 100%">
    <el-row style="display: table; width: 100%">
      <el-col style="float: left" :class="state.asideActive ? 'aside-active' : 'aside-inActive'">
        <el-icon v-show="!state.asideActive" class="insert" @click="asideActiveChange(true)">
          <DArrowRight />
        </el-icon>
        <el-row v-show="state.asideActive" style="padding: 12px 12px 0">
          <el-row style="align-items: center">
            <el-icon class="insert" @click="closePreview()"><Close /></el-icon>
            <span class="main-title">{{ t('visualization.template_preview') }}</span>
            <el-icon class="insert" @click="asideActiveChange(false)"><DArrowLeft /></el-icon>
          </el-row>
          <el-row class="margin-top16 search-area">
            <el-input
              v-model="state.searchText"
              size="small"
              prefix-icon="Search"
              class="title-name-search"
              :placeholder="t('visualization.enter_template_name_tips')"
              clearable
            />
            <el-icon
              class="insert-filter filter-icon-span"
              :class="state.extFilterActive ? 'filter-icon-active' : ''"
              @click="extFilterActiveChange()"
            >
              <Filter />
            </el-icon>
          </el-row>
          <el-row v-show="state.extFilterActive">
            <el-select
              v-model="state.marketActiveTab"
              class="margin-top16"
              size="small"
              :placeholder="t('common.selectText')"
            >
              <el-option v-for="item in state.marketTabs" :key="item" :label="item" :value="item" />
            </el-select>
          </el-row>
          <el-divider />
        </el-row>

        <el-row
          v-show="state.asideActive"
          class="aside-list"
          :class="state.extFilterActive ? 'aside-list-filter-active' : ''"
        >
          <template-market-preview-item
            v-for="templateItem in state.currentMarketTemplateShowList"
            v-show="templateItem.showFlag"
            :key="templateItem.id"
            :template="templateItem"
            :base-url="state.baseUrl"
            :active="active(templateItem)"
            @previewTemplate="previewTemplate"
          />
          <el-row v-show="!state.hasResult" class="custom-position">
            <div style="text-align: center">
              <Icon name="no_result">
                <no_result style="margin-bottom: 16px; font-size: 75px" class="svg-icon" />
              </Icon>
              <br />
              <span>{{ t('commons.no_result') }}</span>
            </div>
          </el-row>
        </el-row>
      </el-col>
      <el-col
        style="float: left"
        class="main-area"
        :class="state.asideActive ? 'main-area-active' : ''"
      >
        <el-row>
          <span v-if="state.curTemplate" class="template-title">{{ state.curTemplate.title }}</span>
          <div style="flex: 1; text-align: right">
            <el-button
              style="float: right"
              type="primary"
              size="small"
              @click="templateApply(state.curTemplate)"
            >
              {{ t('visualization.apply_this_template') }}
            </el-button>
          </div>
        </el-row>
        <el-row class="img-main">
          <img style="height: 100%" :src="state.templatePreviewUrl" alt="" />
        </el-row>
      </el-col>
    </el-row>
  </el-row>
</template>

<script setup lang="ts">
import no_result from '@/assets/svg/no_result.svg'
import { searchMarket, getCategories } from '@/api/templateMarket'
import { onMounted, reactive, watch } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import TemplateMarketPreviewItem from '@/views/template-market/component/TemplateMarketPreviewItem.vue'
const { t } = useI18n()

const props = defineProps({
  previewId: {
    type: String,
    default: null
  }
})

const emits = defineEmits(['templateApply', 'closeDialog', 'closePreview'])

const state = reactive({
  hasResult: true,
  extFilterActive: false,
  asideActive: true,
  previewVisible: false,
  templatePreviewUrl: null,
  marketTabs: null,
  marketActiveTab: null,
  searchText: null,
  panelGroupList: [],
  curApplyTemplate: null,
  folderSelectShow: false,
  baseUrl: 'https://dataease.io/templates',
  currentMarketTemplateShowList: [],
  networkStatus: true,
  curTemplate: null
})

watch(
  () => state.marketActiveTab,
  () => {
    initTemplateShow()
  }
)

watch(
  () => state.searchText,
  () => {
    initTemplateShow()
  }
)

watch(
  () => props.previewId,
  value => {
    state.currentMarketTemplateShowList.forEach(template => {
      if (value === template.id) {
        previewTemplate(template)
      }
    })
  }
)

const initMarketTemplate = async () => {
  await searchMarket()
    .then(rsp => {
      state.baseUrl = rsp.data.baseUrl
      state.currentMarketTemplateShowList = rsp.data.contents
      state.hasResult = true
      if (props.previewId) {
        state.currentMarketTemplateShowList.forEach(template => {
          if (props.previewId === template.id) {
            previewTemplate(template)
          }
        })
      }
    })
    .catch(() => {
      state.networkStatus = false
    })
  getCategories()
    .then(rsp => {
      state.marketTabs = rsp.data
      state.marketActiveTab = state.marketTabs[0]
    })
    .catch(() => {
      state.networkStatus = false
    })
}

const templateApply = template => {
  emits('templateApply', template)
}

const initTemplateShow = () => {
  state.hasResult = false
  state.currentMarketTemplateShowList.forEach(template => {
    template.showFlag = templateShow(template)
    if (template.showFlag) {
      state.hasResult = true
    }
  })
}

const templateShow = templateItem => {
  let categoryMarch = false
  let searchMarch = false
  templateItem.categories.forEach(category => {
    if (category.name === state.marketActiveTab) {
      categoryMarch = true
    }
  })
  if (!state.searchText || templateItem.title.indexOf(state.searchText) > -1) {
    searchMarch = true
  }
  return categoryMarch && searchMarch
}

const previewTemplate = template => {
  state.curTemplate = template
  if (template.thumbnail.indexOf('http') > -1) {
    state.templatePreviewUrl = template.thumbnail
  } else {
    state.templatePreviewUrl = state.baseUrl + template.thumbnail
  }
}

const asideActiveChange = prop => {
  state.asideActive = prop
}

const extFilterActiveChange = () => {
  state.extFilterActive = !state.extFilterActive
  state.marketActiveTab = state.marketTabs[0]
}
const closePreview = () => {
  emits('closePreview')
}

const active = template => {
  return state.curTemplate && state.curTemplate.id === template.id
}

onMounted(() => {
  initMarketTemplate()
})
</script>

<style lang="less" scoped>
.aside-list {
  padding: 0px 12px 12px 12px;
  width: 100%;
  height: calc(100vh - 200px);
  overflow-x: hidden;
  overflow-y: auto;
}

.aside-list-filter-active {
  height: calc(100vh - 250px);
}

.template-main {
  border-radius: 4px;
  box-shadow: 0 0 2px 0 rgba(31, 31, 31, 0.15), 0 1px 2px 0 rgba(31, 31, 31, 0.15);
  border: solid 2px #fff;
  padding-bottom: 24px;
  min-height: calc(100vh - 190px);
}

.market-main {
  padding: 24px;
}

.title-left {
  float: left;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.title-right {
  float: right;
  width: 320px;
}

.dialog-footer-self {
  text-align: center;
}

.search-button-self {
  text-align: left;
  padding-left: 10px;
}

.topbar-icon-active {
  cursor: pointer;
  transition: 0.1s;
  border-radius: 3px;
  font-size: 22px;
  background-color: rgb(245, 245, 245);

  &:active {
    color: #000;
    border-color: #3a8ee6;
    background-color: red;
    outline: 0;
  }

  &:hover {
    background-color: rgba(31, 35, 41, 0.1);
    color: #3a8ee6;
  }
}

.custom-position {
  height: 70vh;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-flow: row nowrap;
  color: #646a73;
  font-weight: 400;
}

.aside-active {
  width: 206px;
  height: calc(100vh - 56px);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--ContentBG, #ffffff);
}

.aside-inActive {
  position: relative;
  width: 0px;
}

.main-area-active {
  width: calc(100% - 206px) !important;
}

.main-area {
  width: 100%;
  padding: 24px;
  text-align: center;
  height: calc(100vh - 56px);
  transition: 0.5s;
}

.title-name-search {
  width: 140px;
  float: left;
}

.icon20 {
  font-size: 20px !important;
}

.main-title {
  width: 135px;
  margin-left: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--TextPrimary, #1f2329);
}

.insert-filter {
  display: inline-block;
  font-weight: 400 !important;
  font-family: var(--de-custom_font, 'PingFang');
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: var(--TextPrimary, #1f2329);
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  border-radius: 3px;

  &:active {
    color: #000;
    border-color: #3a8ee6;
    background-color: red;
    outline: 0;
  }

  &:hover {
    background-color: rgba(31, 35, 41, 0.1);
    color: #3a8ee6;
  }
}

.insert {
  display: inline-block;
  font-weight: 400 !important;
  font-family: var(--de-custom_font, 'PingFang');
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  color: #646a73;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  border-radius: 3px;

  &:active {
    color: #000;
    border-color: #3a8ee6;
    background-color: red;
    outline: 0;
  }

  &:hover {
    background-color: rgba(31, 35, 41, 0.1);
    color: #3a8ee6;
  }
}

.template-title {
  float: left;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 24px;
  color: var(--TextPrimary, #1f2329);
}

.margin-top16 {
  margin-top: 16px;
}
.img-main {
  display: inherit;
  border-radius: 4px;
  background: #0f1114;
  overflow-x: auto;
  overflow-y: hidden;
  height: calc(100% - 50px) !important;
}
.open-button {
  cursor: pointer;
  font-size: 30px;
  position: absolute;
  left: 0;
  top: 16px;
  z-index: 2;
}

//.open-button:hover{
//  transition: 0.5s;
// width: 50px;
//}
.open-button:hover {
  color: #3a8ee6;
}
.filter-icon-span {
  float: left;
  border: 1px solid #dcdfe6;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  padding: 7px;
  margin-left: 8px;
}

.filter-icon-active {
  border: 1px solid var(--ed-color-primary);
  color: var(--ed-color-primary);
}

.filter-icon-active {
  border: 1px solid var(--ed-color-primary);
  color: var(--ed-color-primary);
}

.search-area {
  width: 100%;
  position: relative;
}
</style>
