<template>
  <div>
    <div class="statistics-section-container">
      <img class="icon" :src="meta.icon" alt="" />
      <div class="info">
        <div class="title">
          {{ meta.label }}
          <DateSelect v-model="filterForm.date" v-if="meta.filter && meta.filter.includes('date')" style="margin-left: 16px"></DateSelect>
          <SourceChannelSelect v-model="filterForm.scourceChannel" v-if="meta.filter && meta.filter.includes('scourceChannel')" style="margin-left: 8px"></SourceChannelSelect>
        </div>
        <div class="list">
          <StatisticsItem v-for="(item, index) in meta.children" :key="index" :style="meta.itemStyles" :title="item.label" :value="itemData[item.field]" :format="item.format" :tooltip="item.tooltip">
            <template #tooltip>
              <slot :name="item.field"></slot>
            </template>
          </StatisticsItem>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: { StatisticsItem, DateSelect, SourceChannelSelect },
  props: {
    meta: {
      type: Object,
      required: true
    },

    itemData: {
      type: Object,
      required: true
    }
  },

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

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

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

<style lang="scss" scoped>
.statistics-section-container {
  background-color: #f7f8fa;
  flex: 1;
  padding-top: 24px;
  padding-left: 24px;
  padding-bottom: 16px;
  box-sizing: border-box;
  display: flex;
  border-radius: 8px;
  cursor: pointer;
  transition: transform ease 0.5s, box-shadow ease 0.5s;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25), 0px 20px 40px 0px rgba(0, 0, 0, 0.15);
  }

  .icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    margin-right: 16px;
  }

  .info {
    flex: 1;
    padding-top: 9px;
    .title {
      display: flex;
      align-items: center;
      color: #141736;
      font-weight: bold;
      font-size: 20px;
      line-height: 1.5;
      margin-bottom: 15px;
    }

    .list {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
    }
  }
}
</style>
