<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;
}
.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;
}
.income_2{
  color: #3FC4FF;
}
.enedit-box{
    display: flex;
    align-items: center;
}
.select-right{
    margin-left: 5px;
}
</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%"
        row-class-name="font-size-12">
        <el-table-column
            fixed
            label="订单号"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.OrderId}}
              <!-- <p @click="openDetails(scope)" class="font-color-link cp">{{scope.row.OrderId}}</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}}->{{scope.row.EndCityName}}</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">
              {{scope.row.IncomeMoney}}<i v-if="scope.row.OrderStatus==1" @click="makeAdocument(scope.row,1)" class="iconfont iconjia- numIcon"></i>
            </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,2)" class="iconfont iconjia- numIcon"></i>
            </template>
        </el-table-column>
        <el-table-column
            label="成本"
            width="120">
            <template slot-scope="scope">
              {{scope.row.PayMoney}}<i v-if="scope.row.OrderStatus==1" @click="makeAdocument(scope.row,3)" class="iconfont iconjia- numIcon"></i>
            </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="出票状态"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p @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}}
              </p>
            </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'">
                {{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">
                {{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">
                {{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="200">
            <template slot-scope="scope">
                <div class="item-but-box">
                  <!-- <el-tooltip
                   class="item-but" effect="dark" content="编辑订单" placement="top">
                      <i class="iconfont iconwenbenbianji cp" @click="editOrder(scope.row)"></i>
                  </el-tooltip>
                  <el-tooltip 
                  v-if="scope.row.TicketStatus==1&&scope.row.OrderStatus==1&&scope.row.IncomeFinance.length==0&&!scope.row.BackFinance.length==0&&!scope.row.PayFinance.length==0"
                   class="item-but" effect="dark" content="取消订单" placement="top">
                      <i class="iconfont iconquxiao cp" @click="cancelOrder(scope.row)"></i>
                  </el-tooltip>
                  <el-tooltip
                  class="item-but" effect="dark" content="操作日志" placement="top">
                    <i class="iconfont iconcopy cp" @click="operationLog(scope.row)"></i>
                  </el-tooltip> -->
                  <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:130px" 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="[30, 60, 90, 100]" :page-size="msg.pageSize" layout="sizes, prev, pager, next"
              @size-change="handleSizeChange" :total="total">
          </el-pagination>
      </div>
    </div>
</template>
<script>
export default {
  props: ["ID", "BusinessType"],
  data() {
    return {
      MoreList:[
          {Name:'编辑订单金额',Id:'5'},
          {Name:'取消订单',Id:'1'},
          {Name:'订单转交',Id:'2'},
          {Name:'修改出票状态',Id:'4'},
          {Name:'操作日志',Id:'3'},
      ],
      orderStatusList:[
        {Name:'正常',Id:'1'},
        {Name:'取消',Id:'2'}
      ],//订单状态
      ticketingStatusList:[],// 出票状态
      dataList: [],
      loading: false,
      msg: {
        pageIndex: 1,
        pageSize: 30,
        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()
    });
  },
  methods: {
    // 清空下拉
    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){
      this.MsgBus.$emit("convertOrderTicketOrderBoxOpen", $this.ID, row, true);
    },
    // 验证操作员
    ValidateOperator(){
      let tips = '您没有操作权限'
      this.$confirm('此订单'+tips+'!', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        this.emptyMore()
      }).catch(() => {
         this.emptyMore()        
      });
    },
    // 制作单据
    makeAdocument(row,num){
      if(this.userInfo.EmName!=row.EnterName){
        this.ValidateOperator()
      }else{
        let type
        type = num==1? 1:2 // 1收款 2退款 3成本
        let href
        let url
        if(this.isOnline()){
          url = 'http://yx.oytour.com/#/'
        }else{
          url = 'http://www.test.com:8080/#/'
        }
        let 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);
      }
    },
    // 操作日志
    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){
          let tips = '该订单已取消，不能修改出票状态'
          this.$confirm(tips, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              this.emptyMore()
          }).catch(() => {
              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{
        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: '已取消'
            });          
        });
      }
      
    },
    // 编辑订单
    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{
          let tips = ''
          if(row.TicketStatus==2&&row.OrderStatus==1){
            tips = '已出票'
          }
          if(row.TicketStatus==3&&row.OrderStatus==1){
            tips = '航班熔断'
          }
          if(row.TicketStatus==4&&row.OrderStatus==1){
            tips = '用户取消航班'
          }
          if(row.OrderStatus==2){
            tips = '已取消'
          }
          this.$confirm('此订单'+tips+'，无法编辑订单金额?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              this.emptyMore()
          }).catch(() => {
              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{
          let tips = ''
          if(row.TicketStatus==2&&row.OrderStatus==1){
            tips = '已出票'
          }
          if(row.TicketStatus==3&&row.OrderStatus==1){
            tips = '航班熔断'
          }
          if(row.TicketStatus==4&&row.OrderStatus==1){
            tips = '用户取消航班'
          }
          if(row.OrderStatus==2){
            tips = '已取消'
          }
          this.$confirm('此订单'+tips+'，无法编辑订单金额?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              this.emptyMore()
          }).catch(() => {
               this.emptyMore()         
          });
        }
      }
      
      
    },
    openDetails(scope) {
      console.log(scope.row.ID);
      this.MsgBus.$emit("busnessDrawerShow", scope.row.ID, 1);
    },
    // 获取出票状态枚举
    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 = ''
            });
            };
            addList(data);
            this.dataList = res.data.data.pageData;
            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);
    },
    guanlian() {},
    jiechuguanlian() {},
    handleSizeChange(val) {
        this.msg.pageSize = val;
        this.getList();
    },
    handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
    },
  },
};
</script>
