<template>
  <div class=" myOrder q-pb-lg">
    <div class="row q-my-xs">
      <div class="col-6">
        <q-input @input="resetSearch" clearable filled v-model="msg.OrderId" label="订单号" dense maxlength="10" />
      </div>
    </div>
    <div class="row wrap q-gutter-xs q-my-xs" v-if="data.Statistics">
      <div class=" stics">
        <span class="stics-name">应收款</span>
        <span>{{
          data.Statistics.PreferPrice ? data.Statistics.PreferPrice : 0
        }}</span>
      </div>
      <div class=" stics">
        <span class="stics-name">实收款</span>
        <span>{{ data.Statistics.Income }}</span>
      </div>
      <div class=" stics">
        <span class="stics-name">待收款</span>
        <span style="color: #F72E52">{{ data.Statistics.DueInMoney }}</span>
      </div>
      <div class=" stics">
        <span class="stics-name">收客人数</span>
        <span style="color:#2961FE;">{{ data.Statistics.GuestNum }}人</span>
      </div>
      <div class=" stics">
        <span class="stics-name">取消人数</span>
        <span>{{ data.Statistics.CancelNum }}人</span>
      </div>
    </div>

    <div style="width:100%;overflow:auto">
      <orderlist :dataList="data.List" :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,
    getCourseSubject
  } from "../../../api/course/index";
  import myOrderForm from "../../../components/sale/myOrder-form";
  import classinfoForm from "../../../components/course/classinfo-form";
  import orderlist from "./b2bOrderlist";
  import {
    queryEmployee
  } from "../../../api/users/user";
  import {
    EduDownLoad
  } from "../../../api/common/common";
  export default {
    props: {
      Id: {
        type: Number,
        default: 0
      }
    },
    components: {
      myOrderForm,
      classinfoForm,
      orderlist
    },
    data() {
      return {
        dialog: false,
        data: {},
        loading: false,
        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
          ClassNo: "", //班号
          HelpEnterId: "", //关联教师
          CourseSubject: "", //所属科目
          CustomerId: 0,
          CategoryId: 0,
        },
        //订单状态
        OrderStateList: [],
        pageCount: 0,
        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 //不显示续课
        },
      };
    },
    created() {},
    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() {
        this.msg.CategoryId = this.Id;
        let msg = JSON.parse(JSON.stringify(this.msg));
        if (msg.OrderId == "" || msg.OrderId == null) {
          msg.OrderId = 0;
        }
        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;
      },
    }
  };
</script>
<style scoped>
  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: 5px 10px;
    background: #dddee0;
    border-radius: 4px;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
    white-space: nowrap;
  }

  .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>