<template>
  <div class="">
    <el-table v-loading="loading" :border="TableBorder" :size="ELTableSize" :data="dataList">
      <el-table-column type="index" width="55" label="序号" align="center">
        <template slot-scope="{$index}">
          {{ $getTableIndex(queryParams, $index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="订单编号" align="center">
        <template slot-scope="{ row }">
          {{ row.orderNo | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="当前队序" align="center">
        <template slot-scope="{ row }">
          <!-- {{ row.queueOrder | TableItemEmpty }} -->
          {{ (SubsidyStatusEnum.QUENING === row.subsidyStatus ? row.queueOrder : '') | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="订单金额" align="center">
        <template slot-scope="{ row }">
          {{ row.payAmount | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="最多补贴金额" align="center">
        <template slot-scope="{ row }">
          {{ row.shouldSubsidyAmount | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="已补贴金额" align="center">
        <template slot-scope="{ row }">
          {{ row.actualSubsidyAmount | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="已补积分" align="center">
        <template slot-scope="{ row }">
          {{ row.subsidyPoints | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="店铺名称" align="center">
        <template slot-scope="{ row }">
          {{ row.currentBusinessName | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="用户手机号" align="center">
        <template slot-scope="{ row }">
          {{ row.userMobile | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="用户姓名" align="center">
        <template slot-scope="{ row }">
          {{ row.userName | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="消费时间" align="center" width="100">
        <template slot-scope="{ row }">
          {{ row.consumeTime | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="排队开始时间" align="center" width="100">
        <template slot-scope="{ row }">
          {{ row.queueTime | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template slot-scope="{ row }">
          <StatusTag :status-vo="row.subsidyStatus | SubsidyStatusOptionFilter(true)" />
          <!-- {{ isCancelQueue(row) ? '不参与' : row.subsidyStatus | SubsidyStatusOptionFilter | TableItemEmpty }} -->
          <!-- <template v-if="isCancelQueue(row)">
            <StatusTag :status-vo="{ label: '不参与', type: 'info' }" />
          </template>
          <template v-else>
            <StatusTag :status-vo="row.subsidyStatus | SubsidyStatusOptionFilter(true)" />
          </template> -->
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="130">
        <template slot-scope="{row}">
          <template v-if="isCancelQueue(row)">
            <el-button :size="ELTableSize" type="text" disabled>已取消</el-button>
          </template>
          <template v-else-if="row.subsidyStatus === SubsidyStatusEnum.COMPLETED">
            <el-button :size="ELTableSize" type="text" disabled>已结束</el-button>
          </template>
          <template v-else>
            <el-button :size="ELTableSize" type="text" @click="HandleCutIn(row)">插队</el-button>
            <el-button :size="ELTableSize" type="text" @click="HandleCancelCutIn(row)">取消排队</el-button>
            <template v-if="row.cutIn">
              <!-- 已插队 -->

            </template>
            <template v-else>
              <!-- 未插队 -->

            </template>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <QueueForm ref="QueueFormRef" @sussess="getList()" />
  </div>
</template>

<script>
import { CancelTypeEnum, SubsidyStatusEnum } from '@/utils/statusEnum.js';
import { cancelSubsidyQueueApi } from '@/api/OnlineOrder.js';
import { isCancelQueue } from '@/utils/estimate.js';
import QueueForm from './QueueForm.vue';
export default {
  components: { QueueForm },
  props: {
    refreshFn: {
      type: Function,
      default: () => { }
    },
    dataList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    queryParams: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      SubsidyStatusEnum,
      isCancelQueue
    }
  },
  created() {

  },
  methods: {
    // 取消插队
    HandleCancelCutIn(row) {
      this.$MessageBoxConfirm({
        text: '确定取消排队吗？', confirmCallback: async (callback) => {
          try {
            await cancelSubsidyQueueApi(row.queueId);
            this.$successMsg('取消排队成功');
            this.refreshFn && this.refreshFn();
          } catch (error) {
            // this.$errorMsg(error.message || '取消排队失败');
          } finally {
            callback && callback();
          }
        }
      })
    },
    // 插队
    HandleCutIn(row) {
      const { queueOrder } = row;
      if (queueOrder === 1) {
        this.$warningMsg('当前队序为1,无法插队！');
      } else {
        this.$refs.QueueFormRef.openHandle(row);
      }
    },


  }
}
</script>