<template>
  <div>
    <el-form
      ref="form"
      label-width="80px">
      <el-form-item label="交易类型">
        <el-select v-model="params.payChannel">
          <el-option
            v-for="item in transOption"
            :key="item.value"
            :label="item.label"
            :value="item.label">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="金额">
        <el-input-number
          v-model="params.price"
          :precision="2"></el-input-number>
      </el-form-item>

      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          @click="onSubmit">
          提交
        </el-button>

        <el-button
          :loading="loading"
          @click="handleSignIn">
          签到
        </el-button>
      </el-form-item>

      <el-table
        :data="posRecord"
        border
        stripe>
        <el-table-column
          :fixed="col.fixed"
          :width="col.width || ''"
          v-for="(col,idx) in columns"
          :prop="col.prop"
          :key="idx"
          :label="col.label"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click="handleCancel(scope.row)"
              type="text"
              size="small">
              退款
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

    <QrCodeReader
      ref="qrcodeReader"
      @getQrcode="handleGetQrcode"></QrCodeReader>
  </div>
</template>

<script>
import { columns, transOption } from './data'
import { getPayResponse } from '@/utils/posUtils'
import handlePay from '@/utils/posUtils/dflzPos'
import QrCodeReader from './QrCodeReader'

export default {
  components: {
    QrCodeReader
  },
  data () {
    return {
      columns,
      transOption,
      loading: false,
      visible: false,
      params: {
        payChannel: '银行卡',
        price: '0.01',
        bocTradeNo: '',
        qrCode: ''
      },
      posRecord: []
    }
  },
  methods: {
    onSubmit () {
      if (this.params.payChannel === '聚合扫码') {
        this.$refs.qrcodeReader.show()
        return
      }

      this.callPay()
    },
    handleGetQrcode (value) {
      if (!value) return this.$message.error('读取失败')

      this.params.qrCode = value

      this.callPay()
    },
    callPay () {
      this.loading = true
      handlePay('C', this.params, this).then(res => {
        if (res) {
          const posRecord = this.$localStore.get('posRecord')?.dflz || []

          this.posRecord = posRecord.map(i => {
            let item = getPayResponse(i, null, '东方绿舟')
            item.orginStr = i // 保存原始数据
            return item
          })
        }

        this.loading = false
      })
    },
    // 退款
    handleCancel (record) {
      this.params.bocTradeNo = record.orginStr

      handlePay('R', this.params, this).then(res => {
        if (res) {
          const posRecord = this.$localStore.get('posRecord')?.dflz || []

          this.posRecord = posRecord.map(i => {
            let item = getPayResponse(i, null, '东方绿舟')
            item.orginStr = i // 保存原始数据
            return item
          })
        }
        this.loading = false
      })
    },
    // 签到
    handleSignIn () {
      this.loading = true

      handlePay('S', this.params, this).then(res => {
        if (res) {
          this.$message.success('签到成功')
        }
        this.loading = false
      })
    }
  },
  mounted () {
    const posRecord = this.$localStore.get('posRecord')?.dflz || []
    this.posRecord = posRecord.map(i => {
      let item = getPayResponse(i, null, '东方绿舟')
      item.orginStr = i
      return item
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
