<template>
  <div style="height: 100%;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="线路经营情况" name="1"></el-tab-pane>
      <el-tab-pane label="公司经营情况" name="2"></el-tab-pane>
      <el-tab-pane label="日本线常规团情况" name="3"></el-tab-pane>
      <!-- <el-tab-pane label="购物佣金情况" name="4"></el-tab-pane> -->
    </el-tabs>
    <div class="query-box">
      <el-form class="_info_box clearfix" label-width="90px">
        <el-row style="padding: 15px 0px 0 0">
          <el-col v-if="activeName!=4" :span="4">
            <el-form-item :label="$t('system.table_company')">
              <template v-if="activeName!=2">
                <el-select
                  filterable
                  v-model="msg.OutBranchId"
                  @change="getChange"
                  clearable
                >
                  <el-option
                    :value="-1"
                    :label="$t('pub.unlimitedSel')"
                  ></el-option>
                  <el-option
                    v-for="item in CompanyList"
                    :label="item.BName"
                    :value="item.Id"
                    :key="item.Id"
                  ></el-option>
                </el-select>
              </template>
              <div v-else>
                <el-select
                filterable
                multiple
                collapse-tags
                clearable
                v-model="msg.OutBranchIdList"
                @change="getChange"
              >
                <!-- <el-option
                  :value="-1"
                  :label="$t('pub.unlimitedSel')"
                ></el-option> -->
                <el-option
                  v-for="item in CompanyList"
                  :label="item.BName"
                  :value="item.Id"
                  :key="item.Id"
                ></el-option>
              </el-select>
              </div>

            </el-form-item>
          </el-col>
          <template v-else>
            <el-col :span="4">
              <el-form-item label="购物店">
                <el-select
                  filterable
                  clearable
                  v-model="shopMsg.PlaceId"
                >
                  <!-- <el-option
                    value=""
                    :label="$t('pub.unlimitedSel')"
                  ></el-option> -->
                  <el-option
                    v-for="item in ShoppingStores"
                    :label="item.Name"
                    :value="item.ID"
                    :key="item.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="类型">
                <el-select
                  filterable
                  clearable
                  v-model="shopMsg.Type"
                >
                  <!-- <el-option
                    value=""
                    :label="$t('pub.unlimitedSel')"
                  ></el-option> -->
                  <el-option
                    v-for="item in shopType"
                    :label="item.Name"
                    :value="item.Id"
                    :key="item.Id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="4">
            <el-form-item :label="$t('fnc.bweibi')">
              <el-select :disabled="coinGetShow" filterable v-model="msg.StandardCurrencyId"  @change="getStatement">
                <el-option :value="-1" :label="$t('pub.unlimitedSel')"></el-option>
                <el-option
                  v-for="item in coinGetList"
                  :label="item.Name"
                  :value="item.ID"
                  :key="item.ID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if="activeName==4">
            <el-form-item label="汇率">
              <el-input v-model="shopMsg.MaoLiRate" type="number" @change="getChange"></el-input>
            </el-form-item>
          </el-col>
          <el-col v-if="activeName!=4 && activeName!=3" :span="msg.LineIdList.length<2?4:'4'">
            <el-form-item label="线路">
              <el-select
              style="width: 100%;" filterable multiple collapse-tags
              v-model="msg.LineIdList" @change="getStatement"
              clearable>
                <el-option  v-if="activeName!=2"
                  :value="0"
                  :label="$t('pub.unlimitedSel')"
                ></el-option>
                <el-option
                  v-for="item in LineList"
                  :label="item.LineName"
                  :value="item.LineID"
                  :key="item.LineName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期">
              <el-date-picker
                  size="small"
                  v-model="dateTime"
                  type="monthrange"
                  value-format="yyyy-MM"
                  align="right"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                  :picker-options="pickerOptions"
                  @change="getDateTime"
                  :clearable="false">
                </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-if="msg.Type==2">
            <el-form-item label="数据类别：">
              <el-select v-model="msg.DataType" filterable class="w150" @change="getStatement">
                <el-option value="-1" :label="$t('pub.unlimitedSel')"></el-option>
                <el-option value="1" label="团队营收"></el-option>
                <el-option value="3" label="单办签证"></el-option>
                <el-option value="15" label="手配费收入"></el-option>
                <el-option value="16" label="单项机票"></el-option>
                <el-option value="17" label="单项酒店"></el-option>
                <el-option value="18" label="单项包车"></el-option>
                <el-option value="19" label="单项门票"></el-option>
                <el-option value="20" label="开票收入"></el-option>
                <el-option value="21" label="日本手配费收入"></el-option>
                <el-option value="22" label="车行收入"></el-option>
                <el-option value="23" label="欧洲单团分润收入"></el-option>
                <el-option value="24" label="欧洲损失分摊"></el-option>
                <el-option value="25" label="CRM直客部外丟團"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="2" v-if="msg.Type!=3">
            <el-form-item label="季度汇总">
              <el-checkbox v-model="msg.LossType" true-label="1" false-label="0" @change="getStatement"></el-checkbox>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <ul class="clearfix">
        <li class="hight_query">
          <button class="hollowFixedBtn" @click="getStatement">
            {{ $t("pub.searchBtn") }}
          </button>
          <!-- <button class="normalBtn" @click="exportExcel">
            导出
          </button> -->
        </li>
      </ul>
    </div>
    <!-- height: 78%;overflow: auto; -->
    <div v-loading="loading" style="height: 80%;overflow: auto; ">
      <template v-if="activeName=='1'">
        <div class="allEchartRow">
          <IncomeChange :msgData="msg" :StatisticalData="StatisticalData"></IncomeChange>
          <IncomeShare :msgData="msg" :StatisticalData="StatisticalData"></IncomeShare>
          <ChangeProportion :msgData="msg" :StatisticalData="StatisticalData"></ChangeProportion>
        </div>
        <div class="allEchartRow">
          <WoolRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></WoolRateColumnar>
          <ActualRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></ActualRateColumnar>
        </div>
        <div class="allEchartRow">
          <WoolRateChange :msgData="msg" :StatisticalData="StatisticalData"></WoolRateChange>
          <ActualRateChange :msgData="msg" :StatisticalData="StatisticalData"></ActualRateChange>
        </div>
      </template>

      <template v-if="activeName=='2'">
        <div class="allEchartRow">
          <twoIncomeChange :msgData="msg" :StatisticalData="StatisticalData"></twoIncomeChange>
          <twoChangeProportion :msgData="msg" :StatisticalData="StatisticalData"></twoChangeProportion>
        </div>
        <div class="allEchartRow">
          <twoWoolRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></twoWoolRateColumnar>
          <twoActualRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></twoActualRateColumnar>
        </div>
      </template>

      <template v-if="activeName=='3'">
        <div class="allEchartRow">
          <threeIncomeChange :msgData="msg" :StatisticalData="StatisticalData"></threeIncomeChange>
          <threeIncomeShare :msgData="msg" :StatisticalData="StatisticalData"></threeIncomeShare>
          <threeChangeProportion :msgData="msg" :StatisticalData="StatisticalData"></threeChangeProportion>
        </div>
        <div class="allEchartRow">
          <threeWoolRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></threeWoolRateColumnar>
          <threeActualRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></threeActualRateColumnar>
          <threeActualRateColumnar2 :msgData="msg" :StatisticalData="StatisticalData"></threeActualRateColumnar2>
        </div>
        <div class="allEchartRow">
          <threeWoolRateChange :msgData="msg" :StatisticalData="StatisticalData"></threeWoolRateChange>
          <threeActualRateChange :msgData="msg" :StatisticalData="StatisticalData"></threeActualRateChange>
          <threeActualRateChange2 :msgData="msg" :StatisticalData="StatisticalData"></threeActualRateChange2>
        </div>
        <div class="allEchartRow">
          <threeIncomeChange2 :msgData="msg" :StatisticalData="StatisticalData"></threeIncomeChange2>
          <threeIncomeShare2 :msgData="msg" :StatisticalData="StatisticalData"></threeIncomeShare2>
          <threeChangeProportion2 :msgData="msg" :StatisticalData="StatisticalData"></threeChangeProportion2>
        </div>
      </template>

      <template v-if="activeName=='4'">
        <div class="allEchartRow">
          <fourIncomeChange :msgData="msg" :StatisticalData="StatisticalData"></fourIncomeChange>
          <!-- <fourIncomeShare :msgData="msg" :StatisticalData="StatisticalData"></fourIncomeShare> -->
        </div>
        <div class="allEchartRow">
          <!-- <fourWoolRateChange :msgData="msg" :StatisticalData="StatisticalData"></fourWoolRateChange>
          <fourActualRateChange :msgData="msg" :StatisticalData="StatisticalData"></fourActualRateChange> -->
        </div>
      </template>

    </div>

  </div>
