<!--订单列表-->
<template>
  <div class="classorder">
    <div class="table-head">
      <table class="enrollTotalSearchTable" border="0" cellspacing="0" cellpadding="0">
        <colgroup>
          <col width="12%" />
          <col width="7%" />
          <col width="7%" />
          <col width="7%" />
          <col width="7%" />
          <col width="7%" />
          <col width="7%" />
          <col width="6%" />
          <col width="7%" />
          <col width="7%" />
          <col width="7%" />
          <col width="7%" />
          <col />
        </colgroup>
        <thead>
          <tr class="fix_th">
            <th width="12%">单号</th>
            <th width="7%">数量</th>
            <th width="7%">单价</th>
            <th width="7%">应收</th>
            <th width="7%">实收</th>
            <th width="7%">手续费</th>
            <th width="7%">退款</th>
            <th width="6%">状态</th>
            <th width="7%"></th>
            <th width="7%"></th>
            <th width="7%"></th>
            <th width="7%"></th>
            <th v-if="viewType == 0"></th>
          </tr>
        </thead>
      </table>
    </div>
    <div class="table-body" v-loading="loading">
      <table class="enrollTotalSearchTable" border="0" cellspacing="0" cellpadding="0">
        <colgroup>
          <col width="12%" />
          <col width="7%" />
          <col width="7%" />
          <col width="7%" />
          <col width="7%" />
          <col width="7%" />
          <col width="7%" />
          <col width="6%" />
          <col width="7%" />
          <col width="7%" />
          <col width="7%" />
          <col width="7%" v-if="viewType == 0" />
          <col />
        </colgroup>
        <tr>
          <td v-show="dataList && dataList.length == 0" :colspan="12" align="center">
            暂无数据
          </td>
        </tr>
        <tbody v-for="(item, index) in dataList" :key="index">
          <tr>
            <td :rowspan="3" style="text-align: left">
              <div class="" >{{item.OrderId}}</div>
              <div>{{item.OrderNo}}</div>
              <div>
                订单类型：
                <span v-if="item.OrderType==1">咖啡券</span>
                <span v-if="item.OrderType==2">耗材类</span>
                <span v-if="item.OrderType==3">教师类</span>
              </div>
              <div>
                用户类型：
                <span v-if="item.UserType==1">内部人员</span>
                <span v-if="item.UserType==2">学生</span>
                <span v-if="item.UserType==3">甲鹤用户</span>
              </div>
              <div>
                <span v-if="item.UserType==1||item.UserType==2">{{item.EmName}}</span>
                <span v-if="item.UserType==3">{{item.UserName}}</span>
              </div>
              <div>付款时间：{{item.PaymentTime}}</div>
              <div v-if="item.OrderStatus===3">取消时间：{{item.CancelTime}}</div>
            </td>
            <td style="border:none;width:7%">{{ item.Number }}</td>
            <td style="border:none;width:7%">{{ item.Unit_Price||0 }}</td>
            <td style="width:7%">{{item.PreferPrice}}</td>
            <td style="border:none;width:7%">{{item.Income}}</td>
            <td style="border:none;width:7%">{{item.Fee}}</td>
            <td style="border:none;width:7%">{{item.Refund}}</td>
            <td style="border:none;width:6%">
              <div style="background: rgba(2, 196, 153, 0.2);width: 80px;border-radius: 2px;text-align: center">
                <span style="color: #F72E52" v-if="item.OrderStatus==1">待付款</span>
                <span style="color: #02C499" v-if="item.OrderStatus==2">已完成</span>
                <span style="color: #9E9E9E" v-if="item.OrderStatus==3">已取消</span>
              </div></td>
            <td style="border:none;width:7%"></td>
            <td style="border:none;width:7%"></td>
            <td style="color:#2961FE;border:none;width:7%"></td>
            <td style="border:none;width:7%"></td>
            <td v-if="viewType == 0"></td>
          </tr>
          <tr>
            <td :colspan="12" style="text-align: left">
              <div class="row">
                商品名称：{{item.GoodsName}}
              </div>
              <span v-if="item.GuestList && item.GuestList.length == 0">暂无</span>
            </td>
          </tr>
          <tr>
            <td :colspan="12" style="height: 168px;text-align: left">
              <div class="col row remarks q-gutter-x-md">
                <div class="col">
                  <div>备注：</div>
                  <div class="remarks-b">
                    <span v-if="item.Remark">{{item.Remark}}</span>
                    <span v-else>暂无</span>
                  </div>
                </div>
                <div class="col-4">
                  <div>收款单据：<span v-for="(x,y) in item.IncomeList" :key="y" class="q-ml-xs" style="color:#02C499">{{x.FrID}}</span></div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
