<script>
import { mapGetters } from 'vuex';
import Favorite from '@shell/components/nav/Favorite';
import TypeDescription from '@shell/components/TypeDescription';
import { get } from '@shell/utils/object';
import { AS, _YAML } from '@shell/config/query-params';
import ResourceLoadingIndicator from './ResourceLoadingIndicator';
import TabTitle from '@shell/components/TabTitle';
import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'

/**
 * Resource List Masthead component.
 */
export default {

  name: 'MastheadResourceList',

  components: {
    Favorite,
    TypeDescription,
    ResourceLoadingIndicator,
    TabTitle
  },
  props: {
    resource: {
      type:     String,
      required: true,
    },
    favoriteResource: {
      type:    String,
      default: null
    },
    schema: {
      type:    Object,
      default: null,
    },
    typeDisplay: {
      type:    String,
      default: null,
    },
    isCreatable: {
      type:    Boolean,
      default: null,
    },
    isYamlCreatable: {
      type:    Boolean,
      default: null,
    },
    createLocation: {
      type:    Object,
      default: null,
    },
    yamlCreateLocation: {
      type:    Object,
      default: null,
    },
    createButtonLabel: {
      type:    String,
      default: null
    },
    loadResources: {
      type:    Array,
      default: () => []
    },

    loadIndeterminate: {
      type:    Boolean,
      default: false
    },

    showIncrementalLoadingIndicator: {
      type:    Boolean,
      default: false
    },

    /**
     * Inherited global identifier prefix for tests
     * Define a term based on the parent component to avoid conflicts on multiple components
     */
    componentTestid: {
      type:    String,
      default: 'masthead'
    },

    mainButtonVisible: {
      type:    Boolean,
      default: true
    },
  },

  data() {
    const params = { ...this.$route.params };

    console.log(params.product, ' params.product----------------');

    params.resource = harvesterhci2cloud(params.resource)

    const formRoute = { name: `${ cloud2harvesterhci(this.$route.name) }-create`, params };

    const hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](this.resource);

    const yamlRoute = {
      name:  `${ cloud2harvesterhci(this.$route.name) }-create`,
      params,
      query: { [AS]: _YAML },
    };

    const tabList = ['集群配置'];
    return {
      formRoute,
      yamlRoute,
      hasEditComponent,
      tabList,
    };
  },

  computed: {
    get,
    ...mapGetters(['isExplorer', 'currentCluster']),

    resourceName() {
      if (this.schema) {
        return this.$store.getters['type-map/labelFor'](this.schema);
      }

      return this.resource;
    },

    _typeDisplay() {
      if ( this.typeDisplay !== null) {
        return this.typeDisplay;
      }

      if ( !this.schema ) {
        return '?';
      }

      return this.$store.getters['type-map/labelFor'](this.schema, 99);
    },
    _descriptionDisplay() {
      const key = cloud2harvesterhci(this.$route.path.split('/').pop());

      return this.$store.getters['i18n/t'](`typeDescription."${ key.toLowerCase() }"`);
    },
    demoDisplay() {
      const product = this.$store.getters['productId'];
      const productId = this.$store.getters['type-map/groupForBasicType'](this.$store.getters['productId'], this._createLocation.params.resource);
      const parts = productId?.split('::');
      const newString = 'root';

      if (!parts.includes(newString)) {
        parts.unshift(newString); // 将字符串添加到数组第一位
      }

      const partsEn = parts.map((item) => {
        return this.$store.getters['i18n/t'](`typeLabel."${ item.toLowerCase() }"`);
      });

      return partsEn;
      // return this.$store.getters['i18n/t'](`typeLabel."${ productId.toLowerCase() }"`)
    },

    _isYamlCreatable() {
      if ( this.isYamlCreatable !== null) {
        return this.isYamlCreatable;
      }

      return this.schema && this._isCreatable && this.$store.getters['type-map/optionsFor'](this.resource).canYaml;
    },

    _isCreatable() {
      // Does not take into account hasEditComponent, such that _isYamlCreatable works
      if ( this.isCreatable !== null) {
        return this.isCreatable;
      }

      // blocked-post means you can post through norman, but not through steve.
      if ( this.schema && !this.schema?.collectionMethods.find((x) => ['blocked-post', 'post'].includes(x.toLowerCase())) ) {
        return false;
      }

      return this.$store.getters['type-map/optionsFor'](this.resource).isCreatable;
    },

    _createLocation() {
      return this.createLocation || this.formRoute;
    },

    _yamlCreateLocation() {
      return this.yamlCreateLocation || this.yamlRoute;
    },

    _createButtonlabel() {
      return this.createButtonLabel || this.t('resourceList.head.create');
    },
  }
};
</script>

