<!--订单列表-->
<template>
  <div>
    <el-table
        v-loading="loading"
        stripe
        ref="multipleTable"
        :data="dataList"
        tooltip-effect="dark"
        style="width: 100%"
        row-class-name="font-size-12"
        :default-sort = "{prop: 'date', order: 'descending'}">
        <el-table-column 
            label="商品类型"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag size="mini">{{scope.row.OrderTypeName}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column 
            width="130"
            prop="CreateTimeStr"
            label="下单日期"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
            width="130"
            prop="StartDate"
            label="出发日期"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
            prop="OrderId"
            label="订单ID"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
            label="团号/单号"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.TCNUM}}
            </template>
        </el-table-column>
        <el-table-column
            label="客人姓名"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="colorblue font-color-link"  @click="openNameDetails(scope.row)">
                {{scope.row.GuestName}}
              </span>
            </template>
        </el-table-column>
        <el-table-column 
            prop="SaleName"
            label="销售姓名"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
            prop="LureEmpName"
            label="引流姓名"
            show-overflow-tooltip>
        </el-table-column>
        
        <el-table-column 
            label="商品名称"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.Name" placement="top">
                <p style="max-width: 100px;overflow: hidden;text-overflow: ellipsis">{{scope.row.Name}}</p>
              </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column 
            sortable
            prop="Money"
            label="总金额"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
            sortable
            prop="CostMoney"
            label="成本"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            sortable
            label="待收"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span :class="{'red':scope.row.DueInMoney>0}">{{scope.row.DueInMoney}}</span>
            </template>
        </el-table-column>
        <el-table-column 
            sortable
            prop="Income"
            label="实收"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
            sortable
            prop="PlatformTax"
            label="手续费"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
            sortable
            prop="Refund"
            label="退款"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
            sortable
            prop="DiscountsMoney"
            label="优惠"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column 
            prop="StateName"
            label="状态"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.StateName}}</span>
            </template>
        </el-table-column>
        <el-table-column 
            label="操作"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="goDetails(scope.row)">查看</el-button>
            </template>
        </el-table-column>
      </el-table>
      <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%' :visible.sync="orderDrawer" direction="rtl" :before-close="handleClose">
        <orderDetailsDrawer v-if="currentOrder" :orderId="currentOrder.OrderId" :activeNameNum="activeNameNum" />
    </el-drawer>
    <!-- 提成详情 -->
    <commissionPopUp v-if="commissionPopUpVisible" :parameters="parameters"></commissionPopUp>
</div>
</template>

<script>
  import customerInfoBox from "../../guestManagement/customerInfoBox";
