<style>
@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;
}
.statistics {
  background: #fff;
  display: flex;
  justify-content: space-between;
}
.statistics-box {
  flex: 1;
  padding: 7px 16px;
  background-color: #dddee0;
  display: flex;
  flex-wrap: wrap;
  border-radius: 5px;
  margin-right: 10px;
}
.statistics-box:last-child {
  margin-right: 0;
}
.statistics-box span:first-child {
  font-weight: bold;
  margin-right: 5px;
  flex-shrink: 0;
}
.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>订单管理</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.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-input size="mini" class="w210" v-model="msg.GuestName" 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-input size="mini" class="w210" v-model="msg.StartCityName" 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"
                    filterable
                    v-model="msg.EnterID" 
                    @change="getList" 
                    clearable
                    placeholder="业务员">
                        <el-option 
                            v-for="item in EmployeeList"
                            :label='item.EmName'
                            :value='item.EmployeeId'
                            :key='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-select 
                    size="mini"
                    filterable
                    v-model="msg.CreateBy" 
                    @change="getList" 
                    clearable
                    placeholder="引流人员">
                        <el-option 
                            v-for="item in EmployeeList"
                            :label='item.EmName'
                            :value='item.EmployeeId'
                            :key='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-select size="mini" v-model="msg.TicketStatus" @change="getList">
                        <el-option v-for="(item,index) in ticketingStatusList"
                            :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.VisaStatus" @change="getList">
                      <el-option
                        v-for="(item, index) in VisaList"
                        :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.OrderStatus" @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"
                        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.EndTime"
                        @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.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="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.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>
        <div class="statistics">
            <div class="statistics-box">
                <span>应收</span>
                <span>{{StatModel.Money}}</span>
            </div>
            <div class="statistics-box">
                <span>实收</span>
                <span>{{StatModel.IncomeMoney}}</span>
            </div>
            <div class="statistics-box">
                <span>退款</span>
                <span class="red">{{StatModel.BackMoney}}</span>
            </div>
            <div class="statistics-box">
                <span>手续费</span>
                <span>{{StatModel.TaxMoney}}</span>
            </div>
            <div class="statistics-box">
                <span>成本</span>
                <span>{{StatModel.PayMoney}}</span>
            </div>
            <div class="statistics-box">
                <span>待收</span>
                <span>{{StatModel.DueinMoney}}</span>
            </div>
            <div class="statistics-box">
                <span>报名数</span>
                <span class="blue">{{StatModel.NorNumber}}人</span>
            </div>
            <div class="statistics-box">
                <span>取消数</span>
                <span class="red">{{StatModel.CancelNum}}人</span>
            </div>
        </div>
        <div class="query-box status-box">
            <div class="status-text">
                <div class="tis-k" style="background: #2961FE"></div>
                <span>已打单</span>
            </div>
            <div class="status-text">
                <div class="tis-k" style="background: #F28C1D"></div>
                <span>银行出纳已审核</span>
            </div>
            <div class="status-text">
                <div class="tis-k" style="background: #3FC4FF"></div>
                <span>已通过</span>
            </div>
        </div>
        <orderList :dataList="dataList" :loading="loading" @emptyMore="emptyMore" :superManage="superManage"></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>
    </div>
