<template>
  <div class="page-body myOrder">
    <div style="width: 100%;display: flex;justify-content: space-between">
      <span style="font-size: 20px;font-weight: 400; ">活动报名订单</span>
    </div>
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">

        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.ActivityName"
            label="活动名称" @clear="resetSearch" maxlength="20" />
        </div>
        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" type="number" v-model="msg.Id"
            label="订单号" @clear="resetSearch" maxlength="20" />
        </div>
        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.LinkMan" label="联系人"
            @clear="resetSearch" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="Id" option-label="Name"
            v-model="msg.EnrollState" :options="EnrollStateOpt" emit-value map-options label="报名状态" />
        </div>
        <div class="col-3">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="dateList" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
                 range-separator="至"  start-placeholder="报名开始时间"  end-placeholder="报名结束时间">
                 </el-date-picker>       
            </template>
          </q-field>
        </div>
        <div class="col-3">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="dateList2" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
                 range-separator="至"  start-placeholder="活动开始时间"  end-placeholder="活动结束时间">
                 </el-date-picker>       
            </template>
          </q-field>
        </div>
      </div>
    </div>
    <div class="col row wrap q-gutter-x-md" v-if="data.Statistics">
      <div class="col stics">
        <span class="stics-name">应收款</span>
        <span>{{data.Statistics.Money}}</span>
      </div>
      <div class="col stics">
        <span class="stics-name">实收款</span>
        <span>{{data.Statistics.Income}}</span>
      </div>
      <div class="col stics">
        <span class="stics-name">待收款</span>
        <span style="color: #F72E52">{{data.Statistics.DueInMoney}}</span>
      </div>
      <div class="col stics">
        <span class="stics-name">收客人数</span>
        <span style="color:#2961FE;">{{data.Statistics.GuestNum}}人</span>
      </div>
      <div class="col stics">
        <span class="stics-name">取消人数</span>
        <span>{{data.Statistics.CancelNum}}人</span>
      </div>
      <!-- <div class="col stics">
        <span class="stics-name">提成金额</span>
        <span>{{data.Statistics.CommissionMoney}}</span>
      </div>
      <div class="col stics">
        <span class="stics-name">额外奖励</span>
        <span>{{data.Statistics.ExtraRewardMoney}}</span>
      </div> -->
    </div>
    <div class="row col" style="justify-content: flex-end">
      <div class="row tis">
        <div class="tis-k" style="background: #2961FE"></div>
        <span>已打单</span>
      </div>
      <div class="row tis">
        <div class="tis-k" style="background: #02C499"></div>
        <span>平台出纳已审核</span>
      </div>
      <div class="row tis">
        <div class="tis-k" style="background: #F28C1D"></div>
        <span>银行出纳已审核</span>
      </div>
      <div class="row tis">
        <div class="tis-k" style="background: #3FC4FF"></div>
        <span>已通过</span>
      </div>
    </div>
    <div class="page-content">
      <activeOrder :dataList="data.List" :authObj="authObj" @success="refreshClassOrder" :modityOrderType="1"
        ref="orderL">
      </activeOrder>
      <div class="row" style="justify-content: flex-end;padding: 5px 20px">
        <q-pagination v-model="msg.pageIndex" :max="pageCount" @input="changePage" class="full-width justify-end"
          color="primary" :input="true">
        </q-pagination>
      </div>
    </div>
    
  </div>
