<style>
  .baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
  }

  .ReturnperiodsList .border-bottom {
    /* border-bottom: 1px dashed #EEE; */
    padding-bottom: 5px;
    margin-bottom: 5px;
  }

  .ReturnperiodsList .text-bottom {
    height: 32px;
    line-height: 32px;
    margin-bottom: 10px;
  }

  .ReturnperiodsList ._icon_btn i.icon-sousuo {
    background-color: #47BF8C;
  }

  .ReturnperiodsList ._icon_btn .icon-add {
    background-color: #47BF8C;
  }

  .ReturnperiodsList ._icon_btn i {
    width: 26px;
    height: 26px;
    display: inline-block;
    color: white !important;
    border-radius: 50%;
    text-align: center;
    line-height: 26px;
    margin-right: 10px;
    cursor: pointer;
    outline: none;
  }

  .ReturnperiodsList .el-table td,
  .el-table th {
    padding: 5px 0;
  }

</style>
<template>
  <div class="page-body ReturnperiodsList">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div style="display:flex;justify-content: space-between;width: 100%;align-items: center;">
          <div class="block" style="display:flex">
            <span style="margin-right: 5px;">月份筛选</span>
            <el-date-picker v-model="msg.Month" value-format="yyyy-MM" type="month" placeholder="选择月"
              @change="handleCurrentChanges(1)">
            </el-date-picker>
          </div>
          <div>
            <q-btn v-if='isReturnperiods' :loading="loading1"  color="primary"  size="11px"  label="生成返佣"
               @click="scCommission"  style="height:28px" />
            <div style="font-size: 11px;color: #666;">*默认生成上月返佣</div>
          </div>
        </div>
      </div>
    </div>
    <template>
      <el-table ref="filterTable" :data="tableData" v-loading='loading'
        :header-cell-style="{backgroundColor:'#f5f6f7', color: '#a8a8b3'}" border style="width: 100%">
        <el-table-column prop="BatchName" label="周期"></el-table-column>
        <el-table-column v-if="isReturnperiods" prop="TotalMoney" label="累计金额"> </el-table-column>
        <el-table-column v-if="isReturnperiods" prop="TotalEmployee" label="个人直客累计金额"> </el-table-column>
        <el-table-column prop="TotalCustomer" label="同业录入累计金额"> </el-table-column>
        <el-table-column v-if="isReturnperiods" prop="TotalInternal" label="内部介绍累计金额"> </el-table-column>
        <el-table-column v-if="isReturnperiods" prop="TotalTrans" label="学员转介绍累计金额"> </el-table-column>
        <el-table-column v-if="isReturnperiods" prop="CreateByName" label="创建人"> </el-table-column>
        <el-table-column v-if="isReturnperiods" prop="CreateDate" label="创建时间"> </el-table-column>
        <el-table-column v-if="isReturnperiods" label="财务单据">
          <template slot-scope="scope">
            <template v-if="scope.row.FinanceIdList">
              <a v-for="(item,index) in scope.row.FinanceIdList" :key="index" @click="goDetails(item)"
                style="cursor:pointer;color:blue;text-decoration:underline;display:inline-block;margin-right:10px;">{{item}}</a>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="_icon_btn">
              <el-tooltip class="item" effect="dark" content="查看" placement="top">
                <i class="iconfont icon-sousuo" @click="goUrl(scope.row.Id)"></i>
              </el-tooltip>
              <template v-if="isReturnperiods">
                <el-tooltip class="item" effect="dark" v-if="scope.row.FinanceIds==''||scope.row.FinanceIds==null"
                  content="生成财务单据" placement="top">
                  <i class="iconfont icon-add" @click="setCommissionFinanace(scope.row.Id)"></i>
                </el-tooltip>
              </template>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px;text-align: center;">
        <el-pagination background @current-change="handleCurrentChanges" layout="total,prev, pager, next, jumper"
          :current-page.sync="msg.PageIndex" :page-size="msg.PageSize" :total='total'>
        </el-pagination>
      </div>
    </template>
  </div>
