<template>
  <div class="rate-header">
    <div class="rate-title">{{ title }}</div>
    <div class="rate-header-right">
      <slot name="right" />
      <a-button v-if="vdata.splitFlag" type="primary" style="margin-right: 15px" @click="conflateConfig">合并配置</a-button>
      <a-button v-if="!vdata.splitFlag" type="primary" @click="splitConfig">拆分配置</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, reactive } from 'vue'
const props: any = defineProps({
  title: { type: String },
})
const emits = defineEmits(['splitBut', 'conflateBut'])
const vdata: any = reactive({
  splitFlag: false,
})
const splitConfig = () => {
  if (vdata.splitFlag) return
  vdata.splitFlag = true
  emits('splitBut')
}
const conflateConfig = () => {
  vdata.splitFlag = false
  emits('conflateBut')
}
const onCheckAllChange = () => {}
</script>

<style lang="less" scoped>
.rate-header {
  padding-top: 30px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  .rate-title {
    text-indent: 20px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
  }
}
</style>
