<style scoped>
  .groupTourOrder_count_item>p>span {
    margin: 0;
  }

  .color_red_order {
    color: red;
  }

  .HT_total {
    display: flex;
    flex-direction: column;
    margin: 5px 0;
  }

  .HT_total p {
    width: 100%;
    display: block;
  }

  .HT_total p>span {
    float: left;
    display: inline-block;
    width: 25%;
  }

  .TC_leftSearch>div {
    padding: 5px 0;
  }

  .groupTourOrderByTuan_ico {
    margin-left: 5px;
  }

  .groupTourOrderByTuan_ico>i {
    display: inline-block;
    margin: 0 5px 0 0;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    vertical-align: middle;
  }

  .HotelWorkList .has-gutter tr th,
  .el-table th.is-leaf {
    background-color: #eaeaea !important;
  }

  .HotelWorkList .HW_hotelDialog {
    width: 900px;
  }

  .HotelWorkList .Hw_tableOne {
    width: 100%;
    height: 40px;
    background-color: #eaeaea;
  }

  .HotelWorkList .Hw_tableOne th {
    text-align: center;
  }

  .HotelWorkList .HotelWorkInput .el-input {
    width: 223px;
  }

  .HotelWorkList .HworkInput .el-input {
    width: 210px;
  }

  /deep/.query-box li span>em {
    min-width: 60px;
  }

</style>

