<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) {
        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>