<template>
  <div class="content">
    <div class="header">
      <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
              @clear="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.GusetName"
              placeholder="客人姓名"
              clearable
              @clear="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
              @clear="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" 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.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"
              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"
              type="date"
              placeholder="结束日期"
            >
            </el-date-picker>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        :border="true"
        :fit="true"
        v-loading="loading"
        :cell-style="columenStyle"
        :header-cell-style="getRowClass"
      >
        <el-table-column fixed prop="EnterName" label="业务员">
          <template slot-scope="scope">
            <div v-if="scope.row.OrderId === 0">
              合计
            </div>
            <div v-else>
              {{scope.row.EnterName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed prop="OrderId" label="订单号">
           <template slot-scope="scope">
            <div v-if="scope.row.OrderId === 0">
              -
            </div>
            <div v-else @click="toOrder(scope.row.OrderId)" class="hover">
              {{scope.row.OrderId}}
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed prop="GuestName" label="客人名">
           <template slot-scope="scope">
            <div v-if="scope.row.OrderId === 0">
              -
            </div>
            <div v-else>
              {{scope.row.GuestName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="性质">
          <template slot-scope="scope">
             <div v-if="scope.row.OrderId === 0">
              -
            </div>
            <div v-else>
              <span v-if="scope.row.GuestCount == 1">单人</span>
            <span v-else>多人</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="StartCityName" label="行程时间" width="120">
            <template slot-scope="scope">
            <div v-if="scope.row.OrderId === 0">
              -
            </div>
            <div v-else>
              {{scope.row.StartCityName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="GuestCount" label="人数"></el-table-column>
        <el-table-column prop="TicketStatusName" label="状态">
           <template slot-scope="scope">
            <div v-if="scope.row.OrderId === 0">
              -
            </div>
            <div v-else>
              {{scope.row.TicketStatusName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="营业收入" width="960">
          <el-table-column prop="TicketMoney" label="单机票款" width="100">
            <template slot-scope="scope">

              <p v-if="scope.row.TicketMoney == 0">-</p>
              <p v-else><span>{{ scope.row.TicketMoney }}</span
              >/<span
                :style="{
                  color:
                    scope.row.TicketMoney > scope.row.TicketIncome
                      ? 'red'
                      : '#000',
                }"
                >{{ scope.row.TicketIncome }}</span></p>
              
            </template>
          </el-table-column>
          <el-table-column label="单签证款" width="100">
            <template slot-scope="scope">

              <p v-if="scope.row.VisaMoney == 0">-</p>
              <p v-else> <span>{{ scope.row.VisaMoney }}</span>/<span
                :style="{
                  color:
                    scope.row.VisaMoney > scope.row.VisaIncome ? 'red' : '#000',
                }">{{ scope.row.VisaIncome }}</span>
                </p>
              
            </template>
          </el-table-column>
          <el-table-column label="单地接款" width="100">
            <template slot-scope="scope">

              <p v-if="scope.row.DiJieMoney == 0">-</p>
              <p v-else>   <span>{{ scope.row.DiJieMoney }}</span
              >/<span
                :style="{
                  color:
                    scope.row.DiJieMoney > scope.row.DiJieIncome
                      ? 'red'
                      : '#000',
                }"
                >{{ scope.row.DiJieIncome }}</span
              > </p>
            </template>
          </el-table-column>
          <el-table-column prop="MealMoney" label="套餐款" width="120">
            <template slot-scope="scope">

              <p v-if="scope.row.MealMoney == 0">-</p>
              <p v-else>
                 <span>{{ scope.row.MealMoney }}</span
              >/<span
                :style="{
                  color:
                    scope.row.MealMoney > scope.row.MealIncome ? 'red' : '#000',
                }"
                >{{ scope.row.MealIncome }}</span
              >
              </p>

            </template>
          </el-table-column>
          <el-table-column prop="OtherIncome" label="其他收款" width="100">
          </el-table-column>
          <el-table-column prop="Money" label="合计应收款" width="100">
          </el-table-column>
          <el-table-column prop="IncomeMoney" label="已收款"> </el-table-column>
          <el-table-column prop="DueinMoney" label="未收款">
            <template slot-scope="scope">
              <span :style="{color:scope.row.DueinMoney>0?'red':'#000'}">{{scope.row.DueinMoney}}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="营业成本">
          <el-table-column prop="TicketCost" label="机票成本">
          </el-table-column>
          <el-table-column prop="VisaCost" label="签证成本">
          </el-table-column>
          <el-table-column prop="DiJieCost" label="地接成本"> </el-table-column>
          <el-table-column prop="MealCost" label="套餐成本"> </el-table-column>
          <el-table-column prop="OtherCost" label="其他成本"> </el-table-column>
          <el-table-column prop="MealCost" label="合计数"> </el-table-column>
        </el-table-column>
        <el-table-column prop="BackMoney" label="退款费用"> </el-table-column>
        <el-table-column prop="TaxMoney" label="平台费用"> </el-table-column>
        <el-table-column prop="Profit" label="订单毛利"> 
          <template slot-scope="scope">
            <span :style="{color:scope.row.Profit<=0?'red':'#000'}">
            {{scope.row.Profit}}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="ProfitRate" label="毛利率">
          <template slot-scope="scope">
            <div>
              {{scope.row.ProfitRate}}%
            </div >
          </template>
        </el-table-column>
      </el-table>

        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[30, 60,90,100]"
      :page-size="msg.pageSize"
      layout="total,prev,sizes,pager,next"
      :total="total"
      style="margin-top: 12px; float: right">
    </el-pagination>

    </div>
  </div>
</template>

<script>
export default {
  created() {
    // erp自动登陆传过来的参数
    if (this.$route.query.erpOrderObj) {
      let data = JSON.parse(this.$route.query.erpOrderObj);
      this.msg.OrderId = data.OrderId;
    }
    this.Employee(); //业务员
    this.GetTicketStatusEnumList(); //出票枚举
    //监听
    let $this = this;
    this.MsgBus.$on("closeGetList", function () {
      $this.getList();
    });
    this.getList();
  },
  data() {
    return {
      loading: false,
      ticketingStatusList: [], // 出票状态
      total: 0,
      msg: {
        pageIndex: 1,
        pageSize: 30,
        OrderId: "", //订单id
        GusetName: "", //客人姓名
        GuestId: "", //客人id
        StartCityName: "", //出行概述
        EnterID: "", //业务员id
        TicketStatus: "0", //出票状态
        OrderStatus: "1", //订单状态
        Q_IsCollect: "0", //收款状态
        StartTime: "",
        EndTime: "",
      },
      OrderStatusList: [
        { Name: "正常", Id: "1" },
        { Name: "取消", Id: "2" },
      ],
      QIsCollectList: [
        { Name: "不限", Id: "0" },
        { Name: "已收齐", Id: "1" },
        { Name: "未收齐", Id: "2" },
      ],
      EmployeeList: [],
      tableData: [],
      StatModel:[]
    };
  },
  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) => {}
      );
    },
    // 获取出票状态枚举
    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/GetCRMGuestOrderCheckPageList_v2",
        this.msg,
        (res) => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            let data = res.data.data.pageData;
            this.tableData = data;
            this.msg.pageSize = res.data.data.pageSize
            console.log(this.msg.pageSize)
            this.total = res.data.data.count;
            console.log(this.total)
          } else {
            this.$message.error(res.data.message);
          }
        }
      );

    },
    //分页
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.msg.pageSize = val;
      this.getList();
    },
    //导出
    downLoadExcel() {
      if (!this.msg.StartTime || !this.msg.EndTime) {
        let tips = "请选择开始时间、结束时间！";
        this.$confirm(tips, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {})
          .catch(() => {});
        return;
      }
      this.GetLocalFile(
        "/api/Order/GetCRMGuestOrderCheckToExcel",
        this.msg,
        "订单表.xls"
      );
    },
    //订单跳转
    toOrder(val){
      this.$router.push({path:'/customerOrder',query:{OrderId:val}})
    },
    //改变状态背景颜色
    columenStyle({columnIndex}){
      if(columnIndex == 6 ){
        return "background:#f0f5fb"
      }
    },
     //表格居中
    getRowClass({rowIndex,columnIndex}) {
      return "text-align:center";
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  .header {
    .tools {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
    }
    .query-box {
      .el-row {
        .el-col {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          span {
            flex-shrink: 0;
          }
        }
      }
    }
  }
  .hover:hover{
    cursor: pointer;
    color: skyblue;
  }
}
</style>
