<style scoped>
    .CM_look {
        padding: 4px !important;
        position: relative;
        top: 1px;
    }

    .opUl li {
        display: inline-block;
        margin: 10px 15px 10px 0;
    }

    .domesticCommission .singeRowTable tr td {
        padding: 8px 5px;
    }

    .domesticCommission .hoverSpan span:hover {
        cursor: pointer;
        text-decoration: underline;
        color: red;
    }
    /deep/.el-checkbox__input.is-checked .el-checkbox__inner{
        background-color: #E95252!important;
        border-color:#E95252!important;
    }
    /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color: #E95252!important;
        border-color:#E95252!important;
    }
    .groupTourOrder_count {
  margin: 0 0 20px 0;
  width: 100%;
  height: auto;
}

.groupTourOrder_count_col {
  height: 80px;
}

.groupTourOrder_count_item {
  font-weight: 400;
  padding: 10px;
  height: 100%;
  border: 1px solid #e6e6e6;
  background-color: #ffffff;
  color: #333333;
}

.groupTourOrder_count_item > div{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.groupTourOrder_count_item > div > i {
  font-size: 12px;
  vertical-align: bottom;
}
.groupTourOrder_count_item > div > span:nth-child(2) {
    font-weight: bold;
    font-size: 15px;
    vertical-align: bottom;
    margin-left: 10px;
}

.groupTourOrder_count_item > p {
  font-size: 12px;
  line-height: 18px;
}

.groupTourOrder_count_item > p > span {
  margin: 0 5px 0 0;
  white-space: nowrap;
  font-size: 20px;
}

.groupTourOrder_more {
  margin: 0 -12px;
}

.groupTourOrder_more > div {
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
  color: #333333;
  background-color: #ffffff;
  cursor: pointer;
}

.groupTourOrder_more > div:hover {
  color: #297bef;
  background-color: #dcebff;
}

.groupTourOrder_remarks {
  font-size: 0px;
}

.groupTourOrder_remarks > div {
}

.groupTourOrder_remarks > div > div:nth-child(1) {
  float: left;
  display: flex;
  align-items: flex-start;
}

.groupTourOrder_remarks > div > div:nth-child(1) > span {
  line-height: 20px;
  font-size: 12px;
  color: #e95252;
  white-space: nowrap;
}

.groupTourOrder_remarks > div > div:nth-child(1) > p {
  line-height: 20px;
  font-size: 12px;
  color: #e95252;
}

.groupTourOrder_remarks > div > div:nth-child(2) {
  float: right;
  text-align: right;
  font-size: 12px;
  color: #e95252;
}

.groupTourOrder_remarks > div > div:nth-child(2) > i {
  font-size: 10px;
  cursor: pointer;
}

.groupTourOrder_remarks > div::after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

.groupTourOrder_remarks_btn {
  padding: 0px;
  width: 12px;
  height: 12px;
  border: none;
  background-color: transparent;
}

.groupTourOrder_remarks_btn > i {
  color: #e95252;
  font-size: 12px;
}

.groupTourOrder_remarks_popover > div {
  display: inline-block;
  font-size: 14px;
  color: #000000;
}

.groupTourOrder_remarks_popover > div::before {
  content: "";
  display: inline-block;
  margin: 0 5px 0 0;
  width: 2px;
  height: 12px;
  background-color: #e95252;
}

.groupTourOrder_remarks_popover > span {
  display: block;
  margin: 0 0 0 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #000000;
}

.groupTourOrder_remarks_popover > p {
  margin: 5px 0 0 0;
  padding: 3px;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  font-size: 12px;
  color: #000000;
}

.groupTourOrder_remarks_popover > p:nth-child(even) {
  background-color: #e6e6e6;
}

.groupTourOrder_remarks_popover > p > span:nth-child(1) {
  float: left;
}

.groupTourOrder_remarks_popover > p > span:nth-child(2) {
  margin: 0 10px 0 0;
  float: right;
}

.groupTourOrder_remarks_popover > p::after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}

/* .groupTourOrder_tickets>div>span{
	margin: 0 5px 0 0;
	cursor: pointer;
} */
.groupTourOrder_tickets > div > div > span {
  display: inline-block;
  margin: 0 10px 0 0;
}

.groupTourOrder_tickets_red {
  color: #ff0000;
  text-decoration: underline;
}

.groupTourOrder_tickets_blue {
  color: #0000ff;
  text-decoration: underline;
}

.groupTourOrder_tickets_green {
  color: #008000;
  text-decoration: underline;
}

.groupTourOrder_tickets_black {
  color: #000000;
  text-decoration: underline;
}

.groupTourOrderByTuan_ico {
  margin: 0 10px 0 0;
}

.groupTourOrderByTuan_ico > i {
  display: inline-block;
  margin: 0 2px 0 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  vertical-align: middle;
}

.groupTourOrderByTuan_ico > span {
  vertical-align: middle;
}

.groupTourOrder_tickets > div > div {
  display: table-cell;
  cursor: pointer;
}

