<!--订单列表-->
<template>
  <div>
    <el-table
        v-loading="loading"
        stripe
        ref="multipleTable"
        :data="dataList"
        tooltip-effect="dark"
        style="width: 100%"
        row-class-name="font-size-12"
        border
        :default-sort = "{prop: 'null', order: 'null'}"
        :sort-by="['Money','Income','PreferTipAmount','PlatformTax','Refund','CostMoney','OrderProfit','DueInMoney']">
        <el-table-column 
            width="200"
            prop="CreateTimeStr"
            label="订单Id"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <div @click="goDetails(scope.row)">
                <p style="font-size: 18px;display: flex;align-items: center;">
                  <el-tag style="margin-right: 5px;" size="mini">{{scope.row.OrderTypeName}}</el-tag>
                  <span class="cp blue">{{scope.row.OrderId}}</span> 
                </p>
                <p>{{scope.row.CreateTimeStr}}</p>
              </div>
            </template>
        </el-table-column>
        <el-table-column 
            width="200"
            prop="CreateTimeStr"
            label="团号"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <div>
                <p style="font-size: 14px;">{{scope.row.TCNUM}}</p>
                <p>出发日期：{{scope.row.StartDate}}</p>
              </div>
            </template>
        </el-table-column>
        <el-table-column
            label="客人"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span :class="{'colorblue font-color-link':pagesTitle!='详情'}"  @click="pagesTitle!='详情'?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">
              <span :class="{'red font-color-link':pagesTitle!='详情'&&scope.row.Commission>0}"  
                @click="pagesTitle!='详情'&&scope.row.Commission>0?commissionDetails(scope.row):''">
                {{scope.row.Commission>0?scope.row.Commission:'-'}}
              </span>
            </template>
        </el-table-column>
        <el-table-column 
            label="商品名称"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="overflow: hidden;">{{scope.row.Name}}</div>
            </template>
        </el-table-column>
        <el-table-column 
            label="商品详情"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="overflow: hidden;">{{scope.row.Description}}</div>
            </template>
        </el-table-column>
        <el-table-column 
            sortable
            prop="Money"
            label="总金额"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.Money}}&ensp;({{scope.row.CurrencyName}})
            </template>
        </el-table-column>
        <el-table-column 
            sortable
            prop="Income"
            label="实收"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column sortable prop="PreferTipAmount" label="人头小费" min-width="101">
        </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="CostMoney"
            label="成本"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            sortable
            prop="DueInMoney"
            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="OrderProfit" label="预期利润" min-width="100">
          <template slot-scope="scope">
            <span :class="{'red':scope.row.OrderProfit>0}">{{scope.row.OrderProfit}}</span>
          </template>
        </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>
export default {
  components: {
    customerInfoBox:() => import('../../guestManagement/customerInfoBox'),
    orderDetailsDrawer:() => import('../../customerManage/orderDetailsDrawer'),
    commissionPopUp:() => import('../../dialogModel/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;
        
      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) {//跟团 一日游
          if(this.pagesTitle=='销售'||this.pagesTitle=='详情'){
            if(row.IsOneDayOrder==1){
              data[0].path = 'groupTourOrderOne'
            }else{
              data[0].path = 'groupTourOrder'
            }
            href =url +"automaticLogin?token=" +this.getLocalStorage().token +"&data=" +JSON.stringify(data);
          }else{
            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) {//包车 1接机   2送机   3包车
          if(row.CarType==''||row.CarType==null){
            this.GetAdminCarOrderPageList(row,url,href,data)
          }else{
            if(this.pagesTitle=='销售'||this.pagesTitle=='详情'){
              data[0].path = 'CharterOrderList'
            }else{
              data[0].path = 'CharterOrderListOP'
            }
            data[0].Type = row.CarType==null||!row.CarType?4:row.CarType
            href =url +"automaticLogin?token=" +this.getLocalStorage().token +"&data=" +JSON.stringify(data);
          }
            
        }
        else if (row.OrderType == 7) {//jalan酒店
          this.$message.info('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>