<template>
  <!-- 顶部 header，带有子标题（subheader）样式类 -->
  <header class="with-subheader">
    <div style="display: flex;width: 100%;">
      <div style="flex: 1;">
        <!-- 标题区域 -->
        <div class="title">
          <div class="excram-list">
            <span
              v-for="(item,index) in demoDisplay"
              :key="index"
            >
              <span v-if="item">{{ item }}</span>
              <span v-if="item">/</span>
            </span>
            <span class="excram-last-name">{{ _typeDisplay }}</span>
          </div>
          <h1 style="display: flex;align-items: center;" class="m-0 descrip-name">
            <TabTitle>{{ _typeDisplay }}</TabTitle>
            
            <!-- <Favorite
              v-if="isExplorer"
              :resource="favoriteResource || resource"
            /> -->

            <ResourceLoadingIndicator
              style="margin-left: 10px;"
              v-if="showIncrementalLoadingIndicator"
              :resources="loadResources"
              :indeterminate="loadIndeterminate"
            />
          </h1>
          
          <!-- 插槽：typeDescription，用于插入类型描述组件 -->
          <div v-if="_descriptionDisplay" class="masthod-title-description">
            {{ _descriptionDisplay }}
          </div>
  
        </div>
    
        <!-- 子标题区域 -->
        <div class="sub-header">
          <slot name="subHeader">
            <!--Slot content-->
          </slot>
        </div>
      </div>
  
      <!-- 操作按钮区域 -->
      <div 
        v-if="!(tabList.includes(_typeDisplay)) && mainButtonVisible"
        class="actions-container"
        style="min-height: 32px;align-self: flex-end;"
      >
        <slot name="actions">
          <div class="actions">
            <slot name="extraActions" />
  
            <slot name="createButton">
              <router-link
                v-if="hasEditComponent && _isCreatable"
                :to="_createLocation"
                class="btn role-primary"
                :data-testid="componentTestid+'-create'"
              >
                {{ _createButtonlabel }}
              </router-link>
              <router-link
                v-else-if="_isYamlCreatable"
                :to="_yamlCreateLocation"
                class="btn role-primary"
                :data-testid="componentTestid+'-create-yaml'"
              >
                {{ t("resourceList.head.createFromYaml") }}
              </router-link>
            </slot>
          </div>
        </slot>
      </div>
    </div>
    <div
      v-if="!(tabList.includes(_typeDisplay))"
      style="width: 110%;height: 1px;background-color: #D7D7D7;margin-top: 16px;margin-left: -20px;margin-right: -20px;"
    />
  </header>
</template>

<style lang="scss" scoped>

  .title {
    /* align-items: center;
    display: flex; */
    h1 {
      margin: 0;
    }
  }

  header {
    /* margin-bottom: 20px; */
  }

  header.with-subheader {
    /* grid-template-areas:
      'type-banner type-banner'
      'title actions'
      'sub-header sub-header'
      'state-banner state-banner'; */
    position: relative;
    display: flex;
    margin-bottom: 16px;
    flex-direction: column;
  }
  .excram-list{
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
    font-family: 'Microsoft YaHei';
  }
  .excram-last-name{
    color: var(--primary);
  }
  .descrip-name{
    font-size: 26px;
    font-family: 'Microsoft YaHei';
  }
  .masthod-title-description{
    font-family: 'Microsoft YaHei';
    margin-top: 20px;
  }
  .actions-container{
    /* display: flex; */
    /* margin-left: 0px; */
  }

  .sub-header {
    .btn {
      text-align: left !important;
    }
  }
</style>