.groupTourOrder_tickets > div > div:nth-child(1) {
  width: 80px;
}

.groupTourOrder_tickets > div > div > span {
  display: inline-block;
  margin: 0 10px 0 0;
}
.cursor-p{
    cursor: pointer;
}
.cursor-p:hover{
    color: #409EFF;
}
</style>
<template>
    <div class="flexOne domesticCommission">
        <div>
            <ul class="opUl">
                <!-- <li>
                    <el-button size="mini" type="danger" style="border-radius:14px"
                        @click="getList">查询</el-button>
                </li> -->

            </ul>
        </div>
        <div style="display: flex;align-items: center;height: 50px;justify-content: space-between;">
            <div style="display: flex;align-items: center;">
              
            </div>
            <input type="button" class="normalBtn" value="导出" @click="exportExcel">
    
        </div>
        <!-- 统计版块 -->
    <div class="groupTourOrder_count">
        <el-row :gutter="20">
          <el-col :span="8" class="groupTourOrder_count_col">
            <div class="groupTourOrder_count_item">
              <div>
                <i class="iconfont icon-qian groupTourOrder_count_green"></i>
                <span>当期利润总计</span>
              </div>
              <p>
                <span
                  >{{Statistics.OrderProfit}}</span
                >
              </p>
            </div>
          </el-col>
          <el-col :span="8" class="groupTourOrder_count_col">
            <div class="groupTourOrder_count_item">
              <div class="groupTourOrder_count_blue">
                <i class="iconfont icon-qian"></i>
                <span>当前利润总计</span>
              </div>
              <p>
                <span
                  >{{Statistics.NowProfit}}</span
                >
              </p>
            </div>
          </el-col>
          <el-col :span="8" class="groupTourOrder_count_col">
            <div class="groupTourOrder_count_item">
              <div class="groupTourOrder_count_yellow">
                <i class="iconfont icon-qian"></i>
                <span>利润差额总计</span>
              </div>
              <p>
                <span
                  >{{Statistics.ProfitDiff}}</span
                >
              </p>
            </div>
          </el-col>
        </el-row>
      </div>
        <table v-loading="loading" class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <th>期数</th>
                <th>订单号</th>
                <th>当期利润</th>
                <th>当前利润</th>
                <th>利润差额</th>
            </tr>
            <tr v-for="item in dataList">
                <td>{{item.Month}}</td>
                <td><span class="cursor-p" @click="clickUrl(item,1)">{{item.OrderId}}</span></td>
                <td>{{item.OrderProfit}}</td>
                <td>{{item.NowProfit}}</td>
                <td>{{item.ProfitDiff}}</td>
            </tr>
            <tr v-if="dataList&&dataList.length==0">
                <td style="text-align:center" colspan="7">暂无数据</td>
            </tr>
        </table>
    </div>
</template>

<script>
    import moment from "moment"
    export default {
        data() {
            return {
                msg: {
                    PeriodsId: '',
                },
                loading: false,
                //数据源
                dataList: [],
                Statistics: {},
                total: 0,
            }
        },
        mounted() {
            let userInfo = this.getLocalStorage();
            let ActionMenuCode = userInfo.ActionMenuCode;
            this.msg.PeriodsId = this.$route.query.PeriodsId?this.$route.query.PeriodsId:0;
            this.getList()
        },
        methods: {
            clickUrl(item,type){
                if(type==2){//线索
                    
                }else{
                    this.OrderStatistics(item)
                }
            },
            // 订单统计
            OrderStatistics(item){
            let data = [
                {
                    path: "customerOrder",
                    OrderId: item.OrderId
                },
            ];
            let href = this.domainManager().crmRoutingUrl +
            "automaticLogin?token=" +
            this.getLocalStorage().token +
            "&data=" +
            JSON.stringify(data);
            window.open(href);
        },
            exportExcel() { //导出
                var fileName = "当期利润差额表.xls";
                this.crmGetLocalFile("/api/commission/GetNowCommissionProfitGapToExcel", this.msg, fileName);
            },
            goUrl(path, id,Periods) {
                if(Periods){
                    this.$router.push({
                        path: path,
                        query: {
                            PeriodsId: Periods,
                            blank: 'y',
                            tab: '当期利润差额'
                        }
                    });
                }else{
                    this.$router.push({
                        path: path,
                        query: {
                            PeriodsId: id,
                            blank: 'y',
                            tab: '期数详情'
                        }
                    });
                }
            },
            //获取数据
            getList() {
                this.loading = true;
                this.crmapipost(
                '/api/commission/GetNowCommissionProfitGapList', this.msg,
                res => {
                    if (res.data.resultCode == 1) {
                        this.loading = false;
                        this.dataList = res.data.data.List;
                        this.Statistics = res.data.data.Statistics
                    } else {
                        this.loading = false;
                        this.Error(res.data.message)
                    }
                },
                err => {}
                )
            },

        }
    }
</script>