<style scoped>
.add-Enclosure{
  display: flex;
  justify-content: space-between;
}
.add-Enclosure-left{
  display: flex;
}
</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" @blur="getList"></el-input>
          </el-col>
          <el-col :span="8">
            <el-select size="mini" width="200" v-model="msg.TicketStatus" placeholder="请选择" @change="getList">
              <el-option v-for="(item,index) in ticketingStatusList"
              :key="index" :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
              prop="CreateByName"
              label="下单人"
              show-overflow-tooltip>
          </el-table-column>
          
          <el-table-column 
              label="订单号"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <p @click="openDetails(scope)" class="font-color-link cp">{{scope.row.OrderId}}</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 
              label="地址"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{scope.row.StartCityName}}=>{{scope.row.EndCityName}}
              </template>
          </el-table-column>
          <el-table-column 
              prop="GuestCount"
              label="客人数"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column 
              prop="Money"
              label="订单金额"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column 
              prop="IncomeMoney"
              label="实收"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column 
              prop="PayMoney"
              label="付款"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column 
              prop="BackMoney"
              label="退款"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="TaxMoney"
              label="手续费"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop=""
              label="待收"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop=""
              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="TicketStatusName"
              label="出票状态"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="Remark"
              label="客户需求"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="EnterName"
              label="业务员"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column
              prop="CreateTime"
              label="下单时间"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column 
              label="操作"
              show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="dataList.length">
            <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 {
      ticketingStatusList:[],
      dataList: [],
      loading: false,
      msg: {
        pageIndex: 1,
        pageSize: 10,
        OrderId:"",
        GuestId:"",
        TicketStatus: 0,
        OrderStatus:"",
        StartCityName: "",
        EndCityName: "",
        EnterID: ""
    },
    total:0
    };
  },
  watch: {
    ID: {
      handler(val, oldVal) {
        this.getList();
      },
      deep: true,
    },
  },
  mounted() {
    
    this.getList();
    this.GetTicketStatusEnumList()
  },
  methods: {
    openDetails(scope) {
      console.log(scope.row.ID);
      this.MsgBus.$emit("busnessDrawerShow", scope.row.ID, 1);
    },
    // 获取出票状态枚举
    GetTicketStatusEnumList(){
      let $this = this
      this.msg.GuestId = $this.ID
      console.log(this.msg.GuestId, 'this.msg.GuestId')
      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) {
            console.log(res.data.data);
            this.dataList = res.data.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);
    },
    guanlian() {},
    jiechuguanlian() {},
    handleSizeChange(val) {
        this.msg.pageSize = val;
        this.getList();
    },
  },
};
</script>
