<template>
  <div class="flight-statistics-header">
    <template v-if="title">
      <div class="title">{{ title }}</div>
    </template>
    <el-form
      ref="form"
      class="form"
      :model="formData"
    >
      <el-form-item
        v-for="item in formItems"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :style="{
          width: item.width || '120px',
        }"
      >
        <template v-if="item.inputType === 'input'">
          <el-input
            v-model="formData[item.prop]"
            :size="item.size || 'small'"
            :placeholder="item.placeholder || '请输入'"
            :clearable="item.clearable"
          />
        </template>
        <template v-if="item.inputType === 'select'">
          <el-select
            v-model="formData[item.prop]"
            :filterable="item.filterable"
            :default-first-option="item.filterable"
            :size="item.size || 'small'"
            :placeholder="item.placeholder || '请选择'"
            :multiple="item.multiple"
            :collapse-tags="item.multiple"
            :clearable="item.clearable"
            :disabled="item.disabled"
          >
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :value="option.value"
              :label="option.label"
            />
          </el-select>
        </template>
        <template v-if="item.inputType === 'datePicker'">
          <el-date-picker
            v-model="formData[item.prop]"
            :size="item.size || 'small'"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </template>
        <template v-if="item.inputType === 'monthPicker'">
          <el-date-picker
            v-model="formData[item.prop]"
            :size="item.size || 'small'"
            type="monthrange"
            format="yyyy-MM"
            value-format="yyyy-MM"
            unlink-panels
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          />
        </template>
        <template v-if="item.inputType === 'yearPicker'">
          <year-range-picker
            v-model="formData[item.prop]"
            :size="item.size || 'small'"
            range-separator="至"
          />
        </template>
        <template v-if="item.inputType === 'cascader'">
          <el-cascader
            v-model="formData[item.prop]"
            :size="item.size || 'small'"
            :placeholder="item.placeholder || '请选择'"
            :options="item.options"
            :props="item.props"
            :clearable="item.clearable"
            :disabled="item.disabled"
          />
        </template>
      </el-form-item>
      <el-form-item v-if="formItems.length">
        <el-button
          type="primary"
          size="small"
          @click="getData"
          >{{ buttonText }}</el-button
        >
      </el-form-item>
      <el-form-item v-if="withExport">
        <img
          src="../../../assets/nav/ic_export.png"
          title="导出"
          class="btn-icon-only"
          @click="exportClickHandler"
        />
      </el-form-item>
      <el-form-item v-if="withSetting">
        <img
          src="../../../assets/nav/ic_setting.png"
          title="节点设置"
          class="btn-icon-only"
          @click="settingClickHandler"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { TempQuery } from '@/api/temp'
import { mapGetters } from 'vuex'
// import YearRangePicker from '@/components/YearRangePicker'
import { parseTime } from '@/utils'

