<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.GuestName"
              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.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-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.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"
              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="EnterName" label="引流人员">
          <template slot-scope="scope">
            <div>
              {{scope.row.CreateByName}}
            </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)" 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 @click="openNameDetails(scope.row)" class="hover">
              {{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 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="出签状态">
          <template slot-scope="scope">
            <div v-if="scope.row.OrderId === 0">
              -
            </div>
            <div v-else>
            {{scope.row.VisaStatus==1?'未出签':(scope.row.VisaStatus==2?'已出签':'无需签证')}}
           </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 @click="openNameDetails(scope.row,1,1)" class="hover"><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 @click="openNameDetails(scope.row,1,2)" class="hover"> <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 @click="openNameDetails(scope.row,1,3)" class="hover">   <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 @click="openNameDetails(scope.row,1,4)" class="hover">
                 <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 label="其他收款" width="100">
            <template slot-scope="scope">
              <p v-if="scope.row.MealMoney == 0">-</p>
              <p v-else @click="openNameDetails(scope.row,1,5)" class="hover">
                 <span>{{ scope.row.OtherIncome }}</span>
              </p>

            </template>
          </el-table-column>
          <el-table-column label="合计应收款" width="100">
            <template slot-scope="scope">
              <p v-if="scope.row.Money == 0">-</p>
              <p v-else @click="openNameDetails(scope.row,1,'')" class="hover">
                 <span>{{ scope.row.Money }}</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="已收款">
            <template slot-scope="scope">
              <p v-if="scope.row.IncomeMoney == 0">-</p>
              <p v-else @click="openNameDetails(scope.row,1,'')" class="hover">
                 <span>{{ scope.row.IncomeMoney }}</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="退款费用">
            <template slot-scope="scope">
              <p v-if="scope.row.BackMoney == 0">-</p>
              <p v-else @click="openNameDetails(scope.row,2,'')" class="hover">
                 <span>{{ scope.row.BackMoney }}</span>
              </p>
            </template>
          </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 label="机票成本">
            <template slot-scope="scope">
              <p v-if="scope.row.TicketCost == 0">-</p>
              <p v-else @click="openNameDetails(scope.row,3,1)" class="hover">
                  <span>{{ scope.row.TicketCost }}</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="签证成本">
            <template slot-scope="scope">
              <p v-if="scope.row.VisaCost == 0">-</p>
              <p v-else @click="openNameDetails(scope.row,3,2)" class="hover">
                  <span>{{ scope.row.VisaCost }}</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="地接成本">
            <template slot-scope="scope">
              <p v-if="scope.row.DiJieCost == 0">-</p>
              <p v-else @click="openNameDetails(scope.row,3,3)" class="hover">
                  <span>{{ scope.row.DiJieCost }}</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="套餐成本">
            <template slot-scope="scope">
              <p v-if="scope.row.MealCost == 0">-</p>
              <p v-else @click="openNameDetails(scope.row,3,4)" class="hover">
                  <span>{{ scope.row.MealCost }}</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="其他成本">
            <template slot-scope="scope">
              <p v-if="scope.row.OtherCost == 0">-</p>
              <p v-else @click="openNameDetails(scope.row,3,5)" class="hover">
                  <span>{{ scope.row.OtherCost }}</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="合计数">
            <template slot-scope="scope">
              <p v-if="scope.row.MealCost == 0">-</p>
              <p v-else @click="openNameDetails(scope.row,3,'')" class="hover">
                  <span>{{ scope.row.MealCost }}</span>
              </p>
            </template>
          </el-table-column>
        </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-column label="供应商" min-width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>
              {{scope.row.FinancePayer}}
            </div >
          </template>
        </el-table-column>
      </el-table>
    <div v-if="total>0">
      <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>
    <el-drawer :with-header="false" size='70%' :visible.sync="drawer" direction="rtl" :before-close="handleClose">
      <customerInfoBox :CustomerId="CustomerId" :activeNameNum="activeNameNum" :receiptType="receiptType"/>
    </el-drawer>
    <!-- 单号抽屉 -->
    <el-drawer  @closed="closeOrderDrawerHandler" :with-header="false" size='70%' :append-to-body="true" :visible.sync="orderDrawer" direction="rtl" :before-close="handleClose">
      <orderDetailsDrawer v-if="currentOrder" :orderId="currentOrder.OrderId" :activeNameNum="activeNameNum"/>
  </el-drawer>
  </div>
</template>

<script>
import customerInfoBox from "../guestManagement/customerInfoBox";
import orderDetailsDrawer from "../customerManage/orderDetailsDrawer";
export default {
  components: {
    customerInfoBox,
    orderDetailsDrawer
  },
  created() {
    // erp自动登陆传过来的参数
    if (this.$route.query.erpOrderObj) {
      let data = JSON.parse(this.$route.query.erpOrderObj);
      this.msg.OrderId = data.OrderId;
    }
    this.Employee(); //业务员
    this.GetTicketStatusEnumList(); //出票枚举
    this.GetOrderStatusEnumList() //订单状态枚举
    //监听
    let $this = this;
    this.MsgBus.$on("closeGetList", function () {
      $this.getList();
    });
    this.getList();
  },
  data() {
    return {
      loading: false,
      ticketingStatusList: [], // 出票状态
      total: 0,
      msg: {
        pageIndex: 1,
        pageSize: 15,
        OrderId: "", //订单id
        GuestName: "", //客人姓名
        GuestId: "", //客人id
        StartCityName: "", //出行概述
        EnterID: "", //业务员id
        CreateBy:"",//引流人员id
        TicketStatus: "0", //出票状态
        VisaStatus:"0",//出签状态
        OrderStatus: "0", //订单状态
        Q_IsCollect: "0", //收款状态
        StartTime: "",
        EndTime: "",
      },
      VisaList:[
        { Name: "不限", Id: "0" },
        { Name: "未出签", Id: "1" },
        { Name: "已出签", Id: "2" },
      ],
      OrderStatusList: [],
      QIsCollectList: [
        { Name: "不限", Id: "0" },
        { Name: "已收齐", Id: "1" },
        { Name: "未收齐", Id: "2" },
      ],
      EmployeeList: [],
      tableData: [],
      StatModel:[],
      currentOrder:null,
      orderDrawer:false,
      activeNameNum:"2",
      drawer:false,
      CustomerId:"",
      CustomerName:"",
      receiptType:{
        ReFinanceId:"",
        ReFinanceId2:"",//单据类型
        RelevanceFrId:"",//1机票   2签证   3地接  4套餐  5其他
      },
      

    };
  },
  methods: {
    // 点击单号
    clickSingleNumber(item) {
        this.currentOrder = item;
        this.orderDrawer = true;
    },
    closeOrderDrawerHandler() {
        this.currentOrder = null;
        this.orderDrawer = false;
    },
    handleClose(done) {
        done();
    },
    // 获取业务员
    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) => {}
      );
    },
    // 获取订单状态枚举
    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/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
            this.total = res.data.data.count;
          } 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(item){
      this.currentOrder = item;
      this.orderDrawer = true;
    },
    // 点击客人名称
    openNameDetails(item,ReFinanceId2,RelevanceFrId) {
      this.drawer = true;
      this.CustomerId = item.GuestId;
      this.CustomerName = item.GuestName;
      if(ReFinanceId2){
        this.activeNameNum = '12'
        this.receiptType.ReFinanceId = item.OrderId
        this.receiptType.ReFinanceId2 = ReFinanceId2?ReFinanceId2:""
        this.receiptType.RelevanceFrId = RelevanceFrId
      }else{
        this.activeNameNum = '1'
        this.receiptType.ReFinanceId = ""
        this.receiptType.ReFinanceId2 = ""
        this.receiptType.RelevanceFrId = ""
      }
    },
    //改变状态背景颜色
    columenStyle({columnIndex}){
      if(columnIndex == 7 ){
        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 {
      background-color: #fff;
      padding: 15px 10px;
      .el-row {
        .el-col {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          span {
            flex-shrink: 0;
          }
        }
      }
    }
  }
  .hover{
    color:#2961fe;
    cursor: pointer;
  }
  .hover:hover{
    text-decoration: underline;
  }
}
</style>