</template>
<script>
//   import myOrderForm from '../../components/sale/myOrder-form'
  import activeOrder from '../../components/sale/activeOrder-item'
  export default {
    meta: {
      title: "我的活动订单"
    },
    components: {
    //   myOrderForm,
      activeOrder
    },
    data() {
      return {
        dialog: false,
        data: {},
        loading: false,
        dateList: [], //报名时间
        dateList2: [], //开班时间
        msg: {
          pageIndex: 1,
          pageSize: 8,
          Id: "", //活动id
          ActivityName: "", //活动名称
          EduUserId: 0, //销售id
          CreateStartTime: "", //报名开始时间
          CreateEndTime: "", //报名结束时间
          StartTime: "", //活动开始时间
          EndTime: "", //活动结束时间
          EnrollState: 3, //报名状态
          LinkMan: "", //联系人
        },
        EnrollStateOpt: [ //报名状态列表
          {
            Name: "正常",
            Id: 1
          },
          {
            Name: "取消",
            Id: 2
          },
          {
            Name: "查询所有",
            Id: 3
          },
        ],
        pageCount: 1,
        showone: false,
        //权限判断
        authObj: {
          isShowGuestBtn: 1, //显示新增学员名单按钮
          isShowFinanceBtn: true, //显示财务单据按钮
          isShowTransOrder: true, //显示转交订单按钮
          isShowSaleRemark: true, //显示修改销售备注
          isShowBackClass: true, //显示退课按钮
          isShowRenewClass: true, //显示续课按钮
        }
      }
    },
    created() {
     let data= JSON.parse(localStorage.getItem("loginUserInfo")).data
    this.msg.EduUserId=data.Id
    },
    mounted() {
      this.getList();
    },
    methods: {
      //翻页
      changePage(val) {
        if (this.showone == true) {
          this.msg.pageIndex = val;
          this.getList()
        } else {
          this.showone = true
        }
      },
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList()
      },
      //获取订单列表
      getList() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.CreateStartTime = this.dateList[0];
          this.msg.CreateEndTime = this.dateList[1];
        } else {
          this.msg.CreateStartTime = '';
          this.msg.CreateEndTime = '';
        }
        if (this.dateList2 && this.dateList2.length > 0) {
          this.msg.StartTime = this.dateList2[0];
          this.msg.EndTime = this.dateList2[1];
        } else {
          this.msg.StartTime = '';
          this.msg.EndTime = '';
        }
        let msg = JSON.parse(JSON.stringify(this.msg));
         if (msg.Id == '' || msg.Id == null) {
          msg.Id = 0
        }
        this.loading = true;
        this.apipostDS("/api/Education/GetConsultOrderStatisticsPage", msg, (res) => {
          this.loading = false
          if (res.data.resultCode === 1) {
           
              this.data = res.data.data.pageData;
           
            //   let OrderIds = []
            //   this.data.forEach(x => {
            //     OrderIds.push(x.Id)
            //   })
            //   OrderIds = OrderIds.join(',')
            //   if (this.data.length > 0) {
            //     this.$refs.orderL.getOrderFinanceList(OrderIds, 1)
            //   }
              this.pageCount = res.data.data.pageCount;
          }
        })
      },
      //刷新页面
      refreshClassOrder() {
        this.getList();
      },
    }
  }

</script>
<style>
  li {
    list-style-type: none;
  }

  .myOrder ul {
    padding: 0px
  }

  .myOrder .price-popup {
    border-radius: 4px;
  }

  .myOrder .el-range-editor .el-range-input {
    background: transparent;
  }

  .myOrder .el-range-editor.el-input__inner {
    background-color: transparent;
  }

  .myOrder .q-mb-md {
    margin-bottom: 0;
  }

  .myOrder .stics {
    padding: 10px 20px;
    background: #DDDEE0;
    border-radius: 4px;
    font-size: 14px;
    color: #000000;
    font-weight: bold
  }

  .myOrder .stics .stics-name {
    color: #2D2D2D;
    font-weight: 600;
    margin-right: 10px
  }

  .myOrder .tis {
    margin: 10px 0;
    align-items: center
  }

  .myOrder .tis .tis-k {
    width: 10px;
    height: 10px;
    margin-right: 8px
  }

  .myOrder .tis span {
    font-size: 14px;
    color: #2D2D2D;
    font-weight: 600;
    margin-right: 20px
  }

</style>
