<style>
    .baseSet_Title {
      width: 120px !important;
      padding: 18px 0 0 16px;
      text-align: right;
    }
  
    .CommissionDetail .border-bottom {
      /* border-bottom: 1px dashed #EEE; */
      padding-bottom: 5px;
      margin-bottom: 5px;
    }
  
    .CommissionDetail .text-bottom {
      height: 32px;
      line-height: 32px;
      margin-bottom: 10px;
    }
  
    .CommissionDetail ._icon_btn i.icon-sousuo {
      background-color: #47BF8C;
    }
  
    .CommissionDetail ._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;
    }
  
    .CommissionDetail .el-table td,
    .el-table th {
      padding: 5px 0;
    }
  
  </style>
  <template>
    <div class="page-body CommissionDetail">
      <div class="page-search row items-center">
        <div class="col row wrap q-mr-lg q-col-gutter-md  items-center">
          <div style="margin-right: 10px;">
            <q-btn  color="primary"  size="11px"  label="返回"  @click="goreturn"  style="margin-left:10px" />
          </div>
          <div class="col-3">
            <q-input filled v-model="msg.ActivityName" @keyup.enter.native="getList()" label="活动名称" />
          </div>
          <div class="col-3">
            <q-input filled v-model="msg.OrderId" @keyup.enter.native="getList()" label="订单号" />
          </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="SchoolName" label="校区" :filters='SchoolNamelist' :filter-method="filterHandler">
          </el-table-column>
          <el-table-column prop="DeptName" label="部门" :filters='DeptNamelist' :filter-method="filterHandler">
          </el-table-column>
          <el-table-column prop="UserName" label="销售" :filters='UserNamelist' :filter-method="filterHandler">
          </el-table-column>
          <el-table-column prop="OrderId" label="订单号">
            <template slot-scope="scope">
              <div v-if="scope.row.OrderId" style="cursor: pointer;text-decoration: underline;" @click="goUrlactivityList(scope.row)">
                {{scope.row.OrderId}} 
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="ActivityName" label="活动名称" > 
            <template slot-scope="scope">
              <div v-if="scope.row.ActivityName" style="cursor: pointer;text-decoration: underline;" @click="goUrlorderList(scope.row)">
                {{scope.row.ActivityName}} 
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="ActivityTime" label="活动日期" > </el-table-column>
          <el-table-column prop="DSUserName" label="报名用户" >
            <template slot-scope="scope">
              <div v-if="scope.row.DSUserName">
                {{scope.row.DSUserName}} <span>({{scope.row.DSUserId}})</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="CommissionMoney" label="提成金额" sortable :sort-method="CommissionMoney">
            <template slot-scope="scope">
              <div style="color: rgb(233, 82, 82);">{{scope.row.CommissionMoney}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="Periods" label="周期"> </el-table-column>
          <el-table-column prop="Remark" label="备注" ></el-table-column>
       
        </el-table>
      </template>
  
    </div>
  </template>
  <script>
    import {
      GetClassTypePageList,
    } from '../../../api/system/index';
    import {
    getActivityCommissionUserDetailList,
    } from '../../../api/finance/index'
    import {
      getClassDropDownList,
    } from "../../../api/school/index";
    export default {
      meta: {
        title: "活动提成明细列表"
      },
      props: {},
      components: {},
      data() {
        return {
          loading: false,
          //列表数据参数
          msg: {
            PeriodId: 0,
            UserId: 0,
            ActivityName: '',
            OrderId: '',
            UserIds: '',
          },
          pageCount: 0,
          persistent: false,
          listData: {},
          tableData: [],
          company: [],
          department: [],
          ClassList: [],
          allClassList: [],
          see_tcdetailed: false,
          SchoolNamelist: [],
          DeptNamelist: [],
          UserNamelist: [],
        }
      },
      created() {
        let userinfo = this.getLocalStorage();
        userinfo.ActionMenuList.map(x => { //判断权限
          if (x.FunctionCode == "see_tcdetailed") { //判断是否可以查看其他明细
            this.see_tcdetailed = true;
          }
        })
        if (this.see_tcdetailed == false) {
          this.msg.UserId = userinfo.Id
        }
      },
      mounted() {
        if (this.$route.query && this.$route.query.id) {
          this.msg.PeriodId = this.$route.query.id
        }
        if (this.$route.query && this.$route.query.UserId) {
          this.msg.UserId = this.$route.query.UserId
        }
        if (this.$route.query && this.$route.query.UserIds) {
          this.msg.UserIds = this.$route.query.UserIds
        }
        if (this.$route.query && this.$route.query.School_Id) {
          this.msg.School_Id = this.$route.query.School_Id
        }
        this.getList()
        this.setClass()
      },
      methods: {
        getList() {
          if (this.msg)
            this.loading = true;
            getActivityCommissionUserDetailList(this.msg).then(res => {
            if (res.Code == 1) {
              this.loading = false;
              this.tableData = res.Data;
              this.SchoolNamelist = [];
              this.DeptNamelist = [];
              this.UserNamelist = [];
              this.tableData.forEach(x => {
                let obj = {
                  text: x.SchoolName,
                  value: x.SchoolName
                }
                let obj2 = {
                  text: x.DeptName,
                  value: x.DeptName
                }
                let obj3 = {
                  text: x.UserName,
                  value: x.UserName
                }
                this.SchoolNamelist.push(obj)
                this.DeptNamelist.push(obj2)
                this.UserNamelist.push(obj3)
              })
              this.SchoolNamelist = this.unique(this.SchoolNamelist)
              this.DeptNamelist = this.unique(this.DeptNamelist)
              this.UserNamelist = this.unique(this.UserNamelist)
            }
          })
        },
        unique(arr, Name) { //数组去重
          const res = new Map();
          return arr.filter(
            (list) => !res.has(list.text) && res.set(list.text, 1)
          );
        },
        //选择班级
        setClass(item) {
          this.isShowClass = true;
          getClassDropDownList({
            CourseId: 0,
            IsAddDefault: 1, //添加默认选项
          }).then(res => {
            if (res.Code == 1) {
              var jsonData = res.Data;
              if (jsonData && jsonData.length > 0) {
                this.ClassList = JSON.parse(JSON.stringify(jsonData));
                this.allClassList = JSON.parse(JSON.stringify(jsonData));;
              }
            }
          });
        },
        //筛选员工
        filterFn(val, update) {
          update(() => {
            if (val === '') {
              this.ClassList = JSON.parse(JSON.stringify(this.allClassList))
            } else {
              const needle = val.toLowerCase()
              this.ClassList = this.allClassList.filter(v => v.ClassName.toLowerCase().indexOf(needle) > -1)
            }
          })
        },
  
        goUrlorderList(row) {
          this.$router.push({
            path: '/financial/reportform/activityCommissionForOrderList',
            query: {
              ActivityId: row.ActivityId,
                blank: 'y',
            }
          })
        },
        goUrlactivityList(row) {
          this.OpenNewUrl('/sale/activeOrderStatistics', {
            OrderId: row.OrderId,
          });
        },
        
        filterHandler(value, row, column) {
          const property = column['property'];
          return row[property] === value;
        },
        CommissionMoney(a, b) {
          return a.CommissionMoney - b.CommissionMoney;
        },
        goreturn() {
          this.$router.go(-1);
        },
     
  
      },
    }
  
  </script>
  <style lang="sass">
    @import url('~assets/css/table.sass')
  
  </style>
  