<template>
  <div class="wrapper-list">
    <!-- 标题 -->

    <a-card :bordered="false" class="wrapper-list-card" :border="false" :body-style="{ height:'100%',padding:0 }">
      <template #title>
        <a-space class="card-title">
          <!-- title，单位 -->
          <a-typography-title class="title-left-title">
            {{ title }}
            <span>{{ unit }}</span>
          </a-typography-title>
          <!-- 按钮 -->
          <slot name="button"></slot>
          <!-- 处理状态 -->
          <a-space class="title-process">
            <slot name="process"></slot>
          </a-space>
        </a-space>
      </template>
      <template #extra>
        <!-- 右侧 -->
        <a-typography-title class="title-right-unit" @click="goDetail">
          <slot name="extra"></slot>
        </a-typography-title>
      </template>
      <!-- 图表 -->
      <div class="chart-view">
        <slot name="chart"/>
      </div>
    </a-card>
  </div>
</template>
<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {notification} from "@/hooks/my-design";

const route = useRoute()
const router = useRouter()
const props = defineProps({
  unit: {
    type: String,
    default: '',
  },
  title: {
    type: String,
    default: '',
  },
  public: {
    type: Object,
    default: () => {
      return {}
    },
  },
  requestParams: {
    type: Object,
    default: () => {
      return {}
    },
  }
})
const goDetail = () => {
  if (!props.public.dashboardConfigId) {
    notification({
      code: 500,
      msg: '暂未配置卡片'
    })
    return
  }
  router.push({
    path: '/biDetailDefault',
    query:{
      unit: props.unit,
      ...props.public,
      ...props.requestParams,
    }
  })
}
</script>
<style lang="less" scoped>
@font-size: 14px;
@font-size-mini: 12px;
@font-size-medium: 16px;
@font-size-large: 22px;
@color-w: white;
@font-family: Source Han Sans;

.wrapper-list {
  background: rgba(0, 0, 100, 0.1);
  height: 100%;
  position: relative;
  border: 1px solid #00DFDA;
  border-radius: 8px;

  &::before,
  &::after {
    content: '';
    z-index: 1;
    position: absolute;
    width: 10px;
    height: 10px;
    border: 3px solid #00DFDA;
  }

  &::after {
    bottom: -3px;
    left: -3px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 8px;
  }

  &::before {
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 8px;
  }
}

/* title样式 */
.wrapper-list-card {
  background-color: rgba(0,56,55,0.3);
  height: 100%;
  padding: 0;
  display: grid;
  grid-template-rows: 30px 1fr;

  :deep(.arco-card-body) {
    height: 100%;
    padding: 0;
    overflow-y: hidden;
    scrollbar-width: none; /* 适用于 Firefox */
    -ms-overflow-style: none; /* 适用于 Internet Explorer 和 Edge */
  }

  &::-webkit-scrollbar {
    display: none; /* 适用于 Chrome, Safari 和 Opera */
  }

  &::before,
  &::after {
    content: '';
    z-index: 2500;
    position: absolute;
    width: 10px;
    height: 10px;
    border: 3px solid #00DFDA;
  }

  &::after {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 8px;
  }

  &::before {
    top: -3px;
    right: -3px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 8px;
  }

  .card-title {
    display: flex;
    align-items: center;

    .title-left-title {
      margin: 0;
      font-size: @font-size-medium;
      color: @color-w;
      //padding: 0 20px 0 12px;
      font-weight: bold;
      display: flex;
      align-items: center;

      span {
        font-weight: 400;
        font-size: @font-size-mini;
        margin-left: 4px;
      }
    }

    :deep(.arco-space-item) {
      font-size: @font-size;
      font-variation-settings: "opsz" auto;
      font-feature-settings: "kern" on;
      color: @color-w;

      .title-process {
        span {
          color: #F3921D;
        }
      }
    }


    /* 按钮样式 */

    :deep(.arco-btn-primary, .arco-btn-primary[type='button'], .arco-btn-primary[type='submit']) {
      display: inline-block;
      height: 26px;
      padding: 0 12px;
      gap: 4px;
      font-size: @font-size-mini;
      color: @color-w;
      margin-right: 8px;
      letter-spacing: -0.01px;
      background: #151494;
      border: 2px solid #FFFFFF;
      border-radius: 8px;
      box-sizing: border-box;

      &:hover {
        background: #0000FF;
      }
    }

  }

  .chart-view {
    height: 100%;
  }

  :deep(.arco-card-header) {
    border: none;
    padding: 0 14px 0 0;
    background-size: 100% 100%;
    height: auto;
    background: linear-gradient(90deg, #00DFDA 0%, transparent 100%);
    clip-path: inset(0 round 6px);
    margin: 2px;
  }

  .title-right-unit {
    margin: 0;
    list-style: none;
    text-align: right;
    font-size: @font-size;
    color: @color-w;
    font-variation-settings: "opsz" auto;
    font-feature-settings: "kern" on;

    ::v-deep(.arco-icon) {
      color: #0E88F6;
      font-size: @font-size-medium;
      font-weight: bold;
    }
  }

  .chart-view {
    height: 100%;
  }
}

</style>