<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>
      <span><q-toggle v-model="msg.Q_NotCollect" label="只看款未收齐订单" class="q-mb-md" false-value="0"  true-value="1" @input="resetSearch"/></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.OrderId" label="订单号"
                   @clear="resetSearch" />
        </div>
        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.GuestName" label="客户名称"
                   @clear="resetSearch" />
        </div>
        <div class="col-3">
          <q-input @change="resetSearch" clearable standout="bg-primary text-white" v-model="msg.ClassName" label="班级名称"
                   @clear="resetSearch" />
        </div>


        <div class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="CourseId" option-label="CourseName"
                    v-model="msg.CourseName" :options="ClassList" 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="OrderState" 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.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 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">
      <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" >

      <table class="enrollTotalSearchTable" border="0" cellspacing="0" cellpadding="0" style="" v-loading='loading'>
        <tr>
          <th width="12%">单号</th>
          <th width="8%">人数</th>
          <th width="8%">单价</th>
          <th width="8%">成交</th>
          <th width="8%">应收总额</th>
          <th width="8%">实收</th>
          <th width="8%">优惠</th>
          <th width="8%">退款</th>
          <th width="8%">待收金额</th>
          <th width="8%">状态</th>
          <th >操作</th>

        </tr>
        <tr>
          <td v-show="data.List && data.List.length==0" :colspan="11" align="center">暂无数据</td>
        </tr>
        <tbody v-for="(item,index) in data.List" :key="index">
          <tr>
            <td :rowspan="3" style="text-align: left">
              <div style="font-size: 18px;color: #2961FE;margin-bottom: 20px;font-weight: bold">{{item.OrderId}}</div>
              <div>{{item.EnterName}}</div>
              <div style="margin-top: 10px">{{item.CreateTime}}</div>
              <div style="margin-top: 30px;margin-bottom: 10px">班级</div>
              <div style="font-weight: bold;color:#2961FE;">{{item.ClassName}}</div>
            </td>
            <td style="border:none">{{item.GuestNum}}人</td>
            <td style="border:none">{{item.Class_Price.toFixed(2)}}</td>
            <td style="color:#f5576c;border:none">{{item.Unit_Price.toFixed(2)}}</td>
            <td  style="border:none">{{item.PreferPrice.toFixed(2)}}</td>
            <td  style="border:none">{{item.Income.toFixed(2)}}</td>
            <td style="color:#f5576c;border:none">{{item.DiscountMoney.toFixed(2)}}</td>
            <td  style="border:none">{{item.Refund.toFixed(2)}}</td>
            <td style="color:#2961FE;border:none">{{item.DueInMoney.toFixed(2)}}</td>
            <td  style="border:none">
              <div style="background: rgba(2, 196, 153, 0.2);width: 80px;border-radius: 2px;text-align: center">
                <span style="color: #02C499">{{item.OrderStateName}}</span>
              </div>
            </td>
            <td  style="border:none">
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
                     />
              <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;">
                <q-list>
                  <q-item clickable v-close-popup >
                    <q-item-section @click="gostudent(item)">
                      <q-item-label>学生名单</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup >
                    <q-item-section>
                      <q-item-label>转交订单</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup >
                    <q-item-section>
                      <q-item-label>销售备注</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup >
                    <q-item-section>
                      <q-item-label>取消</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup >
                    <q-item-section>
                      <q-item-label>退课</q-item-label>
                    </q-item-section>
                  </q-item>

                </q-list>
              </q-btn-dropdown>
            </td>
          </tr>
          <tr>
            <td :colspan="11" style="text-align: left">
                学生名单：
              <span v-for="(x,j) in item.GuestList" :index="j" v-if="item.GuestList.length>0">{{x.GuestName}}</span>
              <span  v-if="item.GuestList.length==0">暂无</span>
            </td>
          </tr>
          <tr>
            <td :colspan="11" style="height: 168px;text-align: left" >
              <div class="col row remarks q-gutter-x-md">
                <div class="col">
                  <div>销售备注：</div>
                  <div class="remarks-b">
                    <div v-if="item.SaleRemarkList&&item.SaleRemarkList.length>0">
                      <div>{{item.SaleRemarkList[0].Content}}</div>
                      <div style="text-align: right">{{item.SaleRemarkList[0].CreateBy}} {{item.SaleRemarkList[0].CreateTime}}
                        <span class="iconfont icon-xiangxia" style="color: #2961FE;font-size: 10px" ></span>
                        <q-popup-proxy v-if="item.SaleRemarkList&&item.SaleRemarkList.length>0">
                          <q-banner>
                            <div style="width: 500px;" >
                              <div>销售备注</div>
                              <div  v-for="(xq,jq) in item.SaleRemarkList" :index="jq"  style=" margin-top: 10px;background: #e6e6e6;padding: 5px;font-size: 12px">
                                <div>{{xq.Content}}</div>
                                <div style="text-align: right">{{xq.CreateBy}} {{xq.CreateTime}}</div>
                              </div>
                            </div>
                          </q-banner>
                        </q-popup-proxy>
                      </div>
                    </div>
                    <span v-if="item.SaleRemarkList && item.SaleRemarkList.length==0">暂无</span>
                  </div>
                </div>
                <div class="col">
                  <div>教务备注：</div>
                  <div class="remarks-b ">
                    <div v-if="item.TeacherRemarkList&&item.TeacherRemarkList.length>0">
                      <div>{{item.TeacherRemarkList[0].Content}}</div>
                      <div style="text-align: right">{{item.TeacherRemarkList[0].CreateBy}} {{item.TeacherRemarkList[0].CreateTime}}
                        <span class="iconfont icon-xiangxia" style="color: #2961FE;font-size: 10px" ></span>
                        <q-popup-proxy v-if="item.TeacherRemarkList&&item.TeacherRemarkList.length>0">
                          <q-banner>
                            <div style="width: 500px;" >
                              <div>教务备注</div>
                              <div  v-for="(xq,jq) in item.TeacherRemarkList" :index="jq"  style=" margin-top: 10px;background: #e6e6e6;padding: 5px;font-size: 12px">
                                <div>{{xq.Content}}</div>
                                <div style="text-align: right">{{xq.CreateBy}} {{xq.CreateTime}}</div>
                              </div>
                            </div>
                          </q-banner>
                        </q-popup-proxy>
                      </div>
                    </div>
                    <span v-if="item.TeacherRemarkList && item.TeacherRemarkList.length==0">暂无</span>
                  </div>
                </div>
                <div class="col">
                  <div>校长备注：</div>
                  <div class="remarks-b ">
                    <div v-if="item.RectorRemarkList&&item.RectorRemarkList.length>0">
                      <div>{{item.RectorRemarkList[0].Content}}</div>
                      <div style="text-align: right">{{item.RectorRemarkList[0].CreateBy}} {{item.RectorRemarkList[0].CreateTime}}
                        <span class="iconfont icon-xiangxia" style="color: #2961FE;font-size: 10px" ></span>
                        <q-popup-proxy v-if="item.RectorRemarkList&&item.RectorRemarkList.length>0">
                          <q-banner>
                            <div style="width: 500px;" >
                              <div>校长备注</div>
                              <div  v-for="(xq,jq) in item.RectorRemarkList" :index="jq"  style=" margin-top: 10px;background: #e6e6e6;padding: 5px;font-size: 12px">
                                <div>{{xq.Content}}</div>
                                <div style="text-align: right">{{xq.CreateBy}} {{xq.CreateTime}}</div>
                              </div>
                            </div>
                          </q-banner>
                        </q-popup-proxy>
                      </div>
                    </div>
                    <span v-if="item.RectorRemarkList && item.RectorRemarkList.length==0">暂无</span>
                  </div>
                </div>
                <div class="col">
                  <div>总经理备注：</div>
                  <div class="remarks-b ">
                    <div v-if="item.DirectorRemarkList&&item.DirectorRemarkList.length>0">
                      <div>{{item.DirectorRemarkList[0].Content}}</div>
                      <div style="text-align: right">{{item.DirectorRemarkList[0].CreateBy}} {{item.DirectorRemarkList[0].CreateTime}}
                        <span class="iconfont icon-xiangxia" style="color: #2961FE;font-size: 10px" ></span>
                        <q-popup-proxy v-if="item.DirectorRemarkList&&item.DirectorRemarkList.length>0">
                          <q-banner>
                            <div style="width: 500px;" >
                              <div>总经理备注</div>
                              <div  v-for="(xq,jq) in item.DirectorRemarkList" :index="jq"  style=" margin-top: 10px;background: #e6e6e6;padding: 5px;font-size: 12px">
                                <div>{{xq.Content}}</div>
                                <div style="text-align: right">{{xq.CreateBy}} {{xq.CreateTime}}</div>
                              </div>
                            </div>
                          </q-banner>
                        </q-popup-proxy>
                      </div>
                    </div>
                    <span v-if="item.DirectorRemarkList && item.DirectorRemarkList.length==0">暂无</span>
                  </div>
                </div>
                <div class="col">
                  <div>收款单据：</div>

                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

    </div>



