<template>
  <div class="dashboard">
    <div class="variable">
      <StatisticsHeader
        :title="titleTop"
        :items="formItems"
        :data="formData"
        :eledata="eledata"
        with-setting
        :withSetting="false"
        :withExport="false"
        :action="0"
        :set="set"
        :asShow="true"
        @getFormData="getFormData"
      />
    </div>
    <!-- <div class="detail">
      <div class="name">
        <p>简称:</p>
        <span>国航</span>
      </div>
      <div class="name">
        <p>二字码:</p>
        <span>ca</span>
      </div>
      <div class="name">
        <p>三字码:</p>
        <span>999</span>
      </div>
      <div class="name">
        <p>行李跟踪系统建设情况:</p>
        <span>已建</span>
      </div>
      <div class="name">
        <p>数据接入途径:</p>
        <span>航司直接接入</span>
      </div>
    </div> -->
    <div class="cont">
      <div class="card">
          <div class="wrapper">
            <div class="title">接入数据量</div>
          </div>
          <div class="content">
            <BarCharts
              id="inHour"
              :option="inHourDataOption"
            />
          </div>
        </div>
        <div class="card">
          <div class="wrapper">
            <div class="title">航班量</div>
          </div>
          <div class="content">
            <BarCharts
              id="inHour1"
              :option="outHourDataOption"
            />
          </div>
        </div>
        <div class="cards">
          <div class="wrapper">
            <div class="title">小时航班峰值</div>
          </div>
          <div class="content">
            <BarChartsr
              id="inHour2"
              :option="outHourDataOptioneol"
            />
          </div>
        </div>
        <div class="card">
          <div class="wrapper">
            <div class="title">行李量</div>
          </div>
          <div class="content">
            <BarCharts
              id="inHour3"
              :option="transHourDataOption"
            />
          </div>
        </div>
        <div class="card">
          <div class="wrapper">
            <div class="title">节点行李量</div>
          </div>
          <div class="content">
            <BarCharts
              id="inHour4"
              :option="baggageCountItems"
            />
          </div>
        </div>
        <div class="cards">
          <div class="wrapper">
            <div class="title">小时行李峰值</div>
          </div>
          <div class="content">
            <BarChartsr
              id="inHour6"
              :option="outHourDataOptioneols"
            />
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import StatisticsHeader from "../../components/echart/statisticsHeader.vue";
import BarCharts from '../../components/echart/commonChartsBar.vue'
import BarChartsr from '../../components/echart/commonChartsLine.vue'
import {Format} from '@/utils/validate'
import { Query } from '@/api/webApi'
const barOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true,
  },
  legend: {
    textStyle: {
      color: '#ffff',
    },
  },
  xAxis: {
    type: 'category',
    data: [],
    axisLabel: {
      color: '#8897BC',
    },
    axisTick: {
      alignWithLabel: true,
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#8897BC',
    },
  },
  color:['blue','yellow'],
  series: [
    {
    name: '',
    type: 'bar',
    z:"-1",
    barGap: '-100%',
    barWidth: 20,
    data: []
  },
  {
    name: '',
    type: 'bar',
    barWidth: 20,
    data: []
  }
]
}
const barOptions = {
        title: {
          text: ''
        },
        legend: {
          data: ['Punch Card'],
          left: 'right'
        },
        tooltip: {
          position: 'top'
        },
        grid: {
          left: 2,
          bottom: 10,
          right: 10,
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            color: '#8897BC',
          },
          type: 'category',
          data: [],
          boundaryGap: false,
          splitLine: {
            show: true
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            color: '#8897BC',
          },
          data: [],
          axisLine: {
            show: false
          }
        },
        series: [
          {
            color: 'blue',
            name: 'Punch Card',
            type: 'scatter',
            symbolSize: function (val) {
              return val[2] / 4;
            },
            data: [],
            animationDelay: function (idx) {
              return idx /  4;
            }
          }
        ]
      }
