<template>
  <el-dialog
    title="查询Pos机交易"
    :visible.sync="visible"
    width="80%"
    append-to-body
    :close-on-click-modal="false"
    @close="handleClose">
    <div class="container">
      <el-form
        inline
        v-if="preorder"
        style="padding:20px;"
        label-width="160px">
        <el-form-item label="原订单支付信息：">
        </el-form-item>
        <table class="infoTable">
          <thead>
            <tr>
              <th colspan="2">
                支付信息
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th style="width:160px">
                订单号：
              </th>
              <td class="warning">
                <b>{{ preorder.ordernum }}</b>
              </td>
            </tr>
            <tr>
              <th>
                金额：
              </th>
              <td>{{ (preorder.amount/100).toFixed(2) }}</td>
            </tr>
            <tr>
              <th>卡号：</th>
              <td>{{ preorder.cardno }}</td>
            </tr>
            <tr>
              <th>支付方式：</th>
              <td>{{ channelMap[preorder.zffs] }}</td>
            </tr>
            <tr>
              <th>流水号：</th>
              <td>{{ preorder.trace }}</td>
            </tr>
            <tr>
              <th>商户号：</th>
              <td>{{ preorder.shopno }}</td>
            </tr>
            <tr>
              <th>终端号：</th>
              <td class="warning">
                <b>{{ preorder.terminal }}</b>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
      <el-form
        :model="form"
        ref="form"
        inline
        style="padding:20px;"
        label-width="160px">
        <el-form-item label="流水号(默认为上一笔)">
          <el-input
            v-model="form.trace_no"
            style="width:160px"></el-input>
          <el-button
            type="primary"
            style="margin-left:20px"
            :loading="loading"
            @click="search">
            查询
          </el-button>
        </el-form-item>

        <table
          v-if="orderInfo"
          class="infoTable">
          <thead>
            <tr>
              <th colspan="2">
                银行小票信息
              </th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="orderInfo.preorder">
              <th>
                原订单号：
              </th>
              <td class="warning">
                <b>{{ orderInfo.preorder }}</b>
              </td>
            </tr>
            <tr>
              <th style="width:160px">
                金额：
              </th>
              <td>{{ (orderInfo.amount/100).toFixed(2) }}</td>
            </tr>
            <tr>
              <th>卡号：</th>
              <td>{{ orderInfo.cardno }}</td>
            </tr>
            <tr>
              <th>支付方式：</th>
              <td>{{ channelMap[orderInfo.zffs] }}</td>
            </tr>
            <tr>
              <th>流水号：</th>
              <td>{{ orderInfo.trace }}</td>
            </tr>
            <tr>
              <th>商户号：</th>
              <td>{{ orderInfo.shopno }}</td>
            </tr>
            <tr>
              <th>终端号：</th>
              <td class="warning">
                <b>{{ orderInfo.terminal }}</b>
              </td>
            </tr>
            <tr>
              <th>订单号：</th>
              <td>{{ orderInfo.ordernum }}</td>
            </tr>
          </tbody>
        </table>
      </el-form>
    </div>

    <span slot="footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        type="danger"
        @click="submit">继续操作</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { isJSON } from '@/utils'
import misPos from '@/utils/posUtils/misPos'
import posMixin from '@/pages/common/posMixin'

const channelMap = {
  '01': '银行卡',
  '02': '银联扫码',
  '03': '支付宝',
  '04': '微信'
}

export default {
  mixins: [posMixin],
  props: {
    preorderInfo: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'pay'
    }
  },
  computed: {
    preorder () {
      if (this.preorderInfo) {
        return isJSON(this.preorderInfo) ? JSON.parse(this.preorderInfo) : ''
      } else {
        return ''
      }
    }
  },
  data () {
    return {
      channelMap,
      visible: false,
      loading: false,
      orderInfo: null,
      form: {
        trace_no: '000000'
      }
    }
  },
  methods: {
    show () {
      this.orderInfo = null
      this.visible = true
    },
    search () {
      this.loading = true
      misPos('04', {
        price: 0,
        trace_no: this.form.trace_no
      }, this).then(res => {
        if (res) {
          this.$message.success('操作成功。')
          this.orderInfo = JSON.parse(res)
          console.log(this.orderInfo)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    submit () {
      if (!this.orderInfo) {
        this.$message.error('无效支付订单')
        return
      }

      // if (this.orderInfo.preorder && this.type === 'pay') {
      //   this.$message.error('当前使用的是退款信息，无法进行出票操作。')
      //   return
      // }

      // if (!this.orderInfo.preorder && this.type === 'refund') {
      //   this.$message.error('当前使用的是支付信息，无法进行退票或退订单。')
      //   return
      // }

      if (this.preorder && this.type === 'refund') {
        console.log('原订单号', this.preorder.ordernum, this.preorder)
        console.log('退款原始订单号', this.orderInfo.preorder, this.orderInfo)
        if (this.preorder.ordernum.trim() !== this.orderInfo.preorder.trim()) {
          this.$message.error('退款对应的订单号与原始支付信息不符。请检查')
          return
        }
      }

      this.$confirm('确定使用该支付信息继续操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('confirm', this.orderInfo)
        this.handleClose()
      }).catch(() => {})
    },
    handleClose () {
      this.visible = false
      this.killAllPosProcess()
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  display: flex;
  .el-form{
    flex:1
  }
}
.infoTable {
  width: 100%; margin: 5px 0 20px; border-collapse: collapse;
  th,td {
    padding: 10px;  border: 1px solid #ddd;
  }
  thead{
    th {
      text-align: center;  background: #dcebf8;
    }
  }
  tbody {
    th {
      text-align: right;  background: #edf5fc;
    }
  }
}
.infoTable.refund {
  thead{
    th {
      background: #f8e4dc;
    }
  }
  tbody {
    th {
      background: #fcf2ee;
    }
  }
}
::v-deep .el-dialog .el-form-item {
  display: inline-block; margin-bottom: 5px;
}
::v-deep .el-form-item__content {
  width: 300px;
}

</style>