export default {
  name: 'StatisticsHeader',
  // components: { YearRangePicker },
  props: {
    title: {
      type: String,
      default: '',
    },
    items: {
      type: Array,
      default: undefined,
    },
    customItems: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Object,
      default: undefined,
    },
    buttonText: {
      type: String,
      default: '查询',
    },
    withExport: {
      type: Boolean,
      default: true,
    },
    withSetting: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formData: {
        range: '',
        inOrOut: '',
        td: '',
        air_line: [],
        area: '',
        airport: [],
        terminal: '',
        dateTime: [],
        flightType: '',
        baggageType: '',
        passengerType: [],
      },
      formItems: [
        {
          prop: 'range',
          inputType: 'select',
          placeholder: '统计范围',
          requiredWarning: '请先选择统计范围',
          options: [
            {
              value: '全部',
              label: '全部',
            },
            {
              value: '航线',
              label: '航线',
            },
            {
              value: '基地分公司',
              label: '基地分公司',
            },
            {
              value: '航站',
              label: '航站',
            },
            {
              value: '航站楼',
              label: '航站楼',
            },
          ],
          changeHandler(value) {
            this.setInOrOutOptions(value)
            const rangeMap = {
              航线: 'air_line',
              基地分公司: 'area',
              航站: 'airport',
              航站楼: 'terminal',
            }
            Object.entries(rangeMap).forEach(([k, v]) => {
              const theItem = this.formItems.find(item => item.prop === v)
              if (value === k) {
                theItem && (theItem.disabled = false)
              } else {
                this.formData[v] = ''
                theItem && (theItem.disabled = true)
              }
            })
          },
        },
        {
          prop: 'inOrOut',
          inputType: 'select',
          placeholder: '进离港',
          requiredWarning: '请先选择进离港',
          // clearable: true,
          options: [],
        },
        {
          prop: 'td',
          inputType: 'select',
          placeholder: '时间维度',
          requiredWarning: '请先选择统计时间维度',
          options: [
            {
              value: '日',
              label: '按日统计',
            },
            {
              value: '月',
              label: '按月统计',
            },
            {
              value: '年',
              label: '按年统计',
            },
          ],
          changeHandler(value) {
            const typeMap = {
              日: 'datePicker',
              月: 'monthPicker',
              年: 'yearPicker',
            }
            const dateTimeItem = this.formItems.find(
              item => item.prop === 'dateTime'
            )
            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: 'dateTime',
          inputType: 'datePicker',
          // clearable: true,
          width: '240px',
          requiredWarning: '请先选择统计时间范围',
        },
        {
          prop: 'air_line',
          inputType: 'select',
          placeholder: '航线',
          width: '180px',
          filterable: true,
          // clearable: true,
          multiple: true,
          disabled: true,
          queryId: SERVICE_ID.airlineOptions,
          setKey: 'air_line',
          options: [],
        },
        {
          prop: 'area',
          inputType: 'select',
          placeholder: '基地分公司',
          filterable: true,
          // clearable: true,
          disabled: true,
          queryId: SERVICE_ID.areaOptions,
          setKey: 'a5',
          options: [],
        },
        {
          prop: 'airport',
          inputType: 'select',
          placeholder: '航站',
          width: '150px',
          filterable: true,
          // clearable: true,
          multiple: true,
          disabled: true,
          queryId: SERVICE_ID.AirportIds,
          setKey: 'code3',
          options: [],
        },
        {
          prop: 'terminal',
          inputType: 'select',
          placeholder: '航站楼',
          filterable: true,
          // clearable: true,
          disabled: true,
          queryId: SERVICE_ID.TerminalId,
          setKey: 'a2',
          options: [],
        },
      ],
    }
  },
  computed: {
    // ...mapGetters(['savedFormDataMap']),
    formDataObj() {
      return JSON.parse(JSON.stringify(this.formData))
    },
  },
  watch: {
    items: {
      handler(val) {
        val && (this.formItems = val)
      },
      deep: true,
      immediate: true,
    },
    data: {
      handler(val) {
        val && (this.formData = val)
      },
      deep: true,
      immediate: true,
    },
    formDataObj: {
      handler(val, oldVal) {
        this.formItems.forEach(item => {
          if (
            item.changeHandler &&
            String(val[item.prop]) !== String(oldVal[item.prop])
          ) {
            item.changeHandler.call(this, val[item.prop], oldVal[item.prop])
          }
        })
      },
      deep: true,
    },
  },
  created() {
    this.customItems.forEach(item => {
      if (typeof item.itemIndex === 'number') {
        if (item.prop) {
          this.formItems.splice(item.itemIndex, item.replaceNum, item)
        } else {
          this.formItems.splice(item.itemIndex, item.replaceNum)
        }
      } else {
        this.formItems.push(item)
      }
    })
    // const savedFormData = this.savedFormDataMap[this.$route.name]
    this.formItems.forEach(item => {
      if (item.queryId && item.setKey) {
        this.getOptions(
          item.prop,
          item.queryId,
          item.setKey,
          item.setLabel ?? item.setKey
        )
      }
      // if (savedFormData?.[item.prop]) {
      //   this.formData[item.prop] = savedFormData[item.prop]
      // } else if (item.defaultOption) {
      //   this.formData[item.prop] = item.defaultOption
      // }
    })
  },
  methods: {
    getData() {
      const formData = this._.cloneDeep(this.formData)
      try {
        this.formItems.forEach(item => {
          if (
            item.requiredWarning &&
            (!formData[item.prop] || formData[item.prop].length === 0)
          ) {
            throw new Error(item.requiredWarning)
          }
        })
      } catch (error) {
        this.$message.warning(error.message)
        return
      }
      if (formData.range === '航线' && !formData.air_line) {
        this.$message.warning('请先选择航线')
        return
      } else if (formData.range === '航站' && !formData.airport) {
        this.$message.warning('请先选择航站')
        return
      } else if (formData.range === '基地分公司' && !formData.area) {
        this.$message.warning('请先选择基地分公司')
        return
      }
      this.$store.dispatch('savedSettings/saveFormData', {
        formData,
      })
      if (formData.td === '月') {
        formData.dateTime[0] = `${formData.dateTime[0]}-01`
        let [year, month] = formData.dateTime[1].split('-')
        if (month === '12') {
          year = Number(year) + 1
          month = 1
        } else {
          month = Number(month) + 1
        }
        const day = 24 * 60 * 60 * 1000
        formData.dateTime[1] = parseTime(
          new Date(`${year}-${month}-01`) - day * 1,
          '{y}-{m}-{d}'
        )
      } else if (formData.td === '年') {
        formData.dateTime = [
          `${formData.dateTime[0]}-01-01`,
          `${formData.dateTime[1]}-12-31`,
        ]
      }
      this.$emit('getFormData', formData)
    },
    exportClickHandler() {
      this.$emit('export')
    },
    settingClickHandler() {
      this.$emit('setting')
    },
    setInOrOutOptions(range) {
      const theInOrOutItem = this.formItems.find(
        item => item.prop === 'inOrOut'
      )
      switch (range) {
        case '全部':
        case '航线':
          if (theInOrOutItem) {
            theInOrOutItem.options = [
              {
                label: '全部',
                value: '全部',
              },
            ]
            theInOrOutItem.disabled = true
          }
          this.formData.inOrOut = '全部'
          break
        case '基地分公司':
        case '航站':
        case '航站楼':
          if (theInOrOutItem) {
            theInOrOutItem.options = [
              {
                value: '全部',
                label: '全部',
              },
              {
                value: '进港',
                label: '进港',
              },
              {
                value: '离港',
                label: '离港',
              },
            ]
            theInOrOutItem.disabled = false
          }
          break
        default:
          if (theInOrOutItem) {
            theInOrOutItem.options = []
            theInOrOutItem.disabled = false
          }
          break
      }
    },
    async getOptions(prop, queryId, setKey, setLabel) {
      try {
        const { code, returnData, message } = await TempQuery({
          serviceid: queryId,
          datacontent: [{filter:{1:1}}],
          event: '0',
        })
        if (String(code) === '0') {
          const listValues = returnData.listValues || returnData
          const arr = listValues.map(element => ({
            label: element[setLabel],
            value: element[setKey],
          }))
          const theItem = this.formItems.find(item => item.prop === prop)
          theItem.options = arr
        } else {
          this.$message.error(message)
        }
      } catch (error) {
        this.$message.error('失败')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.flight-statistics-header {
  padding-top: 24px;
  min-height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .title {
    margin-right: 24px;
    padding-left: 16px;
    // min-width: 190px;
    height: 32px;
    line-height: 32px;
    font-size: 18px;
    font-family: Helvetica, 'Microsoft YaHei';
    font-weight: bold;
    white-space: nowrap;
    position: relative;
    &::before {
      content: '';
      width: 4px;
      height: 20px;
      background: #2d67e3;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  }
  ::v-deep .form {
    display: flex;
    flex-wrap: wrap;
    > .el-form-item {
      margin-bottom: 24px;
      // width: 185px;
      &:not(:last-child) {
        margin-right: 8px;
      }
      &:nth-last-child(2),
      &:nth-last-child(3) {
        margin-right: 16px;
      }
      .el-form-item__content {
        height: 32px;
        line-height: 30px;
        .el-input {
          &.is-disabled .el-input__inner {
            border: none;
          }
          .el-input__inner {
            border-radius: 4px;
            font-family: Helvetica, 'Microsoft YaHei';
            color: #303133;
            border-color: #ffffff;
            &:hover {
              border-color: #c0c4cc;
            }
            &:focus {
              border-color: #409eff;
            }
          }
        }
        .el-date-editor--monthrange.el-input,
        .el-date-editor--monthrange.el-input__inner,
        .el-date-editor--daterange.el-input,
        .el-date-editor--daterange.el-input__inner,
        .el-date-editor--timerange.el-input,
        .el-date-editor--timerange.el-input__inner {
          width: 100%;
          border-radius: 4px;
          border-color: #ffffff;
          color: #303133;
          font-family: Helvetica, 'Microsoft YaHei';
          &:hover {
            border-color: #c0c4cc;
          }
          &.is-active {
            border-color: #409eff;
          }
          .el-input__icon {
            color: #303133;
          }
          .el-range-separator {
            line-height: 28px;
          }
        }
        .el-select,
        .el-cascader {
          .el-input {
            .el-icon-arrow-up::before {
              content: '\e78f';
            }
            .el-icon-arrow-down::before {
              content: '\e790';
            }
            &:not(.is-disabled) {
              .el-input__icon,
              .el-input__inner::-webkit-input-placeholder {
                color: #303133;
              }
            }
          }
        }
        .el-button {
          border-radius: 4px;
          font-family: Helvetica, 'Microsoft YaHei';
        }
        .btn-icon-only {
          width: 32px;
          height: 32px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
