<style scoped>
    .add-Enclosure {
        display: flex;
        justify-content: space-between;
    }
    
    .add-Enclosure-left {
        display: flex;
    }
    
    .item-but-box {
        display: flex;
    }
    
    .item-but {
        margin-right: 10px;
    }
    
    .numIcon {
        font-size: 12px;
        padding: 5px;
        color: #409eff;
    }
    .numIcon:hover{
        cursor: pointer;
    }
    
    .tatusText.grey {
        color: grey;
    }
    
    .tatusText.success {
        color: #21BA45;
    }
    
    .tatusText.error {
        color: #F2C037;
    }
    
    .tatusText.Black {
        color: Black;
    }
    
    .ToBeReceived.red {
        color: #fd397a;
    }
    
    .ToBeReceived.blue {
        color: #409eff;
    }
    
    .income_1 {
        color: #2961FE;
        cursor: pointer;
    }
    
    .income_2 {
        color: #3FC4FF;
        cursor: pointer;
    }
    
    .enedit-box {
        display: flex;
        align-items: center;
    }
    
    .select-right {
        margin-left: 5px;
    }
    
    .Credentials {
        color: #2961FE;
    }
    .agreement-IncomeMoney-box{
        /* position: relative; */
    }
    .agreement-IncomeMoney-box .numIcon{
        position: relative;
    }
    .agreement-IncomeMoney-pop{
        position: absolute;
        top: -15px;
        left: 30px;
        z-index: 1;
        background: #fff;
        padding: 10px 19px 10px 19px;
        Box-shadow:5px 5px 10px 5px #ccc;
    }
    /deep/.el-table .cell{
        overflow: initial;
    }
    .agreement-Cancel{
        text-align: right;
        color: #409eff;
    }
    .agreement-Cancel span:first-child{
        color: #999999;
        margin-right: 20px;
    }
    .agreement-Cancel span:hover{
        cursor: pointer;
    }
    .float-flag-shape{
        position: absolute; 
        top:20px;
        border: 1px solid #fff;
        height: 0; 
        width: 0;
        border-left: 4px solid rgba(0,0,0,0); 
        border-right: 4px solid #fff;
        border-top: 3px solid rgba(0,0,0,0); 
        border-bottom: 3px solid #fff; 
        left:-8px;
    }
    /deep/.el-table .cell.el-tooltip{
        overflow: hidden !important;
    }
