<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;
}
.Credentials{
  color: #2961FE;
}
</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="出票状态"
            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!=[]" 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="[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:'1'},
          {Name:'订单转交',Id:'2'},
          {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: {
    // 查看出票凭据
    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()
    },
    // 制作单据
    makeAdocument(row,num){
      if(this.userInfo.EmName!=row.EnterName){
        this.ValidateOperator()
      }else{
        if(row.OrderStatus!='2'){
          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:8084/#/'
          }
          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){
          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==[]&&row.BackFinance==[]&&row.PayFinance==[]){
          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
      if(this.isOnline()){
        url = 'http://yx.oytour.com/#/'
      }else{
        url = 'http://www.test.com:8080/#/'
      }
      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 = ''
            });
            };
            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);
    },
    handleSizeChange(val) {
        this.msg.pageSize = val;
        this.getList();
    },
    handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
    },
  },
};
</script>