</div>
</template>

<script>
  export default {
    props: {
      //正常订单
      dataList: {
        type: Array,
        default: null
      },
      viewType:{
        type: Number,
        default: 0
      },
      loading:{
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        
      };
    },
    created() {
      
    },
    methods: {
    },
  };
</script>
<style>
  li {
    list-style-type: none;
  }

  .classorder ul {
    padding: 0px;
  }

  .classorder .price-popup {
    border-radius: 4px;
  }

  .classorder .el-range-editor .el-range-input {
    background: none;
  }

  .classorder .el-range-editor.el-input__inner {
    background-color: transparent;
  }

  .classorder .q-mb-md {
    margin-bottom: 0;
  }

  .classorder .stics {
    padding: 10px 20px;
    background: #dddee0;
    border-radius: 4px;
    font-size: 14px;
    color: #000000;
    font-weight: bold;
  }

  .classorder .stics .stics-name {
    color: #2d2d2d;
    font-weight: 600;
    margin-right: 10px;
  }

  .classorder .tis {
    margin: 10px 0;
    align-items: center;
  }

  .classorder .tis .tis-k {
    width: 10px;
    height: 10px;
    margin-right: 8px;
  }

  .classorder .tis span {
    font-size: 14px;
    color: #2d2d2d;
    font-weight: 600;
    margin-right: 20px;
  }

  .classorder table {
    padding: 10px 0;
    width: 100%;
    background-color: #ededed;
    border-collapse: collapse;
    border: 1px solid #d2d2d2;
    font-size: 12px;
  }

  .classorder table th {
    background-color: #ededed;
    height: 34px;
    text-indent: 15px;
  }

  .classorder table td {
    background-color: #ffffff;
    padding: 9px 15px;
    color: #333333;
    border: 1px solid rgba(138, 138, 138, 0.09);
    text-align: center;
  }

  .classorder table ._color_666 {
    color: #666666;
  }

  .classorder table tr._color_666 th {
    padding: 9px 15px;
  }

  .classorder table th {
    background-color: #ededed;
    height: 34px;
    text-indent: 15px;
  }

  .classorder table td {
    background-color: #ffffff;
    padding: 9px 15px;
    color: #333333;
  }

  .classorder table ._color_666 {
    color: #666666;
  }

  .classorder table tr._color_666 th {
    padding: 9px 15px;
  }

  .classorder .enrollTotalSearchTable {
    width: 100%;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-collapse: collapse;
  }

  .classorder .enrollTotalSearchTable tr {}

  .classorder .enrollTotalSearchTable tr th {
    background: #dddee0;
    height: 30px;
    font-size: 12px;
    text-align: center;
  }

  .classorder .enrollTotalSearchTable tr {
    background: #fff;
    text-align: left;
  }

  .classorder .enrollTotalSearchTable tbody tr:last-child {
    border-bottom: 2px solid #333;
  }

  .classorder .enrollTotalSearchTable tr:first-child td:first-child {
    border-bottom: 2px solid #333;
  }

  .classorder .enrollTotalSearchTable tr td {
    height: 66px;
    padding: 10px;
  }

  .classorder .enrollTotalSearchTable tr td>img {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .classorder .enrollTotalSearchTable tr td p {
    line-height: 20px;
  }

  .classorder .remarks {
    font-size: 14px;
    color: #2d2d2d;
  }

  .classorder .remarks-b {
    width: 100%;
    height: 94px;
    background: #f0f5fb;
    margin-top: 10px;
    padding: 15px;
    font-size: 12px;
    color: #999999;
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    line-height: 20px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }

  .classorder .remarks-b-b {
    text-align: right;
    position: absolute;
    right: 0px;
    bottom: 0px;
  }

  .classorder .on-left {
    margin-right: 5px;
  }

  .classorder .finance {
    padding: 1px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin: 5px 3px 3px 0;
  }

  .classorder .order_OfferId {
    font-size: 18px;
    color: #2961fe;
    margin-bottom: 10px;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
  }

  .takeContract {
    cursor: pointer;
    color: rgb(41, 97, 254);
  }

  .Contract_Table {
    width: 100%;
    border-collapse: collapse;
  }

  .Contract_Table th,
  .Contract_Table td {
    padding: 5px;
    color: #000;
    text-align: center;
  }

  .table-body {
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100vh - 240px );
  }
</style>