<template>
  <CommonBarStatisticsCharts
    charts-title="行李数量"
    :query-settings="querySettings"
    :formItems="formItems"
    :formData="formData"
  />
</template>

<script>
import CommonBarStatisticsCharts from '../../components/newBarStatisticsCharts.vue'
export default {
  name: 'FlightStatisticsCharts',
  components: { CommonBarStatisticsCharts },
  data() {
    return {
      querySettings: {
        serviceId: SERVICE_ID.LuggageInId,
      },
      formData: {
        td: '日',
        airport: 'CAN',
        dateTime: [],
        io: '',
      },
      formItems: [
        {
          prop: 'td',
          inputType: 'select',
          placeholder: '时间维度',
          requiredWarning: '请先选择统计时间维度',
          options: [
            {
              value: '日',
              label: '按日统计',
            },
            {
              value: '月',
              label: '按月统计',
            },
            {
              value: '年',
              label: '按年统计',
            },
          ],
          changeHandler(value, oldValue) {
            const typeMap = {
              日: 'datePicker',
              月: 'monthPicker',
              年: 'yearPicker',
            }
            const dateTimeItem = this.formItems.find(
              item => item.prop === 'dateTime'
            )
            const formData = this._.cloneDeep(this.formData)
            if (dateTimeItem) {
              dateTimeItem.inputType = typeMap[value]
              const dateTime = formData.dateTime
              if (dateTime && dateTime[0] && dateTime[1]) {
                if (value === '年') {
                  this.formData.dateTime[0] = dateTime[0].split('-')[0]
                  this.formData.dateTime[1] = dateTime[1].split('-')[0]
                }
                if (value === '月') {
                  if (oldValue === '年') {
                    this.formData.dateTime[0] = `${
                      dateTime[0].split('-')[0]
                    }-01`
                    this.formData.dateTime[1] = `${
                      dateTime[1].split('-')[0]
                    }-12`
                  }
                  if (oldValue === '日') {
                    this.formData.dateTime[0] = dateTime[0]
                      .split('-')
                      .slice(0, 2)
                      .join('-')
                    this.formData.dateTime[1] = dateTime[1]
                      .split('-')
                      .slice(0, 2)
                      .join('-')
                  }
                }
                if (value === '日') {
                  if (oldValue === '年') {
                    this.formData.dateTime[0] = `${
                      dateTime[0].split('-')[0]
                    }-01-01`
                    this.formData.dateTime[1] = `${
                      dateTime[1].split('-')[0]
                    }-12-31`
                  }
                  if (oldValue === '月') {
                    this.formData.dateTime[0] = `${dateTime[0]
                      .split('-')
                      .slice(0, 2)
                      .join('-')}-01`
                    let [year, month] = dateTime[1].split('-')
                    if (month === '12') {
                      year = Number(year) + 1
                      month = 1
                    } else {
                      month = Number(month) + 1
                    }
                    const day = 24 * 60 * 60 * 1000
                    this.formData.dateTime[1] = parseTime(
                      new Date(`${year}-${month}-01`) - day * 1,
                      '{y}-{m}-{d}'
                    )
                  }
                }
              }
            }
          },
        },
        {
          prop: 'airport',
          inputType: 'select',
          placeholder: '航站',
          width: '150px',
          filterable: true,
          // clearable: true,
          requiredWarning: '请先选择航站',
          queryId: SERVICE_ID.AirportIds,
          setKey: 'code3',
          options: [],
        },
        {
          prop: 'io',
          inputType: 'select',
          placeholder: '进出港',
          requiredWarning: '请先选择进出港',
          // clearable: true,
          options: [
            {
              value: '离港',
              label: '离港',
            },
            {
              value: '进港',
              label: '进港',
            },
            {
              value: '中转',
              label: '中转',
            },
          ],
        },
        {
          prop: 'dateTime',
          inputType: 'datePicker',
          // clearable: true,
          width: '240px',
          requiredWarning: '请先选择统计时间范围',
        },
      ],
    }
  },
}
</script>
