<template>
  <div class="padding-20">
    <div class="search-box">
      <el-form
        ref="form"
        :inline="true"
        :model="searchForm"
        clearable
        class="mt-10">
        <el-form-item label="订单编号:">
          <el-input v-model="searchForm.order_number" placeholder="请输入订单编号" clearable style="width: 240px;"></el-input>
        </el-form-item>
        <el-form-item label="订单创建时间:">
          <el-date-picker
            :editable="false"
            v-model="time"
            @change="timearr => {timearr ? (searchForm.order_start_time = timearr[0] + ' 00:00:00', searchForm.order_end_time = timearr[1] + ' 23:59:59') : searchForm.order_start_time = searchForm.order_end_time = undefined}"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item class="ml-10">
          <el-button icon="el-icon-search" type="primary" @click="searchSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData"
              stripe
              v-loading="tableLoading"
              fit
              class="marginT-10 order-table"
              border
              :max-height="vheight">
      <el-table-column label="订单ID" prop="id" width="80"></el-table-column>
      <el-table-column label="订单编号" prop="order_number" width="200"></el-table-column>
      <el-table-column label="桌号" prop="place_number" width="140"></el-table-column>
      <el-table-column label="价格(元)" width="100">
        <template slot-scope="scope">
          <p>{{ scope.row.order_price | fen2Yuan }}</p>
        </template>
      </el-table-column>
      <el-table-column label="实付金额(元)">
        <template slot-scope="scope">
          <p>{{ scope.row.order_pay_price | fen2Yuan }}</p>
        </template>
      </el-table-column>
      <el-table-column label="退款金额(元)">
        <template slot-scope="scope">
          <p>{{ scope.row.order_refund_price | fen2Yuan }}</p>
        </template>
      </el-table-column>
      <el-table-column label="点单用户" prop="order_user_name" width="160"></el-table-column>
      <el-table-column label="手机号" prop="order_user_phone" width="120"></el-table-column>
      <el-table-column label="商品数量" prop="product_num"></el-table-column>
      <el-table-column label="下单时间" prop="created_at" width="180"></el-table-column>
      <el-table-column label="出单状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.order_print_status === 0 ? 'warning' : 'info'">
            {{ ['未出单', '已出单'][scope.row.order_print_status] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="支付方式">
        <template slot-scope="scope">
          <p>{{ ['', '微信', '支付宝', '现场支付'][scope.row.order_pay_type] }}</p>
        </template>
      </el-table-column>
      <el-table-column label="订单状态状态" width="120">
        <template slot-scope="scope">
          <p>{{ ['待支付', '已支付', '全部退款', '部分退款', '已取消'][scope.row.order_status] }}</p>
        </template>
      </el-table-column>
      <el-table-column label="用户支付订单编号" prop="order_official_number" width="240"></el-table-column>
      <el-table-column label="操作" fixed="right" width="220">
        <template slot-scope="scope">
          <el-button type="text"
                     v-permission="'business_oms_order_print'"
                     :disabled="booLock"
                     @click="handlePrint(scope.row)">出单
          </el-button>
          <template v-if="false">
            <el-button type="text"
                       :disabled="booLock"
                       @click="showOrderStatusdialogForm(scope.row)"
                       v-permission="'business_oms_order_site'">确认支付
            </el-button>
          </template>
          <el-button type="text"
                     v-permission="'business_oms_order_check'"
                     @click="$router.push({name: 'BusinessOMSDetail', query: {id: scope.row.id}})">订单详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="marginT-20"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :hide-on-single-page="true"
      :current-page="page"
      :page-size="page_size"
      :page-sizes="[10, 20, 100, 200, 300, 400]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"/>
    <!--通过pos机支付的订单-->
    <el-dialog title="现场订单付款确认"
               :visible.sync="orderStatusdialogForm">
      <el-form :model="dialogForm"
               :rules="formRules"
               ref="dialogForm">
        <el-form-item
          label="订单状态"
          prop="order_status"
          :rules="formRules.required">
          <el-select
            v-model="dialogForm.order_status"
            placeholder="请选择">
            <el-option label="待支付" value="0"></el-option>
            <el-option label="已支付" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="orderStatusdialogForm = false">取 消</el-button>
        <el-button type="primary" @click="siteOrderSet">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import page from '@/mixin/page'

export default {
  mixins: [page],
  data () {
    return {
      time: [],
      searchForm: {},
      tableData: [],
      tableUrl: '/v1/user/order/list',
      booLock: false,
      orderStatusdialogForm: false,
      dialogForm: {}
    }
  },
  methods: {
    async handlePrint (row) {
      this.booLock = true
      const data = await this.$fetch('/v1/user/order/print', { id: row.id }, 'get')
      this.booLock = false
      if (data.code === 200) {
        this.$message.success('开始打印')
      }
    },
    showOrderStatusdialogForm (row) {
      this.orderStatusdialogForm = true
      this.dialogForm = {}
      this.$nextTick(() => {
        this.$set(this.dialogForm, 'id', row.id)
      })
    },
    // 现场订单支付
    async siteOrderSet () {
      this.$refs['dialogForm'].validate(async valid => {
        if (valid) {
          this.booLock = true
          const data = await this.$fetch('/v1/user/order/siteOrderSet', this.dialogForm, 'get')
          this.booLock = false
          if (data.code === 200) {
            this.$message.success('现场订单支付状态修改成功')
            this.orderStatusdialogForm = false
          }
        } else {
          console.log('error submit!!')
        }
      })
    }
  },
  mounted () {
    this.init()
  },
}
</script>

<style lang="scss" scoped>
</style>
