<style>
  .CM_look{
      padding:4px!important;
      position: relative;
      top:1px;
  }
  .opUl li{
    display: inline-block;
    margin:10px 15px 10px 0;
  }
</style>
<template>
  <div class="flexOne">
    <div>
      <ul class="opUl">
        <li>
          <em>选择月份</em>
          <el-date-picker
          v-model="Month"
          value-format="yyyy-MM"
          type="month"
          placeholder="选择月">
        </el-date-picker>
        </li>
        <li>
            <el-button size="mini" type="danger" style="border-radius:14px" :loading="btnLoading" @click="generateTable">生成提成</el-button>
            <!-- <input v-loading="btnLoading" type="button" class="normalBtn" @click="generateTable" value="生成提成"/> -->
        </li>
      </ul>
    </div>
    <table v-loading="loading" class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th>期数</th>
        <th>提成总金额</th>
        <th>{{$t('admin.admin_czPerson')}}</th>
        <th>日期</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="item in dataList">
        <td>{{item.Periods}}</td>
        <td>{{item.SumPrice}}</td>
        <td>{{item.CreateByStr}}</td>
        <td>{{item.CreateStr}}</td>
        <td>
          
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <el-button type="primary" class="CM_look" @click="goUrl('OPCommissionDetail',item.ID)" icon="iconfont icon-chakan" circle></el-button>
          </el-tooltip>
        </td>
      </tr>
    </table>
    <!-- 分页 -->
    <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>
</template>

<script>
import moment from "moment"
  export default {
    data() {
      return {
        Month:moment().format("YYYY-MM"),
        msg: {
          PageIndex: 1,
          PageSize: 20
        },
        loading:false,
        //数据源
        dataList:[],
        total:0,
        currentPage: 1,
        btnLoading:false,
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      handleCurrentChange(val) {
        this.msg.PageIndex = val;
        this.getList();
      },
      goUrl(path,id) {
        this.$router.push({
          path: path,
          query: {
            PeriodsId:id,
            blank: 'y',
            tab: '期数详情'
          }
        });
      },
      //获取数据
      getList() {
        this.loading = true;
        this.apipost(
          "sellcommission_GetOPCommissionPageList",
          this.msg,
          res => {
            this.loading = false;
            if(res.data.resultCode==1){
              this.dataList = res.data.data.pageData;
              // console.log(res);
              this.total = res.data.data.count;
            }else{
              this.Error(res.data.message);
            }
          },
          null
        );
      },
      //生成提成报表
      generateTable(){
        if(!this.Month||this.Month==""){
          this.Error("请选择月份！")
          return;
        }
        this.btnLoading=true;
        this.apipost(
            "sellcommission_SetOPCommission",{Month:this.Month},
            res => {
              this.btnLoading=false;

              if(res.data.resultCode==1){
                this.getList();
                this.Success('报表生成成功')
              }else{
                this.Error(res.data.message);
              }
            },
            null
          );
        }
    }
  }
</script>