</style>
<template>
    <div class="Business">
      <div class="add-Enclosure">
        <el-row :gutter="16">
          <el-col :span="8">
            <el-input size="mini" placeholder="输入订单ID" v-model="msg.OrderId" label="订单ID" 
            @keyup.enter.native="getList"></el-input>
          </el-col>
          <el-col :span="6">
            <div style="display: flex;flex-direction: row;align-items: center;">
              <span class="font-size-12" style="padding-right: 10px;flex-shrink: 0;">状态：</span>
              <el-select size="mini" width="200" v-model="msg.TicketStatus" placeholder="请选择" 
                @change="getList">
                  <el-option 
                  v-for="item in ticketingStatusList"
                  :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="6">
            <el-select size="mini" width="200" v-model="msg.OrderStatus" placeholder="请选择" 
              @change="getList">
                <el-option 
                v-for="item in orderStatusList"
                :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-button plain icon="el-icon-plus" type="primary" size="mini" class="margin-right0" @click="addBusiness">创建订单</el-button>
      </div>
      <div class="page-content">
      <el-table
        v-loading="loading"
        stripe
        ref="multipleTable"
        :data="dataList"
        tooltip-effect="dark"
        style="width: 100%"
        :height="dataList.length > 0 ? '600' : '660'"
        row-class-name="font-size-12">
        <el-table-column
            fixed
            label="订单号"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.OrderId}}
              <!-- <p v-for="(item,index) in scope.row.MultipleChoiceList">{{item.Name}}</p> -->
            </template>
          </el-table-column>
          <el-table-column fixed label="业务员" show-overflow-tooltip :width="120">
              <template slot-scope="scope">
                        <p>{{scope.row.EnterName}}</p>
                        <p>{{scope.row.CreateTime}}</p>
                      </template>
          </el-table-column>
          <el-table-column label="出行概述" show-overflow-tooltip :width="120">
              <template slot-scope="scope">
                        <p>人数：{{scope.row.GuestCount}}人</p>
                        <p>{{scope.row.StartCityName}}</p>
                      </template>
          </el-table-column>
          <el-table-column label="应收" show-overflow-tooltip>
              <template slot-scope="scope">
                        <p @click="editOrderAmount(scope.row)" class="cp"
                        :class="scope.row.TicketStatus==1&&scope.row.OrderStatus==1?'font-color-link':''">{{scope.row.Money}}</p>
                      </template>
          </el-table-column>
          <el-table-column label="实收" width="120">
              <template slot-scope="scope">
                        <div class="agreement-IncomeMoney-box">
                            {{scope.row.IncomeMoney}}
                            <i v-if="scope.row.OrderStatus==1" 
                            @click="makeAdocument(scope.row,scope.$index,1)" 
                            class="iconfont iconjia- numIcon">
                            <div v-show="scope.row.actuallyReceived" class="agreement-IncomeMoney-pop">
                                <div class="float-flag-shape"></div>
                                <el-checkbox-group v-model="scope.row.checkList" 
                                @change="clickMultipleChoice(scope.row,scope.$index,1)">
                                <el-checkbox v-for="(item,index) in scope.row.MultipleChoiceList" :key="index"
                                :label="item.Id">{{item.Name}}</el-checkbox>
                                </el-checkbox-group>
                                <div class="agreement-Cancel">
                                    <span @click.stop="popCancelClick(scope.row,scope.$index,1)">取消</span>
                                    <span @click.stop="popClick(scope.row,scope.$index,1)">确定</span>
                                </div>
                                
                            </div>
                        </i>
                            
                        </div>
                        

                      </template>
          </el-table-column>
          <el-table-column label="退款" width="120">
              <template slot-scope="scope">
                        {{scope.row.BackMoney}}<i v-if="scope.row.OrderStatus==1" 
                        @click="makeAdocument(scope.row,scope.$index,2)" class="iconfont iconjia- numIcon"></i>
                      </template>
          </el-table-column>
          <el-table-column label="成本" width="120">
              <template slot-scope="scope">
                <div class="agreement-IncomeMoney-box">
                {{scope.row.PayMoney}}<i v-if="scope.row.OrderStatus==1" 
                @click="makeAdocument(scope.row,scope.$index,3)" class="iconfont iconjia- numIcon">
                    <div v-show="scope.row.cost" class="agreement-IncomeMoney-pop">
                        <div class="float-flag-shape"></div>
                        <el-radio-group v-model="scope.row.selectedType" @change="clickMultipleChoice(scope.row,scope.$index,3)">
                        <el-radio v-for="(item,index) in scope.row.MultipleChoiceList" :key="index"
                        :label="item.Id">{{item.Name}}</el-radio>
                        </el-radio-group>
                        <div class="agreement-Cancel">
                            <span @click.stop="popCancelClick(scope.row,scope.$index,3)">取消</span>
                            <span @click.stop="popClick(scope.row,scope.$index,3)">确定</span>
                        </div>
                    </div>
            
             </i>
                
                    
                
                </div>
            </template>
          </el-table-column>
          <el-table-column prop="TaxMoney" label="手续费" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="待收" show-overflow-tooltip>
              <template slot-scope="scope">
                        <p class="ToBeReceived" :class="scope.row.DueinMoney==0?'blue':'red'">
                          {{scope.row.DueinMoney}}
                        </p>
                      </template>
          </el-table-column>
          <el-table-column label="出票状态" width="90">
              <template slot-scope="scope">
                        <span @click="modifyStatus(scope.row)" 
                        class="cp tatusText"
                        :class="scope.row.TicketStatus==1?'grey':
                        (scope.row.TicketStatus==2?'success':
                        (scope.row.TicketStatus==3?'error':
                        (scope.row.TicketStatus==4?'Black':'')))">
                          {{scope.row.TicketStatusName}}
                        </span>
                        <i v-if="scope.row.TicketStatus!=1&&
                        scope.row.TicketVoucherList!=[]&&
                        scope.row.CancelVoucherList!=[]&&
                        scope.row.TicketStatusName!='无需机票'" class="iconfont iconpingzhengchaxun Credentials" @click="viewCredentials(scope.row)"></i>
                      </template>
          </el-table-column>
          <el-table-column label="订单状态" show-overflow-tooltip>
              <template slot-scope="scope">
                        {{scope.row.OrderStatus==1?"正常":"取消"}}
                      </template>
          </el-table-column>
          <el-table-column prop="Remark" label="客户需求" show-overflow-tooltip>
          </el-table-column>

          <el-table-column label="收入单据" show-overflow-tooltip>
              <template slot-scope="scope">
                        <p v-for="(item,index) in scope.row.IncomeFinance" :key="index"
                        :class="item.Status==1?'income_1':'income_2'"
                        @click="openDetails(item.FrID)">
                          {{item.FrID}}
                        </p>
                      </template>
          </el-table-column>
          <el-table-column label="退款单据" show-overflow-tooltip>
              <template slot-scope="scope">
                        <p v-for="(item,index) in scope.row.BackFinance" :key="index"
                        :class="item.Status==1?'income_1':'income_2'"
                        @click="openDetails(item.FrID)">
                          {{item.FrID}}
                        </p>
                      </template>
          </el-table-column>
          <el-table-column label="成本单据" show-overflow-tooltip>
              <template slot-scope="scope">
                        <p v-for="(item,index) in scope.row.PayFinance" :key="index"
                        :class="item.Status==1?'income_1':'income_2'"
                        @click="openDetails(item.FrID)">
                          {{item.FrID}}
                        </p>
                      </template>
          </el-table-column>
          <el-table-column prop="CreateByName" label="创建人" show-overflow-tooltip>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                          <div class="item-but-box">
                            <div class="enedit-box">
                              <el-tooltip
                              class="item-but" effect="dark" content="编辑订单" placement="top">
                                  <i class="iconfont iconwenbenbianji cp" @click="editOrder(scope.row)"></i>
                              </el-tooltip>
                              <div>
                                  <el-select style="width:70px" class="select-right" 
                                  clearable
                                  size="mini" 
                                  v-model="scope.row.More" placeholder="更多"
                                  @change="chooseMore(scope.row)">
                                      <el-option
                                      v-for="item in MoreList"
                                      :key="item.Id"
                                      :label="item.Name"
                                      :value="item.Id">
                                      </el-option>
                                  </el-select>
                              </div>
                              
                          </div>
                            
                          </div>
                      </template>
          </el-table-column>
          </el-table>
    </div>
    <div v-if="total>0">
        <el-pagination class="Mypagination" background @current-change="handleCurrentChange" :page-sizes="[10, 30, 60, 90, 100]" :page-size="msg.pageSize" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange" :total="total">
        </el-pagination>
    </div>
    </div>
