<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 {
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
  }

  .orderAllList-box {
    flex: 1;
    max-width: 600px;
    min-width: 500px;
    background-color: #dddee0;
    display: flex;
    margin: 0 5px;
    padding: 10px;
    margin-bottom: 5px;
    flex-direction: column;
    border-radius: 5px;
  }

  .orderAllList-top {}

  .orderAllList-top div {
    width: 25%;
    float: left;
  }

  .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="handleCurrentChange(1)" @keyup.enter.native="handleCurrentChange(1)"></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="handleCurrentChange(1)">
            <el-option v-for="(item, index) in EmployeeList" :key="index" :label="item.EmName" :value="item.EmployeeId">
            </el-option>
          </el-select>
        </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.LureEmpId" @change="handleCurrentChange(1)">
            <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.ProductName" placeholder="商品名称" clearable
            @change="handleCurrentChange(1)" @keyup.enter.native="handleCurrentChange(1)"></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-input size="mini" class="w210" v-model="msg.OrderId" placeholder="订单号" clearable
            @change="handleCurrentChange(1)" @keyup.enter.native="handleCurrentChange(1)"></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-input size="mini" class="w210" v-model="msg.TCNUM" placeholder="团号/单号" clearable
            @change="handleCurrentChange(1)" @keyup.enter.native="handleCurrentChange(1)"></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="handleCurrentChange(1)">
            <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="handleCurrentChange(1)">
            <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="handleCurrentChange(1)">
            <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="handleCurrentChange(1)" 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="handleCurrentChange(1)" 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="handleCurrentChange(1)" 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="handleCurrentChange(1)" 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.PreferTipAmount}}</span>
            </div>
            <div>
              <span>实收小费</span>
              <span>{{item.IncomeTipAmount}}</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="{'red':item.OrderProfit>0}">{{item.OrderProfit}}</span>
            </div>
            <div>
              <span>预期销售额</span>
              <span>{{item.OrderSalesMoney}}</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.LineId" @change="handleCurrentChange(1)">
              <el-option v-for="(item,index) in LineList" :key="index" :label="item.LineName" :value="item.LineID">
              </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-select size="mini" v-model="msg.TravelType" @change="handleCurrentChange(1)">
              <el-option v-for="(item,index) in TravelTypeList" :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="handleCurrentChange(1)" size="mini" 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="handleCurrentChange(1)" size="mini" 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: "", //报名结束日期
          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: '当地游',
            Id: 2
          }
        ],
        QIsCollectList: [{
            Name: "不限",
            Id: "0"
          },
          {
            Name: "已收齐",
            Id: "1"
          },
          {
            Name: "未收齐",
            Id: "2"
          },
        ],
        EmployeeList: [], // 业务员数据
        userInfo: {},
        LineList: [],
      };
    },
    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.getLineList(); //线路
      this.Employee(); //业务员

      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: {
      getLineList() {
        this.apipost2(
          "line_post_GetAllList", {
            LineDirection: 0,
          },
          (res) => {
            if (res.data.resultCode == 1) {
              this.LineList = res.data.data;
              let data = {
                LineName: "不限",
                LineID: "0",
              };
              this.LineList.unshift(data);
            } else {
              this.$message.error(res.data.message);
            }
          }
        );
      },
      // 清空下拉
      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;
        }
        let userInfo = this.getLocalStorage();
        let msg = JSON.parse(JSON.stringify(this.msg))
        msg.uid = userInfo.EmployeeId
        this.GetLocalFile2(
          "GuestOrder_post_GetDownLodGuestOrderStatisticsList",
          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) {
              this.getSummaryData()
              let data = res.data.data.pageData;
              this.dataList = data;
              this.total = res.data.data.count;
              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
            } else {
              this.$message.error(res.data.message);
            }
          }
        );
      },
      handleSizeChange(val) {
        this.msg.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
    },
  };
</script>