<style scoped>
    @import "../../../assets/css/customerManage.css";
    * {
      font-family: "perfectFont";
    }
    .query-box .el-row .el-col {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    .query-box .el-row .el-col span {
      flex-shrink: 0;
    }
    .orderAllList {
      display: flex;
      flex-wrap: wrap;
      /* padding: 0 10px; */
      background-color: #ffffff;
    }
    .orderAllList-box {
      flex: 0 0 25%;
      background-color: #dddee0;
      display: flex;
      flex-shrink: 0;
      margin: 0 5px;
      padding: 10px;
      flex-direction: column;
      border-radius: 5px;
    }
    .orderAllList-top{
      display: flex;
      flex-wrap: wrap;
    }
    .orderAllList-top div{
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      padding-right: 20px;
    }
    .orderAllList-top span{
      font-size: 14px;
    }
    .orderAllList-top span:last-child{
      margin-left: 10px;
    }
    .red {
      color: #f72e52;
    }
    .blue {
      color: #3a7cf7;
    }
    .status-box {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }
    .status-text {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 15px;
      font-size: 13px;
    }
    .tis-k {
      width: 10px;
      height: 10px;
      margin-right: 10px;
    }
    </style>
    <template>
        <div class="customerManage">
            <div class="tools">
                <h1> {{pagesTitle=='销售'?'我的订单管理':'我的订单统计管理'}}</h1>
                <div class="rightmenu">
                    <!-- <el-button size="mini" type="primary" @click="downLoadExcel">导出</el-button> -->
                </div>
            </div>
            <div class="query-box">
                <el-row :gutter="20">
                  <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px">客人姓名</span>
                    <el-input size="mini" class="w210" v-model="msg.CustomerName" placeholder="客人姓名" clearable
                        @change="getList" @keyup.enter.native="getList"></el-input>
                  </el-col>
                  <el-col v-if="pagesTitle!='销售'" :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px"
                      >业务员</span
                    >
                    <el-select size="mini" v-model="msg.EnterId" @change="getList">
                      <el-option
                        v-for="(item, index) in EmployeeList"
                        :key="index"
                        :label="item.EmName"
                        :value="item.EmployeeId"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                    <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                        <span class="font-size-12" style="padding-right: 10px">订单号</span>
                        <el-input size="mini" class="w210" v-model="msg.OrderId" placeholder="订单号" clearable
                            @change="getList" @keyup.enter.native="getList"></el-input>
                    </el-col>
                    <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                      <span class="font-size-12" style="padding-right: 10px"
                        >订单类型</span
                      >
                      <el-select size="mini" v-model="msg.OrderType" @change="getList">
                        <el-option
                          v-for="(item, index) in OrderTypeList"
                          :key="index"
                          :label="item.Name"
                          :value="item.Id"
                        >
                        </el-option>
                      </el-select>
                    </el-col>
                  <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                      <span class="font-size-12" style="padding-right: 10px">订单状态</span>
                      <el-select size="mini" v-model="msg.OrderState" @change="getList">
                          <el-option v-for="(item,index) in OrderStatusList"
                              :key="index"
                              :label="item.Name" :value="item.Id"> </el-option>
                      </el-select>
                  </el-col>
                  <el-col :xs="7" :sm="6" :md="5" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px">收款状态</span>
                    <el-select size="mini" v-model="msg.Q_IsCollect" @change="getList">
                        <el-option v-for="(item,index) in QIsCollectList"
                            :key="index"
                            :label="item.Name" :value="item.Id"> </el-option>
                    </el-select>
                </el-col>
                  <el-col :xs="8" :sm="7" :md="6" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px">报名开始</span>
                    <el-date-picker
                        v-model="msg.StartTime"
                        @change="getList"
                        size="mini"
                        style="width: 100%;"
                        format="yyyy-MM-dd"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="开始日期">
                    </el-date-picker>
                </el-col>
                <el-col :xs="8" :sm="7" :md="6" :lg="4" :xl="3">
                    <span class="font-size-12" style="padding-right: 10px">报名结束</span>
                    <el-date-picker
                        v-model="msg.EndTime"
                        @change="getList"
                        size="mini"
                        style="width: 100%;"
                        format="yyyy-MM-dd"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="结束日期">
                    </el-date-picker>
                </el-col>
                <el-col :xs="8" :sm="7" :md="6" :lg="4" :xl="3">
                  <span class="font-size-12" style="padding-right: 10px"
                    >出发开始</span
                  >
                  <el-date-picker
                    v-model="msg.DepartSTime"
                    @change="getList"
                    size="mini"
                    style="width: 100%"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="出发开始"
                  >
                  </el-date-picker>
                </el-col>
                <el-col :xs="8" :sm="7" :md="6" :lg="4" :xl="3">
                  <span class="font-size-12" style="padding-right: 10px"
                    >出发结束</span
                  >
                  <el-date-picker
                    v-model="msg.DepartETime"
                    @change="getList"
                    size="mini"
                    style="width: 100%"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="出发结束"
                  >
                  </el-date-picker>
                </el-col>
                    <el-col :xs="8" :sm="7" :md="6" :lg="4" :xl="3">
                      <el-button icon="iconfont iconshaixuan" 
                      class="crm-btn query-btn crm-btn-mini margin-right0" 
                      @click="sceneShow= true">高级筛选</el-button>
                    </el-col>
                </el-row>
            </div>
            <div class="orderAllList">
              <template v-for="(item,index) in SummaryList">
                <div class="orderAllList-box" :key="index">
                    <div class="orderAllList-title">
                      <!-- <span>币种</span> -->
                      <span>{{item.CurrencyName}}</span>
                    </div>
                    <div class="orderAllList-top">
                    <div>
                      <span>应收</span>
                      <span>{{item.Money}}</span>
                    </div>
                    <div>
                      <span>实收</span>
                    <span>{{item.Income}}</span>
                    </div>
                    <div>
                      <span>退款</span>
                    <span>{{item.Refund}}</span>
                    </div>
                    <div>
                      <span>手续费</span>
                    <span>{{item.PlatformTax}}</span>
                    </div>
                    <div>
                      <span>成本</span>
                    <span>{{item.CostMoney}}</span>
                    </div>
                    <div>
                      <span>待收</span>
                    <span :class="{'red':item.DueInMoney>0}">{{item.DueInMoney}}</span>
                    </div>
                    <div>
                      <span>报名数</span>
                    <span class="blue">{{item.GuestNum}}人</span>
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <div class="query-box status-box"></div>
            <orderList :dataList="dataList" :pagesTitle="title" :loading="loading" @emptyMore="emptyMore"></orderList>
            <div>
                <el-pagination class="Mypagination" background @current-change="handleCurrentChange"
                    :page-sizes="[15, 30, 60, 90, 100]" :page-size="msg.pageSize" layout="total, sizes, prev, pager, next"
                    @size-change="handleSizeChange" :total="total">
                </el-pagination>
            </div>
            <!-- 高级筛选 -->
          <el-dialog :visible.sync="sceneShow" :close-on-click-modal="false" width="800px"
          custom-class="transfer-box add-box add-box2 add-scene">
          <div class="add-tit" slot="title">
            <p><span></span>高级筛选</p>
              <span icon="el-icon-close"></span>
            </div>
            <div class="query-box">
              <el-row :gutter="20">
                <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
                  <span class="font-size-12" style="padding-right: 10px">团队类型</span>
                  <el-select size="mini" v-model="msg.TravelType" @change="getList">
                      <el-option v-for="(item,index) in OrderStatusList"
                          :key="index"
                          :label="item.Name" :value="item.Id"> </el-option>
                  </el-select>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
                <span class="font-size-12" style="padding-right: 10px"
                  >完结开始</span
                >
                <el-date-picker
                  v-model="msg.FinishSTime"
                  @change="getList"
                  size="mini"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="机票完结开始"
                >
                </el-date-picker>
              </el-col>
              <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
                <span class="font-size-12" style="padding-right: 10px"
                  >完结结束</span
                >
                <el-date-picker
                  v-model="msg.FinishETime"
                  @change="getList"
                  size="mini"
                  style="width: 100%"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="机票完结结束"
                >
                </el-date-picker>
              </el-col>
              
              </el-row>
            </div>
            
          </el-dialog>
        </div>
    </template>
    <script>
    import orderList from "./orderList";
    export default {
      components: {
        orderList,
      },
      props:['pagesTitle'],
      data() {
        return {
          SummaryList: [],
          sceneShow: false,
          title: '',//op 销售
          VisaList: [
            { Name: "不限", Id: "0" },
            { Name: "未出签", Id: "1" },
            { Name: "已出签", Id: "2" },
          ],
          MultipleChoiceList: [
            //多选项目
            {
              Name: "机票",
              Id: "1",
              show: false,
            },
            {
              Name: "签证",
              Id: "2",
              show: false,
            },
            {
              Name: "地接",
              Id: "3",
              show: false,
            },
            {
              Name: "套餐",
              Id: "4",
              show: false,
            },
            {
              Name: "其他",
              Id: "5",
              show: false,
            },
          ],
          StatModel: {}, // 合计
          loading: false,
          total: 0,
          dataList: [],
          timeList: [], //时间
          msg: {
            pageIndex: 1,
            pageSize: 15,
            OrderId: "", //订单id
            GuestId: 0, //客人id
            EnterId: '0', //业务员id
            OrderState: 1, //订单状态
            Q_IsCollect: "0", //收款状态
            StartTime: "",//报名开始日期
            EndTime: "",//报名结束日期
            IsMyOrder: "1", //我的订单
            FinishSTime: "",//完结开始时间 
            FinishETime: "",//完结结束时间
            DepartSTime: "",//出发开始
            DepartETime: "",//出发结束
            TCNUM: "",//团号
            ProductName: "",//商品名称
            CustomerName: "",//客户名称
            LureEmpId: 0,//引流人员
            LineId: 0,//线路
            TravelType: 0,//跟团类型 1跟团 2当地游
            OrderType: "0",//订单类型
            IsSelectCRM: 1,//1来源crm
            IsMyOrder: 1,//1我的订单
          },
          ticketingStatusList: [], // 出票状态
          OrderStatusList: [
            {Name: '不限',Id:0},
            {Name: '正常',Id:1},
            {Name: '取消',Id:2}],
          OrderTypeList: [],
          TravelTypeList: [
            {Name: '不限',Id:0},
            {Name: '跟团',Id:1},
            {Name: '2当地游',Id:2}
          ],
          QIsCollectList: [
            { Name: "不限", Id: "0" },
            { Name: "已收齐", Id: "1" },
            { Name: "未收齐", Id: "2" },
          ],
          EmployeeList: [], // 业务员数据
          userInfo: {},
        };
      },
      watch: {
        pagesTitle: {
            handler(val, oldVal) {
                this.title = val
                if(this.title!='OP'){
                  this.msg.IsMyOrder = 1
                }else{
                  this.msg.IsMyOrder = 0
                }
            },
            immediate: true
        },
      },
      mounted() {
        this.msg.StartTime = this.getBeforeDate(31, new Date())
        this.msg.EndTime = this.formatDate(new Date(), "YYYY-MM-dd", 0)
        if(this.title!='OP'){
          this.msg.IsMyOrder = 1
        }else{
          this.msg.IsMyOrder = 0
        }
        this.userInfo = this.getLocalStorage();
        // this.msg.EnterId = this.userInfo.EmployeeId;
        // erp自动登陆传过来的参数
        if (this.$route.query.erpOrderObj) {
          let data = JSON.parse(this.$route.query.erpOrderObj);
          this.msg.OrderId = data.OrderId;
        }
        this.Employee(); //业务员
        this.getSummaryData()
        this.GetOrderTypeEnumList(); //订单状态枚举
        let $this = this;
        this.MsgBus.$on("closeGetList", function() {
          $this.getList();
        });
        $this.MsgBus.$on("closeBillMaking", function() {
          for (let i = 0; i < $this.dataList.length; i++) {
            $this.dataList[i].checkList = [];
            $this.dataList[i].selectedType = "";
            $this.dataList[i].actuallyReceived = false;
            $this.dataList[i].cost = false;
          }
          $this.emptyMore()
        });
        this.getList();
      },
      methods: {
        // 清空下拉
        emptyMore() {
            this.dataList.forEach(item => {
                return item.More = ''
            })
        },
        // 获取业务员
        Employee() {
          let userInfo = this.getLocalStorage();
          let msg = {
            RB_Group_id: userInfo.RB_Group_id,
            BranchId: -1,
            DepartmentId: 0,
            PostId: 0,
            IsLeave: 0,
          };
          this.apipost2(
            "admin_get_EmployeeGetList",
            msg,
            (res) => {
              if (res.data.resultCode == 1) {
                this.EmployeeList = res.data.data;
                let data = {
                  EmName: "不限",
                  EmployeeId: "0",
                };
                this.EmployeeList.unshift(data);
              } else {
              }
            },
            (err) => {}
          );
        },
        //点击下载
        downLoadExcel() {
          if (!this.msg.StartTime || !this.msg.EndTime) {
            let tips = "请选择开始时间、结束时间！";
            this.$confirm(tips, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {})
              .catch(() => {});
            return;
          }
          this.GetLocalFile(
            "/api/Order/GetGuestOrderStatisticsToExcel",
            this.msg,
            "订单表.xls"
          );
        },
        // 清空下拉
        emptyMore() {
          this.dataList.forEach((item) => {
            return (item.More = "");
          });
        },
        // 获取订单状态枚举
        GetOrderTypeEnumList() {
          this.apipost2("CarSingle_post_GetOrderTypeEnumList", {}, (res) => {
            if (res.data.resultCode == 1) {
              this.OrderTypeList = res.data.data;
              let data = {
                Name: "不限",
                Id: "0",
              };
              this.OrderTypeList.unshift(data);
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        getList() {
          this.loading = true;
          this.apipost2(
            "CarSingle_post_GetGuestOrderStatisticsPageList",
            this.msg,
            (res) => {
              if (res.data.resultCode == 1) {
                let data = res.data.data.pageData;
                this.dataList = data;
                this.total = res.data.data.count;
                // this.StatModel = res.data.data.StatModel;
                this.loading = false;
              } else {
                this.$message.error(res.data.message);
              }
            }
          );
        },
        getSummaryData(){
          this.apipost2(
            "CarSingle_post_GetGuestOrderStatistics",
            this.msg,
            (res) => {
              if (res.data.resultCode == 1) {
                let data = res.data.data;
                this.SummaryList = data
                // console.log(data)
              } else {
                this.$message.error(res.data.message);
              }
            }
          );
        },
        handleSizeChange(val) {
          this.msg.pageSize = val;
          this.getList();
        },
        handleCurrentChange(val) {
          this.msg.pageIndex = val;
          this.getList();
        },
      },
    };
    </script>
    