</template>
<script>
    export default {
        props: ["ID", "BusinessType"],
        data() {
            return {
                MultipleChoiceList: [ //多选项目
                    {
                        Name: '机票',
                        Id: '1'
                    }, {
                        Name: '签证',
                        Id: '2'
                    }, {
                        Name: '地接',
                        Id: '3'
                    }, {
                        Name: '套餐',
                        Id: '4'
                    }, {
                        Name: '其他',
                        Id: '5'
                    }
                ],
                checkList:[],
                MoreList: [{
                    Name: '取消订单',
                    Id: '1'
                }, {
                    Name: '订单转交',
                    Id: '2'
                }, {
                    Name: '操作日志',
                    Id: '3'
                }, ],
                orderStatusList: [{
                    Name: '正常',
                    Id: '1'
                }, {
                    Name: '取消',
                    Id: '2'
                }], //订单状态
                ticketingStatusList: [], // 出票状态
                dataList: [],
                loading: false,
                msg: {
                    pageIndex: 1,
                    pageSize: 10,
                    OrderId: "",
                    GuestId: "",
                    TicketStatus: '0',
                    OrderStatus: "1",
                    StartCityName: "",
                    EndCityName: "",
                    EnterID: "",
                    userInfo: {}
                },
                total: 0
            };
        },
        watch: {
            ID: {
                handler(val, oldVal) {
                    this.getList();
                },
                deep: true,
            },
        },
        mounted() {
            this.userInfo = this.getLocalStorage();
            this.getList();
            this.GetTicketStatusEnumList()
            let $this = this
            $this.MsgBus.$on("closeGetList", function() {
                $this.getList()
            });
            $this.MsgBus.$on("closeBillMaking", function() {
                for(let i=0;i<$this.dataList.length;i++){
                    $this.dataList[i].checkList = []
                    $this.dataList[i].selectedType = ""
                    $this.dataList[i].actuallyReceived = false
                    $this.dataList[i].cost = false
                }
            });
        },
        methods: {
            // 取消
            popCancelClick(row, index, num){
                this.dataList.forEach(item=>{
                    item.checkList = []
                    item.selectedType = ''
                    item.actuallyReceived =false
                    item.cost =false
                })
            },
            // 确定弹窗
            popClick(row, index, num){
                if(!row.selectedType){
                    this.$message.warning('请选择类型!');
                    return
                }
                this.makeAdocumentFun(row, index, num)
                this.dataList[index].actuallyReceived =false 
                this.dataList[index].cost =false
            },
            
            // 查看出票凭据
            viewCredentials(row) {
                let $this = this;
                this.MsgBus.$emit("CredentialsOrderTicketOrderBoxOpen", $this.ID, row, true);
            },
            // 清空下拉
            emptyMore() {
                this.dataList.forEach(item => {
                    return item.More = ''
                })
            },
            chooseMore(row) {
                //   取消订单
                if (row.More == '1') {
                    this.cancelOrder(row)
                }
                //   订单转换
                if (row.More == '2') {
                    this.convertOrder(row)
                }
                //   操作日志
                if (row.More == '3') {
                    this.operationLog(row)
                }
                //   修改出票状态
                if (row.More == '4') {
                    this.modifyStatus(row)
                }
                //   编辑订单金额
                if (row.More == '5') {
                    this.editOrderAmount(row)
                }
            },
            // 转换订单  
            convertOrder(row) {
                if (row.OrderStatus != '2') {
                    let $this = this;
                    this.MsgBus.$emit("convertOrderTicketOrderBoxOpen", $this.ID, row, true);
                }

            },
            // 验证操作员
            ValidateOperator() {
                this.$message({
                    type: 'warning',
                    message: '抱歉,该订单您没有操作权限!'
                });
                this.emptyMore()
            },
            // 多选发生变化
            clickMultipleChoice(row, index, num) {
                if(num == 1){
                    if(row.checkList.slice(-1)[0] == 4){
                        this.delType(row,1)
                        this.delType(row,2)
                        this.delType(row,3)
                        this.delType(row,5)
                        row.selectedType = row.checkList.join(',')
                    }else if(row.checkList.slice(-1)[0] == 5){
                        this.delType(row,1)
                        this.delType(row,2)
                        this.delType(row,3)
                        this.delType(row,4)
                        row.selectedType = row.checkList.join(',')
                    }else{
                        this.delType(row,4)
                        this.delType(row,5)
                        row.selectedType = row.checkList.join(',')
                    }
                }
            },
            // 删除套餐值
            delType(row,item) {
                for (let i = 0; i < row.checkList.length; i++) {
                    if (row.checkList[i] == item) {
                        row.checkList.splice(i, 1)
                    }
                }
            },
            // 制作单据
            makeAdocument(row, index, num) {
                let list = row.OrderType&&row.OrderType.split(',')
                if(list!=null&&list.length>1&&num==1){
                    this.dataList.forEach(item=>{
                        return item.cost = false
                    })
                    this.dataList.forEach(item=>{
                        return item.actuallyReceived = false
                    })
                    this.dataList[index].actuallyReceived = true
                    
                }
                else if(list!=null&&list.length>1&&num==3){
                    this.dataList.forEach(item=>{
                        return item.actuallyReceived = false
                    })
                    this.dataList.forEach(item=>{
                        return item.cost = false
                    })
                    this.dataList[index].cost = true
                }else{
                    this.makeAdocumentFun(row, index, num)
                }
            },
            makeAdocumentFun(row, index, num){
                let type
                type = num == 1 ? 1 : 2 // 1收款 2退款 3成本
                let href
                let url = this.domainManager().erpRoutingUrl
                let data
                let list = row.OrderType&&row.OrderType.split(',')
                if (this.userInfo.EmName != row.EnterName) {
                    this.ValidateOperator()
                } else {
                    if (row.OrderStatus != '2') {
                        if(list&&list.length>1){
                            let typeList = row.selectedType.split(',')
                            if(num=='1'&&typeList.length>=2){
                                let $this = this;
                                row.ReFinanceId2 = num
                                this.MsgBus.$emit("BillMakingOrderBoxOpen", $this.ID, row, true); 
                            }if(typeList.length==1&&num=='1'||num=='3'){
                                data = [{
                                    path: 'ChoiceAddFinancialDocuments',
                                    type: type,
                                    OtherType: 55,
                                    ReFinanceId: row.OrderId,
                                    ReFinanceId2: num,
                                    GuestId: row.GuestId,
                                    RelevanceFrId: row.selectedType, // 单据类型
                                }]
                                href = url + 'automaticLogin?token=' + this.getLocalStorage().token + '&data=' + JSON.stringify(data)
                                window.open(href);
                                for(let i=0;i<this.dataList.length;i++){
                                    this.dataList[i].checkList = []
                                    this.dataList[i].selectedType = ""
                                    this.dataList[i].actuallyReceived = false
                                    this.dataList[i].cost = false
                                }
                            }if(num=='2'){
                                data = [{
                                    path: 'ChoiceAddFinancialDocuments',
                                    type: type,
                                    OtherType: 55,
                                    ReFinanceId: row.OrderId,
                                    ReFinanceId2: num,
                                    GuestId: row.GuestId,
                                }]
                                href = url + 'automaticLogin?token=' + this.getLocalStorage().token + '&data=' + JSON.stringify(data)
                                window.open(href);
                                for(let i=0;i<this.dataList.length;i++){
                                    this.dataList[i].checkList = []
                                    this.dataList[i].selectedType = ""
                                    this.dataList[i].actuallyReceived = false
                                    this.dataList[i].cost = false
                                }
                            }
                            
                        }else{
                            if(num==1||num==2){
                                data = [{
                                    path: 'ChoiceAddFinancialDocuments',
                                    type: type,
                                    OtherType: 55,
                                    ReFinanceId: row.OrderId,
                                    ReFinanceId2: num,
                                    GuestId: row.GuestId,
                                    RelevanceFrId: row.OrderType, // 单据类型
                                }] 
                            }
                            if(num==3){
                                data = [{
                                    path: 'ChoiceAddFinancialDocuments',
                                    type: type,
                                    OtherType: 55,
                                    ReFinanceId: row.OrderId,
                                    ReFinanceId2: num,
                                    GuestId: row.GuestId,
                                }]
                            }
                            href = url + 'automaticLogin?token=' + this.getLocalStorage().token + '&data=' + JSON.stringify(data)
                            window.open(href);
                            for(let i=0;i<this.dataList.length;i++){
                                this.dataList[i].checkList = []
                                this.dataList[i].selectedType = ""
                                this.dataList[i].actuallyReceived = false
                                this.dataList[i].cost = false
                            }
                        }
                        
                    }

                }
            },

            // 操作日志
            operationLog(row) {
                let $this = this;
                this.MsgBus.$emit("logTicketOrderBoxOpen", $this.ID, row, true);
            },
            // 修改出票状态
            modifyStatus(row) {
                if (this.userInfo.EmName != row.EnterName) {
                    this.ValidateOperator()
                } else {
                    if (row.OrderStatus == 2) {
                        this.emptyMore()
                    } else {
                        if (row.TicketStatus == 3) {
                            return
                        } else if (row.TicketStatus == 4) {
                            return
                        } else {
                            let $this = this;
                            this.MsgBus.$emit("reviseTicketOrderBoxOpen", $this.ID, row, true);
                        }
                    }
                }


            },
            // 取消订单
            cancelOrder(row) {
                if (this.userInfo.EmName != row.EnterName) {
                    this.ValidateOperator()
                } else {
                    if (row.OrderStatus != '2' && row.IncomeFinance.length == 0 && row.BackFinance.length == 0 && row.PayFinance.length == 0) {
                        let tips = '此操作将取消该订单，是否继续取消?'
                        this.$confirm(tips, '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.apipost('/api/Order/SetGuestOrderState', {
                                OrderId: row.OrderId,
                                Type: '1',
                            }, res => {
                                if (res.data.resultCode == 1) {
                                    this.$message.success(res.data.message);
                                    this.getList()
                                }
                            })
                        }).catch(() => {
                            this.emptyMore()
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '该订单已有财务单据，不能取消!'
                        });
                        this.emptyMore()
                    }
                }

            },
            // 编辑订单
            editOrder(row) {
                if (this.userInfo.EmName != row.EnterName) {
                    this.ValidateOperator()
                } else {
                    if (row.TicketStatus == 1 && row.OrderStatus == 1) {
                        let $this = this;
                        this.MsgBus.$emit("editOrderTicketOrderBoxOpen", $this.ID, row, true);
                    } else {
                        this.emptyMore()
                    }
                }
            },
            // 编辑订单金额
            editOrderAmount(row) {
                if (this.userInfo.EmName != row.EnterName) {
                    this.ValidateOperator()
                } else {
                    if (row.TicketStatus == 1 && row.OrderStatus == 1) {
                        let $this = this;
                        this.MsgBus.$emit("editTicketOrderBoxOpen", $this.ID, row, true);
                    } else {
                        this.emptyMore()
                    }
                }


            },
            openDetails(row) {
                let href
                let url = this.domainManager().erpRoutingUrl
                let data = [{
                    path: 'FinancialDocumentsDetail',
                    id: row
                }]
                href = url + 'automaticLogin?token=' + this.getLocalStorage().token + '&data=' + JSON.stringify(data)
                window.open(href);
            },
            // 获取出票状态枚举
            GetTicketStatusEnumList() {
                let $this = this
                this.msg.GuestId = $this.ID
                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/GetGuestOrderPageList",
                    this.msg,
                    (res) => {
                        if (res.data.resultCode == 1) {
                            let data = res.data.data.pageData;
                            let addList = function(arr) {
                                arr.forEach(item => {
                                    item.More = ''
                                    item.actuallyReceived = false
                                    item.cost = false
                                    item.selectedType = ''
                                    item.checkList = []
                                    item.MultipleChoiceList = []
                                });
                            };
                            addList(data);
                            data.forEach(item=>{
                                if(item.OrderType){
                                    let list = item.OrderType&&item.OrderType.split(',')
                                    for(let j=0;j<list.length;j++){
                                        for(let i=0;i<this.MultipleChoiceList.length;i++){
                                            if(list[j]==this.MultipleChoiceList[i].Id){
                                                item.MultipleChoiceList.push(this.MultipleChoiceList[i])
                                            }
                                        }
                                    }
                                }
                            })
                            
                            this.dataList = data;
                            this.total = res.data.data.count;
                            this.loading = false
                        } else {
                            this.$message.error(res.data.message);
                        }
                    }
                );
            },
            // 添加订单
            addBusiness() {
                let $this = this;
                this.MsgBus.$emit("addTicketOrderBoxOpen", $this.ID, 0, true);
            },
            handleSizeChange(val) {
                this.msg.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
        },
    };
</script>