const barOptioner = {
title: {
  text: ''
},
legend: {
  data: ['Punch Card'],
  left: 'right'
},
tooltip: {
  position: 'top'
},
grid: {
  left: 2,
  bottom: 10,
  right: 10,
  containLabel: true
},
xAxis: {
  axisLabel: {
    color: '#8897BC',
  },
  type: 'category',
  data: [],
  boundaryGap: false,
  splitLine: {
    show: true
  },
  axisLine: {
    show: false
  }
},
yAxis: {
  type: 'category',
  axisLabel: {
    color: '#8897BC',
  },
  data: [],
  axisLine: {
    show: false
  }
},
series: [
  {
    color: 'blue',
    name: 'Punch Card',
    type: 'scatter',
    symbolSize: function (val) {
      return val[2] / 100;
    },
    data: [],
    animationDelay: function (idx) {
      return idx /  100;
    }
  }
]
}
export default {
  name: "Singleairline",
  data () {
    return {
      titleTop: "单航司概览",
      set: '',
      formItems: [
        {
          prop: "aircompany",
          inputType: "select",
          placeholder: "CZ",
          requiredWarning: "",
          clearable: true,
          filterable: true,
          options: [
            {
              value: 0,
              label: "国内出港",
            },
            {
              value: 1,
              label: "国内进港",
            },
            {
              value: 2,
              label: "国际出港",
            },
            {
              value: 3,
              label: "国际进港",
            },
          ],
        },
        {
          prop: "dateTime",
          inputType: "datePicker",
          requiredWarning: "请先选择统计时间范围",
          width: "240px",
        },
      ],
      formData: {
        aircompany: "",
        dateTime: "",
      },
      eledata: null,
      inHourDataOption: this._.cloneDeep(barOption),
      outHourDataOption:this._.cloneDeep(barOption),
      transHourDataOption: this._.cloneDeep(barOption),
      baggageCountItems: this._.cloneDeep(barOption),
      outHourDataOptioneol: this._.cloneDeep(barOptions),
      outHourDataOptioneols: this._.cloneDeep(barOptioner),
    }
  },
  components: {
    StatisticsHeader,
    BarCharts,
    BarChartsr
  },
  mounted() {
    this.getAiportList()
    let arr = {
      aircompany:"CZ",
      dateTime: [Format("yyyy-MM-dd", new Date()),Format("yyyy-MM-dd", new Date())]
    }
    this.getMap(arr)
    this.getMaps(arr)
  },
  methods: {
   // 航站列表
    async getAiportList() {
      this.loading = true
      try {
        let params = {
          serviceId: SERVICE_ID.AirlinportId,
          dataContent: [],
          pageSize: 9999,
        }
        if (this.queryId) {
          params = {
            ...params,
            authId: this.authId,
            serviceId: this.queryId,
          }
        }
        const {
          code,
          returnData: { listValues },
          message,
        } = await Query(params)
        if (String(code) !== '0') {
          throw new Error(message || '失败')
        }
        this.aiportOptions = listValues.map(aiport => ({
          label: aiport.ITATCode,
          value: aiport.ITATCode,
        }))
        this.currentAirport = 'CAN'
      } catch (error) {
        console.error(error)
      }
      this.loading = false
      this.formItems[0].options = this.aiportOptions
    },
    //航司大屏接口
    async getMap(data) {
      try {
        const {
          code,
          returnData: listValues,
          message,
        } = await Query({
          serviceId: SERVICE_ID.AirlinesDateData,
          dataContent: [
            {
              aircompany: data.aircompany,
              fd1: data.dateTime[0],
              fd2: data.dateTime[1],
            },
          ],
          pageSize: 9999,
        })
        if (String(code) !== '0') {
          this.boxMap.series[0].data = []
          throw new Error(message || '失败')
        }
        this.inHourDataOption.series[0].data = [listValues[0].total_source_yes,0,listValues[0].bsm_source_yes,listValues[0].bpm_source_yes],
        this.inHourDataOption.series[1].data = [0,0,0,0],
        this.inHourDataOption.series[0].name = '符合规范数据'
        this.inHourDataOption.series[1].name = '不符合规范数据'
        this.inHourDataOption.xAxis.data = ['总数据条数','航班数据','bsm数据','bpm数据'],
        this.outHourDataOption.series[0].name = '有行李航班量'
        this.outHourDataOption.series[1].name = '无行李航班量'
        this.outHourDataOption.series[0].data = [listValues[0].fly_total_has,listValues[0].fly_nor_has,listValues[0].fly_dly_has,listValues[0].fly_can_has],
        this.outHourDataOption.series[1].data = [listValues[0].fly_total_havent,listValues[0].fly_nor_havent,listValues[0].fly_dly_havent,listValues[0].fly_can_havent],
        this.outHourDataOption.xAxis.data = ['航班总量','正常航班量','延误航班量','取消航班量']
        this.transHourDataOption.series[0].data = [listValues[0].bag_total_dom,listValues[0].bag_transfer_dom,listValues[0].bag_abnormal_dom,listValues[0].bag_special_dom],
        this.transHourDataOption.xAxis.data = ['总量','中转总量','不正常行李量','特殊行李量']
        this.transHourDataOption.series[0].name = '国内'
        this.transHourDataOption.series[1].data = [0,0,0,0],
        this.transHourDataOption.series[1].name = '国际',
        this.baggageCountItems.xAxis.data = ['值机','安检','分拣','装车','装机','中转','到达'],
        this.baggageCountItems.series[0].data = [listValues[0].checkin,listValues[0].security,listValues[0].sort,listValues[0].loadcar,listValues[0].loadplane,listValues[0].transfer,listValues[0].arrive]
      } catch (error) {
        console.error(error)
      }
    },
    async getMaps(data) {
      try {
        const {
          code,
          returnData: listValues,
          message,
        } = await Query({
          serviceId: SERVICE_ID.AirlinesHourDateData,
          dataContent: [
            {
              aircompany: data.aircompany,
              fd1: data.dateTime[0],
              fd2: data.dateTime[1],
            },
          ],
          pageSize: 9999,
        })
        if (String(code) !== '0') {
          this.boxMap.series[0].data = []
          throw new Error(message || '失败')
        }
        // console.log(listValues)
        let top = []
        let boom = []
        for (var i=0;i<listValues.length-1;i++){
          if (i<5) {
            top.push(listValues[i])
          }else {
            boom.push(listValues[i])
          }
        }
        let arr = []
        let ars = []
        this.outHourDataOptioneol.yAxis.data = []
        top.forEach(element => {
          this.outHourDataOptioneol.yAxis.data.push(element.project)
          arr.push(Object.keys(element))
          for (var i=0;i<Object.keys(element).length-2;i++){
            ars.push([Object.keys(element)[i+2],element.project,Object.values(element)[i+2]])
          }
        });
        arr.forEach(element => {
          element = element.splice(0,2)
        });
        this.outHourDataOptioneol.xAxis.data = arr[0]
        this.outHourDataOptioneol.series[0].data = ars

        let arrs = []
        let arss = []
        this.outHourDataOptioneols.yAxis.data = []
        boom.forEach(element => {
          this.outHourDataOptioneols.yAxis.data.push(element.project)
          arrs.push(Object.keys(element))
          for (var i=0;i<Object.keys(element).length-2;i++){
            arss.push([Object.keys(element)[i+2],element.project,Object.values(element)[i+2]])
          }
        });
        arrs.forEach(element => {
          element = element.splice(0,2)
        });
        this.outHourDataOptioneols.xAxis.data = arrs[0]
        this.outHourDataOptioneols.series[0].data = arss
      } catch (error) {
        console.error(error)
      }
    },
    getFormData (data) {
      this.getMap(data)
      this.getMaps(data)
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 30px 30px 0 25px;
  background-color: #081821;
  height: calc(100vh - 48px - 32px);
  >.variable {
    width: 100%;
    height: 52px;
  }
  >.detail{
    width: 100%;
    height: 52px;
    background: #fff;
    display: flex;
    align-items: center;
    >.name{
      height: 100%;
      display: flex;
      align-items: center;
      margin-right: 24px;
      >p{
        font-size: 16px;
        font-weight: 800;
        margin: 0;
      }
      >span{
        font-size: 16px;
        margin-left: 3px;
      }
    }
  }
  >.cont{
    width: 100%;
    height: 94%;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    >.card{
      width: 28%;
      height: 43%;
      padding: 25px;
      background: linear-gradient(270deg, rgba(118, 142, 184, 0.25), transparent);
      border: 1px solid #3a4456;
      position: relative;
      &::before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        border: 12px solid #6d7d98;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
      >.wrapper{
        >.title{
          color: #fff;
          line-height: 16px;
          font-size: 16px;
          font-family: Helvetica, Microsoft YaHei;
          font-weight: bold;
        }
      }
    }
    >.cards{
      width: 40%;
      height: 43%;
      padding: 25px;
      background: linear-gradient(270deg, rgba(118, 142, 184, 0.25), transparent);
      border: 1px solid #3a4456;
      position: relative;
      &::before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        border: 12px solid #6d7d98;
        border-right-color: transparent;
        border-bottom-color: transparent;
    }
      >.wrapper{
        >.title{
          color: #fff;
          line-height: 16px;
          font-size: 16px;
          font-family: Helvetica, Microsoft YaHei;
          font-weight: bold;
        }
      }
    }
  }
}
</style>