<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>
      <sub class="f12">注意：本功能只能查看关联到自己的订单，不能查看自己创建的订单</sub>
    </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.OrderId" label="订单号"
            @clear="resetSearch" maxlength="10" />
        </div>
        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.GuestName" label="学生名称"
            @clear="resetSearch" maxlength="20" />
        </div>
        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.ClassName" label="班级名称"
            @clear="resetSearch" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="CourseId"
            option-label="CourseName" v-model="msg.CouseId" :options="CourseList" emit-value map-options label="学习课程" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="Id" option-label="Name"
            v-model="msg.OrderState" :options="OrderStateList" emit-value map-options label="订单状态" />
        </div>
        <div class="col-3">
          <q-field filled>
             <template v-slot:control>
             <el-date-picker v-model="msg.StartTime" type="date" value-format="yyyy-MM-dd" placeholder="报名开始时间" size="small" style="width:47%;"
              @change="resetSearch" clear-icon="iconfont icon-guanbi">
             </el-date-picker>至
             <el-date-picker v-model="msg.EndTime" type="date" value-format="yyyy-MM-dd" placeholder="报名结束时间" size="small" style="width:47%;"
              @change="resetSearch" clear-icon="iconfont icon-guanbi">
             </el-date-picker>
              <!-- <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 class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="Id"
            option-label="EmployeeName" v-model="msg.EnterID"  :options="EmployeeList" emit-value map-options label="业务员" use-input  @filter="filterFn2"/>
        </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.PreferPrice?data.Statistics.PreferPrice:0}}</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>
    <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">
      <orderlist :dataList="data.List" :viewType="1"  :authObj="authObj" @success="refreshClassOrder" :modityOrderType="3" ref="orderL" >
      </orderlist>
      <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>
    <classinfo-form v-if="isShowClassInfo" :seting-obj="classObjOption" @close="closeClass"
      @success="refreshClassOrder">
    </classinfo-form>
  </div>
</template>
<script>
  import {
    getMyOrderStatisticsPageList, //获取订单列表
    getOrderStateEnumList //订单状态
  } from '../../api/sale/sale';
  import {
    queryCourseDropdownList,
  } from '../../api/course/index'
  import myOrderForm from '../../components/sale/myOrder-form'
  import classinfoForm from '../../components/course/classinfo-form';
  import orderlist from '../../components/sale/orderlist'
  import {    queryEmployee  } from '../../api/users/user';
  import {
        EduDownLoad,
    } from '../../api/common/common';
