<template>
  <!-- 中转四个流向统计 -->
  <div class="statstics-wrapper">
    <StatisticsHeader title="中转四个流向统计" :items="formItems" :data.sync="formData" with-setting :withSetting="false" @export="exportup" @getFormData="getFormData" />
    <!-- <Tableformcp
      :isloadings="isloadings"
      :rows="12"
      label-width="140px"
      :min-height="70"
      width="800px"
      tableHeight="750"
    /> -->
    <Tableformbrs :data-id="dataId" upid="4" :textShow="textShow" :isloadings="isloadings" :data-content="dataContent" :rows="12" label-width="140px" :min-height="70" width="800px" tableHeight="750" @cell-click="cellClickHandler" />
    <TableDialog :flag.sync="dialogFlag" :query-params="queryParams" with-setting :title="dialogTitle" />
  </div>
</template>
<script>
import StatisticsHeader from '../../components/statisticsHeader.vue'
// import Tableformcp from "../../components/tableformcp";
import Tableformbrs from '../../components/tableformbrs'
import TableDialog from '../../components/TableDialog.vue'
import { Format } from '@/utils/validate'
export default {
  name: 'ReportStatistics',
  data () {
    return {
      textShow: null,
      formData: {
        airport: '',
        dateTime: [],
        company: '',
        timedim: '',
        trd: [],
      },
      isloadings: 1,
      dataContent: [],
      dataId: '1845',
      formItems: [
        {
          prop: 'trd',
          inputType: 'select',
          placeholder: '',
          requiredWarning: '',
          clearable: true,
          multiple: true,
          options: [
            {
              value: 'D-D',
              label: 'D-D',
            },
            {
              value: 'D-I',
              label: 'D-I',
            },
            {
              value: 'I-I',
              label: 'I-I',
            },
            {
              value: 'I-D',
              label: 'I-D',
            },
          ],
        },
        {
          prop: 'airport',
          inputType: 'select',
          placeholder: 'PEK',
          filterable: true,
          clearable: true,
          // multiple: true,
          // disabled: true,
          queryId: SERVICE_ID.nodeAirport,
          setKey: 'a2',
          options: [],
        },
        {
          prop: 'company',
          inputType: 'select',
          placeholder: '航班分类',
          requiredWarning: '请先选择航班分类',
          clearable: true,
          options: [
            {
              value: '国航',
              label: '国航',
            },
            {
              value: '代理国内',
              label: '代理国内',
            },
            {
              value: '代理国际',
              label: '代理国际',
            },
            {
              value: '非代理',
              label: '非代理',
            },
          ],
        },
        {
          prop: 'timedim',
          inputType: 'select',
          placeholder: '时间维度',
          requiredWarning: '请先选择统计时间维度',
          clearable: true,
          options: [
            {
              value: '日',
              label: '按日统计',
            },
            {
              value: '月',
              label: '按月统计',
            },
            {
              value: '年',
              label: '按年统计',
            },
          ],
        },
        {
          prop: 'dateTime',
          inputType: 'datePicker',
          clearable: true,
          width: '240px',
          options: [],
        },
      ],
      dialogFlag: false,
      dialogTitle: '',
      queryParams: [],
    }
  },
  components: {
    StatisticsHeader,
    // Tableformcp,
    Tableformbrs,
    TableDialog,
  },
  mounted () {
    this.dataContent = [
      ...Array(3).fill(this.formData.timedim || '日'),
      this.formData.airport || 'PEK',
      this.formData.dateTime[0] || Format('yyyy-MM-dd', new Date()),
      this.formData.dateTime[1] || Format('yyyy-MM-dd', new Date()),
      ...Array(4).fill(this.formData.company || '国航'),
    ]
  },
  methods: {
    getFormData (data) {
      this.textShow = data.trd
      this.dataContent = [
        data.timedim,
        data.timedim,
        data.timedim,
        data.airport ? data.airport : 'PEK',
        data.dateTime[0],
        data.dateTime[1],
        data.company,
        data.company,
        data.company,
        data.company,
      ]
    },
    exportup () {
      this.isloadings = this.isloadings += 1
    },
    cellClickHandler (row, column, cell, event) {
      if (
        column.property.includes('trans_bag') &&
        row[column.property] &&
        Number(row[column.property])
      ) {
        const queryParams = [
          this.formData.airport || 'PEK',
          row.fd || Format('yyyy-MM-dd', new Date()),
          row.fd || Format('yyyy-MM-dd', new Date()),
          ...Array(4).fill(this.formData.company || '国航'),
        ]
        const flow = column.property
          .split('_')
          .pop()
          .toUpperCase()
          .split('')
          .join('-')
        queryParams.push(...Array(4).fill(flow))
        queryParams.push(...Array(4).fill(null))
        const processMap = {
          need: '需中转',
          finish: '已中转',
          not: '未中转',
        }
        const process = processMap[column.property.split('_')[0]]
        queryParams.push(...Array(3).fill(process))
        // console.log(queryParams)
        this.queryParams = queryParams
        this.dialogTitle = column.label
        this.dialogFlag = true
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
