<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 @click="transfer(item)">
                      <q-item-label>转交订单</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup >
                    <q-item-section @click="alterremarks(item.SaleRemark,item,1)">
                      <q-item-label>销售备注</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup >
                    <q-item-section @click="alterremarks(item.TeacherRemark,item,2)">
                      <q-item-label>教务备注</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup >
                    <q-item-section @click="alterremarks(item.RectorRemark,item,3)">
                      <q-item-label>校长备注</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup >
                    <q-item-section @click="alterremarks(item.DirectorRemark,item,4)">
                      <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" style="color:#2961FE;">{{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.SaleRemark!=null||item.SaleRemark!=''">
                      <div>{{item.SaleRemark}}</div>
                      <div class="remarks-b-b" >
                        <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.SaleRemark==null||item.SaleRemark==''">暂无</span>
                  </div>
                </div>
                <div class="col">
                  <div>教务备注：</div>
                  <div class="remarks-b ">
                    <div v-if="item.TeacherRemark!=null||item.TeacherRemark!=''">
                      <div>{{item.TeacherRemark}}</div>
                      <div class="remarks-b-b" >
                        <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.TeacherRemark==null||item.TeacherRemark==''">暂无</span>
                  </div>
                </div>
                <div class="col">
                  <div>校长备注：</div>
                  <div class="remarks-b ">
                    <div v-if="item.RectorRemark!=null ||item.RectorRemark!=''">
                      <div>{{item.RectorRemark}}</div>
                      <div class="remarks-b-b" >
                        <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.RectorRemark==null||item.RectorRemark==''">暂无</span>
                  </div>
                </div>
                <div class="col">
                  <div>总经理备注：</div>
                  <div class="remarks-b ">
                    <div v-if="item.DirectorRemark!=null||item.DirectorRemark!=''">
                      <div>{{item.DirectorRemark}}</div>
                      <div class="remarks-b-b" >
                        <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.DirectorRemark==null||item.DirectorRemark==''">暂无</span>
                  </div>
                </div>
                <div class="col">
                  <div>收款单据：</div>

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

    </div>


<q-dialog v-model="alert">
  <q-card style="width: 400px;max-width:500px;">
    <q-card-section>
      <div class="text-h6">转交订单</div>
    </q-card-section>
    <q-card-section>
        <div class="col row" style="justify-content: center;width: 100%">
          <q-select
            class=""
            filled
            label="转交人"
            v-model="CareOfmsg.model"
            use-input
            hide-selected
            fill-input
            option-value="Id"
            option-label="EmployeeName"
            :options="options"
            @filter="filterFn"
            style="width: 250px; padding-bottom: 32px"
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  No results
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
    </q-card-section>
    <q-card-actions align="right" class="bg-white">
      <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="alert=false" />
      <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
             @click="save_t()" />
    </q-card-actions>
  </q-card>
</q-dialog>
</div>
</template>
<script>
  import {
    getMyOrderPageList,//获取订单列表
    getOrderStateEnumList,//订单状态
    updateOrderRemark,//修改订单备注
    setClassOrderCareOf,//订单转交
  } from '../../api/sale/sale';
  import {
    queryEmployee
  } from '../../api/users/user'
  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: [], //关联课程下拉数据
        alert:false,
        options:[],

        CareOfmsg:{
          model:'',
          OrderId:0,
        },
        saveLoading:false
      }
    },
    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() {
        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
        });
      },
      transfer(item){//转交
          this.alert =true;
          this.CareOfmsg.OrderId = item.OrderId
      },
      alterremarks(remark,item,type){//修改销售备注
        let msg={
          OrderId:item.OrderId,
          Type:type,
          Remark:remark
        }
        let title=''
        if(type==1){title='修改销售备注'}else if(type==2){title='修改教务备注'}else if(type==3){title='修改校长备注'}else if(type==4){title='修改总经理备注'}
        this.$q.dialog({
          title: title,
          message: '',
          prompt: {
            model: remark,
            type: 'text' // optional
          },
          cancel: true,
          persistent: true
        }).onOk(data => {
          msg.Remark = data
          updateOrderRemark(msg).then(res => {
            if(res.Code==1){
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '操作成功',
                position: 'top'
              })
              this.getList()
            }
          }).catch(() => {

          })

        }).onCancel(() => {

        }).onDismiss(() => {

        })
      },
      filterFn(val,update){
        var qMsg = {
          EmployeeName: val
        }
        update(() => {
          queryEmployee(qMsg).then(res => {
            if(res.Code==1){
              this.options = res.Data;
            }
          }).catch(() => {

          })
        })

      },
      save_t(){
        let msg = {
          OrderId:this.CareOfmsg.OrderId,
          CareOfPeople:this.CareOfmsg.model.Id
        }
        setClassOrderCareOf(msg).then(res => {
          if(res.Code==1){
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '转交成功',
              position: 'top'
            })
            this.getList()
            this.alert = false
          }
        }).catch(() => {

        })
      }





    }
  }

</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;
    position: relative;
  }
  .myOrder .remarks-b-b{
    text-align: right;position: absolute;right: 10px;bottom: 10px
  }

</style>