import Lockr from 'lockr';
  export default {
    meta: {
      title: "关联订单"
    },
    components: {
      myOrderForm,
      classinfoForm,
      orderlist
    },
    data() {
      return {
        dialog: false,
        data: {},
        loading: false,
        dateList: [], //报名时间
        dateList2: [], //开班时间
        msg: {
          pageIndex: 1,
          pageSize: 8,
          OrderId: '', //订单号
          GuestName: '', //客人名称
          ClassName: '', //班级名称
          CouseId: 0, //课程id
          StartTime: '', //报名开始时间
          EndTime: '', //报名结束时间
          OPStartTime: '', //开班开始时间
          OPEndTime: '', //开班结束时间
          Q_NotCollect: '0', //查询未收齐 1是 0否
          OrderState: 0, //订单状态 枚举
          Q_OrderState: 1, //查询 1正常订单 2取消订单 (默认传1 如果 选择了订单状态 则传 0)
          Q_OrderBy: 2, //写死 =2
          PlatformTax: 0, //平台税金
          EnterID:'',//业务员id
        },
        //订单状态
        OrderStateList: [],
        pageCount: 0,
        CourseList: [], //关联课程下拉数据
        classObjOption: null,
        isShowClassInfo: false, //是否显示课程信息
        showone: false,
        //权限判断
        authObj: {
          isShowGuestBtn: 0, //显示新增学员名单按钮
          isShowFinanceBtn: false, //显示财务单据按钮
          isShowTransOrder: false, //显示转交订单按钮
          isShowSaleRemark: false, //显示修改销售备注
          isShowBackClass: false, //显示退课按钮
          isShowRenewClass: false, //显示续课按钮
          isShowEdit:false,//不显示修改按钮
          isShowBackClass:false,//不显示退课
          isShowRenewClass:false,//不显示续课
        },
        EmployeeList:[],//业务员
        AllemployeeList:[],
      }
    },
    created() {
      if (this.$route.query.OrderId) {
        this.msg.OrderId = this.$route.query.OrderId;
      }
      
      let nowDay = new Date();
      var year = nowDay.getFullYear(); //年
      var month = nowDay.getMonth() + 1; //月
      var day = nowDay.getDate(); //日
      var currentDay = year + '-' + month + '-' + day;
      this.msg.StartTime = currentDay
      if (this.$route.query.StartTime) {
        this.msg.StartTime = this.$route.query.StartTime+'-01';
      }
      if (this.$route.query.EndTime) {
        this.msg.EndTime = this.$route.query.EndTime+'-01';
      }
      if (this.$route.query.EnterID) {
        this.msg.EnterID = Number(this.$route.query.EnterID) ;
      }
      if (this.$route.query.ClassName) {
        this.msg.ClassName = this.$route.query.ClassName;
      }
      this.getOrderState();
      this.getCourseList();
    },
    mounted() {
      this.getList();
      this.getEmployee(0);
    },
    methods: {
      //订单状态
      getOrderState() {
        getOrderStateEnumList({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.unshift({
              Id: 0,
              Name: "不限"
            })
            this.OrderStateList = tempArray;
          }
        })
      },
      //获取课程
      getCourseList() {
        queryCourseDropdownList({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.unshift({
              CourseId: 0,
              CourseName: "不限"
            })
            this.CourseList = tempArray;
          }
        })
      },
      //翻页
      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.StartTime = this.dateList[0];
        //   this.msg.EndTime = this.dateList[1];
        // } else {
        //   this.msg.StartTime = '';
        //   this.msg.EndTime = '';
        // }
        let u=Lockr.get("loginUserInfo")
        if (this.dateList2 && this.dateList2.length > 0) {
          this.msg.OPStartTime = this.dateList2[0];
          this.msg.OPEndTime = this.dateList2[1];
        } else {
          this.msg.OPStartTime = '';
          this.msg.OPEndTime = '';
        }
        let msg = JSON.parse(JSON.stringify(this.msg));
        if (msg.OrderId == '' || msg.OrderId == null) {
          msg.OrderId = 0
        }
        if(u){
            msg.HelpEnterId=u.Id
        }
        this.loading = true;
        getMyOrderStatisticsPageList(msg).then(res => {
          this.data = res.Data.PageData;
          let OrderIds = []
          this.data.List.forEach(x => {
            OrderIds.push(x.OrderId)
          })
          this.loading = false
          OrderIds = OrderIds.join(',')
          if (this.data.List.length > 0) {
            this.$refs.orderL.getOrderFinanceList(OrderIds, 1)
          }
          this.pageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false
        })
      },
      //刷新页面
      refreshClassOrder() {
        this.getList();
      },
      getClassInfo(obj) { //打开班级详情组件
        this.classObjOption = obj;
        this.isShowClassInfo = true;
      },
      //关闭班级信息弹窗
      closeClass() {
        this.isShowClassInfo = false;
      },
      //业务员
      getEmployee(id) { 
        var qMsg = {
          Dept_Id: 0
        }
        qMsg.Dept_Id=id;
        queryEmployee(qMsg).then(res => {
          if(res.Code==1){
            this.EmployeeList = res.Data;
            let obj={
                Id:"",
                EmployeeName:"不限"
            }
            this.EmployeeList.unshift(obj)
            this.AllemployeeList = JSON.parse(JSON.stringify(this.EmployeeList));
          }
        }).catch(() => {

        })
      },
      //筛选业务员
      filterFn2(val, update) {
            update(() => {
                if (val === '') {
                    this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList))
                } else {
                    const needle = val.toLowerCase()
                    this.EmployeeList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1)
                }
            })
        },
        goexport(){//导出
          var msg = JSON.parse(JSON.stringify(this.msg));
            EduDownLoad("/order/GetOrderPageListStatisticsToExcel", msg, "订单列表.xls")
        }
    }
  }

</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
  }
  .myOrder .el-input__inner {
    border: none !important;
    background: transparent !important;
  }

</style>