import orderDetailsDrawer from "../../customerManage/orderDetailsDrawer";
import commissionPopUp from "../../dialogModel/commissionPopUp";
export default {
  components: {
    customerInfoBox,
    orderDetailsDrawer,
    commissionPopUp
  },
  props: {
    pagesTitle: {
      type: String,
      default: "",
    },
    //订单
    dataList: {
      type: Array,
      default: null,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    superManage: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      CustomerId: "",
      CustomerName: "",
      currentOrder: null,
      parameters:{},
      receiptType:{},
      drawer: false,
      orderDrawer: false,
      commissionPopUpVisible: false,
      activeNameNum:"1",
    };
  },
  created() {},
  watch: {
    loading: {
      handler(val, oldVal) {
        this.loading = val;
      },
      deep: true,
    },
    pagesTitle: {
        handler(val, oldVal) {
            this.pagesTitle = val
        },
        immediate: true
    },
  },
  mounted() {
    let $this = this;
    this.userInfo = this.getLocalStorage();
    this.MsgBus.$on("closeaddContacts", function() {
      $this.commissionPopUpVisible = false;
      $this.emptyMore()
    });
  },
  methods: {
    goDetails(row){
      let data = [{
          path: "",
          OrderId: row.OrderId,
          Type: ''
        }]
        let href
        let url = this.domainManager().erpRoutingUrl;
        
      let command = row.OrderType
      if (row.OrderType == 1) {
        let name = ''
        if(this.pagesTitle=='销售'||this.pagesTitle=='详情'){
          name = 'myCustomerOrder'
        }else{
          name = 'customerOrder'
        }
        this.$router.push({
          name: name,
          query: {
            OrderId: row.OrderId,
            blank: "y",
          }
        });
      }else{
        if (row.OrderType == 6) {
          if(this.pagesTitle=='销售'||this.pagesTitle=='详情'){
            data[0].path = 'VisaProductEditOrder'
          }else{
            data[0].path = 'VisaProductEditOrderOP'
          }
          href =url +"automaticLogin?token=" +this.getLocalStorage().token +"&data=" +JSON.stringify(data);
        }else if (row.OrderType == 2) {//3跟团 4一日游
          data[0].path = 'enrollTotal'
          href =url +"automaticLogin?token=" +this.getLocalStorage().token +"&data=" +JSON.stringify(data);
        }
        else if (row.OrderType == 3) {//酒店
          if(this.pagesTitle=='销售'||this.pagesTitle=='详情'){
            data[0].path = 'singleProductHotelOrder'
          }else{
            data[0].path = 'singleProductHotelOrderOP'
          }
          href =url +"automaticLogin?token=" +this.getLocalStorage().token +"&data=" +JSON.stringify(data);
        }
        else if (row.OrderType == 4) {//门票
          if(this.pagesTitle=='销售'||this.pagesTitle=='详情'){
            data[0].path = 'SingleticketOrderList'
          }else{
            data[0].path = 'SingleticketOrderListOP'
          }
          href =url +"automaticLogin?token=" +this.getLocalStorage().token +"&data=" +JSON.stringify(data);
        }
        else if (row.OrderType == 5) {//包车
            this.GetAdminCarOrderPageList(row,url,href,data)
        }
        else if (row.OrderType == 7) {//jalan酒店
          // if(this.pagesTitle=='销售'){
          //   data[0].path = 'CharterOrderList'
          // }else{
          //   data[0].path = 'CharterOrderListOP'
          // }
          // href =url +"automaticLogin?token=" +this.getLocalStorage().token +"&data=" +JSON.stringify(data);
        }
        if(href){window.open(href);}
        
      }
    },
    GetAdminCarOrderPageList(row,url,href,data){
      let msg = {
              pageIndex: 1,
              pageSize: 5,
              OrderType: '',
              OrderId: row.OrderId,
              OrderNo: '',
              SurName: '',
              Name: '',
              OrderStatus: 0,
              StartTime: '',
              EndTime: '',
              OrderSTime: '',
              OrderETime: '',
              ProductName: '',
              Mobile: '',//电话
              IsSelectSale: 1,
              EnterID: 0,//业务员
          }
          this.apipost2('CarSingle_post_GetAdminCarOrderPageList', msg, res => {
              if (res.data.resultCode == 1) {
                let pageData = res.data.data.pageData
                let OrderType
                if(pageData&&pageData.length>0){
                    OrderType = pageData[0].OrderType
                }
                data[0].Type = OrderType?OrderType:4
                if(this.pagesTitle=='销售'||this.pagesTitle=='详情'){
                  data[0].path = 'CharterOrderList'
                }else{
                  data[0].path = 'CharterOrderListOP'
                }
                href =url +"automaticLogin?token=" +this.getLocalStorage().token +"&data=" +JSON.stringify(data);
                window.open(href)
              }
          })
    },
    // 提成列表
    commissionDetails(item){
      this.parameters = item
      this.commissionPopUpVisible = true
    },
    openNameDetails(item) {
      this.drawer = true;
      this.CustomerId = item.GuestId;
      this.CustomerName = item.GuestName;
    },
    handleClose(done) {
      done();
    },
    closeOrderDrawerHandler() {
      this.currentOrder = null;
      this.orderDrawer = false;
    },
  },
};
</script>
<style scoped>
  @import "../../../assets/css/allorder.css";
</style>