</template>
<script>
import orderList from "./orderList";
export default {
  components: {
    orderList,
  },
  data() {
    return {
      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,
        },
      ],
      superManage: "订单统计",
      StatModel: {}, // 合计
      loading: false,
      total: 0,
      dataList: [],
      timeList: [], //时间
      msg: {
        pageIndex: 1,
        pageSize: 15,
        OrderId: "", //订单id
        GuestName: "", //客人姓名
        GuestId: "", //客人id
        StartCityName: "", //出发城市
        EndCityName: "", //到达城市
        EnterID: "", //业务员id
        CreateBy: "", //引流员id
        TicketStatus: "0", //出票状态
        VisaStatus: "0", //出签状态
        OrderStatus: "0", //订单状态
        Q_IsCollect: "0", //收款状态
        StartTime: "", //订单开始时间
        EndTime: "", //订单结束时间
        OrderType: "", //订单类型
        FinishSTime: "",//完结开始时间 
        FinishETime: "",//完结结束时间
      },
      ticketingStatusList: [], // 出票状态
      OrderStatusList: [],
      QIsCollectList: [
        { Name: "不限", Id: "0" },
        { Name: "已收齐", Id: "1" },
        { Name: "未收齐", Id: "2" },
      ],
      EmployeeList: [],
    };
  },
  mounted() {
    // erp自动登陆传过来的参数
    if (this.$route.query.erpOrderObj) {
      let data = JSON.parse(this.$route.query.erpOrderObj);
      this.msg.OrderId = data.OrderId;
    }
    //接收订单统计传过来的参数
    if (this.$route.query.OrderId) {
      this.msg.OrderId = this.$route.query.OrderId;
    }
    this.Employee(); //业务员
    this.GetTicketStatusEnumList(); //出票枚举
    this.GetOrderStatusEnumList(); //订单状态枚举
    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.getList();
  },
  methods: {
    // 获取业务员
    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;
          } 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 = "");
      });
    },
    // 获取订单状态枚举
    GetOrderStatusEnumList() {
      this.apipost("/api/Order/GetOrderStatusEnumList", {}, (res) => {
        if (res.data.resultCode == 1) {
          this.OrderStatusList = res.data.data;
          let data = {
            Name: "不限",
            Id: "0",
          };
          this.OrderStatusList.unshift(data);
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    // 获取出票状态枚举
    GetTicketStatusEnumList() {
      this.apipost("/api/Order/GetTicketStatusEnumList", {}, (res) => {
        if (res.data.resultCode == 1) {
          this.ticketingStatusList = res.data.data;
          let data = {
            Name: "全部",
            Id: "0",
          };
          this.ticketingStatusList.unshift(data);
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    getList() {
      this.loading = true;
      this.apipost(
        "/api/Order/GetGuestOrderStatisticsPageList",
        this.msg,
        (res) => {
          if (res.data.resultCode == 1) {
            let data = res.data.data.Data.pageData;
            let addList = function(arr) {
              arr.forEach((item) => {
                item.More = "";
                item.actuallyReceived = false;
                item.cost = false;
                item.selectedType = "";
                item.checkList = [];
                item.MultipleChoiceList = [];
                item.MoreList = [
                  {
                    Name: "取消订单",
                    Id: "1",
                    show:
                      item.OrderStatus != 2 &&
                      item.OrderStatus != 5 &&
                      item.OrderStatus != 6
                        ? true
                        : false,
                  },
                  {
                    Name: "订单转交",
                    Id: "2",
                    show: true,
                  },
                  {
                    Name: "修改订单金额",
                    Id: "3",
                    show:
                      item.OrderStatus != 2 &&
                      item.OrderStatus != 5 &&
                      item.OrderStatus != 6 &&
                      (item.TicketStatus == 1 || item.VisaStatus == 1)
                        ? true
                        : false,
                  },
                  {
                    Name: "修改出票状态",
                    Id: "4",
                    show:
                      item.OrderStatus != 2 &&
                      item.OrderStatus != 5 &&
                      item.OrderStatus != 6 &&
                      item.TicketStatus < 3
                        ? true
                        : false,
                  },
                  {
                    Name: "修改出签状态",
                    Id: "5",
                    show:
                      item.OrderStatus != 2 &&
                      item.OrderStatus != 5 &&
                      item.OrderStatus != 6 &&
                      item.VisaStatus == 1
                        ? true
                        : false,
                  },
                  {
                    Name: "订单收损",
                    Id: "8",
                    show:
                      item.OrderStatus != 2 &&
                      item.OrderStatus != 5 &&
                      item.OrderStatus != 6
                        ? true
                        : false,
                  },
                  {
                    Name: "收损完结",
                    Id: "9",
                    show:
                      (item.OrderStatus == 1 || item.OrderStatus == 3 || item.OrderStatus == 4 || item.OrderStatus == 5)&&
                      item.DueinMoney == 0
                        ? true
                        : false,
                  },
                  {
                      Name: '订单完结',
                      Id: '6',
                      show: item.OrderStatus == 1 && item.DueinMoney == 0 ?
                          true : false
                  },
                  {
                    Name: "操作日志",
                    Id: "7",
                    show: true,
                  },
                ];
              });
            };
            addList(data);
            data.forEach((item) => {
              if (item.OrderType) {
                let list = item.OrderType && item.OrderType.split(",");
                for (let j = 0; j < list.length; j++) {
                  for (let i = 0; i < this.MultipleChoiceList.length; i++) {
                    if (list[j] == this.MultipleChoiceList[i].Id) {
                      item.MultipleChoiceList.push(
                        JSON.parse(JSON.stringify(this.MultipleChoiceList[i]))
                      );
                    }
                  }
                }
              }
              if (item.LossList.length > 0) {
                for (let i = 0; i < item.LossList.length; i++) {
                  for (let j = 0; j < item.MultipleChoiceList.length; j++) {
                    if (
                      item.LossList[i].OrderType ==
                      item.MultipleChoiceList[j].Id
                    ) {
                      item.MultipleChoiceList[j].show = true;
                    }
                  }
                }
              }
            });
            this.dataList = res.data.data.Data.pageData;
            this.total = res.data.data.Data.count;
            this.StatModel = res.data.data.StatModel;
            this.loading = false;
          } else {
            this.$message.error(res.data.message);
          }
        }
      );
    },
    handleSizeChange(val) {
      this.msg.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
  },
};
</script>
