<style>
  @import url('../../assets/css/domestic/OrderDataStati.css');

</style>
<template>
  <div class="page_OrderDataStati">
    <div class="page_OrderDataStati_top">
      <div class="_tit">
        <div>
          <span class="_tit_name">利润走势图（月）</span>
          <span class="_fangkuai"> <i class=""></i> 实际利润</span>
          <span class="_fangkuai _fangkuai2"> <i class=""></i> 预期利润</span>
        </div>
        <div class="_all_lirun">
          <span>总预期利润 <i>¥{{allProfit}}</i></span>
          <span class="margin_left_15">总实际利润 <i>¥{{allRealProfit}}</i></span>
        </div>
        <div class="_input">
          <el-select v-model="IsInter" size="mini" @change="getDataMonth">
            <el-option :key="-1" label="全部" :value="-1"></el-option>
            <el-option :key="0" label="国内机票" :value="0"></el-option>
            <el-option :key="1" label="国际机票" :value="1"></el-option>
          </el-select>
          <el-select v-model="Year" size="mini" @change="getDataMonth">
            <el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="Month" size="mini" @change="getDataMonth" class="_month_input">
            <el-option v-for="item in MonthList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
      </div>
      <div id="chartsMap" :style="{'height':clientHeight+'px','width':'100%'}"></div>
    </div>
    <div class="page_OrderDataStati_bottom">
      <div class="_tit">
        <div>
          <span class="_tit_name">利润走势图（年）</span>
          <span class="_fangkuai"> <i class=""></i> 实际利润</span>
          <span class="_fangkuai _fangkuai2"> <i class=""></i> 预期利润</span>
        </div>
        <div class="_all_lirun">
          <span>总预期利润 <i>¥{{allProfitYear}}</i></span>
          <span class="margin_left_15">总实际利润 <i>¥{{allRealProfitYear}}</i></span>
        </div>
        <div class="_input">
          <el-select v-model="IsInters" size="mini" @change="getDataYear">
            <el-option :key="-1" label="全部" :value="-1"></el-option>
            <el-option :key="0" label="国内机票" :value="0"></el-option>
            <el-option :key="1" label="国际机票" :value="1"></el-option>
          </el-select>
          <el-select v-model="YearS" size="mini" @change="getDataYear">
            <el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="MonthS" size="mini" @change="getDataMonth" class="_month_input _visibility">
            <el-option v-for="item in MonthList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
      </div>
      <div id="chartsMapYear" :style="{'height':clientHeight+'px','width':'100%'}"></div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        Year: new Date().getFullYear(),
        Month: new Date().getMonth() + 1,
        date: new Date().getDate(),
        IsInter: -1, //月统计[0-国内，1-国际]
        YearS: new Date().getFullYear(),
        MonthS: '',
        IsInters: -1, //年统计[0-国内，1-国际]
        clientHeight: '',
        yearList: [],
        MonthList: [],
        dayList: [],
        allRealProfit: 0,
        allProfit: 0,
        allRealProfitYear: 0,
        allProfitYear: 0,
      }
    },
    created() {
      this.clientHeight = (document.documentElement.clientHeight - 300) / 2;
      let count = this.Year - (this.Year - 8);
      for (let i = 0; i <= count; i++) {
        this.yearList.push(this.Year - i);
      }
    },
    mounted() {
      this.getDataMonth();
      this.getDataYear();
    },
    methods: {
      getDataMonth() {
        this.dayList = [];
        let msg = {
          Year: this.Year,
          Month: this.Month
        }
        this.apipost('Domestic_Ticket_post_GetProfitList', msg, r => {
          if (r.data.resultCode == 1) {
            let data = r.data.data;
            let ProfitList = [];
            let RealProfitList = [];
            let allProfit = 0;
            let allRealProfit = 0;
            data.forEach(y => {
              this.dayList.push(y.Day);
              ProfitList.push(y.Profit);
              RealProfitList.push(y.RealProfit);
              allProfit = allProfit + y.Profit;
              allRealProfit = allRealProfit + y.RealProfit;
            })
            this.allProfit = allProfit;
            this.allRealProfit = allRealProfit;
            this.chartsMap(ProfitList, RealProfitList);
          } else {}
        }, null)
      },
      chartsMap(ProfitList, RealProfitList) { // 画饼
        var then = this;
        let myChart = this.$echarts.init(document.getElementById('chartsMap'));
        myChart.setOption({
          title: {
            left: 'left',
            textStyle: {
              fontWeight: 'bold',
              fontSize: 14,
              color: '#333333',
              height: '30px'
            },
            padding: [
              20, // 上
              20, // 右
              20, // 下
              20, // 左
            ]
          },
          backgroundColor: '#fff',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              animation: false,
              label: {
                backgroundColor: '#ccc',
                borderColor: '#aaa',
                borderWidth: 1,
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                textStyle: {
                  color: '#222'
                }
              }
            }
          },
          xAxis: {
            type: 'category',
            axisLine: {
              show: false,
              lineStyle: {
                width: 1
              }
            },
            axisLabel: {},
            axisTick: false,
            data: then.dayList,
          },
          grid: {
            x: 25,
            y: 60,
            x2: 5,
            y2: 20,
            containLabel: true
          },
          yAxis: {
            type: 'category',
            data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
            axisLine: {
              show: false
            },
            axisTick: false,
            splitLine: {
              show: false
            },
            scale: true,
            minInterval: 1,
            type: 'value',
            axisLabel: {
              formatter: '{value} CNY'
            }
          },
          series: [{
              name: '预期利润',
              type: 'line',
              smooth: false,
              data: ProfitList,
              lineStyle: {
                width: 2,
                color: '#0099F7',
              },
              itemStyle: {
                borderWidth: 2,
                color: '#0099F7'
              },
              symbol: 'none',
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(230,230,230,0)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(230,230,230,0)' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                }
              }
            },
            {
              name: '实际利润',
              type: 'line',
              smooth: false,
              data: RealProfitList,
              lineStyle: {
                width: 2,
                color: '#32DBBE',
              },
              itemStyle: {
                borderWidth: 2,
                color: '#32DBBE'
              },
              symbol: 'none',
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(230,230,230,0)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(230,230,230,0)' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                }
              }
            }
          ]
        }, true)
      },
      getDataYear() {
        this.MonthList = [];
        let msg = {
          Year: this.YearS,
          Month: '',
          IsInter: this.IsInters
        }
        this.apipost('Domestic_Ticket_post_GetProfitList', msg, r => {
          if (r.data.resultCode == 1) {
            let data = r.data.data;
            let ProfitList = [];
            let RealProfitList = [];
            let allProfit = 0;
            let allRealProfit = 0;
            data.forEach(y => {
              this.MonthList.push(y.Month);
              ProfitList.push(y.Profit);
              RealProfitList.push(y.RealProfit);
              allProfit = allProfit + y.Profit;
              allRealProfit = allRealProfit + y.RealProfit;
            })
            this.allProfitYear = allProfit;
            this.allRealProfitYear = allRealProfit;
            this.chartsMap2(ProfitList, RealProfitList);
          } else {

          }
        }, null)
      },
      chartsMap2(ProfitList, RealProfitList) { // 画饼
        var then = this;
        let myChart = this.$echarts.init(document.getElementById('chartsMapYear'));
        myChart.setOption({
          title: {
            left: 'left',
            textStyle: {
              fontWeight: 'bold',
              fontSize: 14,
              color: '#333333',
              height: '30px'
            },
            padding: [
              20, // 上
              20, // 右
              20, // 下
              20, // 左
            ]
          },
          backgroundColor: '#fff',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
              animation: false,
              label: {
                backgroundColor: '#ccc',
                borderColor: '#aaa',
                borderWidth: 1,
                shadowBlur: 0,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                textStyle: {
                  color: '#222'
                }
              }
            }
          },
          xAxis: {
            type: 'category',
            axisLine: {
              show: false,
              lineStyle: {
                width: 1
              }
            },
            axisLabel: {},
            axisTick: false,
            data: then.MonthList,
          },
          grid: {
            x: 25,
            y: 60,
            x2: 5,
            y2: 20,
            containLabel: true
          },
          yAxis: {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: false,
            splitLine: {
              show: false
            },
            scale: true,
            minInterval: 1,
            type: 'value',
            axisLabel: {
              formatter: '{value} CNY',
            },
          },
          series: [{
              name: '预期利润',
              type: 'line',
              smooth: false,
              data: ProfitList,
              lineStyle: {
                width: 2,
                color: '#0099F7',
              },
              itemStyle: {
                borderWidth: 2,
                color: '#0099F7'
              },
              symbol: 'none',
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(230,230,230,0)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(230,230,230,0)' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                }
              }
            },
            {
              name: '实际利润',
              type: 'line',
              smooth: false,
              data: RealProfitList,
              lineStyle: {
                width: 2,
                color: '#32DBBE',
              },
              itemStyle: {
                borderWidth: 2,
                color: '#32DBBE'
              },
              symbol: 'none',
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(230,230,230,0)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(230,230,230,0)' // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                }
              }
            }
          ]
        }, true)
      },
    }
  }
</script>