<template>
  <div
    class="grid-card-view"
    :style="{ minHeight: !multiple ? '100%' : '40px' }"
  >
    <component :is="componentFile" v-bind="condition" />

    <!-- 组件处理 -->
    <div class="cp-render-op">
      <a-button
        class="op-item"
        type="primary"
        icon="edit"
        size="small"
        ghost
        :title="$t('EDIT')"
        @click="editCpFn"
      ></a-button>
      <a-button
        class="op-item"
        type="danger"
        icon="delete"
        size="small"
        ghost
        :title="$t('DELETE')"
        @click="deleteCpFn"
      ></a-button>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["multiple", "handleDelCp", "handleEditCp"],
  props: { element: Object },
  data() {
    const COMPONENT_FILE = this.render;
    return { componentFile: COMPONENT_FILE };
  },
  computed: {
    condition() {
      const attrs = { ...(this.element?.attrs || {}) };

      Object.keys(attrs).forEach((key) => {
        const value = attrs[key];
        if (typeof value === "string" && value.startsWith("http")) {
          const path = value.endsWith("/")
            ? value.substr(0, value.length - 1)
            : value;
          // token 是否有token获取函数，如果没有以nuxt项目获取token
          const token = this.$auth?.getToken("local")?.substr(7) || "";
          const params = token ? `token=${token}` : "";
          try {
            const { hash, origin, search } = new URL(path);
            if (hash) {
              const { search: hashSearch } = new URL(origin + hash.substr(1));
              attrs[key] = hashSearch
                ? `${path}&${params}`
                : `${path}?${params}`;
            } else {
              attrs[key] = search ? `${path}&${params}` : `${path}?${params}`;
            }
          } catch (_err) {}
        }
      });

      return attrs;
    },
  },
  methods: {
    deleteCpFn() {
      this.handleDelCp(this.element);
    },
    editCpFn() {
      this.handleEditCp(this.element);
    },
    /* 异步加载门户小页组件 */
    render() {
      let { url = "" } = this.element;
      if (url) {
        url = url.endsWith(".vue") ? url.substring(0, url.length - 4) : url;
        url = url.startsWith("components/") ? url.substring(11) : url;

        this.componentFile = () => ({
          component: import(`@/components/${url}.vue`),
          error: "",
          delay: 100,
          timeout: 10000,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.grid-card-view {
  position: relative;
  width: 100%;
  background: #e1f0f8;
  border: 1px solid transparent;
  -moz-border-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23006896' stroke-width='1' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")
    1;
  -webkit-border-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23006896' stroke-width='1' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")
    1;
  -o-border-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23006896' stroke-width='1' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")
    1;
  border-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23006896' stroke-width='1' stroke-dasharray='6%2c 6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")
    1;

  .cp-render-op {
    position: absolute;
    right: 8px;
    top: 8px;
    .op-item {
      background-color: #fff !important;
    }
  }
}
</style>
