<template>
  <div class="sales-overview-charts" :data-language="language">
    <div class="charts-body">
      <div class="filter-container">
        <el-select
          v-model="listQuery.sysOrigin"
          :placeholder="$t('pages.dashboard.propsSalesOverview.systemPlaceholder')"
          style="width: 120px"
          class="filter-item"
          @change="renderData"
        >
          <el-option
            v-for="item in permissionsSysOriginPlatforms"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left;"> <sys-origin-icon :icon="item.value" :desc="item.value" /></span>
            <span style="float: left;margin-left:10px">{{ item.label }}</span>
          </el-option>
        </el-select>

        <el-select
          v-model="listQuery.dateType"
          :placeholder="$t('pages.dashboard.propsSalesOverview.dateTypePlaceholder')"
          style="width: 120px"
          class="filter-item"
          @change="changeDateType"
        >
          <el-option
            v-for="item in queryTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-select
          v-model="listQuery.propsType"
          :placeholder="$t('pages.dashboard.propsSalesOverview.propsTypePlaceholder')"
          style="width: 120px"
          class="filter-item"
          @change="renderData"
        >
          <el-option v-for="item in localizedPropsTypes" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>

        <div class="filter-item">
          <el-date-picker
            v-model="listQuery.date"
            :clearable="false"
            :value-format="selectedDateType.dateValueFormat"
            :type="selectedDateType.dateType"
            :placeholder="$t('pages.dashboard.propsSalesOverview.datePlaceholder')"
            :editable="false"
            @change="renderData"
          />
        </div>

        <div class="filter-item">
          {{ $t('pages.dashboard.propsSalesOverview.totalLabel') }}: {{ sale.total || '-' }}
        </div>
      </div>

      <div v-loading="loading">
        <bar-graph-charts :key="'props-sales-' + language" :charts-data="sale.propsSales" :height="height" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getPropsSale } from '@/api/statistics'
import { formatDate } from '@/utils'
import { propsTypes } from '@/constant/type'
import BarGraphCharts from './bar-graph-charts'

const PROP_TYPE_KEY_MAP = {
  AVATAR_FRAME: 'avatarFrame',
  RIDE: 'ride',
  NOBLE_VIP: 'nobleVip',
  THEME: 'theme',
  LAYOUT: 'layout',
  CHAT_BUBBLE: 'chatBubble',
  FLOAT_PICTURE: 'floatPicture',
  FRAGMENTS: 'fragments',
  DATA_CARD: 'dataCard',
  SPECIAL_ID: 'specialId',
  CUSTOMIZE: 'customizeReadonly'
}

export default {
  components: { BarGraphCharts },
  props: {
    height: {
      type: String,
      require: false,
      default: '600px'
    }
  },
  data() {
    return {
      rawPropsTypes: propsTypes,
      dateTypeMap: {
        DAY: {
          dateType: 'date',
          dateValueFormat: 'yyyyMMdd',
          defaultDate: formatDate(new Date(), 'yyyyMMdd')
        },
        MONTH: {
          dateType: 'month',
          dateValueFormat: 'yyyyMM',
          defaultDate: formatDate(new Date(), 'yyyyMM')
        },
        YEAR: {
          dateType: 'year',
          dateValueFormat: 'yyyy',
          defaultDate: formatDate(new Date(), 'yyyy')
        }
      },
      selectedDateType: {},
      listQuery: {
        sysOrigin: '',
        dateType: 'MONTH',
        propsType: 'AVATAR_FRAME',
        date: ''
      },
      loading: false,
      sale: {}
    }
  },
  computed: {
    ...mapGetters(['permissionsSysOriginPlatforms', 'language']),
    queryTypes() {
      const language = this.language
      return [
        { label: this.$t('pages.dashboard.propsSalesOverview.day'), value: 'DAY' },
        { label: this.$t('pages.dashboard.propsSalesOverview.month'), value: 'MONTH' },
        { label: this.$t('pages.dashboard.propsSalesOverview.year'), value: 'YEAR' }
      ]
    },
    localizedPropsTypes() {
      const language = this.language
      return this.rawPropsTypes.map(item => {
        const key = PROP_TYPE_KEY_MAP[item.value]
        return {
          ...item,
          name: key ? this.$t(`pages.dashboard.propsSalesOverview.propTypes.${key}`) : item.name
        }
      })
    }
  },
  watch: {
    language() {
      this.selectedDateType = this.dateTypeMap[this.listQuery.dateType]
    }
  },
  created() {
    this.selectedDateType = this.dateTypeMap[this.listQuery.dateType]
    this.listQuery.date = this.selectedDateType.defaultDate
    if (this.permissionsSysOriginPlatforms && this.permissionsSysOriginPlatforms.length > 0) {
      this.listQuery.sysOrigin = this.permissionsSysOriginPlatforms[0].value
    }
    this.renderData()
  },
  methods: {
    renderData() {
      this.loading = true
      getPropsSale(this.listQuery).then(res => {
        this.loading = false
        this.sale = res.body || {}
      }).catch(() => {
        this.loading = false
      })
    },
    changeDateType() {
      this.selectedDateType = this.dateTypeMap[this.listQuery.dateType]
      this.listQuery.date = this.selectedDateType.defaultDate
      this.renderData()
    }
  }
}
</script>

<style scoped lang="scss">
</style>
