<style>
.ShoppingDetails .dataIn {
  margin: 30px 0;
}
.ShoppingDetails .storeName {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  background-color: #e3e3e3;
  border-radius: 4px;
  float: left;
  padding:0 10px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin-right:30px;
}
.ShoppingDetails .backBtn {
  float: right;
  margin-right: 10px;
}
.ShoppingDetails .listSpan span {
  display: inline-block;
  margin-right: 50px;
  font-size: 12px;
}
.ShoppingDetails .noteList {
  margin-left: 20px;
  color: #666666;
}

.totalPrice {
  line-height: 0;
}
.total {
  position: relative;
  top: 10px;
  font-family: PingFangSC-Semibold, sans-serif;
  font-size: 14px;
}
.totalPrice label {
  display: block;
  width: 100%;
  height: 20px;
}
.mainInfo {
  margin-top: 20px;
  font-size: 14px;
}
.infoTitle {
  width: 100%;
  height: 38px;
  background-color: #ededed;
  line-height: 38px;
}
.infoTitle span {
  display: inline-block;
  color: #000000;
  font-family: PingFangSC-Semibold, sans-serif;
  font-size: 12px;
  width: 12%;
  text-align: center;
}
.listInfo {
  width: 100%;
  height: 50px;
  background-color: #fff;
  margin-bottom: 10px;
  line-height: 50px;
  font-size: 12px;
}
.listInfo:hover {
  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  transition: all linear 0.5s;
}
.listInfo span {
  display: inline-block;
  width: 12%;
  text-align: center;
}
.travelProfit {
  color: #077ebb;
}
.tourProfit {
  color: #ed8601;
}
.leaderProfit {
  color: #b300a4;
}
.littleTotal {
  font-size: 12px;
  color: #666666;
  position: relative;
  top: 10px;
}
.fbold {
  font-family: PingFangSC-Semibold, sans-serif;
  font-size: 14px;
}
.ShopDetail_c1 {
  color: #2aaef2;
}
.ShopDetail_c2 {
  color: #47bf8c;
}
.ShopDetail_c3 {
  color: #ff793e;
}
.ShopDetail_c4 {
  color: #ffba1f;
}
.statistical {
  display: none;
  width: 100%;
  height: 500px;
}
.hidDiv {
  display: none;
}
.disDiv {
  display: block;
}
.dataList li {
  float: left;
  width: 100px;
  height: 40px;
  text-align: center;
  color: #666666;
  background-color: #f1f1f1;
  line-height: 40px;
  font-size: 14px;
  margin-top: 30px;
  position: relative;
  cursor: pointer;
}
.Day_active {
  background-color: #fff !important;
  color: #000 !important;
}
.Day_active i {
  display: inline-block;
  width: 35px;
  height: 2px;
  background-color: #e95252;
  position: absolute;
  bottom: 0;
  left: 35px;
}
.chartsMap {
  width: 100%;
  height: 500px;
  background-color: #fff;
  padding-top: 50px;
}
.Shop_span{
  font-size:14px;
}
</style>
<template>
    <div class='flexOne ShoppingDetails'>
            <div class="dataIn clearfix">
                <div class="storeName">{{Name}}</div>
                <span class="Shop_span">{{$t('sm.Date')}}</span>
                <el-date-picker class="w150" type="date" v-model="msg.StartDate" :picker-options="pickerBeginDateBefore"
                  value-format="yyyy-MM-dd" placeholder></el-date-picker>
                <el-date-picker class="w150" type="date" v-model="msg.EndDate" :picker-options="pickerBeginDateAfter"
                  value-format="yyyy-MM-dd" placeholder></el-date-picker>

                <input type="button" class="normalBtn backBtn" @click="showStatis(1)" v-if="isShow==false" :value="$t('ground.sjkban')" style="display:none;"/>
                <input type="button" class="normalBtn backBtn" @click="showStatis(2)" v-else :value="$t('ground.liebiao')"/>
                <input type="button" class="hollowFixedBtn backBtn" @click="goUrl('ShoppingStore')" :value="$t('pub.returnBack')"/>
                <input type="button" class="hollowFixedBtn backBtn" @click="getList()" :value="$t('pub.searchBtn')"/>
            </div>
            <!-- <div class="listSpan">
                <span>{{$t('ground.zongjiaoyie')}}：<label class="ShopDetail_c1 fbold">{{TotalPrice}}</label></span>
                <span>旅行社盈利：<label class="ShopDetail_c2 fbold">{{GroupExtract}}</label></span>
                <span>导游盈利：<label class="ShopDetail_c3 fbold">{{GuideExtract}}</label></span>
                <span>领队盈利：<label class="ShopDetail_c4 fbold">{{LeaderExtract}}</label></span>
            </div> -->
            <div class="mainInfo" :class="{'hidDiv':isShow}">
                <div class="infoTitle">
                    <span>{{$t('ground.jindianriqi')}}</span>
                    <span>{{$t('ground.guanliantuanhao')}}</span>
                    <span>{{$t('ground.zongjiaoyie')}}</span>
                    <span>{{$t('ground.lvxingshetc')}}</span>
                    <span>{{$t('ground.daoyouticheng')}}</span>
                    <span>{{$t('ground.lingduiticheng')}}</span>
                    <span>{{$t('ground.fyye')}}</span>
                    <span>{{$t('ground.fyzj')}}</span>
                </div>
                <div class="listInfo" v-for="item in DataList" :key="item.subCode">
                    <span>{{item.StoreTime}}</span>
                    <span>{{item.TCID}}</span>
                    <span class="totalPrice">
                        <label class="total ShopDetail_c1">￥{{getPrice(item.TotalMoney,item.DMCRate)}}</label>
                        <label class="littleTotal">（{{item.TotalMoney}}*{{item.DMCRate}}）</label>
                    </span>
                    <span class="totalPrice">
                        <label class="total ShopDetail_c2">￥{{getPrice(item.CompanyCommission,item.DMCRate)}}</label>
                        <label class="littleTotal">（{{item.CompanyCommission}}*{{item.DMCRate}}）</label>
                    </span>
                    <span class="totalPrice">
                        <label class="total ShopDetail_c3">￥{{getPrice(item.GuideCommission,item.DMCRate)}}</label>
                        <label class="littleTotal">（{{item.GuideCommission}}*{{item.DMCRate}}）</label>
                    </span>
                    <span class="totalPrice">
                        <label class="total ShopDetail_c4">￥{{getPrice(item.LeaderCommission,item.DMCRate)}}</label>
                        <label class="littleTotal">（{{item.LeaderCommission}}*{{item.DMCRate}}）</label>
                    </span>
                    <span>{{item.OtherDeduct}}</span>
                    <span>{{item.BackTotalMoney}}</span>
                </div>
                <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
                </el-pagination>
            </div>
            <div class="statistical" :class="{'disDiv':isShow}">
                <ul class="dataList">
                    <li :class="yearList==true?'Day_active':''" @click="getStatis(3)">
                        {{$t('ground.anchakan')}}
                        <i></i>
                    </li>
                    <li :class="monthList==true?'Day_active':''" @click="getStatis(2)">
                        {{$t('ground.anyuechakan')}}
                        <i></i>
                    </li>
                    <li :class="dayList==true?'Day_active':''" @click="getStatis(1)">
                        {{$t('ground.antianchakan')}}
                        <i></i>
                    </li>
                </ul>

                <div class="charts">
					<el-col :span='24'>
						<div id="shoppingDetailschartsMap" class="chartsMap"></div>
					</el-col>
				 </div>

            </div>
            <div class="noData" v-show="noData">
                {{$t('system.content_noData')}}
            </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 10,
        ShopId: "",
        StartDate:'',
        EndDate:''
      },
      noData: false,
      loading: true,
      currentPage: 1,
      total: 0,
      isShow: false,
      Name: "",
      TotalPrice: "",
      GroupExtract: "",
      GuideExtract: "",
      LeaderExtract: "",
      DataList: "",
      dayList: false,
      monthList: false,
      yearList: true,
      colors: "",
      StatcTime: "",
      StacGroupExtract: "",
      StacGuideExtract: "",
      StacLeaderExtract: "",
      StacTotalPrice: "",

      DayTime: [], //天数数组
      DayTotalPrice: [],
      DayGroupExtract: [],
      DayGuideExtract: [],
      DayLeaderExtract: [],
      DaydataZoom: [],
      pickerBeginDateBefore: {
        disabledDate: time => {
          let endTime = new Date(this.msg.EndDate)
          return endTime.getTime() < time.getTime()
        }
      },
      pickerBeginDateAfter: {
        disabledDate: time => {
          let startTime = new Date(this.msg.StartDate)
          return startTime.getTime() >= time.getTime()
        }
      }
    };
  },
  methods: {
    getList() {
      this.loading = true;
      this.apipost(
        "ShoppingInfo_Post_GetPriceShopDetailsPageList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.loading = false;
            if (res.data.data.count > 0) {
              this.noData = false;
            } else {
              this.noData = true;
            }
            this.total = res.data.data.count;
            this.DataList = res.data.data.pageData;
          }else{
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    goUrl(path, id) {
      this.$router.push({ path: path, query: { ID: id } });
    },
    handleCurrentChange(val) {
      //翻页功能按钮
      this.msg.pageIndex = val;
      this.getList();
    },
    goUrl(path) {
      this.$router.push({ path: path });
    },
    showTip(index) {
      this.DataList.forEach(x => {
        x.infoShow = false;
      });
      this.DataList[index].infoShow = true;
    },
    closeTip() {
      this.DataList.forEach(x => {
        x.infoShow = false;
      });
    },
    showStatis(type) {
      if (type == 1) {
        this.isShow = true;
        this.getStatis(3);
      } else {
        this.isShow = false;
      }
    },
    getStatis(type) {
      if (type == 1) {
        this.dayList = true;
        this.monthList = false;
        this.yearList = false;
      } else if (type == 2) {
        this.dayList = false;
        this.monthList = true;
        this.yearList = false;
      } else {
        this.dayList = false;
        this.monthList = false;
        this.yearList = true;
      }
      let msg = {
        ShoppingID: this.msg.ShoppingID,
        Type: type
      };

      if (type == 1) {
        this.DaydataZoom = [
          {
            type: "slider",
            show: true,
            xAxisIndex: [0],
            left: "9%",
            bottom: -5,
            start: 0,
            end: 30 //初始化滚动条
          }
        ];
      } else {
        this.DaydataZoom = null;
      }
      this.apipost(
        "ShoppingInfo_Post_GetList",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            var Time = res.data.data.Time;
            var TotalPrice = res.data.data.TotalPrice;
            var GroupExtract = res.data.data.GroupExtract;
            var GuideExtract = res.data.data.GuideExtract;
            var LeaderExtract = res.data.data.LeaderExtract;
            let that = this;
            that.DayTime = [];
            that.DayTotalPrice = [];
            that.DayGroupExtract = [];
            that.DayGuideExtract = [];
            that.DayLeaderExtract = [];
            that.DayTime = Time;
            that.DayTotalPrice = TotalPrice;
            that.DayGroupExtract = GroupExtract;
            that.DayGuideExtract = GuideExtract;
            that.DayLeaderExtract = LeaderExtract;
            that.getDayData();
          }
        },
        err => {}
      );
    },
    getDayData() {
      var colors = ["#2AAEF2", "#47BF8C", "#FF793E", "#FFBA1F"];
      var myChart = this.$echarts.init(
        document.getElementById("shoppingDetailschartsMap")
      );
      var TypeList = [this.$t('ground.zongjiaoyie'), this.$t('objFill.v101.lvxingsyli'), this.$t('objFill.v101.daoyouyinli'),this.$t('objFill.v101.linduiyinli')];
      var option2 = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: TypeList
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: this.DayTime
          }
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false
            }
          }
        ],
        dataZoom: this.DaydataZoom,
        series: [
          {
            name: TypeList[0],
            type: "bar",
            itemGap: 10,
            data: this.DayTotalPrice,
            barWidth: 30,
            itemStyle: {
              normal: {
                //圆角效果（顺时针左上，右上，右下，左下）
                barBorderRadius: [50, 50, 0, 0],
                //设置Bar的颜色
                color: function(params) {
                  return colors[0];
                }
              }
            }
          },
          {
            name: TypeList[1],
            type: "line",
            smooth: true,
            symbol: "circle",
            data: this.DayGroupExtract,
            itemStyle: {
              normal: {
                color: colors[1],
                lineStyle: {
                  color: colors[1]
                }
              }
            }
          },
          {
            name: TypeList[2],
            type: "line",
            smooth: true,
            symbol: "circle",
            data: this.DayGuideExtract,
            itemStyle: {
              normal: {
                color: colors[2],
                lineStyle: {
                  color: colors[2]
                }
              }
            }
          },
          {
            name: TypeList[3],
            type: "line",
            smooth: true,
            symbol: "circle",
            data: this.DayLeaderExtract,
            itemStyle: {
              normal: {
                color: colors[3],
                lineStyle: {
                  color: colors[3]
                }
              }
            }
          }
        ]
      };
      myChart.clear();
      myChart.setOption(option2);
    },
    //乘以获得2位小数
    getPrice(x,y){
      return (x*y).toFixed(2);
    }
  },
  mounted() {
    this.msg.ShopId = this.$route.query.id;
    this.Name = this.$route.query.Name;
    this.TotalPrice = this.$route.query.TotalPrice;
    this.GroupExtract = this.$route.query.GroupExtract;
    this.GuideExtract = this.$route.query.GuideExtract;
    this.LeaderExtract = this.$route.query.LeaderExtract;
    this.getList();
  }
};
</script>