</div>
</template>
<script>
  import {
    getMyOrderPageList,//获取订单列表
    getOrderStateEnumList,//订单状态
  } from '../../api/sale/sale';
  import {
    getSchoolDropdown,  //获取校区列表
    getTeacherDropDownList,
  } from '../../api/school/index';
  import {
    queryCourseDropdownList,
  } from '../../api/course/index'
  export default {

    components: {

    },
    data() {
      return {
        dialog:false,
        data: {},
        loading: false,
        dateList:[],//报名时间
        dateList2:[],//开班时间
        msg: {
          pageIndex: 1,
          pageSize: 10,
          OrderId:0,//订单号
          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,//平台税金
        },

        //订单状态
        OrderState: [],
        pageCount: 0,
        ClassList: [], //关联课程下拉数据
      }
    },
    created() {
      this.getOrderState();
      this.CourseList();
    },
    mounted() {
      this.getList();

    },
    methods: {
      //订单状态
      getOrderState() {
        getOrderStateEnumList({}).then(res => {
          if (res.Code == 1) {
            var tempArray = res.Data;
            if (!tempArray) {
              tempArray = [];
            }
            tempArray.unshift({
              Id: 0,
              Name: "不限"
            })
            this.OrderState = tempArray;
          }
        })
      },


      //获取课程
      CourseList() {
        queryCourseDropdownList({}).then(res => {
          if (res.Code == 1) {
            this.ClassList = res.Data;
          }
        })
      },


      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList()
      },
      resetSearch() {
        console.log(2)
        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 = '';
        }
        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 = '';
        }
        this.loading = true;
        getMyOrderPageList(this.msg).then(res => {
          this.loading = false
          this.data = res.Data.PageData
          this.pageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false
        })
      },
      gostudent(item){//跳转到学生名单
        var tempStr = '/sale/studentList?OrderId='+item.OrderId+'&ClassId='+item.ClassId;
        this.$router.push({
          path: tempStr
        });
      },





    }
  }

