<template>
  <div class="go-small-border">
    <div class="header flex">
      <img src="./assets/Header.svg" alt="标题" class="svg ih">
      <span class="title">
        {{ titleText }}
      </span>
      <span class="right-select">
        <ConsumSelect v-show="selectOption.show" :options="selectOption.dataset"
          :selectedValue="selectOption.selectValue" @change="handleSelectChange"
          :select-style-config="selectStyleConfig" />
      </span>
    </div>
    <div class="content flex">
      <img src="./assets/Background.svg" alt="" class="svg ic">
      <slot>
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ConsumSelect from './select.vue'

const props = defineProps({
  titleText: {
    type: String,
    required: true
  },
  selectOption: {
    type: Object,
    default: () => ({
      show: false,
      selectValue: 'day',
      dataset: [
        {
          label: '当天',
          value: 'day'
        },
        {
          label: '本周',
          value: 'week'
        },
        {
          label: '当月',
          value: 'month'
        },
        {
          label: '本季度',
          value: 'quarter'
        },
        {
          label: '当年',
          value: 'year'
        }
      ]
    })
  }, selectStyleConfig: {
    default: () => ({
      showAngle: true
    }),
    required: false
  }
})
const emits = defineEmits(['change'])
const handleSelectChange = (value: any) => {
  emits('change', value)
}

</script>

<style scoped>
.go-small-border {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .flex {
    display: flex;
  }

  .header {
    position: relative;
    height: 35px;
    width: 90%;
    /* background-color: antiquewhite; */
    align-items: center;
    padding-bottom: 2px;
    justify-content: space-between;

    .ih {
      top: 2px;
    }

    .title {
      margin-left: 70px;
      margin-top: 8px;
      z-index: 10;
      white-space: nowrap;
      font-family: 'CustomFont';
      font-style: italic;
      letter-spacing: 0.5px;
      color: #eee;
      text-shadow: 1px 3px 10px #000000;
      font-size: 16px;
      /* background-color: #eee; */
    }
  }

  .content {
    height: calc(100% - 30px);
    /* min-height: calc(100% - 15px); */
    margin-top: 2px;
    width: 90%;
    padding: 5px 10px;
    box-sizing: border-box;
    position: relative;
    /* background-color: aquamarine; */

    .ic {
      height: 100%;
    }
  }

  .svg {
    position: absolute;
    height: 99%;
    width: 100%;
    top: 0;
    left: 0;
  }
}
</style>