<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>

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

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

export default {
  data () {
    return {
      columns,
      transOption,
      loading: false,
      visible: false,
      params: {
        payChannel: '银行卡',
        price: '0.01',
        bocTradeNo: '',
        qrCode: ''
      },
      posRecord: [],
      posProcess: []
    }
  },
  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
      this.params.bocTradeNo = ''

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

          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')?.lby || []

          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
      })
    },
    outputStrToJSON (str) {
      return {
        rescode: str.subCHString(0, 2),
        bankNo: str.subCHString(2, 6),
        cardNo: str.subCHString(6, 26),
        traceNo: str.subCHString(26, 32),
        tradeAmt: str.subCHString(32, 44),
        infoMsg: str.subCHString(44, 84),
        merId: str.subCHString(84, 99),
        terminalNo: str.subCHString(99, 107),
        batchNo: str.subCHString(107, 113),
        tradeDate: str.subCHString(113, 117),
        tradeTime: str.subCHString(117, 123),
        refNo: str.subCHString(123, 135),
        authNo: str.subCHString(135, 141),
        stDate: str.subCHString(141, 145),
        LRC: str.subCHString(145, 148),
        discountAmount: str.subCHString(148, 160),
        cardType: str.subCHString(160, 162),
        thirdPartyDiscountInstrution: str.subCHString(162, 362),
        thirdPartyName: str.subCHString(362, 412),
        unionMerchant: str.subCHString(412, 462),
        erpMerchant: str.subCHString(462, 512),
        payType: str.subCHString(512, 513),
        queryResCode: str.subCHString(513, 514),
        queryResDesc: str.subCHString(514, 564),
        billQRCode: str.subCHString(564, 764),
        billDate: str.subCHString(764, 772),
        status: str.subCHString(772, 792)
      }
    },
    inputStrToJSON (str) {
      return {
        transId: str.slice(0, 20),
        amt: str.slice(20, 32),
        old_date: str.slice(32, 40),
        old_reference: str.slice(40, 52),
        old_trace: str.slice(52, 58),
        lrc: str.slice(58, 61),
        postCode: str.slice(61, 111),
        unionMerchant: str.slice(111, 161),
        erpMerchant: str.slice(161, 211),
        qrCodeId: str.slice(211, 243)
      }
    }
  },
  mounted () {
    const posRecord = this.$localStore.get('posRecord')?.lby || []
    this.posRecord = posRecord.map(i => {
      let item = getPayResponse(i, null, '绿博园')
      item.orginStr = i
      return item
    })

    // console.log(this.inputStrToJSON('01000000000001        30108099       001                             H                                                                                                                                                                                                                                                                                                                                            '))
    console.log('输入', this.inputStrToJSON('02                00000000000001                          000134529151352632302                                                                                                                                                                    '))
    console.log('输出', this.outputStrToJSON('00WXZF                    86064300000000000110000成功响应码                         89852275962013027129454      032316050917905973734W          000000000000000  微信钱包支付0.01元                                                                                                                                                                                      微信钱包                                          20210323160508017905973734                        202103231605081530262031741417                    1                                                                                                                                                                                                                                                                                       '))

    // console.log('输入', this.inputStrToJSON('00                00000000000001                          049                                                                                                                                                                                      '))
    console.log('输出', this.outputStrToJSON('000104621756*********9097 000008000000000001交易成功                                898522759620129271294460000010323174131174131019149      032304900000000000001                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      '))
  }
}
</script>

<style lang="scss" scoped>

</style>