</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: none;
  }
  .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 table {
    padding: 10px 0 ;
    width: 100%;
    background-color: #ededed;
    border-collapse: collapse;
    border: 1px solid #d2d2d2;
    font-size: 12px;
  }
  .myOrder table th {
    background-color: #ededed;
    height: 34px;
    text-indent: 15px;
  }

  .myOrder table td {
    background-color: #ffffff;
    padding: 9px 15px;
    color: #333333;
    border: 1px solid rgba(138, 138, 138, 0.09);
    text-align: center;

  }

  .myOrder table ._color_666 {
    color: #666666;
  }

  .myOrder table tr._color_666 th {
    padding: 9px 15px;
  }

  .myOrder table th {
    background-color: #ededed;
    height: 34px;
    text-indent: 15px;
  }

  .myOrder table td {
    background-color: #ffffff;
    padding: 9px 15px;
    color: #333333;
    /*border: 1px solid #d2d2d2;*/
  }

  .myOrder table ._color_666 {
    color: #666666;
  }

  .myOrder table tr._color_666 th {
    padding: 9px 15px;
  }
  .myOrder .enrollTotalSearchTable {
    width: 100%;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-collapse: collapse;
  }
  .myOrder .enrollTotalSearchTable tr {
    /* border-bottom: 2px solid #333; */
  }

  .myOrder .enrollTotalSearchTable tr th {
    background: #bdbdbd;
    height: 30px;
    font-size: 12px;
    text-align: center;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
  }

  .myOrder .enrollTotalSearchTable tr {
    background: #fff;
    text-align: left;
  }

  .myOrder .enrollTotalSearchTable tbody tr:last-child {
    border-bottom: 2px solid #333;
  }

  .myOrder .enrollTotalSearchTable tr:first-child td:first-child {
    border-bottom: 2px solid #333;
  }

  .myOrder .enrollTotalSearchTable tr td {
    height: 66px;
    padding: 10px;
    /*border-top: 1px solid #cccccc;*/
    /*border-left: 1px solid #cccccc;*/
  }

  .myOrder .enrollTotalSearchTable tr td>img {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .myOrder .enrollTotalSearchTable tr td p {
    line-height: 20px;
  }
  .myOrder .remarks{
    font-size: 14px;
    color: #2D2D2D;
  }
  .myOrder .remarks-b{
    width: 100%;
    height: 94px;
    background: #F0F5FB;
    margin-top: 20px;
    padding: 15px;
    font-size: 12px;
    color: #999999;
  }

</style>