</template>

<script>
import IncomeChange from "./components/oneEchart/IncomeChange.vue";
import IncomeShare from "./components/oneEchart/IncomeShare.vue";
import WoolRateChange from "./components/oneEchart/WoolRateChange.vue";
import ActualRateChange from "./components/oneEchart/ActualRateChange.vue";
import ChangeProportion from "./components/oneEchart/ChangeProportion.vue";
import WoolRateColumnar from "./components/oneEchart/WoolRateColumnar.vue";
import ActualRateColumnar from "./components/oneEchart/ActualRateColumnar.vue";

import twoIncomeChange from "./components/twoEchart/IncomeChange.vue";
import twoChangeProportion from "./components/twoEchart/ChangeProportion.vue";
import twoWoolRateColumnar from "./components/twoEchart/WoolRateColumnar.vue";
import twoActualRateColumnar from "./components/twoEchart/ActualRateColumnar.vue";

import threeIncomeChange from "./components/threeEchart/IncomeChange.vue";
import threeIncomeShare from "./components/threeEchart/IncomeShare.vue";
import threeWoolRateChange from "./components/threeEchart/WoolRateChange.vue";
import threeActualRateChange from "./components/threeEchart/ActualRateChange.vue";
import threeActualRateChange2 from "./components/threeEchart/ActualRateChange2.vue";
import threeChangeProportion from "./components/threeEchart/ChangeProportion.vue";
import threeWoolRateColumnar from "./components/threeEchart/WoolRateColumnar.vue";
import threeActualRateColumnar from "./components/threeEchart/ActualRateColumnar.vue";
import threeActualRateColumnar2 from "./components/threeEchart/ActualRateColumnar2.vue";
import threeIncomeChange2 from "./components/threeEchart/IncomeChange2.vue";
import threeIncomeShare2 from "./components/threeEchart/IncomeShare2.vue";
import threeChangeProportion2 from "./components/threeEchart/ChangeProportion2.vue";

