<template>
  <el-container style="height: 500px; border: 1px solid #eee" :visible="visible">

    <form ref="clearForm" method="post" action="/api/cyzh-guosen/ordercommission/ordercommissionFinish" style="display: none;">
      <el-input name="json" :value="json"></el-input>
    </form>
    <el-aside width="240px" style="background-color: rgb(238, 241, 246)">
      <el-row>
        <el-col span="24" style="text-align: center;font-size: 24px;">
          <span>代理人信息</span>
        </el-col>
      </el-row>
      <el-row style="padding-top: 20px;">
        <el-col span="24" style="text-align: left;font-size: 18px;">
          <span>代理等级：{{agenter.$level}}</span>
        </el-col>
      </el-row>
      <el-row style="padding-top: 20px;">
        <el-col span="24" style="text-align: left;font-size: 18px;">
          <span>手机号码： 15089107336</span>
        </el-col>
      </el-row>

    </el-aside>

    <el-container>
      <el-header style="text-align: center; font-size: 24px">
        {{startTime}}至{{endTime}}分佣明细表
      </el-header>

      <el-main>
        <el-table :data="tableData" height="450" border style="width: 100%">
          <el-table-column prop="amt" label="佣金金额" width="140">
          </el-table-column>
          <el-table-column prop="rate" label="佣金比例" width="120">
          </el-table-column>
          <el-table-column prop="type" label="佣金类型">

            <template slot-scope="scope">


              <el-tag size="medium">{{ scope.row.type == 1 ?"城市分红":"推广分红" }}</el-tag>


            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="具体时间">
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <el-row>
          <el-col span="12">总计： {{total}} （元）</el-col>
          <el-col span="12" style="text-align: center;">
            <el-button type="primary" size="small" @click="orderFinish">结算</el-button>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </el-container>

</template>

<script>
  import {
    ordercommissionFinish
  } from "@/api/guosen/ordercommission";
  export default {
    props: {


      query: {

      },
      type: { //统计类型： 1-按日 2-按月
      },
      startTime: {

      },
      endTime: {

      },

      agenter: {

      },
      tableData: [],
      total: {}
    },
    data() {

      return {
        visible: false,
         json:"",
orderCommissionStaticDetailVO: {
        orderCommissions:[],
        total:{},
        starttime:{},
        enttime:{},
        agenter:{}
      },
      }
    },
    methods: {


      init() {

      },
      orderFinish() {
        this.orderCommissionStaticDetailVO.orderCommissions = this.tableData;
        this.orderCommissionStaticDetailVO.total = this.total;
        this.orderCommissionStaticDetailVO.agenter = this.agenter;
        this.orderCommissionStaticDetailVO.starttime = this.startTime;
        this.orderCommissionStaticDetailVO.endtime = this.endTime;
        this.json = JSON.stringify(this.orderCommissionStaticDetailVO);
        console.log("tableData"+JSON.stringify(this.tableData))
        console.log("vo"+this.json)
        console.log("ss"+this.tableData.length==0)
       if(this.tableData.length == 0){
         this.$alert("没有可结算的记录")
         return;
       }else{
         this.$confirm("确定结算吗?成功后会生成结算的报表，并将系统中的相关分佣记录状态修改为已结算", {
             confirmButtonText: "确定",
             cancelButtonText: "取消",
             type: "warning"
           })
           .then(() => {
         
             this.$refs.clearForm.submit();
              this.visible = false;
           });
       }
        


      }
    }
  }
</script>

<style>
  .el-header,
  .el-footer {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