<template>
  <div class="HotelWorkList">
    <div class="query-box HotelWorkInput" style="border-bottom: none">
      <ul>
        <li>
          <span>
            <em>{{$t('sm.company')}}</em>
            <el-select filterable v-model="queryMsg.RB_Branch_Id" @change="getDepartment">
              <el-option :value="-1" :label="$t('pub.unlimitedSel')"></el-option>
              <el-option v-for="item in CompanyList" :label="item.BName" :value="item.Id" :key="item.Id"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('admin.admin_Department')}}</em>
            <el-select filterable v-model="queryMsg.RB_Department_Id" @change="getEmployee">
              <el-option :value="0" :label="$t('pub.unlimitedSel')"></el-option>
              <el-option v-for="item in DepartmentList" :label="item.DepartmentName" :value="item.DepartmentID"
                :key="item.DepartmentID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('salesModule.Personnel')}}</em>
            <el-select filterable v-model="queryMsg.EnterID" class>
              <el-option :value="0" :label="$t('pub.unlimitedSel')"></el-option>
              <el-option v-for="item in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
                :key="item.EmployeeId"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>出团日期</em>
            <el-date-picker v-model="queryMsg.tStartDates" type="daterange" range-separator="-"
              :start-placeholder="$t('hotel.hotel_StartDate')" :end-placeholder="$t('hotel.hotel_EndDate')"
              value-format="yyyy-MM-dd" :picker-options="pickerOptions"></el-date-picker>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('fnc.bmriqi')}}</em>
            <el-date-picker v-model="queryMsg.qStartDates" type="daterange" range-separator="-"
              :start-placeholder="$t('hotel.hotel_StartDate')" :end-placeholder="$t('hotel.hotel_EndDate')"
              value-format="yyyy-MM-dd"></el-date-picker>
          </span>
        </li>
        <li>
          <input type="button" class="normalBtn" :value="$t('pub.searchBtn')"
            @click.stop="(msg.pageIndex = 1), (currentPage = 1), GetList()" />
        </li>
      </ul>
    </div>
    <!-- 统计版块 -->
    <div class="groupTourOrder_count">
      <el-row :gutter="20">
        <template v-for="(item, index) in SummaryList">
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <div class="groupTourOrder_count_item HT_total">
              <div>
                <span>{{ item.CurrencyName }}</span>
              </div>
              <p>
                <span>销售额：
                  {{ (item.SumPreferPrice|| 0).toFixed(2) }}
                </span>
                <span>收款金额：
                  {{ (item.Income|| 0).toFixed(2) }}
                </span>
                <!-- <span
                  >手续费：
                  {{ item.PlatformTax.toFixed(2) }}
                </span> -->
                <span>未收金额：
                  {{ (item.notInCome|| 0).toFixed(2) }}
                </span>
                <span>正常收客数：
                  {{ item.TotalGuestNum }}
                </span>
                <!-- <span
                  >单项收客数：
                  {{ item.ZaiTuMoney }}
                </span> -->
              </p>
            </div>
          </el-col>
        </template>
      </el-row>
    </div>
    <OrderList :pagesTitle="Title" :OrderList="OrderList" v-loading="loading" @success="(msg.pageIndex = 1), GetList()">
    </OrderList>
    <div v-if="OrderList && OrderList.length == 0" style="text-align: center; padding: 100px">
      {{$t('system.content_noData')}}
    </div>
    <el-pagination v-if="OrderList && OrderList.length > 0" background @current-change="handleCurrentChange"
      :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size="msg.pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
  import OrderList from "./OrderList.vue";
  export default {
    props: ["pagesTitle", "dataObj"],
    components: {
      OrderList
    },
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time < new Date("2023-01-01");
          },
        },
        CompanyList: [],
        DepartmentList: [],
        showWarningSearch: false,
        TotalMsg: null,
        MultipleChoiceList: [
          //多选项目
          {
            Name: "机票",
            Id: "1",
          },
          {
            Name: "签证",
            Id: "2",
          },
          {
            Name: "地接",
            Id: "3",
          },
          {
            Name: "套餐",
            Id: "4",
          },
          {
            Name: "其他",
            Id: "5",
          },
        ],
        userInfo: {},
        HotelList: [],
        loading: false,
        isShow: false,
        outerVisible: false,
        //订单列表
        OrderList: [],
        //默认高度
        tableHeight: 0,
        queryMsg: {
          RB_Branch_Id: -1,
          RB_Department_Id: 0,
          EnterID: 0,
          tStartDates: [],
          qStartDates: [],
          QueryType: 0,
        },
        getCompanyMsg: {
          // 公司
          RB_Group_Id: "0",
          Status: "0",
        },
        getDepartmentMsg: {
          // 部门
          RB_Group_Id: "",
          RB_Branch_Id: "",
          Status: 0,
          ParentId: -1,
          Tier: 0,
        },
        employeeMsg: {
          // 员工
          GroupId: "",
          BranchId: -1,
          DepartmentId: 0,
          PostId: 0,
          IsLeave: 0,
        },
        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: 0, //1来源crm
          IsMyOrder: 1, //1我的订单
        },
        total: 0,
        currentPage: 1,
        OrderTypeList: [],
        OrderStateType: [{
            Name: "接机",
            ID: "1"
          },
          {
            Name: "送机",
            ID: "2"
          },
          {
            Name: "包车",
            ID: "3"
          },
        ],
        orderType: [{
            Name: this.$t("OrderList.orderType.tour"),
            ID: "1"
          },
          {
            Name: this.$t("OrderList.orderType.guest"),
            ID: "2"
          },
        ],
        Datelist: "",
        DatelistUse: "",
        DatelistBM: [],
        Title: "",
        EmployeeList: [],
        employeeMsg: {
          // 员工
          GroupId: "",
          BranchId: -1,
          DepartmentId: 0,
          PostId: 0,
          IsLeave: 0,
        },
        SummaryList: [],
      };
    },
    watch: {
      pagesTitle(val, oldval) {
        this.Title = val;
      },
      dataObj: {
        handler(val, oldVal) {
          this.msg.OrderType = val.tab;
          this.msg.OrderId = val.OrderId;
          this.GetList();
        },
        deep: true,
      },
    },
    methods: {
      getCompanyList() {
        //获取公司列表
        this.apipost(
          "admin_get_BranchGetList",
          this.getCompanyMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.CompanyList = res.data.data;
            } else {}
          },
          (err) => {}
        );
      },
      getDepartment(bool) {
        //部门
        if (bool) {
          this.queryMsg.RB_Department_Id = 0;
          this.queryMsg.EnterID = 0;
          this.DepartmentList = [];
          this.EmployeeList = [];
        }
        this.getDepartmentMsg.RB_Branch_Id = this.queryMsg.RB_Branch_Id;
        if (this.queryMsg.RB_Branch_Id != -1) {
          this.apipost(
            "admin_get_DepartmentGetList",
            this.getDepartmentMsg,
            (res) => {
              if (res.data.resultCode == 1) {
                this.DepartmentList = res.data.data;
              }
            },
            (err) => {}
          );
        }
      },
      getEmployee(bool) {
        if (bool) {
          this.queryMsg.EnterID = 0;
          this.EmployeeList = [];
        }
        this.employeeMsg.DepartmentId = this.queryMsg.RB_Department_Id;
        //员工
        this.apipost(
          "admin_get_EmployeeGetList",
          this.employeeMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.EmployeeList = res.data.data;
            }
          },
          (err) => {}
        );
      },
      GetOrderTypeEnumList() {
        this.apipost("CarSingle_post_GetOrderTypeEnumList", {}, (res) => {
          if (res.data.resultCode == 1) {
            this.OrderTypeList = res.data.data;
            let data = {
              Name: this.$t('pub.unlimitedSel'),
              Id: "0",
            };
            this.OrderTypeList.unshift(data);
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      getDatesBM() {
        if (this.DatelistBM) {
          this.msg.StartTime = this.DatelistBM[0];
          this.msg.EndTime = this.DatelistBM[1];
        }
        if (!this.DatelistBM) {
          this.msg.StartTime = "";
          this.msg.EndTime = "";
        }
      },
      getDatesUse() {
        if (this.DatelistUse) {
          this.msg.DepartSTime = this.DatelistUse[0];
          this.msg.DepartETime = this.DatelistUse[1];
        }
        if (!this.DatelistUse) {
          this.msg.DepartSTime = "";
          this.msg.DepartETime = "";
        }
      },
      getDates() {
        if (this.Datelist) {
          this.msg.FinishSTime = this.Datelist[0];
          this.msg.FinishETime = this.Datelist[1];
        }
        if (!this.Datelist) {
          this.msg.FinishSTime = "";
          this.msg.FinishETime = "";
        }
      },
      setEdate() {
        return this.addMoth(new Date().Format("yyyy-MM-dd"), 1);
      },
      addMoth(d, m) {
        let ds = d.split("-"),
          _d = ds[2] - 0;
        let nextM = new Date(ds[0], ds[1] - 1 + m + 1, 0);
        let max = nextM.getDate();
        d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
        return d.toLocaleDateString().match(/\d+/g).join("-");
      },
      getyMDOne() {
        let myDate = new Date();
        let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,8代表1月)
        let myToday = myDate.getDate(); //获取当前日(1-31)
        myMonth = myMonth > 9 ? myMonth : "0" + myMonth;
        myToday = myToday > 9 ? myToday : "0" + myToday;
        let nowDate = myYear + "-" + myMonth + "-01";
        return nowDate;
      },
      getyMDTwo() {
        let myDate = new Date();
        let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,8代表1月)
        let myToday = myDate.getDate(); //获取当前日(1-31)
        myMonth = myMonth > 9 ? myMonth : "0" + myMonth;
        myToday = myToday > 9 ? myToday : "0" + myToday;
        let nowDate = myYear + "-" + myMonth + "-" + myToday;
        return nowDate;
      },
      getParams() {
        let param = {
          pageIndex: this.msg.pageIndex,
          pageSize: 15,
          RB_Branch_Id: this.queryMsg.RB_Branch_Id == -1 ? null : this.queryMsg.RB_Branch_Id,
          RB_Department_Id: this.queryMsg.RB_Department_Id == 0 ?
            null :
            this.queryMsg.RB_Department_Id,
          EnterID: this.queryMsg.EnterID == 0 ? null : this.queryMsg.EnterID,
          QStartDate: this.queryMsg.tStartDates && this.queryMsg.tStartDates.length == 2 ?
            this.queryMsg.tStartDates[0] :
            null,
          QEndDate: this.queryMsg.tStartDates && this.queryMsg.tStartDates.length == 2 ?
            this.queryMsg.tStartDates[1] :
            null,
          CStartDate: this.queryMsg.qStartDates && this.queryMsg.qStartDates.length == 2 ?
            this.queryMsg.qStartDates[0] :
            null,
          CEndDate: this.queryMsg.qStartDates && this.queryMsg.qStartDates.length == 2 ?
            this.queryMsg.qStartDates[1] :
            null,
          GroupBy: this.queryMsg.GroupBy,
          QueryType: this.queryMsg.QueryType,
        };
        if (!param.QStartDate) {
          param.QStartDate = "2023-01-01";
        }
        return param;
      },
      //获取酒店订单列表
      GetList() {
        this.loading = true;
        let url = "sellorder_get_GetSalesVolumeRankDetail";
        let param = this.getParams();
        this.apipost(
          url,
          param,
          (res) => {
            if (res.data.resultCode == 1) {
              this.getSummaryData();
              let data = res.data.data.pageData;
              this.OrderList = data;
              this.total = res.data.data.count;
              //   this.TotalMsg = res.data.data.StatModel
            } else {
              this.Error(res.data.message);
            }
            this.loading = false;
          },
          (err) => {
            this.loading = false;
          }
        );
      },
      getSummaryData() {
        if (this.msg.pageIndex != 1) {
          return
        }
        let param = this.getParams();
        delete param.pageIndex
        delete param.pageSize
        this.apipost(
          "sellorder_get_GetSalesVolumeRankDetailStatistics",
          param,
          (res) => {
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              this.SummaryList = [data];
            } else {
              this.$message.error(res.data.message);
            }
          }
        );
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.GetList();
      },
      com_onresize() {
        //clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，
        var contentsHeight = document.body.clientHeight;
        var h = contentsHeight - 50 - 180 - 40;
        if (h < 110) {
          return;
        }
        //设置table的行高
        this.tableHeight = h;
      },
    },
    created() {
      if (this.$route.query.OrderId) {
        this.msg.OrderId = this.$route.query.OrderId;
      }
      let userInfo = this.getLocalStorage();
      this.employeeMsg.GroupId = userInfo.RB_Group_id; //集团ID
    },
    mounted() {
      this.getCompanyMsg.RB_Group_Id = this.getLocalStorage().RB_Group_id;
      this.getDepartmentMsg.RB_Group_Id = this.getLocalStorage().RB_Group_id;
      this.employeeMsg.employeeMsg = this.getLocalStorage().RB_Group_id;
      const {
        BranchId = 0, EnterID = 0, RB_Department_Id = 0, tStartDates = [], qStartDates = []
      } = this.$route.query;
      this.queryMsg.RB_Branch_Id = Number(BranchId);
      this.queryMsg.EnterID = Number(EnterID);
      this.queryMsg.RB_Department_Id = Number(RB_Department_Id);
      this.queryMsg.tStartDates = tStartDates;
      this.queryMsg.qStartDates = qStartDates;
      this.getCompanyList();
      if (this.queryMsg.RB_Branch_Id >= 0) {
        this.getDepartment(false);
      }
      if (this.queryMsg.RB_Department_Id) {
        this.getEmployee(false);
      }
      this.Title = this.pagesTitle;
      this.msg.StartTime = this.getBeforeDate(0, new Date());
      this.msg.EndTime = this.getBeforeDate(0, new Date());
      this.DatelistBM = [new Date(this.msg.StartTime), new Date()];
      // this.GetOrderStatusEnumList()//订单状态
      // this.GetTicketStatusEnumList()//出票状态
      this.GetOrderTypeEnumList();
      this.Datelist = this.getyMDOne();
      this.userInfo = this.getLocalStorage();
      this.GetList();

      //自适应高度调节
      this.com_onresize();
      window.onresize = () => {
        this.com_onresize();
      };
    },
  };

</script>