import fourIncomeChange from "./components/fourEchart/IncomeChange.vue";
import fourIncomeShare from "./components/fourEchart/IncomeShare.vue";
import fourWoolRateChange from "./components/fourEchart/WoolRateChange.vue";
import fourActualRateChange from "./components/fourEchart/ActualRateChange.vue";
export default {
  components: {
    IncomeChange,IncomeShare,
    WoolRateChange,ActualRateChange,
    ChangeProportion,
    WoolRateColumnar,ActualRateColumnar,

    twoIncomeChange,twoChangeProportion,
    twoWoolRateColumnar,twoActualRateColumnar,

    threeIncomeChange,threeIncomeShare,
    threeWoolRateChange,
    threeActualRateChange,threeActualRateChange2,
    threeChangeProportion,
    threeWoolRateColumnar,
    threeActualRateColumnar,threeActualRateColumnar2,
    threeIncomeChange2,threeIncomeShare2,threeChangeProportion2,

    fourIncomeChange,fourIncomeShare,
    fourWoolRateChange,fourActualRateChange
  },
  data() {
    return {
      coinGetShow: false,
      loading: false,
      activeName: '1',
      msg:{
        startDate: '',
        endDate: '',
        OutBranchId: -1,
        OutBranchIdList: [0],
        StandardBranchIds: '0',
        StandardCurrencyId:0,
        LineId: 0,
        Type: '1',
        DataType:'-1',
        LossType:'0',
        IsLastData:1,
        LineIdList: [14],
        LineIdStr: '14'
      },
      shopMsg:{
        startDate: '',
        endDate: '',
        PlaceId: '',
        Type: '',
        LossType: '0',
        IsLastData: '1',
        StandardCurrencyId: '1',
        MaoLiRate: 0.049
      },
      ShoppingStores: [],
      shopType: [
        {Name: '不限',Id:''},
        {Name: '购物店统计',Id:1},
        {Name: '领队导游排名',Id:2},
        {Name: '佣金占比统计',Id:3},
      ],
      dateTime: [],
      CompanyList: [],
      getCompanyMsg: {
        // 公司
        RB_Group_Id: "0",
        Status: "0",
      },
      LineList: [],
      coinGetList: [],
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          }
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      StatisticalData: {} ,//T统计数据
    }
  },
  mounted() {
    this.getCompanyMsg.RB_Group_Id = this.getLocalStorage().RB_Group_id
    const end = new Date();
    const start = new Date();
    start.setMonth(start.getMonth() - 6);
    this.dateTime = [this.$commonUtils.getFormatDateM(start),this.$commonUtils.getFormatDateM(end)]
    this.msg.startDate = this.dateTime[0]
    this.msg.endDate = this.dateTime[1]
    this.financeinfo_post_GetList()
    this.getQueryData()
    this.getShops()
    this.getStatement()
  },
  methods: {
    getShops() {
      this.apipost('Shopping_Post_GetList', {}, res => {
        if (res.data.resultCode === 1) {
          this.ShoppingStores = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      }, null)
    },
    getChange(val){
      if(this.msg.Type!='2'){
        if(this.msg.OutBranchId == -1){
          this.coinGetShow = false
          this.msg.StandardCurrencyId = val>-1?val:this.coinGetList[0].ID
        }else{
          this.coinGetShow = true
          this.msg.StandardCurrencyId = -1
        }
      }else{
        if(this.msg.OutBranchIdList[this.msg.OutBranchIdList.length-1]==-1){
          this.msg.OutBranchIdList = [-1]
        }else{
          this.msg.OutBranchIdList = this.msg.OutBranchIdList.filter(x=>{return x!=-1})
        }
        if(this.msg.OutBranchIdList.indexOf('-1')!=-1) {
          this.coinGetShow = false
          this.msg.StandardCurrencyId = 1
        }else {
          this.msg.StandardCurrencyId = -1
          this.coinGetShow = true
        }
      }
      if(!this.shopMsg.MaoLiRate) this.shopMsg.MaoLiRate = 0.049
      this.getStatement();
    },
    financeinfo_post_GetList(){ // 获取币种
      this.apipost('financeinfo_post_GetAllStandardCurrencyList',{}, res => {
        if(res.data.resultCode == 1) {
            this.coinGetList = res.data.data;
            if(this.msg.OutBranchId == -1){
              this.coinGetShow = false
              this.msg.StandardCurrencyId = this.coinGetList[0].ID
              this.msg.StandardCurrencyId=this.$route.query.StandardCurrencyId?Number(this.$route.query.StandardCurrencyId):this.msg.StandardCurrencyId;
            }else{
              this.coinGetShow = true
              this.msg.StandardCurrencyId = -1
            }
            this.getStatement();
        }
      })
    },
    getStatement(){
      if(this.msg.LineIdList[this.msg.LineIdList.length-1]==0){
        this.msg.LineIdList = [0]
      }else{
        this.msg.LineIdList = this.msg.LineIdList.filter(x=>{return x})
      }
      this.msg.LineIdStr = this.msg.LineIdList.join(',')
      if(this.msg.Type==2) this.msg.StandardBranchIds = this.msg.OutBranchIdList.join(',')

      this.loading = true
      let msg = this.msg
      let url ='financestatistics_post_GetDataAnalysisStat'

      if(this.activeName=='4'){
        this.shopMsg.startDate = this.msg.startDate
        this.shopMsg.endDate = this.msg.endDate
        this.shopMsg.StandardCurrencyId = this.msg.StandardCurrencyId
        msg = this.shopMsg
        url = 'financestatistics_post_GetCommissionAnalysisStat'
      }
      this.apipost(
        url,
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.StatisticalData = res.data.data
          } else {
            this.Error(res.data.message);
          }
          this.loading = false;
        },
        err => {
          this.loading = false
        }
      );
    },
    handleClick(e){
      this.activeName = e._props.name
      this.msg.Type = this.activeName
      if(this.msg.Type==2) {
        this.msg.LineIdList = [],
        this.msg.LineIdStr = ''
        this.msg.IsLastData = 2
        this.msg.OutBranchIdList = [0]
        this.msg.StandardBranchIds =  '0'
        this.coinGetShow = true
        this.msg.StandardCurrencyId = -1
      }else {
        this.msg.LineIdList = [14]
        this.msg.LineIdStr = '14'
        if(this.msg.Type==1)this.msg.IsLastData = 1
        else this.msg.IsLastData = 3
        this.msg.OutBranchId = -1
        this.msg.OutBranchIdList = [0]
        this.msg.StandardBranchIds =  '0'
        this.coinGetShow = false
        this.msg.StandardCurrencyId = 1
      }
      this.getStatement()
      this.$forceUpdate()
    },
    getDateTime(){
      if(this.dateTime&&this.dateTime.length>0){
        this.msg.startDate = this.dateTime[0]
        this.msg.endDate = this.dateTime[1]
      }else{
        const end = new Date();
        const start = new Date();
        start.setMonth(start.getMonth() - 6);
        this.dateTime = [this.$commonUtils.getFormatDateM(start),this.$commonUtils.getFormatDateM(end)]
        this.msg.startDate = start
        this.msg.endDate = end
      }
      this.getStatement()
    },
    exportExcel(){//导出报表
      let msg = {
        EmployeeId: this.getLocalStorage().EmployeeId,
        ...this.msg
      }
      this.GetLocalFile("financestatistics_post_GetDataAnalysisStatToExcel", msg, '数据统计'+ this.$commonUtils.getCurrentDate() + ".xls");
    },
    getQueryData() {
      //获取公司列表
      this.apipost(
        "admin_get_BranchGetList",
        this.getCompanyMsg,
        (res) => {
          if (res.data.resultCode == 1) {
            this.CompanyList = res.data.data;
          } else {
          }
        },
        (err) => {}
      );
      this.apipost(
        "line_post_GetList", {
          LineDirection: 2
        },
        res => {
          if (res.data.resultCode == 1) {
            this.LineList = res.data.data;
          }
        }
      );
    },
  }
}
</script>

<style>
  .allEchartRow{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
.titleBox{
  padding: 10px 10px 0 10px;
  display: flex;
}
.echartsBox{
  flex: 1;
  /* min-width: 430px; */
  margin: 5px;
  background: #fff;
}
.echartsBox:nth-child(2){
 /* min-width: 458px; */
}
.allMyEchartBox{
  height: 270px;
}

</style>