</template>
<script>
  import {
    getSchoolDropdown
  } from '../../../api/school/index'

  import {
    SetCommissionPeriodsFinanace,
    getCommissionPeriodsPageList,
    setSellCommissionRule,
    setUserReturnCommission,
    getSellAchievementsSendEmployeeList,
    setSellAchievementsSendEmployee
  } from '../../../api/finance/index'
  import {
    mapState
  } from "vuex";
  export default {
    meta: {
      title: "返佣期数列表"
    },
    props: {},
    components: {},
    data() {
      return {
        loading: false,
        loading1: false,
        value2: '',
        //列表数据参数
        msg: {
          PageIndex: 1,
          PageSize: 15,
          SchoolId: '-1',
          Month: '',
          CommissionType: 1,
        },
        msgFinance: {
          BatchId: 0,
          SchoolId: '-1',
          Status: '-2',
          OrderSourceType: '-1',
          OrderSourceId: 0,
          Q_SelectNormal: '2'
        },
        pageCount: 0,
        persistent: false,
        listData: {},
        tableData: [],
        total: 0,
        CompanyList: [],
        isgenerate: false, //是否有生成的权限
        iscMaker: false, //是否有制单的权限
        SendEmployeeList: [], //可发放提成的用户列表
        costmode: false,
        multipleSelection: [],
        totalAmount: 0, //选中的金额总额
        CheckID: 0,
      }
    },
    computed: mapState({
      //是否有下载权限
      isReturnperiods(state) {
        if (state.user.userInfo && state.user.userInfo.ActionMenuList && state.user.userInfo.ActionMenuList.length >
          0) {
          let action = state.user.userInfo.ActionMenuList.find(x => {
            if (x.FunctionCode == "Edit_Returnperiods") {
              return x;
            }
          });
          return action && action.FunctionCode;
        }
        return false;
      }
    }),
    created() {
      let userinfo = this.getLocalStorage();
      userinfo.ActionMenuList.map(x => { //判断权限
        if (x.FunctionCode == "SAGenerate_Commission") { //判断是否有生成的权限
          this.isgenerate = true;
        }
        if (x.FunctionCode == "SACommission_maker") { //判断是否有制单的权限
          this.iscMaker = true;
        }
      })
      var myDate = new Date();
      myDate.setMonth(myDate.getMonth() - 1);
      if (this.$route.query && this.$route.query.Month) {
      this.msg.Month = this.$route.query.Month
    }
    },
    mounted() {
      this.getList(); //获取提成周期列表
    },
    methods: {
      //跳转到单据详情
      goDetails(item) {
        this.OpenNewUrl("/financial/financalDocument/FinancialDocumentsDetail", {
          id: item
        });
      },
      getList() {
        this.loading = true;
        getCommissionPeriodsPageList(this.msg).then(res => {
          if (res.Code == 1) {
            this.loading = false;
            var tempArray = res.Data.PageData;
            if (tempArray && tempArray.length > 0) {
              tempArray.forEach(item => {
                var finaceArray = [];
                if (item.FinanceIds && item.FinanceIds != '') {
                  finaceArray = item.FinanceIds.split(',');
                }
                item.FinanceIdList = finaceArray;
              })
            }
            this.tableData = tempArray;
            this.total = res.Data.Count
          }
        })
      },
      setCommissionFinanace(id) {
        this.loading = true;
        this.msgFinance.BatchId = id;
        SetCommissionPeriodsFinanace(this.msgFinance).then(res => {
          if (res.Code == 1) {
            this.getList();
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
          }
          this.loading1 = false;
        }).catch(err => {
          this.loading1 = false;
        })
      },
      scCommission() { //生成提成
        if (this.loading1 == false) {
          this.loading1 = true;
          setUserReturnCommission({
            type: 1
          }).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '生成提成成功',
                position: 'top'
              })
              this.getList()
            }
            this.loading1 = false;
          }).catch(err => {
            this.loading1 = false;
          })
        }
      },
      getBranchList() { //获取校区
        getSchoolDropdown({}).then(res => {
          this.CompanyList = res.Data;
        }).catch(() => {

        })
      },
      goUrl(id) {
        this.OpenNewUrl("/financial/returnPassbook/ReturnUserList", {
          "id": id,
          blank: 'y',
        });
      },
      handleCurrentChanges(val) {
        this.msg.PageIndex = val;
        this.getList()
      },
    },
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
