<template>
  <div class="statistics-panel-container">
    <div class="section-header">
      <div class="section-header-title">
        <div class="title-text">{{ title }}</div>
        <AddresSelect v-model="filterForm.address" style="margin-left: 8px" v-if="filters.includes('address')"></AddresSelect>
        <SourceChannelSelect v-model="filterForm.sourceChannel" style="margin-left: 8px" v-if="filters.includes('sourceChannel')"></SourceChannelSelect>
        <DateSelect v-model="filterForm.date" style="margin-left: 8px" v-if="filters.includes('date')"></DateSelect>
        <slot name="filter"></slot>
      </div>

      <div>
        <slot name="button"></slot>
      </div>
    </div>

    <slot></slot>
  </div>
</template>

<script>
import AddresSelect from './AddresSelect.vue'
import SourceChannelSelect from './SourceChannelSelect.vue'
import DateSelect from './DateSelect.vue'

export default {
  components: { AddresSelect, SourceChannelSelect, DateSelect },
  props: {
    title: { type: String, default: '统计' },
    filters: { type: Array, default: () => [] }
  },

  data() {
    return {
      filterForm: {}
    }
  },

  watch: {
    filters: {
      handler(list) {
        this.filterForm = {}
        list.forEach((key) => {
          this.$set(this.filterForm, key, 1)
        })
      },
      deep: true,
      immediate: true
    },

    filterForm: {
      handler(form) {
        this.$emit('change', form)
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.statistics-panel-container {
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  margin: 16px 0;

  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;

    @media (max-width: 675px) {
      display: block;

      .section-header-title{
        margin-bottom: 20px;
      }
    }
  }

  .section-header-title {
    position: relative;
    padding-left: 20px;
    display: flex;
    align-items: center;

    &::after {
      position: absolute;
      content: '';
      display: block;
      width: 4px;
      height: 16px;
      background-color: #2673ff;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .title-text {
      color: #141736;
      font-size: 24px;
      font-weight: bold;
      margin-right: 16px;
      line-height: 1.5;
    }
  }
}
</style>
