<template>
  <h-card class="workplace-card" hoverable :title="title" style="width: 100%">
    <template #extra>
      <div class="workplace-card-title-button-group">
        <template v-if="['normal', 'mini'].includes(status)">
          <HIcon name="hoteam-full-screen" size="18" @click="maximize"></HIcon>
          <HIcon name="hoteam-exit-full-screen" size="18" @click="minimize"></HIcon>
          <HIcon name="hoteam-close" size="18" @click="close"></HIcon>
        </template>
        <template v-else>
          <HIcon name="hoteam-refresh-left" size="18" @click="normalize"></HIcon>
        </template>
      </div>
    </template>
    <div class="workplace-card-content">
      <wujie-vue :name="id" :url="url" :alive="alive" :props="params"></wujie-vue>
    </div>
  </h-card>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, computed } from 'vue';
// import Wujie from 'wujie-vue3';
import { getInfo, ICP_CONFIG } from '@/utils/commMethods';
import { localStorage } from '@/utils/local-storage';
import { STORAGE_TOKEN_KEY, STORAGE_LANG_KEY } from '@/store/mutation-type';

export default defineComponent({
  name: 'workplaceCard',
  props: {
    config: {
      type: Object,
      default: () => {},
    },
  },

  setup({ config }, context) {
    console.log('card配置：', config);
    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });
    // wujie-vue应用id必须为string类型
    const id = ref(`${config._id}`);
    const title = ref(config.name);
    const url = ref(config.url);
    const alive = ref(true);
    const savedToken = localStorage.get(STORAGE_TOKEN_KEY);
    const params = reactive({
      userInfo: commonParams,
      token: savedToken,
      lang: localStorage.get(STORAGE_LANG_KEY),
      timeZone: '8',
    });

    const status = ref('normal');

    const maximize = () => {
      context.emit('maximize', config);
      status.value = 'max';
    };

    const normalize = () => {
      context.emit('normalize', config);
      status.value = 'normal';
    };

    const minimize = () => {
      context.emit('minimize', config);
      status.value = 'mini';
    };

    const close = () => {
      context.emit('close', config);
    };

    return {
      id,
      title,
      url,
      alive,
      params,
      status,
      maximize,
      normalize,
      minimize,
      close,
    };
  },
});
</script>

<style scoped lang="less">
.workplace-card {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  :deep(.ant-card-head-title) {
    font-weight: 600;
  }

  .workplace-card-title-button-group {
    .h-div-icon {
      margin-right: 4px;
    }
  }

  :deep(.ant-card-body) {
    flex: 1;
    overflow-y: hidden;
  }
  .workplace-card-content {
    position: relative;
    height: 100%;
    overflow-y: hidden;
  }
}
</style>
