<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>取消</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
              v-if="scope.row.resMsg.indexOf('消费')>-1"
              @click="handleCancel(scope.row)"
              type="text"
              size="small">
              退款
            </el-button>

            <!-- <el-button
              v-if="scope.row.resMsg.indexOf('消费')>-1"
              @click="handleDelete(scope.row)"
              type="text"
              size="small">
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

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

export default {
  data () {
    return {
      columns,
      transOption,
      loading: false,
      params: {
        payChannel: '银行卡支付',
        price: '0.01',
        bocTradeNo: ''
      },
      posRecord: this.$localStore.get('posRecord')?.tjzy || []
    }
  },
  methods: {
    //  支付
    onSubmit () {
      this.loading = true

      handlePay('C', this.params, this).then(res => {
        this.posRecord = this.$localStore.get('posRecord')?.tjzy || []
        this.loading = false
      })
    },
    // 退款
    handleCancel (record) {
      this.params.bocTradeNo = JSON.stringify(record)

      handlePay('R', this.params, this).then(res => {
        this.posRecord = this.$localStore.get('posRecord')?.tjzy || []
        this.loading = false
      })
    },
    // 删除记录
    handleDelete (record) {
      const index = this.posRecord.findIndex(i => i.traceNo === record.traceNo)

      this.posRecord.splice(index, 1)

      this.$localStore.set('posRecord', this.posRecord)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
