<template>
  <div class="rate-card-wrapper">
    <div class="card-header">
      <div v-if="isSplit" class="card-title">{{ title }}</div>
      <div class="h-left">
        <div>是否开通：<a-switch :checked="true" /></div>
        <div v-if="!isSplit">是否可进件：<a-switch :checked="true" /></div>
        <div>阶梯费率：<a-switch :checked="true" /></div>
        <div v-if="!isSplit">银联模式：<a-switch :checked="true" /></div>
        <slot name="headerLeft" />
      </div>
      <div v-if="!isSplit" class="h-right">
        <a-button type="link">读取默认费率</a-button>
      </div>
    </div>
    <div class="rate-card-content">
      <slot />
    </div>
    <div v-if="isHigh" class="high-config" @click="vdata.highConfigFlag = !vdata.highConfigFlag">
      <down-outlined v-if="!vdata.highConfigFlag" class="arrow" /> <up-outlined v-else class="arrow" />&nbsp {{ vdata.highConfigFlag ? '收起' : '展开' }}高级配置项
    </div>
  </div>
  <div v-show="vdata.highConfigFlag" class="high-card">
    <slot name="highConfig" />
  </div>
  <div style="margin-bottom: 20px" />
</template>

<script setup lang="ts">
import { reactive, defineProps } from 'vue'
const props: any = defineProps({
  isHigh: { type: Boolean, default: false },
  isSplit: { type: Boolean, default: false }, //是否拆分状态
  title: { type: String },
})
const vdata: any = reactive({
  highConfigFlag: false,
})
</script>

<style lang="less" scoped>
.rate-card-wrapper {
  position: relative;

  width: 100%;
  // height: 182px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    height: 48px;
    border-radius: 5px 5px 0 0;
    background-color: #fafafa;
    .card-title {
      font-size: 14px;
      font-weight: 700;
    }
    .h-left {
      display: flex;
      align-items: center;
      div {
        display: flex;
        align-items: center;
      }
      div:nth-child(n + 2) {
        margin-left: 30px;
      }
    }
  }
  .rate-card-content {
    padding: 30px 30px 40px 30px;
  }
  .high-config {
    position: absolute;
    bottom: -20px;
    left: 30px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 192px;
    height: 40px;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #d9d9d9;
    background-color: #fafaff;
    user-select: none;
  }
}
.high-card {
  transform: translateY(-5px);
  border: 1px solid #d9d9d9;
  border-top: none;
  padding: 55px 30px 40px 30px;
  border-radius: 0 0 5px 5px;
}
</style>
