<template>
  <div class="c-collapse-panel">
    <Collapse :activeKey="activeKey" :expand-icon-position="'right'">
      <template v-if="collapsible" #expandIcon
        ><span style="cursor: pointer" @click="toggle"
          >{{ collaspedTip }} <DownOutlined class="icon"></DownOutlined
        ></span>
      </template>
      <CollapsePanel :show-arrow="collapsible" key="1" class="panel-content">
        <template #header>
          <span class="title">{{ title }}</span>
        </template>

        <template
          v-for="(item, key, index) in $slots"
          :key="index"
          v-slot:[key]
        >
          <!-- <Spin :spinning="loading"> -->
          <slot :name="key"></slot>
          <!-- </Spin> -->
        </template>
      </CollapsePanel>
    </Collapse>
  </div>
</template>

<script lang="ts">
export default {
  name: "c-panel",
};
</script>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { Collapse, CollapsePanel, Spin } from "ant-design-vue";
import { DownOutlined } from "@ant-design/icons-vue";

const props = defineProps({
  /**
   * 面板title
   */
  title: {
    type: String,
    default: "",
  },
  /**
   * @description 是否可折叠
   */
  collapsible: {
    type: Boolean,
    default: false,
  },
  /**
   * @description 加载中
   */
  loading: {
    type: Boolean,
    required: false,
    default: false,
  },
});

const emit = defineEmits(["toggle"]);

const collapsed = ref<boolean>(false);
const activeKey = ref(["1"]);
const toggle = (e) => {
  if (collapsed.value) {
    activeKey.value.push("1");
  } else {
    activeKey.value.pop();
  }
  collapsed.value = !collapsed.value;
  e.preventDefault();
  e.stopPropagation();
  return false;
};
const collaspedTip = computed(() => (collapsed.value ? "展开" : "收起"));

const turn = computed(() => `rotate(${collapsed.value ? 0 : 0.5}turn)`);
const extraRight = computed(() => (props.collapsible ? "30px" : "0"));

const headerRightPadding = computed(() =>
  props.collapsible ? "40px" : "16px"
);
</script>

<style lang="less" scoped>
.c-collapse-panel {
  background-color: pink;
  span {
    // font-size: 14px;
    // color: #0074ff;
  }

  .icon {
    transition: 0.3s;
    transform: v-bind(turn);
  }
  :deep(.ant-collapse) {
    border-radius: 2px;
    background: #ffffff;
    border-color: #f0f0f0 !important;
    .ant-collapse-item {
      border-color: #f0f0f0;
    }
  }
  :deep(.ant-collapse-header) {
    cursor: default !important;
    padding-right: v-bind(headerRightPadding) !important;
    border-color: #f0f0f0 !important;
    .title {
      font-size: 16px;
      font-weight: 500;
      color: #222222;
      flex: 1;
    }

    display: flex;
    align-items: center;

    .ant-collapse-header-text {
      flex: 1;
      user-select: none;
    }
    .ant-collapse-extra {
      margin-right: v-bind(extraRight) !important;
    }
    .ant-collapse-arrow {
      color: #0074ff;
    }
  }
  :deep(.ant-collapse-content) {
    border-color: #f0f0f0 !important;
  }
  :deep(.ant-collapse-content-box) {
    border-color: #f0f0f0 !important;
    padding: 16px;
  }
}
</style>
