<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;
}
</style>
<template>
    <div class="Business">
      <div class="add-Enclosure">
        <el-row :gutter="12">
          <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="4">
            <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>
          </el-col>
          <el-col :span="4">
            <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="实收"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.IncomeMoney}}<i @click="makeAdocument(scope.row,1)" class="iconfont iconjia- numIcon"></i>
            </template>
        </el-table-column>
        <el-table-column 
            prop="BackMoney"
            label="退款"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- v-if="scope.row.OrderStatus!=1" -->
              {{scope.row.BackMoney}}<i @click="makeAdocument(scope.row,2)" class="iconfont iconjia- numIcon"></i>
            </template>
        </el-table-column>
        <el-table-column
            label="成本"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.PayMoney}}<i @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
            prop="PayFinance"
            label="付款单据"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="IncomeFinance"
            label="收入单据"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="BackFinance"
            label="退款单据"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="CreateByName"
            label="创建人"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            show-overflow-tooltip>
            <template slot-scope="scope">
                <div class="item-but-box">
                  <el-tooltip 
                  v-if="scope.row.TicketStatus==1&&scope.row.OrderStatus==1"
                   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>
            </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 {
      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: ""
    },
    total:0
    };
  },
  watch: {
    ID: {
      handler(val, oldVal) {
        this.getList();
      },
      deep: true,
    },
  },
  mounted() {
    
    this.getList();
    this.GetTicketStatusEnumList()
    let $this = this
    this.MsgBus.$on("closeGetList", function() { 
      $this.getList()
    });
  },
  methods: {
    // 制作单据
    makeAdocument(row,num){
      let type
      type = num==1? 1:2
      let href
      let url
      if(this.isOnline()){
        url = 'http://yx.oytour.com/#/'
      }else{
        url = 'http://www.test.com:8081/#/'
      }
      href = url+'automaticLogin?token='+this.getLocalStorage().token+'&type='+type+'&OtherType=55'+'&ReFinanceId='+row.OrderId+'&ReFinanceId2='+num+'&GuestId=' +row.GuestId
      window.open(href);
    },
    // 操作日志
    operationLog(row){
      let $this = this;
      this.MsgBus.$emit("logTicketOrderBoxOpen", $this.ID, row, true);
    },
    // 修改出票状态
    modifyStatus(row){
      if(row.OrderStatus==2){
        let tips = '该订单已取消，不能修改出票状态'
        this.$confirm(tips, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            
        }).catch(() => {
                      
        });
      }else{
        if(row.TicketStatus==4){
          return
        }else{
          let $this = this;
          this.MsgBus.$emit("reviseTicketOrderBoxOpen", $this.ID, row, true);
        }
      }
      
    },
    // 取消订单
    cancelOrder(row){
      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.$message({
              type: 'info',
              message: '已取消'
          });          
      });
    },
    // 编辑订单金额
    editOrderAmount(row){
      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(() => {
            
        }).catch(() => {
                      
        });
      }
      
    },
    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) {
            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>
